7) ID et classes

Nous avons jusqu’à présent modifié le comportement visuels de certains tags (ou balises) à l’aide des css. Mais on peut être plus fin dans la manière de modifier ces comportement, grâce aux classes et balises, et à la sélection hiérarchique.

Précédent | 9/16 | Suivant

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.

Les classes
Une classe est assez proche de l’id, on l’associe à un élément de la page comme ceci :

<p class="important">Notez bien !</p>

Ensuite on les atteind en css comme ceci

.important {
color:red;
}

Le point devant le terme signifie que l’on cherche à atteindre une classe dont le nom est "important".
L’avantage de la classe c’est que plusieurs éléments peuvent se voir associer la même classe :

<h1 class="important">Notez bien !</h1>
<p class="important">On peut m'associer plusieurs fois.</p>

La différence entre les deux est dans le manière de les coder (# et .) et dans la limitation des id à être associés une seule fois.
On verra plus tard que les id sont prioritaires sur les classes dans la hiérarchie des déclarations css.

Généralement, associer un ID à un élément signifie "bloc important" dans une structure html. On les emploie souvent pour désigner, le bloc de titre, la navigation, le corps de la page et le footer, par exemple.

Forum

  • mai ladcya par gunsgratid , 7 février 2013

    comme la prudence le commandait, acheter cialis bouillante fur une once de fleurs de Coquelicoc, . propio minbterio pudiesen cometer los pastores venta de viagra sólidamente desembarazar el terreno de const.