La Bnbox !

• Aucun commentaire

Vous avez eu un aperçu des capacités des CSS dans le chapitre précédent. J'espère que cela vous a donné envi d'en savoir plus ! En tout cas, à partir de maintenant, on va s'attaquer à l'apprentissage des différentes propriétés du CSS, en commençant par celles permettant de mettre en forme du texte. Alignement, graisse, italique : à l'assaut


Un des bons points pour l'apprentissage des propriétés CSS, c'est que l'on peut facilement les classer par famille. Par exemple, pour les propriétés de mises en forme du texte, on peut distinguer celles qui ont le préfixe text-, de celles qui ont le préfixe font-, ou de celles qui n'ont aucun préfixe en particulier. (éh, ce serait trop facile sinon ) Je vais donc me servir de ce classement naturel pour vous expliquer les différentes propriétés de mises en forme.
Encore une chose, les propriétés que j'explique au début de chaque partie sont en générales plus utiles et intéressantes que celles détaillées en fin de partie.

Font- et ses potes

Certaines propriétés CSS commencent donc par le préfixe font-. Elles vont agir directement sur le texte afin d'en modifier sa forme.

Modifier la taille du texte

Il est possible de modifier la taille du texte en précisant une valeur à la propriété font-size (1em par défaut). Cette valeur peut être exprimée en pixel (px), en pourcentage (%), en em (em), ou à l'aide d'un mot clef pré-configuré.
Bon la comme ça, je pense que cela ne vous dit pas grand chose, alors laissez-moi vous expliquer.

• En pixel : cela correspond à la taille en hauteur d'une lettre, donc cette valeur est assez similaire à celle que vous pouvez utiliser sous votre traitement de texte favori. Par exemple : font-size: 18px; vous donnera un texte ayant à peu près la même taille qu'un texte en taille 18 sous un traitement de texte.
  Cette valeur est fixe, 18 pixels, c'est 18 pixels. Si un utilisateur souhaite agrandir la taille du texte sur une page Web (parce qu'il a des problèmes de vue par exemple) grâce au zoom que possède son navigateur : il ne peut pas, le texte fera toujours 18 pixels. Donc utiliser une taille en pixel c'est pratique (on sait exactement la taille du texte), mais ce n'est pas l'idéal pour l'utilisateur. (il ne peut adapter la taille du texte comme il le souhaite)
  Un exemple d'utilisation :
  Code :
  
