Fiche CSS : Tailles et Couleurs

Objet de la fiche :

État de la fiche

Plan de la fiche :

• | Avant propos |
• | Les unités de définition de la taille d'un élément |
• | Propriétés de dimensionnement d'un élément |
• | Les valeurs de couleur |
• | Convertisseur de couleurs |
• | Application au projet de site web |

Avant propos

Cette fiche est consacrée d'une part à la définition des unités liées à la taille des éléments HTML, et d'autre part aux valeurs possibles utilisées pour la définition des couleurs.

• L'utilisation des unités de dimensionnement pour régler la taille des éléments HTML (caractères, cadres, marges ..) est une opération de base des concepteurs de page HTML, mais encore faut-il utiliser la méthode  la plus adaptée aux différents environnements des internautes.
• Les propriétés de couleur auxquelles ont va affecter une valeur (correspondant à la couleur choisie) ,  pour  personnaliser les polices de caractères, les fonds de pages, les arrières plan, les bordures de cadres, sont aussi des points de personnalisation très importants dans la présentation des pages.

Les unités de définition de la taille d'un élément

Généralités

Un concepteur de page Internet  doit faire très attention à  la dimension des différents éléments dans sa page afin qu'elle puisse être lue dans les meilleures conditions par n'importe quel navigateur (taille des caractères) et affichée correctement sur n'importe quel écran (résolutions d'affichage). Il faut aussi tenir compte des visiteurs ayant des problèmes de vision qui doivent pouvoir  librement agrandir les caractères, tout en conservant une bonne accessibilité au document.

Tout ce qui concerne le dimensionnement doit être pris en compte : largeurs et hauteurs des calques, des images, des tables, taille des marges internes et externes, taille des caractères, des espacements et des interlignages.

Il existe 2 types d'unités de dimensionnement

• Les unités absolues que sont le point (pt), le pica (pc), le centimètre (cm), le millimètre (mm) et le pouce (in). Toutes ces unités sont  proportionnelles entre elles et  n'ont de sens que pour des impressions (et encore!), A fuir!!!
• Les unités relatives que sont le «em» (em) et le «ex» (ex) relatifs à la police de référence et le pixel (px) relatif à la conception physique de l'écran. Le pixel revient donc quelque part à une unité absolue. On utilise aussi les % comme valeurs relatives : une police de caractère aura par exemple 80% de la taille de son éléments parent.

