merci pour le cour, comprendre l'interet d'une feuille de style
à mettre entre toutes les mains
E.
"Philippe Auriol" <philippe.auriol@wanadoo.fr> a écrit dans le message de
news: BB455C08.1F329%philippe.auriol@wanadoo.fr...
Bonjour,
Concernant le html et la couleur du texte suite à des questions sur le
sujet, je me permets un petit récapitulatif que les spécialistes me
pardonneront et complèteront volontiers.
1/ COMMENT DECLARER UNE COULEUR POUR UN TEXTE:
### L'ANCIEN TESTAMENT ####
Autrefois, en html 3 et parfois encore en html4, la couleur d'un texte était
définie dans la balise :
<font></font>
Cette balise/tag acceptait les attributs suivants :
Size : la taille en relatif(+x) ou en absolu 12px.
Color: soit en couleur prédéfinie (blue, green, purple, gray, etc.) soit en
code rgb : #FFFFFFF à #000000
Face : la famille de police ou les polices à utiliser par ordre de priorité.
Exemple :
<font color="blue" size="+1" face="Arial">
Mon joli texte bleu en Arial et plus grand que le reste
</font>
Actuellement, depuis le html 4 et avec l'arrivée du xhtml, il est plutôt
conseillé de séparer le fond de la forme : les balises qui étaient utilisées
pour "décorer" votre page sont désormais désuettes (deprecated) ce qui vaut
tant pour les balises font que pour l'usage des tableaux en présentation de
page (schisme terriblement difficile pour beaucoup).
Il est donc actuellement préférable de définir ses couleurs dans la feuille
de style.
### LE NOUVEAU TESTAMENT ###
La feuille de style est :
=> Soit inexistante: les styles sont déclarés DANS la page au sein de chaque
balise.
exemple: <div style="color:blue; font-weight:bolder; border: 1px solid
orange;">Mon joli texte bleu écrit en gras placé dans un cadre orangé</div>
=> Soit intégrée à la page html, exemple :
<doctype...>
[...]
<head>
<style type="text/css" media="all">
div#textebleu{
color:blue;
font-weight: bolder;
border: 1px solid orange;
}
</style>
</head>
[...]
<div id="textebleu">
Mon joli texte bleu écrit en gras placé dans un cadre orangé
</div>
[...]
=> Soit externalisée dans un fichier dédié :
Donc mapage.html contient alors :
<doctype...>
[...]
<head>
<link rel="StyleSheet" type="text/css" href="monstyle.css"/>
/* il existe d'autre manière de déclarer une css, cf les liens */
</head>
[...]
<div id="textebleu">
Mon joli texte bleu écrit en gras placé dans un cadre orangé
</div>
[...]
Et la page monstyle.css contiendra alors :
div#textebleu{
color:blue;
font-weight: bolder;
border: 1px solid orange;
}
######Aller plus loin (les liens) #####
La balise font du html 3.2:
http://www.w3.org/TR/REC-html32#font
Les CSS2, en français:
http://www.yoyodesign.org/doc/w3c/css2/cover.html
2/ QUELLE COULEUR?
En design il est fréquemment abordé la question des couleurs et de leur
bonne association.
Une des différences à faire est l'usage des tons chauds et des tons froids:
=>Tons chauds : rose, rouge, orange, marron, jaune, vert clair : qualifiés
de "stimulants" "épanouissants".
=>Tons froids : mauve, bleus, verts foncés qualifiés de "rassurants", de
"sérieux" "intellectuels".
La couleur est là pour servir le contenu de la page, elle doit donc être
utilisée pour conforter le lecteur dans l'opinion que vous souhaitez faire
passer.
Une autre notion importante est la notion de couleur complémentaire :
Il s'agit des couleurs opposés totalement ou partiellement sur le cercle
chromatique :
Cercle chromatique :
Bleu < > jaune
Rouge < > bleu
Rouge < > vert
Etc.
Les couleurs sur le web sont définies en hexadecimal qui définissent les
proportions de RVB (rouge-vert-bleu) dans la même teinte.
Contrairement à l'impression, il s'agit là de couleurs additives.
Le noir est donc composé de zéro rouge, zéro vert, zéro bleu, ce qui donne :
#000000
Le blanc est composé de 255 (couleur maximale) de rouge, vert, bleu ce qui
donne: #FFFFFF 
eh oui, les couleurs sont codés sur 8 bits prenant chacun
la valeur 0 ou 1, ce qui donne 256 états différents possibles.
C'est donc un système en base 16 que l'on écrit :
0 1 2 3 4 5 6 7 8 9 A B C D E F
Les cinq dernières lettres venant compléter ce que nos dix doigts ne nous
ont pas livré.
Vous pouvez donc facilement en déduire maintenant que le rouge c'est
#FF0000, le vert #00FF00, le bleu #0000FF et par l'habitude, vous retiendrez
que le jaune est #FFFF00, le magenta #FF00FF et le cyan #00FFFF.
Le html a normé à partir du 3.2 seize couleurs que vous pouvez utiliser à la
place du code hexadécimal :
Black : #FFFFFF
Maroon : #800000
Green : #008000 (notez que ce n'est pas le vert "pur" mais un vert foncé)
Olive #808000
Navy #000080
Purple #800080
Teal #008080
Gray #808080
Silver #C0C0C0
Red #FF0000
Lime : #00FF00 (le vert "pur").
Yellow #FFFF00
Blue #0000FF
Fuschia #FF00FF
Aqua #00FFFF
White #000000
Selon les navigateurs, d'autres couleurs nommées sont parfois reconnues en
plus.
Ajoutez quelques différences de gamma pc/mac des tailles de police
différentes selon les systèmes, selon les navigateurs, et vos allez sûrement
voir la vie en rose demain sur le web.
(lien : )
####Aller plus loin (les liens) ####
Le cercle chromatique :
http://www.ghc.be/~couleurs/cercle_chromatique.htm
La table des couleurs :
http://www.wdvl.com/Quadzilla/Tips_Tricks/hexchart.html
<pub style="color:sympa; font-weight: 900;">
Si le sujet des couleurs vous a intéressé vous pouvez maintenant voir
comment j'ai su les massacrer sur http://www.allergique.org/ 
</pub>
--
Philippe Auriol, allergologue
