Hérédité : J'ai jugé cette particularité du langage CSS trop importante pour ne pas ajouter une page d'exemples qui de toute façon ne peut nuire à ce dossier et, si vous estimez être suffisamment initié en la matière rien ne vous empêche de passer directement à la page suivante !!!
Codes dans HEAD
</TITLE>
<STYLE TYPE="text/css">
body { font-family: arial, verdana, sans-serif ;
font-size: 10pt ;
color: black ;
background-color: #FFFFFF ; }
h6 { font-size:12pt ; color: green ; }
p.grand { font-size: 14pt ; color: #808080 ; }
p.petit { font-size: 8pt ; color: red ; }
b { font-family: times, arial, sans-serif ; font-size: 12pt ; color: blue ; font-weight: bold ; font-style: italic ; }
.olive { color: olive ; font-size: 14pt ; }
</STYLE>
</HEAD>
Vous avez ci-dessus les codes avec les attributs et valeurs au complet, et le "validator" de W3C est d'accord, c'est bon !
Notez bien que les sélecteurs
" p " et " b "
qui sont des tags HTML, permettent de créer ensuite des
classes
"p.grand " et " p.petit ", de même que " .olive "
Vous retrouvez ici la notion" d'héritage ".
Les "enfant" héritent des "propriétés" des "parent".
Code 1 avec H6 ans BODY
<h6> Dans ce paragraphe, le titre H6 est employé mais en le codifiant avec une déclaration, pour obtenir un fond vert et un corps de 12 pt. </h6>
Résultat de l'exemple 1
Dans ce paragraphe, le titre H6 est employé mais en le codifiant avec une déclaration, pour obtenir un fond vert et un corps de 12 pt.
Les navigateurs interprètent les titres (h1....h6) avec une police, une taille, une couleur et un poids bien définis. Ici vous avez donc conservé "en héritage" la police et le poids (en gras) mais par contre vous avez imposé (en plaçant une règle CSS à h6) une couleur verte et un corps de 12pt.
Voici pour comparer un corps "h6" appliqué à la phrase ci-après, qui ne serait pas formaté par le code CSS. Pas de compétitivité sans haut débit. Partant de ce constat, le gouvernement a fixé pour objectif que 96 % de la population française ait accès au haut débit à fin 2005.
Code 2 avec " p.grand " dans BODY
<p class="grand"> Dans ce paragraphe, le bloc parent "p" sert de référence comme indiqué dans le tableau ci-dessus, mais comme vous souhaitez ce paragraphe avec un corps plus grand et en gris, vous utilisez la classe enfant " p.grand ".</p>
Résultat de l'exemple 2
Dans ce paragraphe, le bloc parent "p" sert de référence comme indiqué dans le tableau ci-dessus, mais comme vous souhaitez ce paragraphe avec un corps plus grand et en gris, vous utilisez la classe enfant " p.grand ".
Vous avez ici "p.grand" qui hérite de la police, et de la couleur fond de page ce qui évite en conséquence de la répéter.
Code 3 avec " b " dans BODY
<b> Dans ce paragraphe qui sert d'exemple, si vous tapez "b" pour un texte il sera en times et de corps gras (bold) , mais bleu comme défini dans la déclaration correspondante.<b>
Résultat de l'exemple 3
Dans ce paragraphe qui sert d'exemple, si vous tapez "b" pour un texte il sera en times et de corps gras (bold) , mais bleu comme défini dans la déclaration correspondante.
Vous avez ici "b" qui impose le bleu, le gras (bold) et le corps 12pt et le reste est hérité de BODY.
Code 4 avec " .olive " dans BODY
<H4 class="olive"> Dans ce paragraphe qui sert d'exemple, si vous avez choisi la sous- classe ".olive", c'est-à-dire avec la couleur "olive" et 14pt au lieu de 12pt. Par contre il y a héritage pour la le tag H4 qui entraîne lui aussi l'héritage vu à l'exemple 1 ci-dessus.</H4>
Résultat de l'exemple 4
Dans ce paragraphe qui sert d'exemple, si vous avez choisi la sous- classe ".olive", c'est-à-dire avec la couleur "olive" et 14pt au lieu de 12pt. Par contre il y a héritage pour la le tag H4 qui entraîne lui aussi l'héritage vu à l'exemple 1 ci-dessus.
Nota: jusqu'à cette page j'avais souvent répété certains codes, les polices par exemple, alors que les règles d'hérédité pouvaientt m'en dispenser. Maintenant je vais (sauf oubli de ma part) alléger au maximum ce code et vous amener ainsi vers les solutions idéales conformes à l'état d'esprit du CSS.
Sommaire CSS... @ ... Sous-Classes
