Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

HTML

Introduction au HTML

RDFFav

Formation - 7. Les sélecteurs et la classe CSS

Nous verrons dans ce tutoriel les différents sélecteurs. De la pseudo-classe à la classe CSS.

Formation - Introduction

On a vu dans la formation précédente que le sélecteur permettait de styliser, à l’aide des propriétés, tout élément HTML dans une feuille de style. Le problème avec cette méthode, c’est que l’ensemble des références à l’élément sera affecté par le nouveau style, d’un bout à l’autre du document. Pour n’affecter qu’une seule itération ou un groupe spécifique de référence, il existe plusieurs méthodes. Nous verrons dans ce tutoriel les différents sélecteurs :

La pseudo-classe

La pseudo-classe est une classe prédéfinie en CSS. Ce n’est pas réellement une classe, mais une mnémonique réservée qui peut être ajoutée à la fin du sélecteur pour indiquer l’état spécifique dans lequel l’élément doit se retrouver pour être ciblé par la déclaration. La pseudo-classe :hover, par exemple, permettra d’appliquer un style spécifique lorsque l’utilisateur survole l’élément ciblé par le sélecteur (rollover). La pseudo-classes permet d’appliquer un style à un élément non seulement en fonction de son état spécifique, mais aussi en fonction de facteurs externes, comme l’historique de navigation. Par exemple :visited si un hyperlien a déjà été visité par l’usager.

Pour définir une pseudo-classe, il faut ajouter le deux-points : au bout du sélecteur suivi de la pseudo-classe. :

Formation - Déclaration CSS de la pseudo-classe

Noter qu’on peut ajouter plusieurs pseudo-classes une à la suite des autres en ajoutant à chaque fois le deux-points :

Si la pseudo-classe n’est pas très importante pour le débutant, qui ne les utilisera pas vraiment, il en existe toutefois 4 indispensables pour styliser l’hyperlien :

a { color: blue; }
a:link {color: blue;} /* lien non visité */
a:visited {color: purple;} /* lien visité */
a:focus {color: green;} /* lien visé */
a:hover {color: green;} /* lien survolé */
a:active {color: red;} /* lien activé */

Liste des pseudo-classes standards
:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited

Le pseudo-élément

De la même manière que la pseudo-classes, le pseudo-élément, plus rare, est une mnémonique ajoutée à un sélecteur pour styliser certaines parties de l’élément ciblé par la déclaration. Ainsi, le pseudo-élément ::first-line permettra de ne cibler que la première ligne d’un élément visé par le sélecteur. Fait à noter, on ne peut utiliser qu’un seul pseudo-élément dans un sélecteur contrairement à la pseudo-classe. Le pseudo-élément doit apparaître après les sélecteurs. Et depuis le CSS3, on utilise deux fois le caractère deux-points : pour préfixer les pseudo-éléments (afin de pouvoir les différencier des pseudo-classes). Toutefois, la plupart des navigateurs autorise toujours un seul deux-points!

Exemple :

<style>
p::first-line {
  color: blue;
}
</style>

<p>
  Mon texte dans le premier paragraphe affiché en bleu.<br />
  Ma deuxième ligne du paragraphe affiché normalement.
</p>

Mon texte dans le premier paragraphe affiché en bleu.
Ma deuxième ligne du paragraphe affiché normalement.

Liste des pseudo-éléments
::after
::before
::cue
::first-letter
::first-line
::selection
::backdrop
::placeholder
::marker
::spelling-error
::grammar-error

Le sélecteur ID

Le sélecteur d’identification utilise l’attribut ID d’un élément HTML pour sélectionner un élément spécifique. L’identification d’un élément doit être absolument unique dans une page, donc le sélecteur d’identification est utilisé pour sélectionner un élément unique! Même si le navigateur autorise plusieurs ID dans une même page (bien entendu), cette pratique doit être évitée à tout prix, car l’attribue ID d’un élément est aussi utilisé par la programmation JavaScript.

Pour sélectionner un élément avec un identifiant spécifique, il faut ajouter le croisillon (en anglais le caractère « hash ») #, suivi de l’id de l’élément déclaré dans l’attribut ID cette fois sans croisillon #.

Le style ci-dessous sera appliqué à l’élément HTML avec l’attribut id="monObjet" :

<style>
#monObjet {
  text-align: center;
  color: red;
}
</style>

<p id="monObjet">
  Mon paragraphe identifié par un identifiant unique...
</p>

Attention : L’id ne doit jamais commencer par un nombre.


La classe CSS

La classe CSS est un sélecteur personnalisé spécifié à l’aide de l’attribut class. Pour sélectionner un élément avec une classe spécifique, il faut ajouter un point devant la classe . suivit de la classe :

Formation - La classe CSS

<style>
  .maClasse {color: blue;}
</style>

<p>Mon texte normal sans classe.</p>
<p class="maClasse">Mon texte en bleu.</p>

Mon texte normal sans classe.

Mon texte en bleu.


Vous pouvez également préciser l’élément HTML qui sera affecté par la classe. Pour ce faire, commencez par le nom de l’élément suivit du . et du nom de la classe :

<style>
  p.maClasse {color: blue;}
</style>

<p class="maClasse">Mon texte en bleu.</p>

Les éléments HTML peuvent également se référer à plus d’une classe. Dans l’exemple suivant, le paragraphe fait référence à deux classes, la couleur bleu (avec la classe .bleu) et l’alignement centré (avec la classe .centre) :

<style>
  .bleu {color: blue;}
  .centre {text-align: center;}
</style>

<p class="bleu centre">Mon texte bleu (avec la classe .bleu) et aligné au centre (avec la classe .centre).</p>

Mon texte en bleu et centré.


Cette technique de séparer le style du contenu offre une liberté et une flexibilité sans pareil en programmation. Vous pouvez créer le nombre de classes que vous voulez. Construire de véritable librairie de style. Une bonne pratique consiste à se faire une feuille de styles de base, les grandes lignes pour la base d’un site Web. Ensuite, peaufiner une foule de feuilles de styles pour différent thème que vous pourrez appliquer en une seule ligne de code pour l’ensemble d’un site Web. Par exemple une version bleue, une autre verte et ainsi de suite. Un autre avantage est de concentrer vos feuilles de styles globales sur un domaine et partager les adresses uniques pour l’ensemble de vos sites Web.

D’ailleurs la mode est d’utiliser des cadriciels comme Bootstrap ou fundation. C’est à dire des feuilles de styles développés par des spécialistes avec tout ce dont vous aurez besoin (souvent beaucoup trop!) pour construire un site Web professionnel.

Conclusion de la formation
  1. La pseudo-classe
  2. Le pseudo-élément
  3. Le sélecteur id
  4. La classe CSS


Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

10/10 sur 1 revues.
       Visites : 682 - Pages vues : 722
X

Trucsweb.com Connexion

X

Trucsweb.com Mot de passe perdu

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte