Syntaxe du CSS

Dans ce tutoriel, vous apprendrez à définir des règles CSS dans le tableau de styles, vous pouvez définir le style des éléments HTML à l'aide des attributs CSS. Différents éléments HTML peuvent avoir des attributs CSS différents. Les attributs CSS peuvent être organisés en règles CSS. Les règles CSS combinent un ensemble d'attributs CSS et appliquent tous les attributs aux éléments HTML correspondants aux règles CSS.

Comprendre la syntaxe CSS

Le tableau de styles CSS est composé d'un ensemble de règles, qui sont interprétées par le navigateur Web et appliquées aux éléments correspondants du document, par exemple les paragraphes, les titres, etc.

Les règles CSS ont deux parties principales, un sélecteur et une ou plusieurs déclarations :

Le sélecteur spécifie le CSS rule applicable à quel élément de la page HTML.

tandis que les déclarations à l'intérieur du bloc déterminent le format de l'élément sur la page web. Chaque déclaration contient une propriété et une valeur, ces valeurs sont séparées par des deux-points (:) est séparé par des points-virgules (;) se termine et le groupe de déclaration est encadré par des accolades{}。

Cette propriété est l'attribut de style que vous souhaitez modifier. Ils peuvent être la police, la couleur, le fond, etc. Chaque propriété a une valeur, par exemple, l'attribut color peut avoir une valeur bleuou#0000FFetc.

h1　{color:blue;text-align:center;}

Pour rendre le CSS plus lisible, vous pouvez placer une déclaration sur chaque ligne, comme suit :

h1　{
　　　　color:　blue;
　　　　text-align:　center;
　　　}

Dans l'exemple ci-dessush1est un sélecteur,colorettext-alignest une propriété CSS, tandis queblue（h1Couleur du texte dans l'étiquette (h)etcenter(h1Alignement du texte au centre dans l'étiquette (h)sont les valeurs correspondantes de ces attributs.

Commentaires en CSS

On ajoute généralement des commentaires pour rendre le code source plus facile à comprendre. Ils aident d'autres développeurs (ou vous-même lors de l'édition du code source à l'avenir) à comprendre ce que vous essayez de faire avec CSS. Les commentaires sont importants pour les programmeurs, mais ignorés par les navigateurs.

Les commentaires CSS commencent par/*，pour terminer*/，comme montré dans l'exemple suivant :

/*　This　is　a　CSS　comment　*/
h1　{
　　　　color:　blue;
　　　　text-align:　center;
}
/*　This　is　a　multi-Commentaire CSS qui dépasse plusieurs lignes　*/
p　{
　　　　font-size:　18px;
　　　　text-transform:　uppercase;
}

Vous pouvez également commentairez une partie du code CSS pour le débogage, comme suit :

h1　{
　　　　color:　blue;
　　　　text-align:　center;}
/*p　{
　　　　font-size:　18px;
　　　　text-transform:　uppercase;}
*/

Distinction de casse dans CSS

Bien que les noms des attributs CSS et de nombreuses valeurs d'attributs ne soient pas sensibles à la casse. Cependant, les sélecteurs CSS sont sensibles à la casse, par exemple :.maincontentet.mainContentSont deux sélecteurs de classe différents, sensibles à la casse.

Par conséquent, pour des raisons de sécurité, vous devriez supposer que tous les composants des règles CSS sont sensibles à la casse.

DansChapitre suivantEn Chine, vous apprendrez divers types de sélecteurs CSS.