Pseudo-classe  "first-line"

La pseudo-classe :first-line sert à définir l'apparence de la première ligne d'un paragraphe qui est affiché en majuscules. Cette mise en forme assez spéciale, se trouve aussi utilisée avec le pseudo-style "first-letter" dans une composition intéressante. Attention tous les navigateurs ne supportent pas encore ce style. On l'appelle aussi "pseudo-style" ou "pseudo-élément".

Ce pseudo-élément ainsi nommé car il n'est rattaché à aucun autre élément, ne bénéficie pas de l'hérédité. Il est partiellement semblable au pseudo-style "first-letter" auquel il est parfois associé.

Le pseudo-élément :first-line ne peut s'attacher qu'à un élément de type bloc.

En conséquence la longueur de la première ligne est variable, elle dépendra de la largeur du conteneur (boîte), de la taille de police... bien adapter son texte en fonction des majuscules obtenues.

Seules les propriétés suivantes peuvent lui être appliquées

- Les propriétés de spécification de police
- "color" = couleur du texte
- "background" = image ou couleur d'arrière plan
- "word-spacing" = propriété pour l'espacement entre les mots
- "letter-spacing" = propriété pour l'espacement entre les caractères
- "text-decoration" = souligner, surligner, barrer
- "vertical-align" = position de la ligne par rapport au texte
- "text-transform" = minuscules ou majuscules
- "line-height" = hauteur minimale ou exacte des boîtes en ligne
- "text-shadow" = pour ombrer du texte
- "clear" = environnement des boîtes adjacentes

Certains navigateurs ne supportent pas toutes ces propriétés.

---

 

Code dans HEAD premier exemple

.ligne1:first-line
{
font-variant: small-caps ;
font-family: times, arial, sans-serif ;
font-size: 16pt ;
text-align: justify ;
}

 

Code dans BODY premier exemple

<p class="ligne1">Voici le premier exemple ... </p>

PREMIER exemple

 

Ceci est un exemple traité sans avoir placé de boîte pour encadrer l'élément, et le texte en majuscules va donc courir normalement sur toute la ligne.

 

NOTA - Voici qu'une explication s'impose, pour préciser que le PSEUDO-STYLE est ici inopérant si la propriété SMALL-CAPS (majuscules) n'est pas précisée. En effet en se référant à la définition de la page 2, vous retrouvez ici la règle appliquée, avec ".ligne1:first-line" comme sélecteur sélecteur, puis le bloc de déclaration avec la propriété "font-variant" et sa valeur "small-caps".
Vous obtenez ainsi à la fois des caractères en majuscules et à la première ligne de votre bloc seulement.

 

---

 

Code dans HEAD deuxième exemple

.ligne2:first-line
{
font-variant: small-caps ;
font-family: times , arial ,sans-serif ;
font-size: 14pt ;
color: green ;
text-align: justify ;
}

Code dans BODY deuxième exemple

<p class="ligne2">Avec ce nouvel exemple on obtient ... de cette page.
<font-color= "#0000FF ; "> Rien n'empêche de placer... suivant ci-dessous. </font> </p>

DEUXIEME exemple

 

---

 

Code dans HEAD troisième exemple

h4:first-letter {color: #FF0000 ; font-size: 100% ; }

h4:first-line {color: #0000FF ; }

Code dans BODY troisième exemple

<h4>Premier article</h4>

 

TROISIEME exemple

 

Vous pouvez ainsi avoir une première ligne en majuscules et codifier une lettrine pour la première lettre de chacune de ces lignes. Cette possibilité peut être agréable par exemple pour un sommaire ou encore une page de démonstration...

---

 

Rien ne vous empêche si besoin de placer une classe ainsi codifiée : .majuscules:first-line{ font-family: times, arial, sans-serif ; font-size: 14pt ; text-align: justify ; color: green ; text-transform: uppercase ; ) et ...

C'est parfait pour un texte qui n'atteint pas la ligne, sinon !!!

 

---

De même pour un usage ponctuel vous pouvez simplement utiliser la propriété "font-variant" et sa valeur "small-caps" à l'aide de la balise SPAN, ce qui donne le code suivant placé en ligne, comme vous le constatez dans ce paragraphe avec le mot "simplement" : <span style=" font-variant: small-caps ; color:red ; font-size 12pt ; " > xxxxxx </span>.

 

---

 

Pour terminer cette page, un dernier exemple,

Code dans HEAD

.ligne3:first-line { font-weight: bold ; }
.ligne3:first-letter { font-size: 300% ; float: left ; }

Code dans BODY

<p class="ligne3">Essai de texte {:-&gt;&gt;<br>avec une belle lettrine... </p>

 

Résultat exemple