Support de cours - Lita

5 Bonus
Voici quelques cas pratiques simples inspirés de documents usuels. Ils font intervenir
de façon simple et immédiate les notions abordées dans ce cours. Ces exemples peuvent
servir de base à des mises en page plus évoluées.
1 Lettrine
Une lettrine est une lettre initiale décorée placée en tête d’un texte et occupant une
hauteur supérieure à la ligne courante.
Créer une lettrine est très simple. Il suffit de combiner la pseudo-classe first-letter
pour sélectionner la première lettre d’un paragraphe, puis de lui appliquer une position
flottante à gauche (pour les langues écrites de gauche à droite). Il ne faut pas oublier
d’augmenter sa taille, et le tour est joué !
p:first-letter {
}
float: left;
font-size: 300%;
Bien sûr, on peut changer la police de la lettrine, sa couleur, son fond, ses bordures, etc.
2 Notes de marge
Pour obtenir des notes de marge, nous combinons le positionnement absolu, l’utilisation
de balises span, la définition d’une classe, ainsi que la modification des marges
d’un document.
Par exemple, prenons le document Html suivant :
Notes de marge
38