Termes et définitions CSS

Voici une liste rapide des termes CSS communément employés, un aide-mémoire pratique, une révision utile, et pour ceux qui commencent à apprendre CSS une bonne façon de baliser le chemin

Par

Voici une liste rapide des termes CSS communément employés, et ce qu'ils à quoi ils correspondent dans le code. Rien de bien nouveau pour les développeurs expérimentés, mais une bonne révision à tout le moins.

Table des matières : Commentaires - Ensemble de règles - Bloc de déclaration - Déclaration - Propriété - Valeur - Sélecteur - Sélecteur/Élément - Sélecteur/Classe - Sélecteur/ID - Sélecteur universel - Sélecteur/Attribut - Pseudo-classes - Pseudo-éléments - Combinateur - Règle-at - Instruction - Identifiant - Mot-clé

Commentaires

Un commentaire n'a aucun effet sur l'affichage de la page, il sert à l'auteur du code et à ses lecteurs ou collaborateurs éventuels. Les commentaires sont une pratique commune dans tous les langages de programmation. Dans l'exemple suivant, la ligne qui indique "ceci est pour IE6" est un commentaire :

/* ceci est pour IE6 */  

* html #box {  
    width: 200px;  
} 

Ensemble de règles

Un ensemble de règles est une section de CSS qui inclut le sélecteur, les accolades, et les différentes lignes comprenant les propriétés et leurs valeurs. Le code ci-dessous comprend un ensemble de règles :

/* L'ensemble de règles commence à la ligne suivante */

body {  
    font-family: Arial, sans-serif;  
    color: #555;  
    font-size: 14px;  
}  

/* et s'achève avec l'accolade fermante ci-dessus */

Bloc de déclaration

Un bloc de déclaration est la section de votre CSS où la paire propriété/valeur apparaît. Dans l'exemple qui suit, tout ce qui se trouve entre les accolades est un bloc de déclaration :

body {  

    /* ça commence ici */

    font-family: Arial, sans-serif;   
    color: #555;  
    font-size: 14px;  
    line-height: 20px;

    /* et ça se termine ici */ 
} 

Déclaration

Une déclaration est en général une ligne de CSS qui apparaît entre les accolades, elle peut être raccourcie ou pas. Dans notre exemple, tout ce qui suit la première accolade, jusqu'à la deuxième, mais sans inclure le commentaire, est une déclaration :

body {  
    font-family: Arial, sans-serif; /* cette ligne est une déclaration */  
} 

Dans cet autre exemple, il y a deux déclarations :

body {  
    font-family: Arial, sans-serif; /* une déclaration */  
    color: #555; /* une autre déclaration */  
} 

Propriété

Une propriété est ce qui apparaît avant ":" dans une ligne de CSS. Dans l'exemple qui suit, "width" est la propriété.

#box {  
    width: 200px; /* la propriété est "width" (sans les ":") */  
} 

Valeur

Une valeur est ce qui apparaît après ":" dans une ligne de CSS. Dans l'exemple qui suit, "200px" est la valeur.

#box {  
    width: 200px; /* after the colon, without the semi-colon */  
}

Si vous utilisez des raccourcis, une déclaration peut contenir plusieurs valeurs :

#box {  
    border: 1px solid #4a4a4a;  
}

Sélecteur

Un sélecteur est la partie de la ligne de CSS qui sélectionne l'élément à cibler avec la paire propriété/valeur. Ci-dessous, "#container #box" est le sélecteur :

#container #box {  
    width: 200px;  
}   

Sélecteur de type élément

Un sélecteur est de type élément s'il cible un élément par son nom d'attribut. Dans l'exemple qui suit, le sélecteur est de type élément car il n'utilise pas de classe, d'ID, ni aucun autre sélecteur pour appliquer le style, mais cible directement tous les éléments <nav> :

nav {  
    font-family: Arial, sans-serif;  
    color: #555;  
    font-size: 14px;  
} 

Sélecteur de classe

Le sélecteur qui suit cible un élément par le nom de sa classe. Tous les éléments ayant une classe "navigation" seront concernés par ce style.

.navigation {  
    width: 960px;  
    margin: 0 auto;  
}

Sélecteur d'ID

Le sélecteur qui suit cible un élément par son nom d'ID. Tous les éléments ayant une ID "navigation" seront concernés par ce style.

#navigation {  
    width: 960px;  
    margin: 0 auto;  
}  

Sélecteur universel

Le sélecteur universel cible tous les éléments dans le contexte où il est placé. Il est représenté par une astérisque. Ci-dessous le style s'applique à tous les éléments se trouvant dans un contexte .navigation ul :

.navigation ul * {  
    width: 100px;  
    float: left;  
}

En d'autres termes, n'importe quel élément qui serait descendant d'une liste non ordonnée située dans un élément ayant une classe "navigation" recevra ce style.

L'utilisation du sélecteur universel n'est pas encouragée, en raison de problèmes de performances.

