Edition d'une sous-partie

En fait, dans le chapitre précédent je vous ai donné un exemple sans trop d'explications, afin d'illustrer un peu le fonctionnement d'un CSS. En réalité, les possibilités pour modifier la taille du texte sont nombreuses (et variées !).

Ce que vous savez déjà, c'est que la propriété CSS qui permet de changer la taille du texte est font-size. Ca, ça ne change pas.Mais par contre, on peut indiquer la taille du texte de différentes manières :

• 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
  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
  .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
  .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

Pfiou ! Comme quoi, il y a l'embarras du choix pour indiquer la taille du texte
A tel point que l'on s'y perd un peu d'ailleurs...

Comme je vous l'ai dit, les pixels c'est très pratique pour être précis, mais ce n'est pas très "recommandé" car il se peut qu'une taille trop petite (ou trop grosse) gêne certaines personnes.
En ce qui me concerne, la méthode des "em" (ou des %) est la plus pratique : elle a l'avantage de s'adapter automatiquement aux préférences du visiteur et d'être facile à utiliser.