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
|
|