• Première ligne

    Des "pseudo-éléments" peuvent nous permettre de décorer facilement nos textes.

    On peut agrandir, colorer, changer de police... la première lettre de chaque paragraphe par ::first-letter{...}

    On peut donner un style à la première ligne de chaque paragraphe par ::first-line{ ...}

    On peut placer un élément (petite image souvent) devant et/ou après le premier mot et le dernier mot d'un paragraphe par ::before{content url(..);} et/ou ::after{content url(...);}

    Une limitation tout de même: si vous placer une   image en début de texte, celle-ci sera considérée comme la première lettre et ne sera pas colorée.

    J'ai écrit ces lignes normalement, sans entrer dans le CSS, en choisissant juste la taille de la police par défaut; ouvrons le CSS et regardons comment le programme a traduit mes lignes:

    <p><span style="font-size: 12pt;">Des "pseudo-&eacute;l&eacute;ments" peuvent nous permettre de d&eacute;corer facilement nos textes.</span></p>
    <p><span style="font-size: 12pt;">On peut agrandir, colorer, changer de police... la premi&egrave;re ligne de chaque paragraphe par ::first-letter{...}</span></p>
    <p><span style="font-size: 12pt;">On peut donner un style &agrave; la premi&egrave;re ligne de chaque paragraphe par ::first-line{ ...}</span></p>
    <p><span style="font-size: 12pt;">On peut placer un &eacute;l&eacute;ment (petite image souvent) devant et/ou apr&egrave;s le premier mot et le dernier mot d'un paragraphe par ::before{content url(..);} et/ou ::after{content url(...);}</span></p>
    <p><span style="font-size: 12pt;">Une limitation tout de m&ecirc;me: si vous placer une image en d&eacute;but de texte, celle-ci sera consid&eacute;r&eacute;e comme la premi&egrave;re lettre et ne sera pas color&eacute;e.</span></p>
    <p><span style="font-size: 12pt;">J'ai &eacute;crit ces lignes normalement, sans entrer dans le CSS, en choisissant juste la taille de la police par d&eacute;faut; ouvrons le CSS et regardons comment le programme a traduit mes lignes:</span></p> 

    Nous allons ajouter un code CSS pour que la première ligne de chaque paragraphe (p) soit de taille et de couleurs différentes du texte.

    <style><!--
    p::first-letter{color:green; font-size:16pt; text-shadow:1px 1px black;}}
    --></style>

    Chaque paragraphe voit sa première lettre en vert et en grand, ce qui n'est pas partout souhaité mais, ce n'est pas le sujet !
    Ajoutons la première ligne de chaque paragraphe en couleur rouge et en italique
    Comme vous le voyez ici, ce qui n'est pas première ligne reprend la couleur par défaut que j'ai définie, en l'occurrence, le noir et en police par défaut.

    <style><!--
    p::first-letter{color:green; font-size:16pt; text-shadow:1px 1px black;}}
    p::first-line {color: red; font-style: italic;}
    --></style>

    Nous pourrions importer une police externe (voir cette page) pour donner plus de relief à      notre première lettre mais regardons comment ajouter une image en début et à la fin de certains paragraphes.

    Comme je l'ai indiqué, mettre une          image en début de ligne annule la décoration de la première lettre.

    <style><!--
    p::first-letter{color:green; font-size:16pt; text-shadow:1px 1px black;}
    p::first-line {color: red; font-style: italic;}
    #aft::after {content: url(http://gif.toutimages.com/images/bureautique/livres/livre_001.gif);}
    #aft::before {content: url(http://gif.toutimages.com/images/bureautique/livres/livre_002.gif);}
    --></style>

    Et au moins un autre pseudo élément existe, qui permet des modifications de présentation à la sélection d'un mot ou d'un paragraphe mais il ne présente pas, à mes yeux, un grand intérêt.
    Pour le plaisir, ajout d'une police externe sur ce paragraphe: première lettre en jaune.

    T puis, les lettrines sont des images et il faut les placer en tête, par ::before, par exemple.