| Syntaxe de classe de CSS
|
|
En employant un point (.) suivi du nom de classe, vous d�clarez une classe de CSS. Vous composez le nom de classe vous-m�me. Si vous voulez �crire les propri�t�s/valeurs � votre classe, vous pouvez l'assigner apr�s le nom de classe.
|
|
.class-name { property:value; }
|
|
|
Vous pouvez mettre en t�te le point avec le nom d'�l�ment de HTML si vous voulez employer le m�me nom de classe pour les �l�ments multiples, mais chacun avec un mod�le diff�rent.
|
|
html-element-name.class-name { property:value; }
|
|
|
Vous pourriez d�finir des classes de feuille de mod�le pour chacun, si vous voulez un paragraphe pourpre de police et un paragraphe bleu de police.
|
.purple {
font-family: verdana, arial, helvetica, sans-serif;
size: 12pt;
color: #003399;
}
.blue {
font-family: verdana, arial, helvetica, sans-serif;
size: 12pt;
color: #663399;
}
|
|
|
S'appliquer alors ceci � diff�rents paragraphes en utilisant apr�s code :
|
<p
class="purple">The
purple paragraph text
will go here.</p>
<p
class="blue">The
blue paragraph
text will go
here.</p>
|
|
| L'�tiquette de <span>
|
|
En utilisant l'�tiquette de <span>, vous pouvez �galement s'appliquer ceci aux sections du HTML comme ceci : |
|
<p
class="purple">This
text will be purple
until you get to
<span
class="blue">these
words, which are
blue</span> and
then the text
carries on being
purple.</p>
|
|
|
Si vous souhaitez montrer le code dans un diff�rent colorer selon sa langue :
|
code.html { color: #4b0082 }
code.css { color: #191970 }
|
|
|
Par exemple, en utilisant le class~= " pastoral ", nous pouvons assigner l'information de mod�le � tous les �l�ments comme suit :
|
|
*.pastoral { color: green } /* all elements with class~=pastoral */
|
|
| Ce qui suit assigne le mod�le seulement aux �l�ments H2 avec le class~= " pastoral " :
|
|
H2.pastoral { color: green } /* H1 elements with class~=pastoral */
|
|
| Donn� ces r�gles, le premier exemple H2 ci-dessous n'aurait pas le texte vert, alors que la seconde :
|
<H2>Not green</H2>
<H2 class="pastoral">Very green</H2>
|
|
|
Sans �l�ment associ�, vous pouvez d�clarer des classes comme suit :
|
|
.note { font-size: small }
|
|
| Exemple de classe de CSS
|
<head>
<style type="text/css">
h1.css-section { color:#999999;}
p.css-section { color:#000099; }
</style>
</head>
<body>
<h1 class="css-section">CSS Class</h1>
<p class="css-section">CSS classes can be very useful</p>
</body>
|
|
|
|
|
CSS Class
CSS classes can be very useful
|
|
