Quels sont les trois composants de la syntaxe CSS ?

La syntaxe CSS se compose de trois parties : le sélecteur, la propriété et la valeur. Le sélecteur peut indiquer au navigateur à quelles parties de la page le style s'appliquera. L'attribut est l'option de style définie fournie par CSS, et la valeur de l'attribut est utilisée pour afficher les paramètres de l'effet d'attribut ; : valeur d'attribut}".

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

La syntaxe CSS se compose de trois parties : le sélecteur, la propriété et la valeur.

• Le sélecteur indique au navigateur à quels objets de la page le style s'appliquera. Ces objets peuvent être une certaine balise, tous les objets de la page Web, des valeurs de classe ou d'identifiant spécifiées, etc. Lorsque le navigateur analyse ce style, il restitue l'effet d'affichage de l'objet en fonction du sélecteur.

• Les propriétés sont des options de style définies fournies par CSS. Le nom de l'attribut se compose d'un ou plusieurs mots et plusieurs mots sont reliés par des traits d'union. Cela peut représenter intuitivement l’effet de l’attribut à styliser.

• Value (valeur) fait référence à la valeur de l'attribut, un paramètre utilisé pour afficher l'effet de l'attribut. Il comprend des valeurs numériques et des unités, ou des mots-clés.

Le sélecteur est généralement l'élément ou la balise HTML que vous souhaitez définir, la propriété est l'attribut que vous souhaitez modifier et chaque propriété a une valeur. Les attributs et les valeurs sont séparés par des deux-points et entourés d'accolades, formant ainsi une déclaration de style complète :

selector {property: value}
选择器{属性:属性值}

Exemple :

body {color: blue}

La fonction de la ligne de code ci-dessus est de définir la couleur du texte au sein de l'élément body est bleu. Dans l'exemple ci-dessus, le corps est le sélecteur et la partie entre accolades est la déclaration. La déclaration se compose de deux parties : les attributs et les valeurs. La couleur est l'attribut et le bleu est la valeur.

Déclarations multiples :

Astuce : Si vous souhaitez définir plusieurs déclarations, vous devez séparer chaque déclaration par un point-virgule. L'exemple ci-dessous montre comment définir un paragraphe centré avec du texte rouge. La dernière règle ne nécessite pas de point-virgule, car le point-virgule est un délimiteur en anglais, pas un terminateur. Cependant, les concepteurs les plus expérimentés ajouteront un point-virgule à la fin de chaque déclaration. Cela présente l'avantage de minimiser les risques d'erreurs lorsque vous ajoutez ou soustrayez des déclarations à des règles existantes. Comme ceci :

p {text-align:center; color:red;}

Vous ne devez décrire qu'un seul attribut par ligne, ce qui améliore la lisibilité de la définition du style, comme ceci :

p {
text-align: center;
color: black;
font-family: arial;
}

Sensible à l'espace et à la casse

La plupart des feuilles de style contiennent plus d'une règle, et la plupart des règles contiennent plus d'une déclaration. Les déclarations multiples et l'utilisation d'espaces facilitent la modification de la feuille de style :

body {

color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}

Le fait d'inclure ou non des espaces n'affecte pas le fonctionnement du CSS dans le navigateur. De plus, contrairement à XHTML, CSS n'est pas sensible à la casse. . Il existe une exception : lorsqu'il s'agit de travailler avec des documents HTML, les noms de classe et d'identifiant sont sensibles à la casse.

Syntaxe CSS avancée : Regroupement de sélecteurs

Vous pouvez regrouper des sélecteurs afin que les sélecteurs groupés puissent partager la même déclaration.

Utilisez des virgules pour séparer les sélecteurs qui doivent être regroupés. Dans l'exemple ci-dessous, nous avons regroupé tous les éléments de titre. Tous les éléments du titre sont verts.

h1,h2,h2,h3,h5,h6 {
color: green;
}

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

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!