Le Texte (CSS)

Retour sur le Texte (XHTML)

Ici nous nous interesserons aux propriétés CSS de mise en forme du texte (Modifier la police, la taille etc.).

Commencons par un petit rappel sur le fonctionnement du langage CSS. Un code CSS est constitué de plusieurs "blocs", chacun ayant la forme suivante :

selecteur
{
propriete: valeur ;
propriete: valeur ;
propriete: valeur ;
}

Le selecteur permet d'indiquer sur quels éléments vont s'appliquer les modifications de mise en forme. On peut par exemple, indiquer le nom de la balise qui va subir la mise en forme, utiliser le sélécteur universel * ou encore faire usage des classes et id.

L'alignement

Aligner tout le texte

Nous avons découvert dans le chapitre "introduction au CSS" comment centrer un titre :

h1
{
text-align: center;
}

Commençons par étudier plus en détail la propriété d'alignement text-align. Il faut savoir qu'il existe en tout 4 valeurs différentes :

Ces possibilités d'alignement sont les mêmes que celles qu'offre un éditeur de texte par exemple.
Prenons par exemple la valeur justify qui permet d'obliger le texte à prendre la même largeur sur chaque ligne. Cet alignement est très utilisé dans le monde de l'imprimé.

p
{
text-align: justify ;
}

Exemple

Les alinéas

L'on peut demander à ce qu'un alinéa soit automatiquement crée au début de chaque paragraphe.
C'est la propriété text-indent. On doit lui indiquer comme valeur la longeur de la marge à créer. Généralement on indique cette marge en pixels, que l'on abrège par px.

Par exemple, pour un alinéa de 30 pixels, voici le code :

p
{
text-indent: 30px;
}

Exemple

Les Polices

Le langage CSS nous permet de changer la police du texte. Pour le moment c'est une police par défaut qui est utilisée.

Bien choisir la police

Il faut savoir que nous n'avons pas le choix entre une infinité de polices.
En effet, pour que la police s'affiche chez nos visiteurs, il faut qu'elle soit installée sur leur ordinateur. De ce fait on ne peut choisir que des polices standards, généralement présentes sur la plupart des ordinateurs.

Les polices standards

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courrier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana

La propriété CSS précisant la police est font-family. Si l'on souhaite que nos paragraphes de texte s'affichent en Verdana, le code sera :

p
{
font-family: Verdana;
}

Notez que l'on peut combiner cette propriété avec celle de l'alignement. Par exemple si l'on souhaite des paragraphes justifiés, écrits en Verdana :

p
{
font-family: Verdana;
text-align: justify;
}

Exemple

Petite remarque concernant les noms de police comportant un espace
Certaines polices comportant un espace doivent être entouré de guillemets comme ceci:

font-family:"Courrier New" ;

Toutefois comment faire pour gérer le cas ou le visiteur ne possède pas la police voulu ?.
Et bien le CSS a tout prévu, comme nous allons le voir.

Proposer plusieurs polices

En règle générale, on n'indique jamais un seul nom de police. On en propose plusieurs, que l'on sépare par des virgules :

p
{
font-family: Elephant, "Arial Black", Georgia, Verdana;
}

Les noms des polices doivent être écrits par ordre de propriété. Cela signifie dans l'exemple ci-dessus que la police Elephant sera utilisée en priorité si elle est présente sur l'ordianteur du visiteur. Si elle n'est pas présente, alors le navigateur recherchera la seconde police (Arial Black) et ainsi de suite. La dernière police indiquée sera utilisée si aucune des précédentes n'est disponible. Personnelement, la police Elephant n'est pas installée sur mon PC, c'est Arial Black qui s'est affichée .

Mais comment fait-on si le visiteur n'a même pas Verdana ?. La réponse est simple : on doit indiquer un nom de police par défaut.

Il existe deux noms de polices par défaut :

Nous allons donc indiquer sans-serif en dernier choix :

p
{
font-family: Elephant, "Arial Black", Georgia, Verdana, sans-serif ;
}

Exemple

Ainsi, si le visiteur ne possède aucune des polices précédentes, le navigateur utilisera une police sans empattement par défaut

La Taille du texte

La propriété CSS gérant la taille du texte est font-size.
Il existe un nombre important de manière de s'en servir. On peut en effet préciser la taille du texte de différentes façons.

En pixels

L'on peut définir la hauteur des lettres en pixels. C'est la technologie la plus précise : elle indique au pixel près la taille que doivent prendre les lettres affichées à l'écran du visiteur.
Par exemple si l'on souhaite obtenir une taille de 20 pixels, l'on écrira :

p
{
font-size: 20px;
}

Exemple

Toutefois, une taille en pixels peut poser problème si l'on écrit trop petit. En effet, certains internautes ont des problèmes de vision qui leur empêchent de distinguer correctement les trop petits caractères.

