CSS Les pseudo-éléments
CSS de pseudo-éléments sont utilisés pour ajouter des effets spéciaux à certains sélecteurs.
Syntaxe
La syntaxe des pseudo-éléments:
selector:pseudo-element {property:value;}
Classes CSS peut également être utilisé avec les pseudo-éléments:
selector.class:pseudo-element {property:value;}
Le: first-line pseudo-élément
La "première ligne" pseudo-élément est utilisé pour ajouter un style spécial à la première ligne d'un texte.
Dans l'exemple suivant le navigateur formats la première ligne de texte dans un élément p selon le style de la "première ligne" pseudo-élément (où le navigateur brise la ligne, dépend de la taille de la fenêtre de navigateur):
Remarque: La «première ligne» pseudo-élément ne peut être utilisé avec les éléments de bloc.
Remarque: Les propriétés suivantes s'appliquent à la "première ligne" pseudo-élément:
- propriétés de la police
- les propriétés des couleurs
- propriétés d'arrière-plan
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- texte-transformer
- la hauteur de ligne
- effacer
Le: first-letter pseudo-élément
La "première lettre" pseudo-élément est utilisé pour ajouter un style spécial à la première lettre d'un texte:
Remarque: Le "first-letter" pseudo-élément ne peut être utilisé avec les éléments de bloc.
Remarque: Les propriétés suivantes s'appliquent à la "première lettre" pseudo-élément:
- propriétés de la police
- les propriétés des couleurs
- propriétés d'arrière-plan
- les propriétés de marge
- propriétés de remplissage
- les propriétés de bordure
- text-decoration
- vertical-align (seulement si "float" est "none")
- texte-transformer
- la hauteur de ligne
- flotter
- effacer
Les pseudo-éléments et des classes CSS
Les pseudo-éléments peuvent être combinés avec des classes CSS:
p.article:first-letter {color:#ff0000;}
<p class="article">A paragraph in an article</p>
<p class="article">A paragraph in an article</p>
L'exemple ci-dessus affichera la première lettre de tous les paragraphes avec class = "article", en rouge.
Multiple pseudo-éléments
Plusieurs pseudo-éléments peuvent également être combinés.
Dans l'exemple suivant, la première lettre d'un paragraphe sera rouge, dans une taille de police xx-large. Le reste de la première ligne sera bleue, et en petites capitales. Le reste du paragraphe sera la taille de la police par défaut et la couleur:
Exemple
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
Essayez vous-même »
CSS - Le: avant pseudo-élément
Le ": avant de« pseudo-élément peut être utilisé pour insérer un contenu avant que le contenu d'un élément.
L'exemple suivant insère une image devant chaque élément <h1>:
CSS - Le: après le Pseudo-élément
Le ": après" pseudo-élément peut être utilisé pour insérer un contenu après le contenu d'un élément.
L'exemple suivant insère une image après chaque élément <h1>:
Toutes les classes CSS pseudo / Eléments
| Sélecteur | Exemple | Exemple de description |
|---|---|---|
| : Lien | a:link | Sélectionne tous les liens non visités |
| : Visited | a:visited | Sélectionne tous les liens visités |
| : Actif | a:active | Sélectionne le lien actif |
| : Hover | a:hover | Sélectionne liens sur la souris sur |
| : Mettre l'accent | input:focus | Sélectionne l'élément d'entrée qui a le focus |
| : La première lettre | p:first-letter | Sélectionne la première lettre de chaque élément <p> |
| : La première ligne | p:first-line | Sélectionne la première ligne de chaque élément <p> |
| : La première enfant | p:first-child | Sélectionne tous les éléments <p> qui est le premier enfant de son parent |
| : Avant | p:before | Insérer le contenu avant de chaque élément <p> |
| : Après | p:after | Insérer le contenu après chaque élément <p> |
| : Lang ( langue ) | p:lang(it) | Sélectionne tous les éléments <p> avec une valeur d'attribut lang en commençant par "il" |
0 commentaires:
Post a Comment
HELLO VISITORS THANKS FOR YOUR VISIT AND COMMENT