Pixels (définition tirée de l'encyclopédie en ligne WikipediA)

Le pixel, abrégé px, est l'unité de base d'une image numérique. Son nom provient de la locution anglaise picture element, qui signifie, « élément d'image » ou « point élémentaire ».

C'est l'unité minimale adressable par le contrôleur vidéo. C'est par exemple l'unité utilisée pour spécifier les définitions d'affichage (largeur × hauteur) :

la définition du VGA (video graphics array) est de 640 × 480, soit 307 200 pixels ;
la définition du Super-VGA ou S-VGA (super video graphics array) est de 800 × 600, soit 480 000 pixels ;
la définition du XGA (eXtended graphics array) est de 1 024 × 768, soit 786 432 pixels ;
la définition du SXGA (super extended graphics array) est de 1 280 × 1 024, soit 1 310 720 pixels.
la définition du UXGA (ultra extended graphics array) est de 1 600 × 1 200, soit 1 920 000 pixels.
À chaque pixel est associée une couleur, usuellement décomposée en trois composantes primaires (voir l'article Rouge vert bleu).

Sur un écran cathodique classique, chaque pixel est reconstitué par une triade de composants électroluminescents, rendant des tons rouge, vert et bleu une fois bombardés par le canon à électron du tube cathodique.

em comme unité relative privilégiée

Attention à ne pas confondre l’unité de mesure typographique em  et la balise <em>  qui sert à spécifier clairement que le mot ou la portion de texte qu’elle encadre doit être mis en évidence.

Pourquoi

Pour concevoir un site web dont le texte sera lisible par tous, quelle que soit la configuration matérielle ou les besoins spécifiques de l'utilisateur, il faut permettre le redimensionnent du texte et  des cadres. Cela implique l'abandon des tailles de texte en pixels, et l'utilisation d'unités relatives, qui ont deux caractéristiques principales : contrairement aux tailles indiquées en pixels, elles permettent l'agrandissement du texte « à la volée » (après le chargement de la page), et se basent sur la taille du texte par défaut indiquée par l'utilisateur dans les préférences de son navigateur.

ex serait la méthode idéale pour gérer les tailles avec agrandissements possibles, mais cette unité est encore partiellement implémentée dans les navigateurs courants, donc le concepteur doit se rabattre sur em, malgré quelques très petits problèmes d'arrondis de taille.

Les pourcentages sont très proches des ex et des em : 100% pour conserver la taille par défaut, 200% pour la doubler, 50% pour la diviser. Les % ne sont pas à proprement parler des unités typographiques comme les em ou ex. On les utilisera plus naturellement pour définir des longueurs, des largeurs ou des positions d'éléments.

Comment

Un em est la distance égale à la taille du texte. Dans un corps dont la taille de la police de référence est de 10 pixel, un em vaut 10 pixels; dans un corps dont la taille de la police de référence est de 18 pixel, un em vaut 18 pixels. Une largeur d'élément exprimée en em est donc proportionnellement la même quelle que soit la taille du texte.

Donc si 1 em est égal à la taille de la police de référence et que cette taille est en principe de 16 pixels pour 'tous ' les navigateurs, on retiendra comme base de travail que 1em est équivalent à 16pixels.

Notation et exemple

Pour les fractions de em la notation est de la forme 1.2 ( un point deux ) pour 1,2 fois la taille du parent ou 0.1 ( zéro point 1 ) pour un dixième de la taille du parent.

Le tableau suivant permet d'avoir une vue un peu plus précise sur les différences d'affichage en fonction des navigateurs , suivant les unités (pixel ou em) utilisées et les agrandissements ou réductions qui peuvent être appliquées par l'internaute via son navigateur.

Différences d'affichage

Le code utilisé	Commentaires
<html> <head> <title>test</title> <style type= "text/css"> html {font-size:100%} body {font-size:1em} p.Class1{  font-family:arial;   background-color:gray;   width:6em;   border:solid 0.312em;   font-size: 1em; } p.Class2{  font-family:arial;   background-color:yellow;   width:96px;  border:solid 5px;   font-style:16px } </style> </head> <body> <p class="Class1">Exp1 em</p> <p class="Class2">Exp2 pixel</p> </body> </html>	L'utilisation de la taille par défaut donne les mêmes résultats sur les deux navigateur que l'on définisse la taille en pixels ou em
	Internet explorer	Firefox
	L'agrandissement se comporte bien sur les deux navigateurs lorsque l'on travaille en em. Pour le travail en pixels, Firefox bloque la fenêtre à 96pixels de largeur ce qui est normal en regard des normes, mais agrandit correctement la taille des caractères, qui en toutes logique devraient rester à 16 pixels. Internet Explorer Firefox
La réduction se comporte bien sur les deux navigateurs lorsque l'on travaille en em. Pour le travail en pixels, Firefox bloque la fenêtre à 96pixels de largeur ce qui est normal en regard des normes, mais réduit correctement la taille des caractères, qui en toutes logique devraient rester à 16 pixels. Internet Explorer Firefox

Remarque sur la feuille de style interne de l'exemple précédent

font-size est l'attribut spécifiant la taille des caractères. Pourquoi spécifier font-size: 100% sur l'élément html, alors que cela devrait être inutile ? Il s'agit en fait d'un correctif pour un bug d'Internet Explorer Windows, bug qui rend « anarchique » le redimensionnent du texte à la volée dans ce navigateur. Internet Explore a du mal à gérer des tailles de texte en em si aucune déclaration en pourcentages ne les précède. Avec font-size: 100% sur l'élément html, on se prémuni de ce bug. A la suite de cela on peut définir pour le corps du document (body) la référence pour la taille des caractères mais aussi pour toute syntaxe de style utilisant un dimensionnement.

Propriétés de dimensionnement d'un élément

Généralités

Ces propriétés permettent de préciser la largeur et la hauteur occupées par un élément. Lorsque rien n'est précisé :

• la hauteur d'un élément prend automatiquement la hauteur de son contenu (au padding et margin prés).
• la largeur dépend du type d'élément : la plus part des éléments principaux occupent automatiquement 100% de la largeur de la page (div, p, form, ul, hx ..), d'autres (span, input, table, lien hypertexte) n'occupent que l'espace déterminé par leur contenu.

Lorsque l'on crée un élément on ne voit pas réellement l'espace qui est occupé, c'est pourquoi il est parfois pratique de leur affecter temporairement une bordure comme le montre l'exemple ci dessous.

Propriétés

Taille et dimensionnement dans les cas d'imbrications

Les notions de Parent / Enfant avec des balises imbriquées

L'imbrication fonctionne par le système Parent / Enfant. Un Parent étant lui même un enfant de son Parent (sauf en haut de chaîne), et un Enfant est toujours le Parent d'un Enfant (sauf en bas de chaîne). Tous les Enfants d'un Parent représente sa descendance.

Impacts des imbrications sur le dimensionnement

Impact des imbrications

Le code utilisé

Résultat

<html> <head> <title>Test</title> <style type="text/css">   html {font-size:100%}   body {font-family:arial; font-size:1em}   div {border:solid 0.1em;font-size:0.75em;color:blue}   div div {border:solid 0.1em;font-size:1em;color:red}   div div div{border:solid 0.1em;font-size:2em;color:gray}   p {font-size:1em}   td{font-size:2em} </style> </head> <body> Taille de départ <div>   Texte boite 1    <div>      Texte boite 2      <div>       Texte boite 3       <p>Texte paragraphe boite 3</p>       <table border="1">         <tr><td>Cellule tableau</td></tr>        </table>      </div>    </div> </div> </body> </html>

On utilise la balise div servant à délimiter des blocs. On imbrique 3 balises div et un paragraphe plus un tableau dans la boite 3. La taille du texte du bloc 1(spécifié par le style div {font-size:0.75em}) est égale à 0.75 fois  la taille de son parent body qui sert de référence de départ. La taille du texte du block 2 imbriqué dans le block 1(spécifié par le style div div {font-size:1em}) est égale à 1 fois  la taille de son parent div du block 1 qui lui sert de référence. La taille du texte du block 3 imbriqué dans le block 2 lui même imbriqué dans le block 1(spécifié par le style div div div {font-size:2em}) est égale à 2 fois  la taille de son parent div du block 2 qui lui sert de référence. La taille du texte des cellules du tableau contenu dans le block 3 (spécifié par le style td {font-size:2em}) est égale à 2 fois  la taille de son parent div du block 3 qui lui sert de référence.

A la vue de l'exemple ci dessus on évitera  d'utiliser à tord et à travers la propriété CSS font-size pour des blocs conteneurs et des éléments « intermédiaires » lorsque ça n'est pas directement utile ou nécessaire. Le plus simple sera de laisser les enfants et descendants de l'élément body hériter de la taille de texte « globale » fixée pour cet élément, et de ne corriger cette taille de texte globale qu'en bout de chaîne (si on souhaite s'en écarter, bien sûr), pour un élément ou un groupe d'éléments précis.

Les valeurs de couleurs

La valeur d'une couleur peut être définie de plusieurs manières :

Par son Nom :

 White, Blue, Silver ....soit  une des 16 couleurs fondamentales dénommées par un  nom parlant (en anglais) normalisées et reconnues par tous les navigateurs.

Par une valeur hexadécimale = #XXYYZZ

La couleur est désignée par son code hexadécimal (un dièse suivi de 6 digits). Les deux premiers digits (XX) représentent la valeur de rouge, les deux suivants (YY)  le vert et les deux derniers( ZZ)  le bleu. En mélangeant dans des proportions différentes ces trois couleurs de base, on peut obtenir toutes les couleurs. On retrouve ci dessous les caractères hexadécimaux des couleurs définies précédemment.

Le système hexadécimal est un système de numération utilisant la base 16. Le nom hexadécimal provient du fait qu'il utilise les 10 premiers chiffres arabes (décimal, dix) puis les 6 premières lettres de l'alphabet latin (hexa, six) : 0 1 2 3 4 5 6 7 8 9 A B C D E F.

En mode RGB rgb ( a, b, c)

La couleur est définie par trois nombres de 0 à 255 indiquant respectivement le taux de rouge, le taux de vert et le taux de bleu. Cette notation est identique à la précédente seule la base de numérotation diffère : on écrit FF en hexadécimal ce qui équivaut à 255 en décimal.

Dans la notation rgb(a b c) a,b,c représentent chacun des entiers de 0 à 255. On peut aussi noter de la façon suivante : rgb(15% 55% 80%) pour obtenir une couleur composée de 15% de rouge, 55% de vert et 80% de bleu. La couleur Olive par exemple définie comme rgb(128, 128, 0) pourrait  être définie comme rgb(50%, 50%, 0%) : en effet 128 est la moitié de 255 soit 50% de la valeur max.

A partir de données liées à l'environnement de l'utilisateur.

Ces données d'environnement sont disponibles pour que le concepteur donne à sa page Internet un aspect de couleurs dans le style de celui défini pour l'affichage de son bureau. En effet à partir de la version 2.0 du langage CSS, il existe la possibilité d'utiliser des noms de couleur spécifiques à l'utilisateur, derrière lesquels se cachent des couleurs que l'utilisateur a réglé sur son ordinateur comme environnement de travail. De cette façon vous pouvez utiliser des couleurs qui correspondront aux couleurs choisies par l'utilisateur pour son écran pour structurer vos pages et cela sans que vous ne connaissiez ces couleurs. Comme cela existe je le signale sans voir réellement comment on peut l'appliquer artistiquement !

Les noms de couleurs spécifiques à l'utilisateur qui sont permises sont expliquées ci-après.

C'est données correspondent aux données d'affichage du bureau, réglées par l'utilisateur comme on le voit ci-dessous pour Windows

Syntaxe d'utilisation

On verra en détail dans les fiches suivantes comment affecter une couleur par exemple à du texte avec l'attribut color. Nous allons utiliser cet attribut ici pour illustrer notre propos sur les couleurs.

Application au projet de site web

• Dans le fichier CSSExterneScreen.css  :
  • Définissez font-size pour la balise html (bug IE)
  • Définissez la taille de référence des caractères  (font-size) à 0.8 em pour l'ensemble des pages Web du site (balise body).
  • Déclarer la feuille de style permettant de structurer le titre (boite div "titreSite") de la façon suivante : #titreSite{font-size:1.4em}.
  • Sauvegardez le fichier.

Retrouvez la solution