Médiaforma

Plus loin avec les sélecteurs CSS

Print Friendly

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 :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply