Le CSS nous permet aussi de modifier l'apparence des éléments de façon dynamique, c'est-à-dire que des éléments peuvent changer de forme une fois que la page a été chargée ; et tout cela grâce aux pseudo-classes.
Stylisez un élément au survol de la souris avec :hover
La pseudo-classe :hover s'applique lorsque l'utilisateur survole un élément avec sa souris (:hover signifie d'ailleurs “survoler”), et va nous permettre d'y appliquer un style.
Déclarez le sélecteur sur lequel le style va s'appliquer
Prenons un exemple où on applique du style sur les liens hypertextes. Pour déclarer un style qui va "s'activer" dès que le visiteur du site web va pointer la souris dessus, on doit écrire notre CSS comme ceci :
a:hover {
// Insérer ici les propriétés CSS à appliquer
}D'où il sort ce a qu'on a mis avant la pseudo-classe :hover ?
Rappelez-vous le chapitre "Créez un lien hypertexte", c'est comme ça qu'on annonce un lien hypertexte, avec une balise <a> . On pourrait très bien appliquer un style au survol d'un paragraphe (on écrirait alors p:hover), ou bien d'un élément auquel on a attribué une classe ma-classe (et on écrirait .ma-classe:hover).
À partir de là, c'est à vous de définir l'apparence que doivent avoir les liens lorsqu'on pointe dessus. Laissez libre cours à votre imagination, il n'y a pas de limite.
Définissez le style qui va s'appliquer au sélecteur
Dans le bout de code ci-dessous, on va appliquer une couleur différente pour le titre, le paragraphe, et à l'élément de la classe mon-element .
On a la structure suivante en HTML :
<body>
<div class="mon-element">
<h1>Ma page de pseudo-classes</h1>
<p>Les pseudo-classes sont très importantes afin de créer des apparences dynamiques en fonction des interactions avec les utilisateurs.</p>
</div>
</body>…et le code suivant en CSS :
.mon-element:hover {
background-color: #BEAEE2;
color: white;
}
h1:hover {
color: #CDF0EA;
}
p:hover {
color: #F9CEEE;
}… ce qui nous donne :
Stylisez un élément au moment du clic avec :active
La pseudo-classe :active permet d'appliquer un style particulier au moment du clic.
Essayons de changer la couleur de fond du lien hypertexte lorsque l'on clique dessus. Pour l'occasion, on aura au préalable ajouté un lien hypertexte dans le bout de code HTML plus haut, et désactivé le changement de style de mon-element au hover.
On écrit dans le fichier CSS :
a:active {
background-color: #C1FFD7;
}On a alors :
Stylisez un élément sélectionné par le visiteur avec :focus
Là, c'est un peu différent. La pseudo-classe :focus applique un style lorsque l'élément est sélectionné.
C'est-à-dire ?
On peut notamment utiliser la touche "tab" ⇥ du clavier pour déclencher le focus sur chacun des éléments.
Cette pseudo-classe pourra être appliquée à d'autres balises HTML que nous n'avons pas encore vues, comme les éléments de formulaires. Nous nous pencherons davantage sur le focus dans ce chapitre.
Dans notre bout de code CSS, on écrit :
a:focus {
background-color: #FCFFA6;
}Ce qui nous permet d'obtenir, avec la sélection depuis la touche "tab" du clavier : ⇥
Stylisez un lien hypertexte déjà consulté avec :visited
Il est possible d'appliquer un style à un lien hypertexte qui a déjà été "cliqué". Par défaut, le navigateur colore un lien en violet. Mais grâce à la pseudo-classe :visited , on peut changer ; même si, en pratique, sur les liens consultés, on ne change souvent pas grand-chose à part la couleur.
Si vous ne souhaitez pas que les liens déjà visités soient colorés d'une façon différente qu'un lien hypertexte non cliqués, il vous faudra leur appliquer la même couleur qu'aux liens normaux. De nombreux sites web font cela (OpenClassrooms y compris !).
Dans notre exemple, on ajoute au code CSS :
a:visited {
color: black;
}La couleur est désormais la même, que le lien ait été visité ou non.
Tout cela semble un peu magique comme ça : il existe de nombreux sélecteurs, une grande quantité de propriétés CSS, permettant d'obtenir des effets particulièrement avancés (souvenez-vous du CSS Art).
Allez plus loin avec les sélecteurs avancés
En CSS, le plus dur est bien souvent de réussir à cibler l'élément dont on veut changer le style. Vous avez appris tout un tas de manières d'appliquer du style à des éléments, avec les sélecteurs et les pseudo-classes. Mais sachez que nous n'avons pas tout couvert dans cette partie. Vous avez eu un aperçu de la puissance des sélecteurs avec le combinateur de voisin direct (ou siblings) dans la vidéo d'introduction, mais il en existe d'autres. En voici quelques-uns :
Le sélecteur universel *
Le sélecteur universel * sélectionne toutes les balises sans exception.
* {
/* Insérez ici votre style */
}Le sélecteur d'une balise contenue dans une autre : A B
Prenons un exemple avec ce code écrit dans le fichier HTML :
<h3>Titre avec <em>texte important</em></h3>Dans CSS, on écrirait alors :
h3 em {
/* Insérez ici votre style */
}Ce morceau de code signifie en français :
"Applique ce style à toutes les balises
<em>situées à l'intérieur d'une balise<h3>".
Le sélecteur d'une balise qui en suit une autre : A + B
Dans CSS, on écrirait par exemple :
h3 + p {
/* Insérez ici votre style */
}Ce qui aura pour résultat de sélectionner la première balise <p> située après un titre <h3>.
Exemple de code HTML associé :
<h3>Titre</h3>
<p>Paragraphe</p>Le sélecteur d'une balise qui possède un attribut : a[attribut]
a[title] {
/* Insérez ici votre style */
}En français, ce morceau de code signifie :
"Sélectionne tous les liens hypertexte
<a>qui possèdent un attributtitle".
Exemple de code HTML associé :
<a href="http://site.com" title="Infobulle">Il existe des variantes de cette forme de sélecteur :
a[attribut="Valeur"]: une balise qui possède un attribut et une valeur exacte, comme :
a[title="Cliquez ici"] {
/* Insérez ici votre style */
}C'est la même chose, mais l'attribut doit en plus avoir exactement pour valeur “Cliquez ici”.
Exemple de code HTML associé :
<a href="http://site.com" title="Cliquez ici">a[attribut*="Valeur"]: une balise, un attribut et une valeur, comme :
a[title*="ici"] {
/* Insérez ici votre style */
}Idem, l'attribut doit cette fois contenir dans sa valeur le mot “ici” (peu importe sa position).
Exemple de code HTML associé :
<a href="http://site.com" title="Quelque part par ici">À vous de jouer !
C'est le moment de mettre en pratique pour le site de Robbie Lens ce que vous venez d'apprendre, en ajoutant des apparences dynamiques !
Pour cette étape, vous devrez :
souligner les liens au survol ;
permettre aux liens ayant la classe "cta" d'avoir un dégradé de la couleur
#696484à la couleur#8788BAau survol (attention, ceux-ci ne sont pas soulignés au survol) ;dans les icônes de l'en-tête et du pied-de-page qui permettent de faire des liens, réduire l'opacité à 0.5 au survol.
En résumé
En CSS, on peut modifier l'apparence de certaines sections dynamiquement, après le chargement de la page, lorsque certaines interactions se produisent. On utilise pour cela les pseudo-classes.
La pseudo-classe
:hovermodifie l'apparence d'un élément au survol (par exemple :a:hovermodifie l'apparence des liens hypertextes lorsque la souris pointe dessus).La pseudo-classe
:activemodifie l'apparence des liens hypertextes au moment du clic.La pseudo-classe
:visitedmodifie l'apparence des liens hypertextes lorsqu'un lien a déjà été visité.La pseudo-classe
:focusmodifie l'apparence d'un élément sélectionné via la touche "tab".Encore aujourd'hui, certaines propriétés ne sont pas totalement reconnues par tous les navigateurs.
Bien ! Vous commencez à vous débrouiller en CSS, mais vos pages restent encore assez désordonnées. Dans la prochaine partie, vous allez apprendre à créer de véritables mises en page à l'aide du CSS. Mais avant cela, vous allez pouvoir tester vos connaissances dans le quiz. Alors à tout de suite !
