Formatage du texte en CSS (partie 1/2)

• En pixels : c'est une façon très précise d'indiquer la taille du texte. C'est à vous de dire combien de pixels exactement doit faire le texte.
  Pour avoir un texte de 16 pixels de hauteur, vous devez écrire :
  font-size:16px;
  
  Les lettres auront une taille de 16 pixels, comme le montre l'image suivante :
  
  
  
  
  
  Voici un exemple d'utilisation (je ne vous mets pas le fichier XHTML qui va avec, vous êtes des grands maintenant ) :
  
  Code : CSS

  1 2 3 4 5 6 7 8

  p { font-size: 14px; /* Paragraphes de 14 pixels */ } h1 { font-size: 22px; /* Titres de 22 pixels */ }

  
  
  Essayer !
  
  
  Si vous êtes allergique aux pixels, sachez qu'il est aussi possible d'indiquer une taille en centimètres ("2cm" par exemple) et en millimètres ("14mm" par exemple).
  
  Indiquer la taille du texte en pixels, centimètres et millimètres est très pratique et très précis. Certes. Mais il est préférable d'indiquer une taille relative (comme nous allons le voir) afin que la taille du texte s'adapte aux choix de tout le monde (certains préfèrent avoir du texte plutôt gros, d'autres plutôt petit etc...)
• En donnant une valeur relative : c'est-à-dire en écrivant carrément "gros", "très gros", "petit", "minuscule". Mais bien sûr, comme tout c'est en anglais :p. Voici la liste des différentes valeurs que vous pouvez mettre ainsi que leur signification :
  
  
  • xx-small : minuscule
  • x-small : très petit
  • small : petit
  • medium : moyen
  • large : grand
  • x-large : très grand
  • xx-large : euh... gigantesque
  
  Voici un exemple de CSS qui utilise des valeurs relatives :
  
  Code : CSS

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

  .minuscule { font-size: xx-small; } .trespetit { font-size: x-small; } .petit { font-size: small; } .moyen { font-size: medium; } .grand { font-size: large; } .tresgrand { font-size: x-large; } .supermegagigatresgrand { font-size: xx-large; }

  
  
  Essayer !
  
  
  
  La taille du texte n'est peut-être pas exactement identique selon le navigateur... mais ce n'est pas bien grave, car dans tous les cas "xx-small" correspond à un texte très petit, et "xx-large" à un texte très grand. Et c'est tout ce qu'on a besoin de savoir
  
  Je vous encourage à utiliser cette méthode pour indiquer la taille du texte plutôt que d'utiliser des pixels. Votre site sera ainsi bien plus "adaptable" aux différentes configurations de vos visiteurs.
• En em : c'est une autre façon d'indiquer de manière relative la taille du texte. Un peu délicat à comprendre, je vous l'accorde, mais une fois qu'on a un peu testé ça vient tout seul, et on se rend compte que c'est une méthode vraiment pratique.
  On doit indiquer la taille du texte par rapport à la taille normale de la police. Je m'explique : "1em" signifie "Taille normale". Si vous mettez un nombre supérieur (généralement un nombre décimal) comme "1.3em", le texte aura une taille 1,3 fois plus grande. De même pour réduire : "0.8em" et votre texte aura une taille 0,8 fois plus petite.
  C'est personnellement la méthode que j'utilise le plus souvent pour indiquer la taille du texte (la plupart de mes font-size sont donc en "em").
  
  
  Faites attention, il faut mettre un point à la place de la virgule pour les nombres décimaux.Vous devez donc écrire "1.4em" et non pas "1,4em" !
  
  
  Code : CSS

  1 2 3 4 5 6 7 8

  .petit_em { font-size: 0.7em; } .grand_em { font-size: 1.3em; }

  
  
  Essayer !
  
  
• En pourcentage : ça c'est facile. Si vous indiquez "100%", le texte aura une taille "normale". Si vous mettez "130%", le texte aura une taille correspondant à 130% de la taille normale. Ca ressemble énormément aux "em" (en fait c'est plus ou moins pareil). Après, tout est une question de goût

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

1
2
3
4
5
6
7
8
9

h1
{
   font-family: "Arial Black", Arial, Verdana, serif; /* On essaie d'avoir Arial Black en priorité */
}
p
{
   /* La police Comic Sans MS est agréable à lire pour les paragraphes je trouve */
   font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
}

Alignements simples

• left : le texte sera aligné à gauche (c'est le réglage par défaut).
• center : le texte sera centré.
• right : le texte sera aligné à droite.
• justify : le texte sera "justifié". Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont tout le temps justifiés.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

h1
{
   text-align: center; /* Pour centrer le titre */
   font-family: "Arial Black", Arial, Verdana, serif; /* Un titre en Arial Black c'est mieux :o;) */
}
blockquote
{
   text-align: justify; /* La citation sera justifiée */
}
.signature
{
   text-align: right; /* Pour aligner à droite ma signature */
   font-family: "Comic Sans MS", Georgia, "Times New Roman", serif;
   font-size: 80%;
}

1
2
3
4
5
6
7

<h1>La parole du sage</h1>

<p>Un jour, un grand sage a dit :</p>

<blockquote><p>Morbi fermentum libero non libero. Nunc in turpis in justo adipiscing scelerisque. Donec id elit non diam aliquet semper. Maecenas pede. Maecenas fringilla. Fusce eleifend dui quis lectus. Praesent facilisis, ligula a consequat posuere, metus purus porta mi, at consectetuer justo wisi id dui. Maecenas mattis. Ut imperdiet pharetra enim. Suspendisse quis leo nec arcu interdum aliquam. Vivamus dictum quam id tellus. Maecenas in quam sit amet risus semper auctor. Integer leo dui, malesuada eu, fermentum at, vehicula at, nisl. Pellentesque hendrerit. Proin ut libero. Curabitur sem ipsum, porta non, feugiat vel, mollis ut, justo. Sed a orci id metus pretium lobortis. Morbi ultrices, quam a facilisis faucibus, odio nunc dignissim enim, eget rhoncus purus erat ac quam.</p></blockquote>

<p class="signature">Signé : M@teo21</p>

L'indentation

Texte indenté

1
2
3
4
5
6

p
{
   text-indent: 30px; /* Les paragraphes commenceront 30 pixels sur la droite */
   text-align: justify; /* Ils seront justifiés */
   font-size: large; /* Allez, soyons fous, grossissons le texte :o;) */
}

• word-spacing : l'espace entre les mots (en pixels).
• letter-spacing : l'espace entre les lettres (en pixels).