C'est pour cela qu'on recommande l'utilisation de valeurs relatives à la place de valeur en pixels. On évitera donc autant que possible l'utilisation de l'unité pixel, que l'on réservera dans des cas bien spécifiques (en particulier lorsque le placement de l'élément doit être extremement précis).

En donnant un nom à la taille

Une autre manière de définir la taille du texte, c'est d'écrire directement (petit, gros, moyen...) en Anglais. Voici les valeurs utilisables :

Les différentes tailles de police

  • xx-small : minuscule         texte en xx-small
  • x-small : très petit         texte en xsmall
  • small : petit         texte en small
  • medium : moyen         texte en medium
  • large : grand         texte en large
  • x-large : très grand         texte en x-large
  • xx-large : énorme         texte en xx-small

Si on souhaite écire un texte en grand, on utilisera le code suivant :

p
{
font-size: large;
}

L'avantage est que cette notation est relative. Si le navigateur du visiteur est configuré pour afficher de gros caractères, alors le mot grand signifiera peut être 30 pixels de hauteur au lieu de 20 pixels en temps normal.

En notation relative "em"

La notation relative que nous venons de voir ne nous permet d'utiliser que sept tailles différentes. Si on recherche une taille intérmédiaire, ou même une taille supérieure, il faut se tourner vers une autre unité relative. L'unité em constitue en ce sens un bon choix.

Dans cette notation, 1em signifie Taille normale, 1,5 em signifie que la taille sera 1,5 fois plus grande que la normale, et 0,5 em qu'elle sera à la moitié de la taille normale.

Supposons que nous souhaitons grossir légèrement la taille de nos paragraphes.
Avec le code suivant, mes paragraphes seront écrits 1,6 fois plus gros que la normale :

p
{
font-size: 1.6em ;
}

Exemple

Attention : le symbole décimale est le point
Veillez à bien écrire 1.6 et non 1,6

En notation relative "ex"

Eh oui, encore une autre notation ! Comme l'on peut le constater ce n'est pas le choix qui manque. Ici c'est une taille relative à la hauteur de la lettre "x"

1.9ex signifie donc 1,9 fois la hauteur de la lettre x :

p
{
font-size: 1.9ex ;
}

Exemple

Cette unité est assez proche de em à cette différence près que le calcul de la taille est ici basé précisemment sur la lettre x. Pour des raisons d'uniformisation, sur un même site Web , il faut ne garder qu'une seule des deux unités.

En pourcentage

Enfin il est possible d'exprimer la taille en pourcentage.

Sur cet exemple, la taille de mes lettres sera égale à 120% de la taille par défaut :

p
{
font-size: 120% ;
}

Exemple

Cette unité est encore très proche de em et ex. Elle est plus facile à appréhender par les débutants car tout le monde connait les pourcentages.

Gras,italique,souligné etc.

Nous allons voir ici comment réaliser les effets suivants :

Mise en gras

Pour mettre en gras du texte grâce au CSS, on utilise la propriété font-weight.
Celle-ci peut prendre deux valeurs :

Pour que nos citations soient écrites en gras, on pourra donc écrire :

q,blockquote
{
font-weight: bold ;
}

Testons le code CSS sur l'exemple suivant :

<p> Une citation du film " Le Schpountz de Marcel Pagnol : <br/>
<q> Irénée, tu n'es bon à rien, tu es mauvais à tout </q> </p>

Exemple

Mise en Italique

En CSS, l'italique est appliqué par le biais de la propriété font-style.

Cette balise peut prendre 3 valeurs :

Quelle est la différence entre italique et oblique ? Il n'y en a pas. Sur la plupart des polices, ces deux valeurs auront le même effet. La présence de deux valeurs différentes (italic et oblique) est plutot historique et est due au fonctionnement des polices. On les conserves toutes les deux pour des raisons de compatibilité.

Perso, j'utilise la valeur italic (c'est plus facile à retenir ).
Exemple :

q,blockquote
{
font-style: italic;
}

Exemple

Mise en majuscules/minuscules

Il y a plusieurs façons de transformer les lettres d'un texte en majuscules ou en minuscules.

Mise en majuscules et minuscules

La propriété text-transform propose plusieurs valeurs intéressantes :

Essayons par exemple de mettre en majuscule la première lettre de chaque mot concernant le paragraphe et en majuscules toutes les lettres contenues dans la citation :

p
{
text-transform: capitalize;
}
q
{
text-transform: uppercase;
}

Exemple

Ecrire en petites majuscules

Pour donner du relief à notre texte, on peut créer aussi de petites majuscules. C'est majuscules sont de la taille des minuscules.

Dans ce cas la propriété est font-variant. Il existe deux valeurs :

On désire que nos citations soit écrites en petites majuscules :

q,blockquote
{
font-variant: small-caps;
}

Exemple

Souligner, barrer, clignoter

La propriété text-decoration permet de décorer son texte de plusieurs façons différentes :

Nous allons voir ces propriétés sur un nouvel exemple

<p> Un matin, en licence pro Im@sh : <br/>
<strong>Mr Regourd :</strong> <q> Bonjour à tous Im@shien, Im@shienne !! </q> </p>

On désire un clignotement général, un soulignement du contenu de la balise <strong> et le contenu de la citation barré. Voici le code de tout ca :

p
{
text-decoration: blink;
}
strong
{
text-decoration: underline;
}
q
{
text-decoration: line-through;
}

Exemple

Voir la partie sur la Couleur et le Fond.