Cnam - NFA084 - Graphisme et web Notions fondamentales : les couleurs (suite) Annexe 1 : Mettre le texte en forme avec les

feuilles de style CSS

1 - Proprits et valeurs CSS Proprit CSS Font-family valeurs Nom de la police

Pour dfinir la police utilise :

Font-family : arial, trebuchet, vardana, sans-serif; Font-family : "arial black", serif; Si le nom de la police comporte un espace, on le mettra entre guillemets On indique en gnral plusieurs polices, ainsi si l'utilisateur ne l'a pas sur son ordinateur, le navigateur passera aux polices suivantes. En dernier on prcise en gnral serif ou sans-serif

Font-size Font-size Font-size Font-size Font-size : : : : 10px; 1.3em; 9ex; xx-small;

Valeur de la taille suivant l'une de ces manires absolue en pixels (px) absolue en points (pt) absolue (rare) cm, mm relative (em) par rapport la taille des caractres de la police relative (ex) par rapport la taille des petites lettres relative (pourcentages)

Pour dfinir la taille du texte

Il est recommand d'utiliser une taille relative en em, car une taille absolue peut produire un affichage de texte inadapt 1em correspond une taille normale. On met des points la place des virgules pour les pourcentages : 1.3em

Il existe galement des valeurs nommes. xx-small : minuscule : ........... 6,9pt x-small : trs petit : .............. 8,3pt small : petit : ......................... 10pt medium : moyen : ................. 12pt large : grand : ....................... 14,4 pt x-large : trs grand : ............. 17,28pt xx-large : trs trs grand : .... 20,7pt Font-style Pour dfinir le style italique Font-style : normal; Font-style : italic; Font-weight Font-weight : normal; Font-weight : bold; Normal / Bold Normal / italic

Pour dfinir la graisse

Text-decoration Text-decoration Text-decoration Text-decoration Text-decoration : : : :

none;
underline; line-through; overline;

Pour dfinir la dcoration (le soulignement)

/* normal par dfaut*/ /*soulign*/ /*barr*/ /*filet au-dessus*/

Text-decoration : blink; /*clignotant*/ (Ne fonctionne pas sur tous les navigateur, notamment Internet Explorer et Google Chrome).

2 - Mise en valeur du texte dans le code HTML

La balise <em></em> permet de mettre du texte en valeur (certains navigateurs l'affichent en italique) La balise <strong></strong> permet de mettre en relief les mots importants (certains navigateurs l'affichent en gras) Il existe 6 balises de titre permettant de hirarchiser le texte : o o o o <h1></h1> : titre de premier niveau <h2></h2> : titre de niveau 2 .. <h6></h6> : titre de niveau 6