27. Création de lettrines
La lettrine permet de mettre en valeur la première lettre d’un texte, chapitre ou paragraphe :
- en lui attribuant une taille imposante.
- en la décorant.
Le pseudo-élément first-letter
Variante
• Il s’agit d’isoler la première lettre en la plaçant dans la balise neutre <span> (en ligne).
Cette méthode, dépourvue de sémantique, est à proscrire dans un design bien structuré. Malgré tout, c’est une solution de contournement nécessaire pour obtenir certains effets impossibles avec la technique :first-letter.
accéder à l'article suivant
- en lui attribuant une taille imposante.
- en la décorant.
Le pseudo-élément first-letter
• p:first-letter modifiera la première lettre d’un paragraphe
Exemple : p:first-letter {font-weight: bold;}
• :first-letter admet ces propriétés :
- float
- Les propriétés de spécification de police
- color
- background
- text-decoration
- text-transform
- line-height
- padding
- margin
- border
- text-shadow (pour ombrer du texte)
- clear (environnement des boîtes adjacentes)
- vertical-align (position de la lettre par rapport au texte ("vertical-align" ne s'utilisera que si float a la valeur none.)
Exemple : p:first-letter {font-weight: bold;}
• :first-letter admet ces propriétés :
- float
- Les propriétés de spécification de police
- color
- background
- text-decoration
- text-transform
- line-height
- padding
- margin
- border
- text-shadow (pour ombrer du texte)
- clear (environnement des boîtes adjacentes)
- vertical-align (position de la lettre par rapport au texte ("vertical-align" ne s'utilisera que si float a la valeur none.)
Variante
• Il s’agit d’isoler la première lettre en la plaçant dans la balise neutre <span> (en ligne).
Cette méthode, dépourvue de sémantique, est à proscrire dans un design bien structuré. Malgré tout, c’est une solution de contournement nécessaire pour obtenir certains effets impossibles avec la technique :first-letter.
accéder à l'article suivant
Publicité