Travaux pratiques
TROISIÈME PARTIE
142
Cette instruction offre la possibilité d’embellir les lettrines de manière bien plus élaborée. Quelques modifications d’habillage produisent ainsi le résultat de la figure 10-2.
La première lettre du paragraphe s’y distingue par sa couleur, sa graisse et sa grande
taille.
Dans les livres imprimés, les lettrines ne dépassent pas du texte mais en marquent le
coin supérieur, le reste du paragraphe épousant leur forme. Cette technique, mise en
place avec la propriété float, nous est désormais familière (figure 10-3) :
Figure 10–1
Utilisation de
:first-letter
CSS
p {
width: 10em;
}
p:first-letter {
font-weight: bold;
font-size: 3em;
color: #7a0000;
}
HTML
Figure 10–2
Lettrine mise en place
avec
:first-letter (I)
TROISIÈME PARTIE
142
Cette instruction offre la possibilité d’embellir les lettrines de manière bien plus élaborée. Quelques modifications d’habillage produisent ainsi le résultat de la figure 10-2.
La première lettre du paragraphe s’y distingue par sa couleur, sa graisse et sa grande
taille.
Dans les livres imprimés, les lettrines ne dépassent pas du texte mais en marquent le
coin supérieur, le reste du paragraphe épousant leur forme. Cette technique, mise en
place avec la propriété float, nous est désormais familière (figure 10-3) :
Figure 10–1
Utilisation de
:first-letter
CSS
p {
width: 10em;
}
p:first-letter {
font-weight: bold;
font-size: 3em;
color: #7a0000;
}
HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque laoreet feugiat massa. Etiam vitae massa. Vivamus aliquam
aliquam pede. Suspendisse rutrum sollicitudin metus
Figure 10–2
Lettrine mise en place
avec
:first-letter (I)