.pixel1 {
font-size: 18px;
}
.pixel2 {
font-size: 30px;
}
  
  
  Petit rappel du chapitre précédent : tout le texte contenu dans les balises utilisant la classe "pixel1" (ex : <p class=\"pixel1\">Texte</p>) auront une taille de 18px.
  
  
• En pourcentage : cette unité permet de définir la taille du texte par rapport à la taille normale qui correspond à 100%. Une valeur supérieure à 100 agrandie le texte, une valeur inférieure à 100 le rétrécit. ça semble assez instinctif. Et cette fois-ci, l'utilisateur peut modifier (en zoomant ou dézoomant) la taille du texte selon sa convenance.
  Code :
  
.pourcentage1 {
font-size: 100%;
}
.pourcentage2 {
font-size: 130%;
}
.pourcentage3 {
font-size: 75%;
}

• En em : cette unité est en fait la même que le pourcentage, à un facteur multiplicateur près. Elle permet de définir la taille du texte par rapport à la taille normale qui correspond à 1em. Une valeur supérieure à 1 agrandie le texte, une valeur inférieure à 1 le rétrécit. Entre em et pourcentage, c'est une question de goût.
  Code :
  
.em1 {
font-size: 1em;
}
.em2 {
font-size: 1.3em;
}
.em3 {
font-size: 0.6em;
}

• Avec un mot clef : certains mots clefs ont déjà été configuré pour pouvoir modifier "facilement" la taille : xx-small pour que le texte soit très petit, puis x-small, small, medium c'est la taille normale, large, x-large, xx-large. ça vaut ce que ça vaut
  Code :
  
.mini {
font-size: xx-small;
}
.trespetit {
font-size: x-small;
}
.petit {
font-size: small;
}
.normal {
font-size: medium;
}
.grand {
font-size: large;
}
.tresgrand {
font-size: x-large;
}
.trestresgrand {
font-size: xx-large;
}


Pour voir ce que donne tous nos exemples, utilisons le code XHTML suivant :
Code :

Mettre en gras ou en italique

Comme sur tout traitement de texte classique, il est possible de modifier la graisse (mettre en gras quoi), ou l'inclinaison (mettre en italique) avec font-weight (normal par défaut), font-style (normal par défaut). Voyons plus en détails ces 2 propriétés :

• font-weight : modifie la graisse du texte.
  normal : pas de graisse
  bold : texte en gras
  bolder : texte plus en gras que la normale
  lighter : texte moins en gras que la normale
  valeur entre 100 et 900 par pas de 100 : en théorie 100 signifie peu de graisse, 900 signifie beaucoup. En pratique de 100 à 400 le texte est normal, de 500 à 900, il est en gras.
  
  Regardons un exemple :
  Code :
  
.gras {
font-weight: bold;
}
.gras2 {
font-weight: bolder;
}
.gras3 {
font-weight: lighter;
}
.graschiffre {
font-weight: 300;
}

  
  
  Essayer : texte en gras
  
  
  Ne vous souciez pas trop du bolder, lighter pour l'instant. On reverra cela lorsqu'on parlera d'héritage.
  
  
• font-style : modifie l'inclinaison du texte.
  normal : inclinaison... normale
  italic : texte en italique
  oblique : texte en oblique
  
  En typographie, pour une police donnée (Arial par exemple), il existe une "sous-police" oblique et une "sous-police" italique. Le navigateur va donc choisir la police demandée, et, s'il arrivait que la "sous-police" italique n'existe pas, il va utiliser la "sous-police" oblique par défaut.
  Si j'ai bien compris les polices obliques sont créées en inclinant à l'aide d'un algorithme les polices d'origines, alors que les polices italiques sont conçues pour être en italique par le créateur des polices.
  
  Regardons un exemple :
  Code :
  
.italique {
font-style: italic;
}
.oblique {
font-style: oblique;
}

  
  
  Essayer

Choisir la police du texte

Ah ! la police d'écriture du texte, voilà un grand sujet. En effet, la propriété font-family permet d'utiliser n'importe quel police de caractères sur un texte ! Mais pour que cette police soit réellement visible, il faut que l'utilisateur la possède sur son ordinateur... Et malheureusement, très peu de personne possèdent la magnifique police Winnie ou Starwars que vous rêvez déjà d'afficher sur vos pages.
Voilà pourquoi le W3C a fixé une liste des polices d'écritures que l'on peut utiliser sans trop d'inquiétude, et voilà aussi pourquoi on précise toujours plusieurs polices possibles dans la propriété font-familiy. Si la première police précisée existe, elle sera utilisée, sinon ce sera la deuxième, etc...

Voici la liste de ces polices d'écritures dites standards : Arial, , Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana. La police par défaut est appelée : serif. Il faut toujours la préciser à la fin de font-family. En théorie, c'est un petit peu plus tordu que ça (voyez vous-même dans cet article sur les polices du W3C), mais dans la vraie vie c'est celles dont on se sert.

Voyons un petit exemple :
Code :


Comme vous pouvez le voir, lorsqu'une police a un nom composé de plusieurs mots, on l'écrit entre guillemets doubles.
Pour ma part j'apprécie particulièrement la police Verdana. Et j'utilise aussi souvent Tahoma (qui ressemble à Verdana) que l'on retrouve fréquemment sur les machines tournant sous Windows. Mais bien sûr, le choix de la police à utiliser dépend généralement du design de notre page, ou du format d'affichage. (pour impression, pour affichage via vidéo-projecteur, ...)

De manière générale, on précise la police principale d'une page dans le body, et on modifie cette police si besoin au cas par cas dans chaque balise. On verra pourquoi cela fonctionne lorsqu'on parlera d'héritage.

Code :

Agir sur la casse

Alors celle-la, je l'aime beaucoup ! font-variant permet d'agir sur la casse du texte (majuscule, minuscule) dans une certaine mesure (c'est text-transform qui se chargera du reste) en permettant de mettre un texte en petites majuscules : laisse la première lettre de la chaine de caractères en majuscule si elle l'était, change la casse des autres lettres en majuscules plus petites. Voyez vous-même :
Code :


Cela peut donner un effet très sympa pour des titres par exemple.

Text- et ses copains

Plusieurs propriétés de mise en forme du texte commencent donc par le préfixe text-. A une exception près, ces propriétés ne vont pas transformer le texte lui-même, mais agir autour de lui.

Aligner du texte

Comme dans un traitement de texte classique, on peut centrer du texte, l'aligner à droite, à gauche ou le justifier avec le CSS. Pour cela, on utilise la propriété text-align (left par défaut en général) avec les valeurs au choix : center, left, right, justify.

Mettons cela en pratique dans un exemple.
D'abord le code CSS :
Code :

Puis le code de la page HTML :
Code :


On peut donc très facilement aligner horizontalement du texte avec du CSS. On verra dans un autre chapitre que l'on peut aussi l'aligner verticalement, au moins en théorie.

Indenter du texte

Il est possible de décaler la première ligne d'un texte par rapport aux autres afin de créer un alinéa grâce à text-indent (0 par défaut). Il suffit de préciser une valeur positive ou négative.

Code :

Souligner, surligner, barrer, faire clignoter du texte

Il est possible de "décorer" rapidement du texte de plusieurs manière avec text-decoration (none par défaut). On s'en sert surtout pour modifier l'apparence d'un lien (au passage d'une souris, au clic...)

Code :



Il est à noter que la valeur blink ne fonctionne pas sur tous les navigateurs.

Agir sur la casse du texte

Voici l'exception ! La propriété text-transform (none par défaut) permet d'agir directement sur le texte puisqu'elle s'occupe d'en gérer la casse. (majuscule, minuscule, première lettre en majuscule) Un petit exemple vaut mieux qu'une explication.

Code :





Et voilà pour la bande à text- ! Quelques autres propriétés en font encore partie (text-shadow, text-replace, ...) mais soit elles ne fonctionnent pas correctement, soit elles ne font pas partie du CSS 2, mais du CSS 3. Le CSS3 est de plus en plus utilisé, c'est pour bientôt et on risque d'en reparler !

C'en est finit de la première partie de l'apprentissage de mise en forme du texte ! Dans le prochain chapitre nous verrons quelques autres propriétés importantes de mise en forme, notamment la coloration du texte, et l'alignement horizontal. Mais ce sera beaucoup plus léger que ce chapitre, il faut vous ménager un peu