Mise en forme des textes

Mettre des textes en majuscules et minuscules

Les propriétés CSS permettent de mettre automatiquement des textes en majuscules dans un texte. Pour cela, il y a 2 sortes de propriétés.

Premièrement, voyons la propriété font-variant. Elle peut prendre 2 valeurs différentes :

• small-caps qui donnera un texte en petites majuscules
• normal qui est la valeur par défaut et donnera un texte normal

Code CSS :

p.normale
{


font-variant: normal;
}



p.petite
{


font-variant: small-caps;
}

Code XHTML :

<p class="normale">texte normale<p>
<p class="petite">texte en capitale </p>

Il y a aussi une autre propriété CSS qui permet de forcer les majuscules: text-transform d'un texte. Elle peut prendre ces valeurs :

• none : ne met aucun effet sur le texte
• lowercase : met toutes les lettres de chaque mot en minuscules
• uppercase : met toutes les lettres de chaque mot en majuscules
• capitalize : met uniquement la première lettre de chaque mot en majuscule

Code CSS :

.aucun {


text-transform:none;
}



.minuscule {


text-transform: lowercase;


}



.majuscule {


text-transform: uppercase;
}



.capitale {


text-transform: capitalize;


}

Code XHTML :

<p class="aucun">None : ne met aucun effet sur le texte</p>
<p class="minuscule">Lowercase : met toutes les lettres de chaque mot en minuscules</p>
<p class="majuscule">Uppercase : met toutes les lettres de chaque mot en majuscules</p>
<p class="capitale">Capitalize : met uniquement la première lettre de chaque mot en majuscule</p>

Espacement entre les caractères : letter-spacing

La propriété letter-spacing permet de spécifier l'espacement entre les caractères du texte. Les règles d'héritage sont applicables pour cette propriété. Elle peut prendre 2 valeurs :

Normal :

La valeur "normale" est la valeur par défaut de la propriété letter-spacing. Elle correspond à l'espacement normal de la police en question.

Valeur de longueur :

C'est une valeur numérique qui détermine la quantité d'espacement entre les lettres. Elle s'ajoute à la valeur normal. Elle peut être exprimée avec des unités de mesure ou en pourcentage. Celle-ci peut prendre une valeur négative. Voici un exemple d'utilisation de la propriété letter-spacing.

Code CSS :

.espace1
{

letter-spacing: -2px;

}

.espace2
{

letter-spacing: 1cm;

}

Code XHTML :

<p class="espace1">ESPACE</p>
<p class="espace2">ESPACE</p>
<p>ESPACE</p>

Le mot ESPACE est écrit de façons différentes. Les caractères de la classe espace 1 sont beaucoup plus serrés entre eux que ceux de la normale.

Espacement entre les mots : word spacing

Si la propriété letter-spacing définit l'espace inter-lettrage, la propriété word-spacing quant à elle définit le comportement de l'espace entre les mots. Les valeurs applicables sont pareilles que celles de letter-spacing:

• Normal : La valeur normale correspond à l'espacement normal entre les mots pour une police bien déterminée.
• Valeur de Longueur : Cette valeur indique la quantité d'espacement qui s'ajoute à l'espace mot par défaut c'est-à-dire normal. Une valeur négative est acceptée.

Exemple d'espace entre les mots :

Code CSS :

.espacemot1
{


word-spacing:20px; /*espace de 20 px entre les mots*/


}



.espacemot2{


word-spacing:1cm;/*espace de 1 cm entre les mots*/


}

Code XHTML :

<p class="espacemot1">Je vais chez ce cher Serge si sage et si chaste.</p>
<p class="espacemot2">Je vais chez ce cher Serge si sage et si chaste.</p>
<p>Je vais chez ce cher Serge si sage et si chaste.</p>