Sélecteur d'attribut

Un sélecteur d'attribut sélectionne un élément en fonction de son attribut et/ou de la valeur de cet attribut. Le code qui suit cible les éléments de certains paragraphes s'ils contiennent un attribut "style".

/* cible les éléments p ayant un attribut style, quel qu'il soit */  
p[style] {  
    color: #1e1e1e;  
} 

Le code qui suit cible les éléments de certains input s'ils contiennent un attribut "style" ayant une valeur "text".

/* cible les éléments input dont type="text" */  
input[type="text"] {  
    border: solid 1px #ccc;  
}

Pseudo-Classes

Une pseudo-classe fonctionne comme une classe CSS normale, à cette différence près qu'elle n'est pas explicitement déclarée dans votre HTML. Dans l'exemple ci-dessous, la pseudo-classe est ajoutée à l'élément ancre.

/* le mot "hover" et les ":" qui précèdent forment la pseudo-class */  
a:hover {  
    text-decoration: none;  
}

Une pseudo-classe est toujours définie à l'aide de ":" et d'un mot-clé, sans espace ni avant ni après les deux points. Autres exemples de pseudo-classes : :visited , :focus, :first-child.

Pseudo-Éléments

Il y a une différence entre pseudo-éléments et pseudo-classes. Une pseudo-classe cible un élément qui existe réellement, alors qu'un pseudo-élément cible un élement "virtuel" qui peut changer selon le HTML réel (voir l'article sur les pseudo-éléments :before et :after pour plus de détails). Les pseudo-éléments s'écrivent avec ":" en CSS2 et "::" en CSS3 (NdT: mais vous pouvez faire ce que vous voulez et on écrit maintenant plutôt ":"). Dans l'exemple ci-dessous, on trouve les deux syntaxes :

/* "first-letter" est le pseudo-element */  
p:first-letter {  
    display: block;  
    float: left;  
    margin: 0 5px 5px 0;  
}  

/* CSS3 pseudo-elements avec "::" */  
::selection {  
    background: green;  
} 

Combinateur

Un combinateur est le caractère qui connecte deux sélecteurs. Il existe quatre types de combinateurs, qui servent à créer des sélecteurs descendants (avec un caractère espace), des sélecteurs enfants (avec le caractère ">"), des sélecteurs d'adjacence directe (avec le caractère "+") et des sélecteurs siblings d'adjacence indirecte (avec le caractère "~") :

/* Dans ces 4 exemples */  
/* ce qui apparaît entre "div" et "p" est un combinateur */  
/* dans le premier exemple, le combinateur est un espace */ 

div p {  
    color: #222;  
}  

div>p {  
    color: #333;  
}  

div+p {  
    color: #444;  
}  

div~p {  
    color: #555;  
} 

NdT : div+p cible le premier frère (sibling) de div qui est un paragraphe, c'est un frère adjacent (adjacent sibling). div~p cible tous les frères de div qui sont des paragraphes (general siblings). Voir à ce sujet l'article de CreativeJuiz.

Règle-at (@)

Une règle-at n'a aucun rapport avec Star Wars. C'est une intruction donnée à un document CSS à l'aide du caractère @. Elle peut consister en une simple ligne de CSS ou en un bloc de déclaration :

@import url(secondary.css);     /* simple ligne */

/* bloc de déclaration */
@media print {
    #container {  
        width: 500px;  
    }  
}

La règle-at comprend toute l'instruction.

Instruction

Une instruction est un ensemble de règles ou une règle-at :

/* the at-rule below is a statement */  
@import url(secondary.css);  

/* the entire rule-set below is a statement */  
body {  
    font-family: Arial, sans-serif;  
    color: #555;  
    font-size: 14px;  
}  

Identifiant

Un identifiant est tout ce qui peut apparaître comme propriété, id, classe, at-rule. Dans l'exemple ci-dessous, il y a quatre identifiants :

/* "body", "background", "none", et "font-size" sont des identifiants */  
body {  
    background: none;  
    font-size: 14px;  
}  
/* "14px" n'est pas un identifiant */

Mot-Clé

Un mot-clé est une valeur de propriété qui s'apparente à un mot réservé. Différentes propriétés ont différents mots-clés et toutes les propriétés permettent le mot-clé "inherit". Dans l'exemple qui suit, "auto" est un mot-clé.

#container {  
    height: auto;  
}

Un site intéressant, complètement intuitif, pour passer en revue le vocabulaire CSS : CSS-vocabulary.


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Tous les articles sur les bases de CSS parus dans la Cascade.


original paru le dans Impressive Webs.

Sur l'auteur : est un développeur freelance de Toronto, auteur de nombreuses publications. Il écrit régulièrement à propos de CSS sur Impressive Webs et dans d'autres blogs sur le design web. On peut le suivre sur Twitter.

Traduit avec l'aimable permission de Impressive Webs et de l'auteur.
Copyright Impressive Webs © 2010.