Pseudo-classe "first-letter"
La pseudo-classe :first-letter sert à définir des lettrines ou caractères en capitale ouvrant un paragraphe. On obtient ainsi des effets qui sont agréables mais dont il ne faut pas abuser du point de vue design de votre page. 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é. Ce genre de lettre initiale est assimilé à un élément de type en-ligne quand la valeur de sa propriété "loat" est "none", et assimilé à un élément flottant dans les autres cas.
Le pseudo-élément :first-letter admet ces propriétés
:
- Les propriétés de spécification de police
- "color" = pour la couleur du texte
- "background" = propriété d'arrière-plan
- "text-decoration" = souligner, surligner, barrer
- "vertical-align" = position de la lettre par rapport au texte ("vertical-align"
ne s'utilisera que si float a la valeur none.)
- "text-transform" = minuscules ou majuscules
- "line-height" = hauteur minimale ou exacte des boîtes en ligne
- "padding" = propriété de la marge interne
- "margin" = propriété des marges, espacement
- "border" = propriété de bordure (style, taille, couleur
de bordures)
- "float" = flottement, position par rapport aux boîtes environnantes
- "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
.lettrine1: first-letter
{
font-family: times, arial, sans-serif ;
font-style: italic ;
font-size: 4em ;
color: green ;
margin-right: 7px ;
float: left ;
}
Code dans BODY premier exemple
<p class="lettrine1">V<span style="font-size:16pt
; font-style:italic ; ">oici un premier exemple dans ... </span>
PREMIER exemple
Voici un premier exemple dans toute sa simplicité, qui permet de mettre en place une "lettrine". Son effet est bon, mais il ne faut pas en abuser, comme de toutes les bonnes choses, sinon vous allez transformer votre page en sapin de Noël. Pour le code appliqué à ce paragraphe, voyez ci-dessous.
Vous trouvez dans HEAD la classe "lettrine1" qui permet de définir la lettrine et vu que l'héritage ne joue pas il faut définir en premier les polices. Ensuite les déclarations de style, le corps, la couleur, la marge qui "aère" la lettrine par l'espace invisible qu'elle instaure tout autour, et enfin la fonction "float" qui fait que avec la valeur "left" le contenu s'écoule sur son flanc droit. Quant à la balise "span" elle vous permet de définir surtout le style du texte qui suit, pour le garder en harmonie ou même créer un contraste susceptible d'attirer l'attention du visiteur sur un sujet précis.
Code dans HEAD deuxième exemple
.lettrine2: first-letter
{
font-family: arial, verdana,sans-serif ;
font-size: 3em ;
background-color: #00CC00 ;
border: solid 1px #006600 ;
color: yellow ;
font-weight: bold ;
padding: 0.1em ;
margin-right: 7px ;
float: left ;
line-height:100% ;
}
Code dans BODY deuxième exemple
<p class="lettrine2">V<span style="font-size:16pt
; ">oici un deuxième exemple dans ... </span>
DEUXIEME exemple
Voici un deuxième exemple un peu plus élaboré, qui permet aussi de mettre en place une "lettrine". Peut-être d'un meilleur effet, mais il ne faut toujours pas en abuser, comme de toutes les bonnes choses, sinon vous allez transformer votre page en sapin de Noël. Pour le code appliqué à ce paragraphe, voyez en suivant ci-dessous.
Voici donc la classe "lettrine2" qui en en supplément du premier exemple, voit s'ajouter une couleur de fond, une bordure très fine pour ne pas écraser l'ensemble, un padding qui évite à la lettrine de coller à la bordure de la boîte, et un "line-height" qui définie la hauteur de la boîte.
Code dans HEAD troisième exemple
h3:first-letter
{
font-family: arial, verdana, sans-serif ;
font-size: 20pt ;
color: blue ;
text-align: justify ;
margin-right: 3px ;
line-height: 60% ;
float: left ;
}
Code dans BODY troisième exemple
<h3 align="left"> C'est un exemple ...</h3>
TROISIEME exemple
C'est un exemple pour mieux vous décrire les possibilités offertes par le pseudo-élement, qui tout en donnant du relief au texte présenté, ne rend pas la lecture trop lourde.
Vous pouvez aussi très facilement réaliser des lettrines en utilisant la propriété "float" et vous avez l'explication complète à la > > > page 38g
