Les créations de [dd]

Jeudi 7 février 2008

Formatage du texte

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" :

Couleur	Aperçu
white
silver
gray
black
red
maroon
lime
green
yellow
olive
blue
navy
fuchsia
purple
aqua
teal

D'autres couleurs officieuses existent (certaines ont aussi un nom mais on utilisera plus souvent le code commençant par #):

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;}