I. Propriétés de mise en forme de texte▲
I-A. Mise en forme de la police▲
I-A-1. Nom de police | font-family▲
font-family : permet d'indiquer les noms de polices par ordre de préférence.
Syntaxe : [[ <family-name> | <generic-family> ] [, <family-name> | <generic-family>]* ] | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
font-family:
"Arial Black
", Arial, Verdana, serif;
Lorem ipsum dolore sit amet, consectetur adipisicing elit
Explications :
si le visiteur possède la police Arial Black, elle sera utilisée, sinon Arial, sinon Verdana ou enfin serif ;
il est possible d'utiliser des polices personnalisées en combinaison avec @font-face ;
pour les polices composées de deux mots, il faut les entourer de guillemets.
I-A-2. Police personnalisée | @font-face▲
@font-face : permet de déclarer une nouvelle police, qui sera téléchargée sur l'ordinateur de vos visiteurs.
Syntaxe : <font-description>+
Compatibilité : IE 9+, FF 3.5+, Chrome 0.2+, Safari 3.1+, Opera N/C
Version CSS : 2.1
Complément d'information : Comment utiliser une police personnalisée sur un site Web ?
@font-face {
font-family:
'ma_police';
src:
url
('
ma_police
.
eot
'
) format('
eot
'
),
url
('
ma_police
.
woff
'
) format('
woff
'
),
url
('
ma_police
.
ttf
'
) format('
truetype
'
),
url
('
ma_police
.
svg
'
) format('
svg
'
);
}
Explications :
il est important ici de voir qu'une police est définie par plusieurs formats étant donné que tous les navigateurs ne prennent pas en charge tous les formats.
I-A-3. Taille du texte | font-size▲
font-size : permet de définir la taille de la police de caractères. Elle peut être exprimée avec plusieurs unités.
Syntaxe : <absolute-size> | <relative-size> | <length> | <percentage> | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
font-size:
12px
;
font-size:
100%
; /*
normal
*/
font-size:
1
.2em
; /*
1.0
:
normal
*/
font-size:
1ex
;
font-size:
xx-small
; /*
très
très
petit
*/
font-size:
x-small
; /*
très
petit
*/
font-size:
small
; /*
petit
*/
font-size:
medium
; /*
moyen
*/
font-size:
large
; /*
grand
*/
font-size:
x-large
; /*
très
grand
*/
font-size:
xx-large
; /*
très
très
grand
*/
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
I-A-4. Gras | font-weight▲
font-weight : permet de définir l'épaisseur de la police de caractères.
Syntaxe : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
font-weight:
bold
; /*
gras
*/
font-weight:
bolder
; /*
plus
gras
*/
font-weight:
lighter
; /*
plus
fin
*/
font-weight:
normal
; /*
pas
gras
(par
défaut)
*/
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
I-A-5. Petites capitales | font-variant▲
font-variant : met le texte en petites capitales.
Syntaxe : normal | small-caps | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
font-variant:
small-caps
; /*
petites
capitales
*/
font-variant:
normal
; /*
normal
(par
défaut)
*/
Lorem ipsum dolore sit amet
LOREM IPSUM DOLORE SIT AMET
I-A-6. Petites capitales | font-variant▲
font-variant : met le texte en petites capitales.
Syntaxe : normal | small-caps | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
font-variant:
small-caps
; /*
petites
capitales
*/
font-variant:
normal
; /*
normal
(par
défaut)
*/
Lorem ipsum dolore sit amet
LOREM IPSUM DOLORE SIT AMET
I-A-7. Italique | font-style▲
font-style : permet de mettre un texte en italique.
Syntaxe : normal | italic | oblique | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
font-style:
italic
; /*
italique
(forcément
!)
*/
font-style:
oblique
; /*
autre
façon
de
mettre
en
italique
*/
font-style:
normal
; /*
normal
(par
défaut)
*/
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
I-A-8. La police tout-en-un | font▲
font : regroupe les propriétés de mise en forme de la police. À moins de l'utilisation d'une des valeurs "caption | icon | menu | message-box | small-caption | status-bar | inherit", font-size et font-family sont tous les deux obligatoires et dans cet ordre (avec éventuellement le line-height entre les deux). 'font-style' || 'font-variant' || 'font-weight' sont optionnels, dans n'importe quel ordre, mais avant le font-size.
Syntaxe : [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
font:
bold
16px
Arial;
Lorem ipsum dolore sit amet
I-B. Mise en forme des paragraphes▲
I-B-1. Alignement horizontal | text-align▲
text-align : aligne un texte horizontalement.
Syntaxe : left | right | center | justify | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
text-align:
left; /*
à
gauche
(par
défaut)
*/
text-align:
center
; /*
centré
*/
text-align:
right
; /*
à
droite
*/
text-align:
justify
; /*
texte
justifié
*/
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
I-B-2. Dernière ligne | text-align-last▲
Cette propriété peut nécessiter l'utilisation des préfixes vendeurs.
text-align-last : aligne la dernière ligne d'un texte horizontalement.
Syntaxe : auto | start | end | left | right | center | justify
Compatibilité : IE 5.5+, FF 12.0+,
, ,Version CSS : 3
Explications.
auto : la ligne adopte le même alignement que pour text-align, sauf si text-align vaut justify, dans ce cas, la dernière ligne sera alignée à gauche.
start : la dernière ligne sera alignée en début de ligne, le côté dépendant du sens de lecture (ltr ou rtl).
end : la dernière ligne sera alignée en fin de ligne, le côté dépendant du sens de lecture (ltr ou rtl).
left : la dernière ligne sera alignée à gauche.
right : la dernière ligne sera alignée à droite.
center : la dernière ligne sera centrée.
justify : la dernière ligne prendra la largeur de l'élément.
Notes.
La notion de dernière ligne correspond à la dernière ligne affichée avant tout saut de ligne forcé (fin de balise de type bloc ou avant une balise entrainant un saut de ligne comme <br />.
Internet Explorer ne supporte pas les valeurs start et end.
Exemples :
text-align-last:
auto
; /*
par
défaut
*/
text-align-last:
center
; /*
centré
*/
text-align-last:
end; /*
selon
le
sens
de
lecture
*/
text-align-last:
justify
; /*
justifié
*/
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
I-B-3. Alignement vertical | vertical-align▲
vertical-align : la propriété vertical-align ne fonctionne que pour les cellules (<td></td>) ou les éléments de type inline-block.
Syntaxe : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
vertical-align:
top
; /*
en
haut
*/
vertical-align:
middle
; /*
au
milieu
*/
vertical-align:
bottom
; /*
en
bas
*/
Lorem ipsum dolore sit amet | Lorem ipsum dolore sit amet | Lorem ipsum dolore sit amet |
I-B-4. Décoration | text-decoration▲
text-decoration : permet d'appliquer une décoration sur un texte (souligné, barré, etc.).
Syntaxe : none | [ underline || overline || line-through ] | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
text-decoration:
underline
; /*
souligné
*/
text-decoration:
overline
; /*
ligne
au-dessus
*/
text-decoration:
line-through
; /*
barré
*/
text-decoration:
none
; /*
normal
(par
défaut)
*/
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
I-B-5. Capitales | text-transform▲
text-transform : permet de changer la casse du texte.
Syntaxe : capitalize | uppercase | lowercase | none | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
text-transform:
uppercase
; /*
tout
mettre
en
majuscules
*/
text-transform:
lowercase
; /*
tout
mettre
en
minuscules
*/
text-transform:
capitalize
; /*
début
des
mots
en
majuscules
*/
text-transform:
none
; /*
normal
(par
défaut)
*/
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
I-B-6. Alinéa | text-indent▲
text-indent : permet de définir l'alinéa d'un texte.
Syntaxe : <length> | <percentage> | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
text-indent :
20px
;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
I-B-7. Hauteur de ligne | line-height▲
line-height : permet de définir l'interligne entre deux phrases. Les valeurs nulles ne sont pas autorisées.
Syntaxe : normal | <number> | <length> | <percentage> | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
line-height:
30px
;
line-height:
20%
;
Ici le line-height est à la valeur par défaut.
Ce qui explique que l'interligne soit normal.
Là on le définit à 30px
On se rend compte de l'écart plus important entre les deux phrases.
Pareil ici, le line-height est à 200%.
Pour un interligne "normal" mettre 100%.
I-B-8. Césure | white-space▲
white-space : permet de définir comment sont gérés les espaces dans un texte.
Syntaxe : normal | pre | nowrap | pre-wrap | pre-line | inherit
Compatibilité : IE 5.5+, FF 1.0+, Chrome 1.0+, Safari 1.0+, Opera 9.5+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Explications des valeurs :
- normal : passage à la ligne automatique (par défaut) ;
- nowrap : pas de passage à la ligne automatique, à moins qu'une balise HTML comme <br /> ne soit présente ;
- pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source (comme la balise <pre>).
Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.
Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.
Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.
I-B-9. Césure forcée | word-wrap▲
word-wrap : permet de couper le texte si celui-ci déborde du conteneur.
Syntaxe : [ normal | break-word ]
Compatibilité : IE 5.5+, FF 3.5+, Chrome 1.0+, Safari 1.0+, Opera 10.5+
Version CSS : 3
word-wrap:
normal
;
word-wrap:
break-word;
Lorem ipsum dolor sitsitsitsitsitsitsitsitsitsitsitsitsitsitsitsitsit amet, consectetur adipisicing elit
Lorem ipsum dolor sitsitsitsitsitsitsitsitsitsitsitsitsit amet, consectetur adipisicing elit
I-B-10. Ombrage | text-shadow▲
text-shadow : permet d'ajouter une ombre sur un texte ou un élément de type bloc.
Syntaxe : none | [, ]* [ <couleur>? <longueur> <longueur> <longueur>? | <longueur> <longueur> <longueur>? <couleur>? ] | inherit (source: MDN)
Compatibilité : IE 10+, FF 3.5+, Chrome 4+, Safari 4+, Opera 9.5+, Opera Mobile 10+
Version CSS : 3
text-shadow:
2px
2px
4px
red
;
Lorem ipsum dolore sit amet, consectetur adipisicing elit
<style
type="text/
css">
.shadow-red {
text-shadow
:
4px
4px
4px
red
;
}
.shadow-green {
text-shadow
:
-4px
-4px
4px
green
;
}
.shadow-black {
text-shadow
:
4px
4px
0px
black
;
}
</style>
<
p
style=
"
font-size:
1.2em;
"
>
<
span
class=
"
shadow-red
"
>
Lorem ipsum<
/
span>
<
span
class=
"
shadow-green
"
>
dolore sit amet<
/
span>
, <
span
class=
"
shadow-black
"
>
consectetur adipisicing elit<
/
span>
<
/
p>
Explications des valeurs :
- décalage en pixels à droite ;
- décalage en pixels en bas ;
- force du dégradé ;
- couleur.
Le cas IE : comme (toujours ?) Internet Explorer fait bande à part, il faut utiliser la propriété filter. Voici un exemple :
filter:
progid:
DXImageTransform.Microsoft.Shadow(color
=
'
#
ff0000
'
,
Direction
=
135
,
Strength
=
4
);
zoom:
1
;
I-C. Définition de la couleur de texte▲
I-C-1. Couleur de texte | color▲
color : nous disposons de six types de valeur pour indiquer la couleur du texte d'un élément :
Syntaxe : <color> | inherit
Compatibilité : IE 5+, FF 1+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1 (CSS 3 pour rgba, hsl et hsla)
- la couleur en anglais : red, black, white, blue, green, etc. ;
- la couleur en hexadécimal : #C0C0C0 ;
- la couleur en Red Green Blue (RGB ou RVB en français) : rgb(0, 255, 0) ;
- la couleur en RGB avec transparence : rgba(0, 255, 0, 0.5) ;
- la couleur en Hue Saturation Luminosity (HSL ou teinte, saturation, luminosité) : hsl(250, 100%, 50%) ;
- la couleur en HSL avec transparence : hsla(250, 100%, 50%, 0.5).
Complément d'information : Les couleurs en CSS 3.
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet
Lorem ipsum dolore sit amet