Les systèmes de notation des couleurs
Vous avez pu remarquer que dans notre premier exercice, nous avions sélectionné les couleurs par des noms en anglais. À ce stade , c'était pour simplifier la démonstration. Ces noms s'appellent des mots-clefs.
Il existe 17 mots-clefs normalisés , soit 17 couleurs fondamentales nommées par leur noms anglais et qui sont reconnues par tous les navigateurs, par exemple : yellow, green, blue, red que nous avons utilisés. Il existe par ailleurs une liste plus exhaustive de 140 mots-clefs, à laquelle nous avons emprunté lightgrey ou yellowgreen. Par delà sa simplicité apparente, cette méthode d'écriture des couleurs présente deux inconvénients :
- D'abord, elle implique de connaitre 140+17 noms de couleurs en anglais.
- Et surtout, elle n'est pas reconnue par tous les navigateurs, donc exit.
La palette de couleurs disponibles est issue d'une combinaison des trois couleurs fondamentales Rouge, Vert et Bleu (comme ce système a été adapté à l'informatique par des anglophones il est noté Red, Green, Blue) qui peuvent prendre chacune 256 valeurs différentes. Les combinaisons des trois couleurs forment des triplets qui peuvent être notés de 0 à 255 en base 10, ou plus fréquement de 00 à FF en base 16. Il y donc 256 puissance 3 ou 16 puissance 6, soit 16 777 216 couleurs possibles.
Pour mémoire citons la notation RGB (pour Red, Green, Blue) qui peut s'exprimer soit en système décimal soit en pourcentage, mais qui aboutit à une écriture de code plutôt lourde, donc cette technique ne m'enthousiasme guère.
En dépit d'un abord un peu abstrait, le système le plus pratique et le plus simple en écriture de code me parait, à l'usage, être la notation hexadécimale. La syntaxe en est la suivante : #RRGGBB (2 chiffres pour Red, 2 chiffres pour Green, 2 chiffres pour Blue) . Ainsi, l'arrière-plan gris du <body> de notre première page peut indifféremment s'écrire :
- background-color:gray
- background-color:#808080 ou même background:#808080
Un autre avantage de la notation hexadécimale est la possibilité d'utiliser une notation condensée quand chacun des trois triplets est formé d'une paire de chiffres identiques, ainsi :
- background:#FFFFFFF peut se condenser en background:#FFF
- Ou background:#88CC00 peut se condenser en background:#8C0
- Par contre, ATTENTION, background:#88C600 ne peut se condenser en background:#8C60
Si vous voulez en savoir plus sur les systèmes de notation des couleurs vous pouvez au choix visiter la page de Josette Argaud ou le site de CSS Style qui offrent l'un comme l'autre de bonnes synthèses de la question.
Nous allons poursuivre notre expérience en notant en hexadécimal toutes les couleurs que nous avons utilisées dans notre fichier ManouvellePage,
pour corser l'exercice nous pourrons utiliser des triplets plus subtils que les classiques FFFFF00 (jaune) ou FF0000 (rouge).
Malheureusement NotePad n'offre pas la facilité de DreamWeaver qui déroule sa palette des couleurs quand nous ouvrons une propriété qui accepte
ce type de valeur, il nous faudra donc chercher nos références dans des palettes de couleurs extérieures, par exemple dans
celle de free.
Voyons donc ce que cela donnera dans NotePad :
Et allons voir ce que cela donne dans le Navigateur :
Centrage horizontal par marges automatiques
Dans le code html, dans la div id"corps", créez un nouveau titre de rang h2
que vous intitulerez "Centrage horizontal par marges automatiques".
Sous ce titre, créez un nouveau paragraphe class="P1" auquel vous attribuerez en ligne les propriétés :
style="margin-left: auto; margin-right: auto;"
Vous pouvez mettre à l'intérieur le texte qui vous chante, ou pas de texte du tout. Cette technique de centrage automatiqe n'est pas nouvelle
pour vous, mais il est important d'en rappeler la syntaxe.
On constate ci-dessous que le paragraphe P1 est bien centré horizontalement dans la page :
REMARQUES SUR LE CENTRAGE PAR MARGES AUTOMATIQUES
Cette technique de centrage est adapté aux éléments positionnés dans le flux courant. Elle permet de centrer tout bloc dans son
conteneur. Attention il ne faut pas oublier de préciser la largeur du bloc à centrer. (Dans l'exemple ci-dessus, cette
largeur est pécisée dans la feuille de style interne, par les propriétés du sélecteur .P1).
Par contre vous vous exposez à des déboires si vous tentez de l'utiliser avec des éléments en position absolue ou fixe. J'ai moi même été confronté
à ce problème en composant ces pages.
Mon en-tête placée en position : fixed se centrait parfaitement avec Internet Explorer mais se calait à gauche avec Firefox.
Voyez ci-dessous ce que cela donnait :
Explication, le conteneur étant centré tout en restant dans le fux, positionner son contenu le fera sortir du flux, donc du bloc. (Source : Alsacréation). Les inconvénients du centrage par marges automatiques peuvent être résolus par le centrage absolu.
Profondeur et z-index
Visitez le tuto de 2009 : La Profondeur