Les SOUS-CLASS offrent de nouvelles possibilités pour élargir le choix disponible à partir des CLASS qui pour leur part sont réalisés avec des tags HTML. En effet il est indispensable de disposer d'un maximum de souplesse pour structurer les pages de votre site suivant les besoins.
Pour aller encore plus loin voici donc ces "sous-classes" qui ouvrent à leur tour des horizons nouveaux et faciles à exploiter.
Comment : Si une classe reprend un tag HTML comme sélecteur, il est possible de ne pas préciser de tag. Dans ce cas vous créez une sous-classe et vous entendrez parfois parler de "classe universelle". Vous retrouvez ici les principes des règles d'héritage expliquées pages précédentes.
Une sous-classe se réalise en remplaçant le nom de la classe par un point.
Il n'est pas certain que des puristes du CSS trouvent
que ces définitions des "classes" et "sous-classes"
(ces dernières traitées page15) soient les meilleures et conformes
mot à mot au W3C. Mais n'ayez crainte les applications
sont valables et, après mûre réflexion j'ai choisi
ce vocabulaire qui permet de mieux comprendre la structure de la syntaxe et
de faire le distinguo plus facilement.
p { font-family : arial, sans-serif ; } est une règle
de style
p. times { font-family : times ; } est une classe
.maroon { color : maroon : } est une sous-classe.
Déclarations dans HEAD de cette page
</TITLE>
<STYLE TYPE="text/css">
body { font-family: arial, verdana, sans-serif ; font-size: 10pt ; color: black ; background-color: #FFFFFF ; }
.grand { font-size: 14pt ; color: blue ; }
.vert { color: green ; }
.souligne { text-decoration: underline ; }
</STYLE>
</HEAD>
Notez bien ci-dessus les sélecteurs
" p " et " b "
qui sont les tags de base en HTML, et à ce titre appelés
classe " parent ".
Par contre les sélecteurs".grand ", " .vert", " .souligne"
descendent des tags
"parent" "p" et "b"
Vous retrouvez ici la notion " d'héritage ".
Les "enfant" héritent des "propriétés" de leurs "parent".
Code 1 avec la sous-classe " .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 bleu, vous utilisez la sous-classe enfant ".grand ".</p>
Résultat exemple 1
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 bleu, vous utilisez la sous-classe enfant ".grand ".
Code 2 avec la sous-classe " .vert" dans BODY
<p class="vert"> Dans ce paragraphe qui sert d'exemple, tapez la sous-classe ".vert" et le texte sera en vert comme défini dans la déclaration correspondante.</p>
Résultat exemple 2
Dans ce paragraphe qui sert d'exemple, tapez la sous-classe ".vert" et le texte sera en vert comme défini dans la déclaration correspondante.
Code 3 avec la sous-classe " .souligne" dans BODY
<p class="souligne"> Dans ce paragraphe qui sert d'exemple, si vous choisissez la sous-classe "souligne" pour le texte avec une propriété que vous verrez plus loin, il sera affiché suivant les déclarations de son parent, ici "p" et naturellement "souligné comme souhaité". </p>
Résultat exemple 3
Dans ce paragraphe qui sert d'exemple, si vous choisissez la sous-classe "souligne" pour le texte avec une propriété que vous verrez plus loin, il sera affiché suivant les déclarations de son parent, ici "p" et naturellement "souligné comme souhaité".
ATTENTION, si le nom donné aux classes et sous-classes
est laissé à votre initiative, il est quand même indispensable
de sélectionner un vocabulaire court et en même temps significatif,
qui ne doit contenir ni espaces ni caractères spéciaux.
"p.grand" "p.petit" ".vert" ".souligne"
sont des exemples "parlants".
Sommaire CSS ... @ ... Mise en forme avec SPAN
