2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Introduction au CSS
CSS estFeuilles de style en cascade(L'abréviation de Cascading Style Sheets) est utilisée pour contrôler avec précision le style des pages HTML afin de mieux afficher les informations graphiques ou de produire une expérience interactive sympa/conviviale.
没有必要让所有浏览器都显示得一模一样的，好的浏览器有更好的显示，糟糕的浏览器就只有普通的显示，这才是对用户更负责任的做法。
Le suffixe du fichier CSS est .css
/* 注释的内容 */
Trois façons d'ajouter des styles
<span style="color: red">红色文字</span>
https://blog.csdn.net/weixin_41192489/article/details/140226382
Les éléments du conteneur obtiendront les styles ajoutés sur le conteneur
<div style="color: red">
<p>我是容器内的元素，并没有直接添加样式，但也会变红！</p>
</div>
Qui décide du style final ?
Comme il existe de nombreuses sources de styles sur les éléments, notamment les styles par défaut du navigateur, les styles en ligne, les styles ajoutés par divers sélecteurs CSS et les styles hérités des éléments parents, le style final sera celui ayant la plus haute priorité parmi de nombreux styles déterminés par. style.
https://blog.csdn.net/weixin_41192489/article/details/139720467
Les bases essentielles du style
https://blog.csdn.net/weixin_41192489/article/details/140236423
https://blog.csdn.net/weixin_41192489/article/details/140318834
https://blog.csdn.net/weixin_41192489/article/details/102411612
Les éléments en ligne ne peuvent afficher que des marges intérieures et extérieures au début et à la fin et doivent être évités autant que possible. Ne définissez donc pas de marges intérieures et extérieures pour les éléments en ligne.
Une fois les éléments en ligne enveloppés, l'affichage des bordures sera empilé et désordonné, alors ne définissez pas de bordures pour les éléments en ligne !
Lorsque vous devez ajouter des bordures/marges intérieures et extérieures à un élément en ligne, convertissez-le en boîte en ligne
display：inline-block
Quels styles peuvent être ajoutés ?
Des styles peuvent être ajoutés à presque tous les éléments HTML.
Grâce au style suivant, vous pouvez modifier le modèle de boîte standard par défaut de l'élément en modèle de boîte IE.
box-sizing:border-box;
en ce moment
padding: 10px;
Remplissage : 10 px pour le haut, le bas, la gauche et la droite
padding:10px 5px;
Les rembourrages supérieur et inférieur sont de 10 px.
Les rembourrages droit et gauche sont de 5 px
padding:10px 5px 15px;
Le remplissage supérieur est de 10 px.
Les rembourrages droit et gauche sont de 5 px
Le rembourrage inférieur est de 15 px
padding:10px 5px 15px 20px;
Le remplissage supérieur est de 10 px.
Le remplissage droit est de 5 px.
Le rembourrage inférieur est de 15 px
Le remplissage gauche est de 20 px.
Les styles associés sont également
Voir les détails https://blog.csdn.net/weixin_41192489/article/details/140325106
https://blog.csdn.net/weixin_41192489/article/details/115140348
Les conteneurs avec des valeurs de débordement auto et scroll sont des conteneurs roulants (conteneurs avec barres de défilement). Il n'est pas recommandé d'utiliser un remplissage pour leur espace blanc. En raison de problèmes de compatibilité, vous ne pouvez utiliser que la marge inférieure des éléments enfants pour y parvenir. le rembourrage inférieur du conteneur de défilement est blanc.
La valeur de l'attribut va de 0,0 (complètement transparent) à 1,0 (complètement opaque). Si elle dépasse la limite de plage de 0 à 1, la valeur finale calculée est la valeur limite.
opacity: -1; /* 解析为 0, 完全透明 */
opacity: 2; /* 解析为 1, 完全不透明 */
https://blog.csdn.net/weixin_41192489/article/details/140301618
L'ombre ne modifiera pas la taille de la boîte et n'affectera pas la disposition de ses éléments frères. Vous pouvez également définir plusieurs ombres de bordure pour obtenir de meilleurs effets et améliorer l'effet tridimensionnel.
box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色（默认值为color的颜色值） 内/外阴影
box-shadow: 15px 21px 48px -2px #666;
Ombres couramment utilisées
box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);
Voir plus d'utilisation
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow
[Pratique] Ecraser la couleur de fond du remplissage automatique de la zone de saisie
input:-webkit-autofill {
-webkit-box-shadow: inset 0 0 0 1000px #fff;
background-color: transparent;
}
[Pratique] Modifier les couleurs des appuis sur les boutons par lots
button:active {
box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
}
【Combat réel】Guide du débutant sur l’effet masquant
.guide {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75);
border-radius: 50%;
}
https://blog.csdn.net/weixin_41192489/article/details/121341551
https://blog.csdn.net/weixin_41192489/article/details/140314866
Le navigateur Firefox ne le prend pas en charge. Il peut avoir les valeurs d'attribut suivantes.
zoom:50%, indiquant une réduction à la moitié de la taille d'origine.zoom:0.5, indiquant une réduction à la moitié de la taille d'origine.normalMots clés.zoom:normalÉquivalent àzoom:1, est la valeur par défaut.resetMots clés.zoom:reset , indiquant que lorsque l'utilisateur appuie sur Ctrl et − ou Ctrl et + pour zoomer sur le document, les éléments ne seront ni réduits ni agrandis en conséquence. Cependant, ce mot-clé a une mauvaise compatibilité et n'est pris en charge que par le navigateur Safari.Comparaison entre les fonctions zoom et scale()
zoomLa coordonnée centrale de la mise à l'échelle de l'attribut est relative au coin supérieur gauche de l'élément et ne peut pas être modifiée.transformtransformerscale()La coordonnée centrale par défaut de la mise à l'échelle de la fonction est le point central de l'élément.https://blog.csdn.net/weixin_41192489/article/details/121158821
https://blog.csdn.net/weixin_41192489/article/details/140316024
https://blog.csdn.net/weixin_41192489/article/details/140264311
Styles de pseudo-classes - doivent être écrits dans l'ordre fixe suivant :
/*让超链接点击之前是红色*/
a:link{
color:red;
}
/*让超链接点击之后是绿色*/
a:visited{
color:orange;
}
/*鼠标悬停，放到标签上的时候*/
a:hover{
color:green;
}
/*鼠标点击链接，但是不松手的时候*/
a:active{
color:black;
}
https://www.runoob.com/cssref/css3-pr-filter.html
Implémenter des icônes réactives avec font-weight
Lorsque la taille de la police est plus grande, la police de l'icône est plus détaillée et lorsque la taille de la police est plus petite, la police de l'icône est plus simple.
https://demo.cssworld.cn/8/5-1.php
fusion d'icônes CSS - Technologie ClipPath Sprites
https://blog.csdn.net/weixin_41192489/article/details/121242735
/*鼠标悬停时，让当前行显示#868686这种灰色*/
table tr:hover{
background: #868686;
}
L’alternance des couleurs entre les lignes de données peut réduire la fatigue de lecture de l’utilisateur.
table tr:nth-child(odd){
background:#fff
}
table tr:nth-child(even){
background:blue
}
| valeur | décrire |
|---|---|
| URL | URL du curseur personnalisé. |
| défaut | Curseur par défaut (généralement une flèche) |
| auto | défaut. Le curseur défini par le navigateur. |
| réticule | Le curseur apparaît sous forme de réticule. |
| pointeur [couramment utilisé] | Le curseur est rendu sous forme de pointeur indiquant le lien (une main) |
| se déplacer | Ce curseur indique qu'un objet peut être déplacé. |
| e-redimensionnement | Ce curseur indique que le bord de la boîte rectangulaire peut être déplacé vers la droite (est). |
| ne-redimensionner | Ce curseur indique que le bord de la boîte rectangulaire peut être déplacé vers le haut et vers la droite (Nord/Est). |
| nw-redimensionner | Ce curseur indique que le bord de la boîte rectangulaire peut être déplacé vers le haut et vers la gauche (Nord/Ouest). |
| n-redimensionner | Ce curseur indique que le bord de la boîte rectangulaire peut être déplacé vers le haut (vers le nord). |
| se-redimensionner | Ce curseur indique que le bord de la boîte rectangulaire peut être déplacé vers le bas et vers la droite (sud/est). |
| redimensionner sw | Ce curseur indique que le bord du rectangle peut être déplacé vers le bas et vers la gauche (sud/ouest). |
| s-redimensionner | Ce curseur indique que le bord de la boîte rectangulaire peut être déplacé vers le bas (vers le sud). |
| w-redimensionner | Ce curseur indique que le bord de la boîte rectangulaire peut être déplacé vers la gauche (ouest). |
| texte | Ce curseur indique du texte. |
| attendez | Ce curseur indique que le programme est occupé (généralement une montre ou un sablier). |
| aide | Ce curseur indique l'aide disponible (généralement un point d'interrogation ou une bulle). |
Couleur du curseur couleur-caret
Définir la couleur du curseur d'insertion de la zone de saisie (non encore pris en charge par les navigateurs IE et Edge)
input {
caret-color: red;
}
Lorsqu'aucun style suivant ne peut masquer des éléments, les éléments sont affichés (certains ne sont pas visibles simplement parce que la cascade est couverte) :
display: none [Couramment utilisé] Les éléments masqués, n'occupent pas d'espace, chargeront des ressources et le DOM est accessible (l'ajout de caché à la balise html modifiera l'affichage de la balise sur aucun)visibility: hidden Les éléments cachés occupent la position, les ressources seront chargées et le DOM est accessibleopacity: 0 L'élément est invisible, prend position et peut être cliqué ou sélectionné.clip: rect(0 0 0 0) L'élément est invisible, on ne peut pas cliquer, ne prend pas de place, mais est accessible au clavier.lower {
position: relative;
z-index: -1;
}
La position d'un élément sur la page est déterminée par de nombreux styles, notamment le positionnement, l'affichage, le flottant, la marge, etc.
Lorsque la position, l'affichage et le flotteur existent en même temps, l'effet d'affichage final de l'élément sera déterminé selon la logique décrite dans le lien ci-dessous.
https://blog.csdn.net/weixin_41192489/article/details/119009647
https://blog.csdn.net/weixin_41192489/article/details/140242430
https://blog.csdn.net/weixin_41192489/article/details/140250775
https://blog.csdn.net/weixin_41192489/article/details/115140348
https://blog.csdn.net/weixin_41192489/article/details/140255028
https://blog.csdn.net/weixin_41192489/article/details/140297366
https://blog.csdn.net/weixin_41192489/article/details/121365831
https://blog.csdn.net/weixin_41192489/article/details/121396794
https://blog.csdn.net/weixin_41192489/article/details/126028971
https://blog.csdn.net/weixin_41192489/article/details/120999355
https://blog.csdn.net/weixin_41192489/article/details/140317369
Améliorer l'efficacité de l'écriture CSS
Le préprocesseur CSS est un langage de programmation spécialisé utilisé pour ajouter certaines fonctionnalités de programmation au CSS (le CSS lui-même n'est pas un langage de programmation). Il n'est pas nécessaire de prendre en compte les problèmes de compatibilité du navigateur, car le préprocesseur CSS compile et génère en fin de compte les styles CSS standard. Vous pouvez utiliser des compétences de base en programmation telles que des variables, des jugements logiques simples et des fonctions dans le préprocesseur CSS.
Les préprocesseurs CSS grand public incluent Sass (Scss), Less et Stylus.
(SASS a été renommé SCSS depuis la version 3.0)
Conventions de codage CSS
/* 给左侧的盒子定义的样式 */
.leftBox{
}
/* 给内部为菜单的盒子定义的样式 */
.menuBox{
}
/* 将子元素排列为一行的样式 */
.row{
display:flex
}
/* 设置颜色为红色 */
.red{
color:red
}
Les trois éléments de l'animation CSS haute performance font référence au positionnement absolu, à l'attribut d'opacité et à l'attribut de transformation. Par conséquent, le même effet d’animation est d’abord obtenu en utilisant l’attribut transform. Par exemple, les animations de mouvement d'éléments doivent utiliser l'attribut transform plutôt que l'attribut margin.
Il se consacre à la recherche technologique depuis plus de 30 ans et maîtrise divers langages tels que java, linux, javascript, php, css, etc. Il a apporté de nombreuses contributions dans le domaine de l'open source. station de documentation pour les développeurs pour partager certains problèmes de développement technologique pour référence future.
