ZONE CSS
Information accessibilité
Le laboratoire : Lettrine
Page d'introductionDéfinition
La lettrine est une lettre ornée qui correspond à la premiere lettre majuscule d'un paragraphe ou chapitre. Voir des images de lettrine
Premier test de lettrine
Avec first-letter
Le premier test de lettrine est effectué avec le sélecteur css first-letter.
Code HTML :
Code CSS :
width:150px;
border:1px solid #999999;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
#lettrine:first-letter {
border:1px solid red;
font-family:Times New Roman, Times, serif;
font-size:30px;
color:red;
width:50px;
height:50px;
float:left;
}
Code HTML :
Exemple de code :
<p id="lettrine">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec.</p>Code CSS :
Exemple de code :
#lettrine{width:150px;
border:1px solid #999999;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
#lettrine:first-letter {
border:1px solid red;
font-family:Times New Roman, Times, serif;
font-size:30px;
color:red;
width:50px;
height:50px;
float:left;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec.
Conclusion
Le sélecteur first-letter semble bien sélectionner la première lettre du paragraphe.
Mais il refuse de le transformer en type bloc sous Internet Explorer et Firefox, cela nous empèche de lui donner un taille (width et height).
Donc l'utilisation du sélecteur first-letter ne semble pas adaptée pour faire une lettrine dont vous voulez fixer une taille; par exemple dans le cas où vous voudriez mettre une image de fond à la lettrine.
Le padding fonctionne, mais le padding vertical entraine un bug d'affichage sous internet explorer.
Mais il refuse de le transformer en type bloc sous Internet Explorer et Firefox, cela nous empèche de lui donner un taille (width et height).
Donc l'utilisation du sélecteur first-letter ne semble pas adaptée pour faire une lettrine dont vous voulez fixer une taille; par exemple dans le cas où vous voudriez mettre une image de fond à la lettrine.
Le padding fonctionne, mais le padding vertical entraine un bug d'affichage sous internet explorer.
Second test de lettrine
Avec une classe css
Le second test de lettrine est effectué avec le sélecteur par classe.
Code HTML :
Code CSS :
width:150px;
border:1px solid #999999;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
#lettrine span.lettrine{
border:1px solid red;
font-family:Times New Roman, Times, serif;
font-size:30px;
color:red;
width:50px;
height:50px;
float:left;
}
Copie d'écran :
Code HTML :
Exemple de code :
<p id="lettrine"><span class="lettrine">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec.</p>Code CSS :
Exemple de code :
#lettrine{width:150px;
border:1px solid #999999;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
#lettrine span.lettrine{
border:1px solid red;
font-family:Times New Roman, Times, serif;
font-size:30px;
color:red;
width:50px;
height:50px;
float:left;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec.
Copie d'écran :
Conclusion
Contrairement au sélecteur first-letter, la première lettre du paragraphe est bien transformer en type bloc sous Internet Explorer et Firefox.
Nous pouvons donc lui donner un taille (width et height).
Nous pouvons donc lui donner un taille (width et height).