Team-Masters.com
Que du Gratuit pour Webmasters
Les types de sélecteur Class et Id
Jusqu’à présent, nous avons vu que le sélecteur pouvait être un marqueur HTML (’p’, ’h1’, ’body’,...). Cependant, il existe d’autres types de sélecteurs comme class et id. L’utilisation de class et id va permettre de définir un (des) style(s) particulier que l’on pourra appliquer à n’importe quelle balise HTML dans notre page. Cela ouvre une foultitude de combinaisons dont la limite ne reste que votre imagination et votre créativité.
Le sélecteur CLASS
Le sélecteur CLASS procure une plus grande flexibilité par rapport au sélecteur HTML simple. En effet, par son biais, nous pouvons appliquer les mêmes styles à plus d’un marqueur HTML à la fois. À l’inverse, il est possible d’appliquer plusieurs styles différents à une même balise.
Le sélecteur CLASS appliqué à un marqueur HTML spécifique
Nous pouvons définir une classe pour un marqueur HTML spécifique, tel p. La syntaxe est alors la suivante :
[marqueur HTML].[nom de la classe][déclaration]
Par exemple, définissons la classe ’nouvelle’ qui s’appliquera uniquement au marqueur p :
p.nouvelle {
font-family: Georgia, Times ;
font-size: 14pt;
text-align: left;
color: blue;
}Mais nous pouvons tout aussi bien définir une nouvelle classe s’appliquant au même marqueur HTML ’p’ :
p.rouge {
font-family : Arial, Helvetica ;
font-size: 12px;
font-weight: bold;
text-align: center;
color: red;
}Remarquez le point(.) entre ’p’ et le nom de la classe. On voit donc qu’on peut définir deux styles différents pour la même balise HTML, l’essentiel étant lors de l’écriture de préciser quel style on veut avoir, en indiquant le nom de la classe à l’attribut ’class’ de la balise en question. Notre exemple donne :
<p class="nouvelle">Ce paragraphe est en bleu, de police Georgia 14pt et aligné à gauche</p>
<p class="rouge">Mais celui-ci est en 12 pixels Arial, rouge gras, et en plus centré dans la page!</p>Le sélecteur CLASS appliqué à tout marqueur HTML
Mais une classe est potentiellement applicable à tous les marqueurs HTML. On va la définir dans notre feuille de style en lui donnant un nom commençant par un point :
.maclasse {
background-color : #FF3300;
font-color: yellow;
font-size: 11px;
}
.mamaitresse {
background-color : yellow;
font-color: green;
font-size: 14px;
font-style : underline;
}<p class="maclasse">Quand j'étais petit j'allais en classe, mais c'était uniquement pour voir les <span class= "mamaitresse">belles maitresses!</span> Avec elles, l'apprentissage était un <span class="mamaitresse">plaisir.</span></p>
Alors c’est beautiful et puissant non ?
Le sélecteur CLASS est donc très utile pour regrouper les éléments HTML dont les propriétés au niveau du style sont les mêmes. Ainsi, modifiez la déclaration d’une classe et, par le fait même, tous les styles des éléments auxquels elle est associée changent aussi. Il est recommander de donner un nom significatif à la classe, ça permettra de coder vos pages web plus vite.
NB : On ne peut spécifier qu’une seule classe dans l’attribut d’un élément HTML.
Ainsi, l’exemple suivant est faux :
<p class="gauche" class="rouge"> Ah oui, là ça sent mauvais</p>
Continuons notre chemin et rendons visite aux pseudo-classes pour donner du style aux liens.....
25 décembre 2004
Très Bon Plan A NE PAS MANQUER ! Cliquez!!
Des Secrets pour 7€: Un rapport, un script pour réussir à vendre sur Internet. Cliquez!
Mise en page : Le positionnement flottant avec les CSS
CSS : Une mise en page sur 2 colonnes avec la propriété float
Construire un menu avec les CSS
Le recouvrement de blocs
Positionner des blocs en absolu en CSS
Le positionnement relatif en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte
