Formatage de texte avec CSS

Dr N. BAME

1
 Introduction
• Les propriétés de :
• type «font-»,
• de type text,
• couleurs,
• Interligne
• Opacité
• …

2
 Taille du texte : font-size (1)
• la propriété font-size est utilisée pour modifier la taille d’un
texte
• Seuls deux types de valeurs sont possibles :
– Des valeurs de type absolu (en pixel (px) ou en point (pt)),
– ou relatif (en em, ex ou en pourcentage (%))

• Les valeurs de type « relatives » permettent au texte de

s’adapter relativement aux préférences des visiteurs.
– Si la taille d’un texte est fixée à 100%, ce texte pourra avoir des
tailles différentes selon les réglages faits par les visiteurs sur leurs
navigateurs.
• 1em correspond à la taille normale

– Ce type de valeur présente des avantages tels que tous les

visiteurs peuvent lire le texte sans difficulté et le texte peut
également s’adapter relativement aux autres éléments de la page
web. 3
 Taille du texte : font-size (2)
• Une valeur de type absolu fixe la taille d’un texte
définitivement.
– Le grand avantage de ce type de valeur est que l’on peut
contrôler précisément rendu de votre texte et de votre page
web.
• Exemples
h1
{
font-size : 32px;
}
p
{
font-size : 0.8em;
} 4
 Taille du texte : font-size (3)
Taille relative
• On peut préciser la taille relative du texte avec des mots en
anglais:
• xx-small: minuscule ;
• x-small: très petit ;
• small: petit ;
• medium : moyen ;
• large: grand ;
• x-large: très grand ;
• xx-large: euh… gigantesque.
• Exemple
h1
{
font-size: x-large;
}
5
 Style ou inclinaison : font-style (1)
• le style défini par la propriété font-style correspond à
l’inclinaison d’un texte
• Quatre valeurs possibles
• normal :valeur par défaut ;
• italic : texte en italique
• oblique : penchement du texte
• inherit : conserve les propriétés de l’élément parent
• Par défaut tout élément enfant prend les propriétés de
styles de parent.
.ppaire
{
font-style:italic;
}
6
 Texte en gras : font-weight
• font-weight est utilisée pour fixer le poids d’un
texte.
• deux valeurs
• normal : valeur par défaut
• bold : police en gras

• Exemple
h1
{
font-weight: bold;
}
7
 Interligne : line-height
• line-height sert à fixer la distance en pixel (px, em,
ex, %, pt) entre deux lignes de texte

• Exemple
P
{
font-size:20px;
line-height:30px;
}

8
 Soulignement et décorations : text-decoration
• La propriété text-decoration permet de gérer la
décoration d’un texte ou de souligner un texte
• Valeurs possibles
• underline : souligner le texte
• overline : mettre une ligne au dessus du texte
• line-through : barrer le texte
• blink : faire clignoter le texte (ne fonctionne pas sur tous
les navigateurs)
• none : pas de décoration

9
 Police : font-family
• La propriété font-family permet de changer la police d’un
texte
• Elle peut prendre plusieurs valeurs ordonnées par priorité
balise
{
font-family: police1, police2, police3, police4;
}
• Quelques polices supportées par la plupart des navigateurs
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
10
font-family: Impact, "Arial Black", Arial, Verdana;
 Couleur : color (1)
• La propriété color permet changer la couleur d’un texte
• Il existe plusieurs façons de gérer la couleur
• Première façon: nom de la couleur en anglais; méthode la
plus simple mais la plus limitée aussi.
#p1 {color:green;}
– Seules seize couleurs sont possibles

11
 Couleur : color (2)
Code hexadécimal de la couleur:
• la valeur commence par un dièse, suivie de 6
symboles choisis entre 0 et F.
– Les deux premiers symboles définissent l’intensité de
rouge
– les deux suivants l’intensité de vert
– les deux derniers l’intensité de bleu
• l’échelle d’intensité va de 0 à 255 pour chaque
binôme de valeurs
– 00 étant l’intensité la plus faible et FF l’intensité la plus
forte
12
 Couleur : color (3)
Couleur en RGB (Red Green Blue):
• cette méthode repose sur le même principe de la
méthode hexadécimale
• On doit indiquer trois nombres compris entre 0 et
255 en valeur.
– Le premier nombre correspond une nouvelle fois à
l’intensité de rouge, le second à l’intensité de vert
et le troisième à l’intensité de bleu
p{
color:rgb(255,010,020);
}
13
 Opacité : opacity
Il existe deux méthodes pour fixer le niveau d’opacité d’un
texte.
1. Si on a utilisé une valeur de type nom de couleur ou
hexadécimale avec la propriété color, on doit utiliser la
propriété opacity pour fixer l’opacité du texte.
• Cette propriété prend une valeur entre
• 0 : totalement transparent et
• 1 : totalement opaque
• h1{color: red; opacity:0.5;}
2. Si on a utilisé une valeur de type RGB avec la propriété color,
on peut également maîtriser l’opacité du texte d’une
façon plus simple, en utilisant une valeur de type RGBa.
• Dans ce cas, il suffit de rajouter une valeur pour l’opacité du
texte après les trois valeurs de la propriété RGB.
• H1{color: rgba(10,20,200,0.7);}
14
 Indentation : text-indent
• La propriété text-indent permet de gérer
l’indentation d’un texte.
– L’indentation, est le décalage d’un texte sur la droite
généralement.
• Elle accepte des valeurs de type
– absolu : px, pt et
– relatif : em, ex, %
• Elle peut également prendre des valeurs négatives
pour un décalage à gauche

• Exemple
P{text-indent:2%;}
15
 Alignement : text-align
• La propriété text-align permet d’alignement à
gauche, ou à droite, ou au centre ou de justifier le
texte
• Valeurs possibles
• left: alignerle texte à gauche
• center: centrer le texte
• right: aligner le texte à droite.
• justify: justifier le texte pour qu’il prenne toute la largeur
possible sans laisser d'espace blanc à la fin des lignes

16
 Transformation : text-transform
• La propriété text-transform permet de modifier
l’aspect des caractères d’un texte (majuscules ou
minuscules).
• Valeurs possibles
• uppercase : mettre tout le texte en majuscules ;
• lowercase : mettre tout le texte en minuscules ;
• capitalize : mettre uniquement la première lettre de
chaque mot en majuscule ;

• Exemple
h1
{
text-transform : uppercase;
} 17
 Espacement : letter-spacing et word-spacing
• Les propriétés letter-spacing et word-spacing
permettent respectivement d’ajuster l’espace entre
les lettres et entre les mots.
• Elles fonctionnent de la même manière et peuvent
prendre des valeurs absolues (px, pt) et relatives
(ex, em, %).

18
 Les ombres des textes : text-shadow
• CSS permet d’ajouter des effets d’ombre à un texte
grâce à la propriété text-shadow.
• Cette propriété nécessite au minimum deux valeurs
pour fonctionner.

• Cependant, dans la plupart des cas, on en utilise

quatre
• Les trois premières valeurs correspondent à des
longueurs et la dernière est la couleur de l’ombre :
• 1ère valeur : déplacement horizontal de l’ombre ;
• 2ème valeur : déplacement vertical de l’ombre ;
• 3ème valeur : rayon de propagation (flou gaussien) de l’ombre;
• 4ème valeur : couleur de l’ombre (accepte les mêmes valeurs que la
propriété « color »).
19
#p1{text-shadow : 3px 2px 5px silver;}
 Couleur de fond : background-color
• La propriété background-color permet de modifier
la couleur de fond d’un élément
• Elle fonctionne de façon similaire à la propriété
color avec les mêmes types de valeurs

• Exemple h1
body {
{ color: red
color: blue; background-color: #00FF00;
background-color: black; }
}

20