WebPetit

La pseudo-classe CSS before est utilisé avec content, permet d’insérer un texte ou une image au début du contenu d’un élément.

#mon_identifiant:before {
content:url(../lien/vers/mon_image);
}

Before est un pseudo-élément (qui fait référence à des parties de texte qui ne sont pas forcément délimités par des balises HTML).
Elle permet de rajouter un texte ou une image au début du contenu d’un élément,

Exemple :

CSS

#avant:before{
content:url("http://www.web-petit.com/wp-content/themes/wp_theme/images/facebook.png");
}

HTML

<div id="avant">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis,consectetur congue elit.
</div>

La pseudo-classe CSS active permet de modifier le style des liens lors du clic de la souris.

#mon_identifiant a:active {
color:chocolate;
font-weight:bolder;
}

Visited est un pseudo-élément (qui fait référence à des parties de texte qui ne sont pas forcément délimités par des balises HTML).
Elle permet de modifier le style des liens lors du clic de la souris.

Exemple :

CSS

#texte a:active{
color:chocolate;
font-weight:bolder;
}

#texte a:link{
color:blue;
}

HTML

<div id="texte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Suspendisse pharetra placerat felis</a>, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</div>

La propriété CSS text-transform permet de mettre un texte en majuscule, ou en minuscule.

#mon_identifiant{
text-transform:uppercase;
}

Elle permet la capitalisation d’un bloc de texte.
Les valeurs possibles sont:

• capitalize: début des mots en majuscules.
• uppercase: tout mettre en majuscules.
• lowercase: tout mettre en minuscules.
• none: normal (par défaut).
• inhérit: hérite de son parent

Exemple :

CSS

p{
text-transform:uppercase;
}

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

La pseudo-classe CSS visited permet de modifier le style des liens visités des éléments sur lesquels elle est appliquée.

#mon_identifiant a:visited {
color:red;
}

Visited est un pseudo-élément (qui fait référence à des parties de texte qui ne sont pas forcément délimités par des balises HTML).
Elle permet de modifier le style des liens visités.

Exemple :

CSS

#texte a:visited{
color:red;
}

#texte a:link{
color:chocolate;
}

HTML

<div id="texte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a href="#"> Suspendisse pharetra placerat felis</a>, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius.<a href="#"> Mauris eget erat</a> vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</div>

La pseudo-classe CSS link permet de modifier le style des liens des éléments sur lesquels elle est appliquée.

#mon_identifiant a:link {
color:blue;
}

Link est un pseudo-élément (qui fait référence à des parties de texte qui ne sont pas forcément délimités par des balises HTML).
Elle permet de modifier le style des liens.

Exemple :

CSS

#texte a:link {
color:blue;
}

HTML

<div id="texte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Suspendisse pharetra placerat felis</a>, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</div>

La pseudo-classe CSS hover permet de modifier le style des liens lorsque le curseur est dessus.

#mon_identifiant a:hover {
color:chocolate;
}

Hover est un pseudo-élément (qui fait référence à des parties de texte qui ne sont pas forcément délimités par des balises HTML).
Elle permet de modifier le style des liens, lors du passage du curseur dessus.

Exemple :

CSS

#texte a:link{
color:blue;
}

#texte a:hover{
color:chocolate;
}

HTML

<div id="texte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Suspendisse pharetra placerat felis</a>, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</div>