Styler des éléments particuliers
en CSS, on peut atteindre des éléments par leur nom de balise ;
p {
font-size:10px;
}Mais c’est vite trop peu pour faire une mise en page précise...
Par exemple, la navigation de votre site, si elle est sémantiquement bien codée, sera une liste de liens. On accèdera à ses éléments en utilisant la déclaration css de ul et li. Mais si on a d’autres listes dans la page web, ce qui est souvent le cas, on manque alors de présision : on voudrait que seul les liens de la navigation soient en grand, sur fond de couleur qui change en survol. C’est en fait possible grâce aux classes et id.
Id = identifiant
On peut associer un attribut "id" à n’importe quelle balise. Il suffit de créer cet attribut et de lui donner un nom unique. "id" signifie "identifiant", et se code comme suit :
<ul id="navigation">
<li>Un élément</li>
</ul>Ici j’ai donc associé l’id "navigation" à ma navigation. Là comme ailleurs, on veille à être sémantique. L’identifiant va nous servir à accéder à cet élément particulier avec les css. On verra plus tard que c’est aussi utile pour accéder à ces éléments en javascript.
#navigation {
background-color:purple;
font-size:12px;
font-weight:bold;
}La particularité de l’id, c’est que l’on ne peut l’associer qu’à une seul élément de l’arbre html. C’est normal puisqu’il s’agit d’un identifiant.
Or il est souvent utile de pouvoir créer un style que l’on appliquera à plusieurs éléments dans la page. Dans ce cas, on utilisera des classes.
Voir pour ça l’article suivant.