Médiaforma

All posts tagged id

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Les classes CSS sont faites pour être utilisées à plusieurs endroits dans le code HTML. Ainsi par exemple, plusieurs balises <p>, plusieurs balises de titre <h1> à <h6> et plusieurs balises <td> peuvent utiliser la même classe.

Lorsqu’une balise HTML à laquelle on désire affecter un style est utilisée une et une seule fois dans un document, il est possible de remplacer l’attribut class de cette balise par un attribut id. Dans ce cas, le sélecteur CSS à utiliser est non plus le point décimal mais le caractère #.

Passons à la pratique. Ce document HTML fait référence à la feuille de styles externe styles4.css. Le corps du document contient deux balises <p>. Un attribut id identifie de façon unique la première balise <p>.

Il ne reste plus qu’à définir le sélecteur fantaisie dans la feuille de styles. Le mot fantaisie est précédé d’un #, ce qui le mettra en relation avec la balise dont l’attribut id a pour valeur fantaisie. Et donc avec notre première balise <p>. Pour bien différentier le texte d’id fantaisie, nous définissons une police fantasy, un style italique et une taille de caractères égale à 30 pixels :

Il ne reste plus qu’à afficher le document HTML dans un navigateur. Voici le résultat :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans les rubriques précédentes, vous avez appris à définir les sélecteurs “.” et “#” pour modifier respectivement le style d’une balise possédant un certain attribut id ou class.

Je vous propose d’aller plus loin en découvrant quelques-unes des possibilités offertes par les sélecteurs. Ici, nous allons utiliser une feuille de styles interne, mais vous pourriez tout aussi bien utiliser une feuille de styles externe, stockée dans un fichier d’extension .css.

Commencez par insérer une balise <style> et son terminateur </style> dans l’en-tête du document.

Pour redéfinir les caractéristiques de la balise <h2>, tapez h2, sans les caractères “<” et “>” entre les balises <style> et </style>. Ajoutez une accolade ouvrante et une accolade fermante et indiquez les propriétés à modifier entre les accolades. Ici par exemple, nous modifions la couleur des caractères de titre h2.

Allons un peu plus loin. Supposons que le document contienne plusieurs titres de niveau 2, et donc, plusieurs balises <h2>. En modifiant le style h2, toutes les balises <h2> vont être affectées. Par contre, pour que seules certaines d’entre elles soient modifiées, vous utiliserez une ou plusieurs classes.

Ici par exemple, toutes les balises <h2> sont de couleur rouge, mais seules les balises <h2> de classe special sont en italique.

Voyons le résultat de ce code dans un navigateur. Comme vous pouvez le voir, les deux balises <h2> sont de couleur rouge, mais seule la balise <h2> de classe special est en italique :

Cette technique est également applicable aux attributs id, via le sélecteur #. Ici, toutes les balises <h2> sont de couleur green, mais seules la balise <h2> d’identifiant special est en italique :

Voyons le résultat dans un navigateur avec une commande Launch dans le menu Exécution :