1. CSS a des propriétés qui contrôlent le format de base (telles que font-size et couleur, etc.), et il existe des propriétés qui disposition de contrôle (telle que position et float, etc.), ainsi que des éléments de contrôle d'impression qui déterminent où le visiteur changera de page lors de l'impression. De plus, il existe de nombreux autres attributs.
2. La feuille de style contient des règles qui définissent l'apparence de la page Web. Chaque règle comporte deux parties principales : le sélecteur (sélection) et le bloc de déclaration (déclaration). Les sélecteurs déterminent quels éléments sont affectés et les blocs de déclaration sont constitués d'une ou plusieurs paires attribut-valeur qui spécifient ce qui doit être fait.
3. Les commentaires sont entourés de '/*和*/'.
1 L'héritage peut être compris comme lors de l'application de l'attribut CSS à un élément . , ces propriétés affecteront non seulement cet élément, mais également les éléments de branche en dessous.
Programme 1
<body> <p> <h1>The Ephemeral Blue Flax</h1> <img src="img/blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" /> <p>I am continually <em>amazed</em> at the beautiful, delicate Blue Flax that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p> <p><small>© Blue Flax Society.</small></p> </p> </body>
Comme dans le programme 1, tous les éléments de contenu sont des descendants de l'élément body, utilisez un p renferme tout le contenu. De plus, les éléments em et small sont tous deux contenus dans un élément p, ils sont donc des descendants de p (et des descendants de p et body).
Programme 2
body {
font-family: Verdana, Geneva, sans-serif;
}
p {
border: 1px solid black;
overflow: hidden;
padding: 0 1em .25em;
}
p {
color: #36c; /* a blue color */
font-weight: bold;
}
img {
float: left;
margin-right: 1em;
} Le programme 2 est un paramètre de style CSS qui définit le style du HTML dans le programme 1. Hérité. Les caractéristiques sont reflétées lors du réglage. Vous pouvez voir que dans le programme 2, il n'y a que des règles de style pour les éléments body, p et p, mais aucune règle pour les éléments h1, em et small. Ensuite, lorsque la page sera affichée, les caractéristiques d'héritage seront reflétées dans les éléments h1, em et small.
2. Voici les propriétés CSS qui seront héritées, répertoriées ici systématiquement :
Texte
| Nom de l'attribut | Fonction de l'attribut | ||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| couleur | Couleur , sauf un élément | ||||||||||||||||||||||||||||||||||
direction
|
Direction | ||||||||||||||||||||||||||||||||||
| police | Police | ||||||||||||||||||||||||||||||||||
| famille de polices | Famille de police | ||||||||||||||||||||||||||||||||||
| font-size | Taille de police | ||||||||||||||||||||||||||||||||||
| font-style | est utilisé pour définir l'italique | font-variant |
Utilisé pour définir les petites majuscules les lettres | ||||||||||||||||||||||||||||||||
| font-weight | sont utilisées pour définir le caractère gras | ||||||||||||||||||||||||||||||||||
| letter-spacing | Espacement des lettres | ||||||||||||||||||||||||||||||||||
| hauteur de ligne | hauteur de ligne | ||||||||||||||||||||||||||||||||||
| text-align | est utilisé pour définir l'alignement | ||||||||||||||||||||||||||||||||||
| text-indent | Utilisé pour définir l'indentation de la première ligne | ||||||||||||||||||||||||||||||||||
| text-transform | Utilisé pour modifier les majuscules | ||||||||||||||||||||||||||||||||||
visibilité
|
Visibilité | ||||||||||||||||||||||||||||||||||
| espace blanc | est utilisé pour spécifier comment gérer les espaces | ||||||||||||||||||||||||||||||||||
| espacement des mots | Espacement des mots |
| Nom de l'attribut | Fonction d'attribut |
|---|---|
| style-list | Style de liste |
| list-style-image | Utilisé pour développer des balises personnalisées pour les listes |
| list-style-position | Utilisé pour déterminer la position de la marque de liste |
| list-style-type td > | Tag utilisé pour définir la liste |
| Nom de l'attribut | Fonction d'attribut | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
border-collapse
|
Utilisé pour contrôler si les bordures des cellules adjacentes du tableau sont fusionnées en une seule bordure | ||||||||||
| border-spacing | Utilisé pour spécifier la taille de l'espace entre les bordures du tableau td> | ||||||||||
| côté légende | Utilisé pour définir la position du titre du tableau|||||||||||
| empty- cell | est utilisé pour définir s'il faut afficher les cellules vides dans le tableau |
| 属性名称 | 属性作用 |
|---|---|
| orphans | 用于设置当元素内部发生分页时在页面底部需要保留的最少行数 |
| page-break-inside | 用于设置元素内部的分页方式 |
| widows | 用于设置当元素内部发生分页时在页面顶部需要保留的最少行数 |
| Nom de la propriété | Effet de propriété |
|---|---|
| orphelins | est utilisé pour définir ce qui se passe à l'intérieur de l'élément Le nombre minimum de lignes qui doivent être conservées en bas de page lors de la pagination |
| page-break -inside |
Utilisé pour définir la pagination méthode à l'intérieur de l'élément |
| Utilisé pour définir le nombre minimum de lignes qui doivent être conservées en haut de la page lorsque la pagination a lieu à l'intérieur de l'élément. élément |
| 属性名称 | 属性作用 |
|---|---|
| cursor | 鼠标指针 |
| quotes | 用于指定引号样式 |
Autre
Spécificité
| 选择器 | 对应的HTML |
|---|---|
p { ... } |
<p>...</p> |
.some<a href="http://www.php.cn/wiki/164.html" target="_blank">Class</a> { ... } |
<p class="someClass">...</p> |
#someID { ... } |
<p id="someID">...</p><p id="someID" class="someClass">...</p><p id="someID" class="someOtherClass">...</p><p id="someID" class="someClass someOtherClass">...</p>
|
| Sélecteur | HTML correspondant |
|---|---|
p { ... } |
<p>..</p> ; |
.some<a href="http://www.php.cn/wiki/164.html " target="_blank" >Classe<🎜> { ... } | <p class="someClass">...</p> code> |
#someID { ... } |
<p id="someID"> p><p id="someID" class="someClass">...</p><p id= "someID" class="someOtherClass">...</p><p id="someID" class="someClass someOtherClass"> p>
|
Lorsque la spécificité n'est pas suffisante pour déterminer laquelle des règles contradictoires doit prévaloir. À ce moment-là, la règle de commande prend effet, c'est-à-dire que le qui apparaît plus tard a une priorité plus élevée .
Si les règles ci-dessus ne suffisent pas, vous pouvez déclarer une règle spéciale pour couvrir les règles de l'ensemble du système . Vous pouvez également ajouter ！important à la fin d'une instruction, par exemple p{ color: o<a href="http://www.php.cn/wiki/1078.html" target="_blank"> range<code>p{ color: o<a href="http://www.php.cn/wiki/1078.html" target="_blank">range</a> !important; } !important } (Cette méthode n'est pas recommandée sauf circonstances particulières).
Pour tout attribut, si vous souhaitez afficher Pour indiquer que la valeur de l'attribut est la même que la valeur définie par l'élément parent de l'élément correspondant, vous pouvez utiliser la valeur inherit. Par exemple, supposons que vous ayez un élément article qui contient plusieurs paragraphes. L'élément article définit une bordure, et généralement les bordures ne sont pas héritées, donc la règle p { border: inherit; } permet à ces paragraphes d'obtenir le même style de bordure.
1 La valeur de nombreuses propriétés CSS est la longueur. Certaines longueurs sont relatives à d'autres valeurs. La longueur d'un em est approximativement égale à la taille de la police de l'élément correspondant. Par exemple, définir <a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left<code><a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left</a>: 2em: 2em sur un élément signifie que l'élément La marge gauche de est définie sur deux fois la taille de police de l'élément. Lorsque em est utilisé pour définir l'attribut font-size d'un élément lui-même, sa valeur est héritée de la taille de police de l'élément parent de l'élément correspondant. Cette relativité de em est cruciale pour les efforts de création de sites Web actuels, en particulier ceux qui doivent s'adapter à différentes tailles d'écran (une pratique connue sous le nom de conception de sites Web réactifs).
2. Les pourcentages fonctionnent un peu comme em, les pourcentages sont généralement relatifs à l'élément parent.
Il n'existe que quelques propriétés CSS qui acceptent les nombres sans unités, les plus courantes sont line-height , <a href="http://www.php.cn/wiki/903.html" target="_blank">z-index<code><a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a> et opacity, par exemple :line-height: 1.5; La valeur dans cet exemple sera multipliée par la taille de la police, par la hauteur de la ligne.
Il existe des propriétés CSS qui permettent aux développeurs de spécifier l'URL d'un autre fichier (notamment une image), background-image est un tel attribut. Dans ce cas, utilisez url(file.ext), où file.ext est le chemin et le nom de fichier de la ressource cible. Notez que la spécification indique que les URL relatives doivent être relatives à la position de la feuille de style et non à la position du document HTML, par exemple :background: url(bg-pattern.png). Remarque : Les URL dans les propriétés CSS n'ont pas besoin d'être entourées de guillemets.
| 颜色 | 关键字 |
|---|---|
| aqua（水绿） | #00FFFF |
| black（黑） | #000000 |
| blue（蓝） | #0000FF |
| fuchsia（紫红） | #FF00FF |
| gray（灰） | #808080 |
| green（绿） | #008000 |
| lime（浅绿） | #00FF00 |
| maroon（褐） | #800000 |
| navy（深蓝） | #000080 |
| olive（橄榄） | #808000 |
| purple（紫） | #8000080 |
| red（红） | #FF0000 |
| silver（银） | #C0C0C0 |
| teal（深青） | #008080 |
| white（白） | #FFFFFF |
| yellow（黄） | #FFFF00 |
Vous pouvez créer votre propre couleur en spécifiant la quantité de rouge, de vert et de bleu, vous pouvez utiliser des pourcentages, entre 0~ 255 Nombres pour préciser les valeurs de ces trois couleurs, par exemple : color: rgb(89, 0, 127); ou color: rgb(35%, 0%, 50%);, car 89 vaut 35% de 255.
C'est la manière la plus courante de définir les couleurs en CSS, par exemple : color: #59007F. Si #FF3344, il peut être abrégé en #F34.
RGBA, HSLA et HSL.
CSS3 a introduit un moyen de spécifier les couleurs via HSL et la possibilité de définir la transparence alpha via RGBA et HSLA.
RGBA ajoute une transparence alpha (transparence alpha) A à RVB. La transparence peut être spécifiée en ajoutant une décimale de 0 à 1 après RVB. par exemple :<a href="http://www.php.cn/wiki/894.html" target="_blank">background-color</a>: rgba(89,0,127,0.75).
HSL et HSLA sont nouvellement ajoutés dans CSS3. HSLA est une autre façon de spécifier la transparence des couleurs en plus de RGBA. La méthode de spécification de la transparence à l'aide de HSLA est cohérente avec RGBA, par exemple :color: hsla(282,100%,25%,0.75).
HSL représente la teinte, la saturation et la luminosité. La plage de valeurs de teinte est de 0 à 360, et les valeurs de saturation et de luminosité sont des pourcentages allant de 0 à 100 %. 0 et 360 se rejoignent en haut, c'est-à-dire que 0 et 360 représentent la même couleur : le rouge, par exemple : color: hsl(282,100%,25%).
Pensez au HSL, choisissez une teinte entre 0 et 360, réglez la saturation à 100% et la luminosité à 50%, vous obtiendrez la forme la plus pure de cette couleur. Réduisez la saturation et la couleur vire au gris. Augmentez la luminosité et la couleur passera à une couleur préservant la couleur ; diminuez la luminosité et la couleur passera à une couleur noire.
Par exemple, certaines des couleurs les plus importantes ci-dessous :
| 颜色 | hsl数据 |
|---|---|
| 红色 | hsl(0,100%,50%); |
| 黄色 | hsl(60,100%,50%); |
| 绿色 | hsl(120,100%,50%); |
| 青色 | hsl(180,100%,50%); |
| 蓝色 | hsl(240,100%,50%); |
| 紫色 | hsl(300,100%,50%); |
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
