Comment fonctionnent les "class" ?
Avec le sélecteur CLASS, vous pouivez définir plusieurs règles différentes à l'aide des tags HTML. Ainsi au départ avec le même tag HTML "b" vous pouvez déclarer un style : b { color: black ; }, et vous pouvez ensuite créer une "class" : b.red { color: red ; } .
Dans le même genre vous pouvez continuer à ouvrir d'autres "class" comme b.blue { color: blue ; } etc.. mais si le besoin existe sinon vous partez pour la réalisation d'une "usine à gaz".
C'est évident, les tags HTML disponibles sont limités en nombre. Si jusqu'à maintenant vous les avez utilisé et avez ainsi réalisé une mise en page de base, vous allez pouvoir contourner le problème et élargir la palette des possibilités, en faisant appel à des "CLASS", "SPAN", "DIV" et "ID".
Vocabulaire
Il n'est pas certain que des puristes du CSS
trouvent que ces définitions des "classes" et "sous-classes"
(ces dernières taitées page16) 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
.olive { text-align:center ; color :olive ; } est une sous-classe.
Code 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 ; }
b { color: blue ; font-weight: bold ; }
h3.green { color: green ; }
.olive { font-family: arial, sans-serif ; color: olive ; font-size: 12pt ; font-style: italic ; background-color: #FFFFFF ; }
</style>
</HEAD>
Attention : il est impossible d'imbriquer des classes de style.
Exemple 1 : dans BODY du code HTML seulement (règle de style)
<b>Ici le texte est celui du sélecteur
"b" qui donne la graisse épaisse. Vous constatez aussi
que le texte est en gras et en bleu. </b>
Résultat de cet exemple 1
Ici le texte est celui du sélecteur "b" qui donne la graisse épaisse. Vous constatez aussi que le texte est en gras et en bleu.
Exemple 2 : dans BODY avec une "classe" CSS
<h3 class="green"> Cette ligne en vert avec "H3". Je tiens à vous préciser que j'ai voulu voir ce qu'était le CSS et je suis tombé dans le "chaudron".</h3>
Résultat de cet exemple 2
Cette ligne en vert avec "h3". Je tiens à vous préciser que j'ai voulu voir ce qu'était le CSS et je suis tombé dans le "chaudron".
Exemple 3 : dans BODY avec une "sous-classe" CSS
<p class="olive">Dans cet exemple, le texte est celui de la sous-classe .olive donc en couleur olive et en style italique avec un corps 12pt.</p>
Résultat de cet exemple 3
Dans cet exemple, le texte est celui de la sous-classe .olive donc en couleur olive et en style italique avec un corps 12pt.
Vous allez comprendre facilement ces notions de base qui vont par la suite être constamment utilisées . En conséquence je vous recommande de bien les approfondir mais je juge inutile de placer "du texte" pour le seul plaisir d'en rajouter. C'est du moins mon avis.
NOTA - CLASS est utilisable dans presque toutes les balises HTML sauf : BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE.
S'il existe encore de nombreuses options pour enrichir la palette des déclarations il convient au préalable de connaître certaines particularités très importantes, ...... alors tournez la page ......
Sommaire CSS ... @ ... Hérédité
