Médiaforma

Surclasser un style

Print Friendly

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

Pour mettre en évidence le surclassement des styles, j’ai redéfini les styles h1, h2 et h3 dans une feuille de styles externe nommée styles.css. Comme vous pouvez le voir, le style h1 aura une couleur rouge, une taille de 50 pixels et des caractères gras. Le style h2 aura une couleur bleue, une taille de 35 pixels et des caractères italiques. Enfin, le style h3 aura une couleur verte et une taille de 25 pixels.

Nous allons utiliser un document HTML élémentaire qui utilise la feuille de styles styles.css et se contente d’afficher un titre de niveau 1, un titre de niveau 2, un titre de niveau 3 et un simple texte.

Affichons ce document dans Internet Explorer. Le résultat est bien conforme à ce qui était attendu :

Nous allons maintenant surclasser le style h2 en définissant une feuille de styles interne. Pour cela, nous ajoutons une balise <style> dans l’en-tête du document et nous modifions la couleur du style h2 :

Affichons ce document dans Internet Explorer. Comme vous le voyez, la couleur du titre h2 est modifiée par le style interne. Par contre, la taille des caractères est inchangée et les caractères apparaissent en italique. Il y a donc eu un surclassement partiel du style h2.

Nous allons maintenant ajouter un attribut style dans la balise <h2>. Ici, nous demandons que les textes de style h2 soient affichés en caractères noirs :

Affichons le document ainsi modifié dans Internet Explorer. Comme vous le voyez, la couleur du titre h2 est modifiée par le style de la balise h2. Il y a donc eu un premier surclassement via la feuille de styles interne et un deuxième via l’attribut style de la balise <h2> :

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

No comments yet.

Leave a Reply