Formater un texte = Modifier l'apparence du texte
Taille du texte
La propriété CSS qui permet de changer la taille du texte est font-size.
Deux possibilités s'offrent à vous :
- Taille absolue : il s'agit d'indiquer en pixels, la hauteur exacte de vos lettres.
|
ex : .contenuArticle {font-size:16px;}
|
- Taille relative : il s'agit d'indiquer si le texte sera petit, très petit, moyen, grand, très grand...
ex : .contenuArticle {font-size: xx-small;}
.contenuArticle {font-size: x-small;}
.contenuArticle {font-size: small;}
.contenuArticle {font-size: medium;}
.contenuArticle {font-size: large;}
.contenuArticle {font-size: x-large;}
.contenuArticle {font-size: xx-large;}
|
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 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 effet, selon la résolution de votre écran, ce même
texte n'apparaitra pas de la même façon.
Il existe d'autres moyens mais les 2 cités ci-dessus sont les plus courants.
Police du texte
Le problème c'est que, pour qu'une police s'affiche correctement, il faut que tous les internautes l'aient. Si un internaute n'a pas la même police que vous, son navigateur
prendra une police par défaut (une police standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous attendiez.
La propriété CSS qui permet d'indiquer la police est
font-family.
|
ex : .contenuArticle {font-family:police;}
|
Seulement, pour éviter qu'il n'y ait de problème si l'internaute n'a pas la même police que vous, on met en général
plusieurs noms de police, séparés
par des virgules :
|
ex : .contenuArticle {font-family:police1, police2,
police3, police4;}
|
-> En général, on met en tout dernier "serif", ce qui correspond à une police standard (qui ne se met que si aucune autre police n'a été
trouvée).
-> Lorsqu'un nom de police est en plusieurs mots, on l'écrit entre guillemets.
|
ex : .contenuArticle {font-family: "Arial Black", Arial, Verdana, serif;}
|
A SAVOIR : Les polices les plus utilisées, donc les plus sûres à utiliser sont :
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Alignement du texte
C'est à dire, le texte sera-t-il aligné à gauche,à droite, centré ou justifié?
On utilise la propriété
text-align, et on indique l'alignement désiré :
-
left : le texte sera aligné à gauche (c'est le réglage par défaut).
-
center : le texte sera centré.
-
right : le texte sera aligné à droite.
-
justify : le texte sera "justifié". Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser
d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont tout le temps justifiés.
|
ex : .contenuArticle {text-align: center;}
|
Décoration du texte
Cette propriété CSS porte bien son nom :
text-decoration
Elle permet, entre autres, de souligner le texte. Voici les différentes valeurs qu'elle peut prendre :
-
underline : souligné.
-
line-through : barré.
-
overline : ligne au-dessus.
-
blink : clignotant. Attention, cette propriété ne marche pas sous Internet Explorer. Elle fonctionne en revanche bien sur tous les
autres navigateurs, dont Mozilla Firefox.
-
none : normal (par défaut).
|
ex : .contenuArticle {text-decoration: underline;}
|
Couleur du texte
La propriété qui permet de changer la couleur du texte est
color.
La méthode la plus simple et la plus pratique pour choisir une couleur est de taper son nom en anglais.
Le seul défaut de cette méthode est qu'il n'existe que 16 couleurs dites "standard" :
|
white
|
|
|
silver
|
|
|
gray
|
|
|
black
|
|
|
red
|
|
|
maroon
|
|
|
lime
|
|
|
green
|
|
|
yellow
|
|
|
olive
|
|
|
blue
|
|
|
navy
|
|
|
fuchsia
|
|
|
purple
|
|
|
aqua
|
|
|
teal
|
|
|
Couleur
|
Aperçu
|
D'autres couleurs officieuses existent (certaines ont aussi un nom mais on utilisera plus souvent le code commençant par
#):
|
Ech.
|
Nom HTML
|
Traduction
|
RVB
|
|
|
aliceblue
|
bleu Alice
|
#F0F8FF
|
|
|
antiquewhite
|
blanc antique
|
#FAEBD7
|
|
|
aqua
|
eau
|
#00FFFF
|
|
|
aquamarine
|
aigue-marine
|
#7FFFD4
|
|
|
azure
|
azurin
|
#F0FFFF
|
|
|
beige
|
beige
|
#F5F5DC
|
|
|
bisque
|
bisque
|
#FFE4C4
|
|
|
black
|
noir
|
#000000
|
|
|
blanchedalmond
|
amande blanchi
|
#FFEBCD
|
|
|
blue
|
bleu
|
#0000FF
|
|
|
blueviolet
|
parme bleuté
|
#8A2BE2
|
|
|
brown
|
brun
|
#A52A2A
|
|
|
burlywood
|
bois dur
|
#DEB887
|
|
|
cadetblue
|
pétrole clair
|
#5F9EA0
|
|
|
chartreuse
|
vert chartreuse
|
#7FFF00
|
|
|
chocolate
|
chocolat
|
#D2691E
|
|
|
coral
|
corail
|
#FF7F50
|
|
|
cornflowerblue
|
bleuet
|
#6495ED
|
|
|
cornsilk
|
jaune maïs doux
|
#FFF8DC
|
|
|
crimson
|
pourpre
|
#DC143C
|
|
|
cyan
|
cyan
|
#00FFFF
|
|
|
darkblue
|
bleu sombre
|
#00008B
|
|
|
darkcyan
|
cyan sombre
|
#008B8B
|
|
|
darkgoldenrod
|
jaune paille sombre
|
#B8860B
|
|
|
darkgray
|
gris cliar (!)
|
#A9A9A9
|
|
|
darkgreen
|
vert sombre
|
#006400
|
|
|
darkkhaki
|
kaki sombre
|
#BDB76B
|
|
|
darkmagenta
|
magenta sombre
|
#8B008B
|
|
|
darkolivegreen
|
vert olive sombre
|
#556B2F
|
|
|
darkorange
|
orange sombre
|
#FF8C00
|
|
|
darkorchid
|
orchidée sombre
|
#9932CC
|
|
|
darkred
|
rouge sombre
|
#8B0000
|
|
|
darksalmon
|
saumon sombre
|
#E9967A
|
|
|
darkseagreen
|
vert océan sombre
|
#8FBC8F
|
|
|
darkslateblue
|
bleu ardoise sombre
|
#483D8B
|
|
|
darkslategray
|
gris ardoise sombre
|
#2F4F4F
|
|
|
darkturquoise
|
turquoise sombre
|
#00CED1
|
|
|
darkviolet
|
violet sombre
|
#9400D3
|
|
|
deeppink
|
rose profond
|
#FF1493
|
|
|
deepskyblue
|
bleu ciel profond
|
#00BFFF
|
|
|
dimgray
|
gris rabattu
|
#696969
|
|
|
dodgerblue
|
|
#1E90FF
|
|
|
firebrick
|
rouge brique
|
#B22222
|
|
|
floralwhite
|
blanc floral
|
#FFFAF0
|
|
|
forestgreen
|
vert forêt
|
#228B22
|
|
|
fuchsia
|
fuchsia
|
#FF00FF
|
|
|
gainsboro
|
|
#DCDCDC
|
|
|
ghostwhite
|
blanc spectral
|
#F8F8FF
|
|
|
gold
|
or
|
#FFD700
|
|
|
goldenrod
|
jaune paille
|
#DAA520
|
|
|
gray
|
gris
|
#808080
|
|
|
green
|
vert
|
#008000
|
|
|
greenyellow
|
jaune-vert
|
#ADFF2F
|
|
|
honeydew
|
miellé
|
#F0FFF0
|
|
|
hotpink
|
rose chaud
|
#FF69B4
|
|
|
indianred
|
rouge indien
|
#CD5C5C
|
|
|
indigo
|
indigo
|
#4B0082
|
|
|
ivory
|
ivoire
|
#FFFFF0
|
|
|
khaki
|
kaki
|
#F0E68C
|
|
|
lavender
|
lavande
|
#E6E6FA
|
|
|
lavenderblush
|
lavande rougeâtre
|
#FFF0F5
|
|
|
lawngreen
|
vert prairie
|
#7CFC00
|
|
|
lemonchiffon
|
jaune chiffoné ?
|
#FFFACD
|
|
|
lightblue
|
bleu clair
|
#ADD8E6
|
|
|
lightcoral
|
corail clair
|
#F08080
|
|
|
lightcyan
|
cyan clair
|
#E0FFFF
|
|
|
lightgoldenrodyellow
|
jaune paille clair
|
#FAFAD2
|
|
|
lightgreen
|
vert clair
|
#90EE90
|
|
|
lightgrey
|
gris clair
|
#D3D3D3
|
|
|
lightpink
|
rose clair
|
#FFB6C1
|
|
|
lightsalmon
|
saumon clair
|
#FFA07A
|
|
|
lightseagreen
|
vert océan clair
|
#20B2AA
|
|
|
lightskyblue
|
bleu ciel clair
|
#87CEFA
|
|
|
lightslategray
|
gris ardoise clair
|
#778899
|
|
|
lightsteelblue
|
bleu acier clair
|
#B0C4DE
|
|
|
lightyellow
|
jaune clair
|
#FFFFE0
|
|
|
lime
|
citron vert
|
#00FF00
|
|
|
limegreen
|
citron vert foncé
|
#32CD32
|
|
|
linen
|
blanc de lin
|
#FAF0E6
|
|
|
magenta
|
magenta
|
#FF00FF
|
|
|
maroon
|
marron
|
#800000
|
|
|
mediumaquamarine
|
aigue-marine moyen
|
#66CDAA
|
|
|
mediumblue
|
bleu moyen
|
#0000CD
|
|
|
mediumorchid
|
orchidée moyen
|
#BA55D3
|
|
|
mediumpurple
|
lavande
|
#9370DB
|
|
|
mediumseagreen
|
vert océan moyen
|
#3CB371
|
|
|
mediumslateblue
|
bleu ardoise moyen
|
#7B68EE
|
|
|
mediumspringgreen
|
vert printemps moyen
|
#00FA9A
|
|
|
mediumturquoise
|
turquoise moyen
|
#48D1CC
|
|
|
mediumvioletred
|
rouge violacé moyen
|
#C71585
|
|
|
midnightblue
|
bleu nuit
|
#191970
|
|
|
mintcream
|
blanc mentholé
|
#F5FFFA
|
|
|
mistyrose
|
rose voilé
|
#FFE4E1
|
|
|
moccasin
|
beige mocassin
|
#FFE4B5
|
|
|
navajowhite
|
blanc navarro
|
#FFDEAD
|
|
|
navy
|
bleu marine
|
#000080
|
|
|
oldlace
|
vieux blanc
|
#FDF5E6
|
|
|
olive
|
vert olive
|
#808000
|
|
|
olivedrab
|
vert olive terne
|
#6B8E23
|
|
|
orange
|
orange
|
#FFA500
|
|
|
orangered
|
rouge orangé
|
#FF4500
|
|
|
orchid
|
orchidée
|
#DA70D6
|
|
|
palegoldenrod
|
jaune paille pâle
|
#EEE8AA
|
|
|
palegreen
|
vert pâle
|
#98FB98
|
|
|
paleturquoise
|
turquoise pâle
|
#AFEEEE
|
|
|
palevioletred
|
rouge violacé pâle
|
#DB7093
|
|
|
papayawhip
|
papaye délavé
|
#FFEFD5
|
|
|
peachpuff
|
pêche passé
|
#FFDAB9
|
|
|
peru
|
pérou
|
#CD853F
|
|
|
pink
|
rose
|
#FFC0CB
|
|
|
plum
|
prune
|
#DDA0DD
|
|
|
powderblue
|
bleu poudré
|
#B0E0E6
|
|
|
purple
|
violet
|
#800080
|
|
|
red
|
rouge
|
#FF0000
|
|
|
rosybrown
|
bois de rose
|
#BC8F8F
|
|
|
royalblue
|
bleu roi
|
#4169E1
|
|
|
saddlebrown
|
cuir
|
#8B4513
|
|
|
salmon
|
saumon
|
#FA8072
|
|
|
sandybrown
|
brun sable
|
#F4A460
|
|
|
seagreen
|
vert océan
|
#2E8B57
|
|
|
seashell
|
coquillage
|
#FFF5EE
|
|
|
sienna
|
terre-de-sienne
|
#A0522D
|
|
|
silver
|
argent
|
#C0C0C0
|
|
|
skyblue
|
bleu ciel
|
#87CEEB
|
|
|
slateblue
|
bleu ardoise
|
#6A5ACD
|
|
|
slategray
|
gris ardoise
|
#708090
|
|
|
snow
|
blanc neigeux
|
#FFFAFA
|
|
|
springgreen
|
vert printemps
|
#00FF7F
|
|
|
steelblue
|
bleu acier
|
#4682B4
|
|
|
tan
|
brun tané
|
#D2B48C
|
|
|
teal
|
sarcelle
|
#008080
|
|
|
thistle
|
chardon
|
#D8BFD8
|
|
|
tomato
|
rouge tomate
|
#FF6347
|
|
|
turquoise
|
turquoise
|
#40E0D0
|
|
|
violet
|
parme
|
#EE82EE
|
|
|
wheat
|
blé
|
#F5DEB3
|
|
|
white
|
blanc
|
#FFFFFF
|
|
|
whitesmoke
|
blanc fumée
|
#F5F5F5
|
|
|
yellow
|
jaune
|
#FFFF00
|
|
|
yellowgreen
|
vert jaunâtre
|
#9ACD32
|
ex : .contenuArticle {color:red;}
.contenuArticle {color:#9ACD32;}
.contenuArticle {color:#FFFFFF;} équivaut à écrire .contenuArticle {color:white;}
|
Veillez à ne pas effacer ce qui est entre les accolades avant votre modification !
