Effets sur les caractères

La mise en forme des textes permet de changer les polices de caractères, de mettre en gras, en couleur, en italique, de souligner et beaucoup d'autres choses encore :

• font-size permet de préciser la taille de police utilisée. Il existe deux types d'unités :
• les unités absolues : px (pixels), cm (centimètres), ...
• les unités relatives : % (par rapport à la taille de police du conteneur), em, etc.
• font-family permet de spécifier la famille de police pour le texte.
  Comme une police donnée n'est pas nécessairement présente sur le poste de l'utilisateur, on précise en général plusieurs choix séparés par des virgules.
• font-weight permet de définir la graisse de la police ;
• font-style permet d'afficher du texte en italique ;
• text-decoration permet de souligner l'élément sélectionné ;
• font-variant permet d'afficher du texte en petites majuscules.

Bac à sable : Mettre en forme les textes

Dans ce bac à sable, les dimensions sont en pixels.

Ci-contre, on peut modifier à loisir l'apparence du texte du paragraphe.

Couleur :
Taille :

18

Police de Caractère : Times New Roman Impact Arial Verdana Helvetica Courier New cursive
Épaisseur : normal gras très gras fin
Style : normal italique
Decoration : normal souligné surligné barré
Affichage : normal petites majuscules

Code CSS

p {                                 /* Mise en forme des paragraphes */
    color : #000000;                /* Couleur du texte */
    font-size : 11px;               /* Taille de la police en pixels */
    font-family : Times New Roman;  /* Police de caractère */
    font-weight : normal;           /* Graisse de la police */
    font-style : normal;            /* Apparence de la police */
    text-decoration : none;         /* Décoration de la police */
    font-variant : normal;          /* Affichage de la police */
}

Bac à sable : Les ombres

Dans ce bac à sable, on peut attribuer une ombre au texte ou bien au conteneur du texte (ici le paragraphe).

L'homme qui tire plus vite que son ombre !

Ombrer le texte
Décalage horizontal (px) :
Décalage vertical (px) :
Floutage (px) :
Couleur :
Interligne :

Ombrer le conteneur
Décalage horizontal (px) :
Décalage vertical (px) :
Floutage (px) :
Couleur :

Code CSS

p {                                     /* Mise en forme des paragraphes */
    text-shadow: 6px -6px 2px #000000;
    line-height: 1.5;
    box-shadow: -4px 7px 5px #0000ff;
}

Exercice n°1

Dans le fichier qui suit, sans toucher au code HTML :

1. Encadrer par une bordure verte chacune des listes.
2. Mettre sous fond jaune le dernier item de chaque liste.
3. Écrire en italique le premier item de chaque liste.
4. Écrire en petite majuscule l'élément d'identifiant id="important".
5. Écrire en gras les éléments d'attribut class="coucou".

<!-- Partie html à ne pas modifier -->
<p id="important" class="coucou">
    La liste ci-dessous est vraiment importante :
</p>
<ul>
    <li>élément 1</li>
    <li class="coucou">élément 2</li>
    <li>élément 3</li>
    <li>élément 4</li>
</ul>

<p  class="coucou">
    Cette seconde liste l'est un peu moins.
</p>
<ul>
    <li>élément 1</li>
    <li>élément 2</li>
    <li class="coucou">élément 3</li>
</ul>

<p>
    Cette dernière liste semble peu intéressante.
</p>       

<ul>
    <li class="coucou">élément a</li>
    <li>élément b</li>
    <li>élément c</li>
</ul>

/* Partie css modifiable */
ul {

}

Une piste ?

En plus du pseudo-élément :nth-of-type(), on peut utiliser les sélecteurs :first-of-type et :last-of-type pour cibler respectivement le premier et le dernier élément d'un conteneur parent.

Travail originel CC-BY-NC-SA : Nicolas Buyle-Bodin, Jean-Manuel Meny et Mcikaël Bordonaro. Autres modifications par Cédric Frayssinet et Maxime Chourré