Les Fiches de MonWebFacile





Chapitre

Fiche

 

Fiche CSS : Tailles et Couleurs

Objet de la fiche :

État de la fiche Terminée validée


Plan de la fiche :

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


Propriétés de dimensionnement
Propriétés Valeurs Commentaires
width auto
numérique entier (pixel, em)
%(1)
 
height

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.

Les noms de couleurs

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.

Les couleurs hexa

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.

Couleurs RGB

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.

Mots clé pour couleurs liées à l'environnement
Noms de couleurs spécifiques à l'utilisateur Couleur de ou du ... Votre bureau actuel
activeborder titre de la barre de titre active de la fenêtre
xxxxxxxxxxxxxx
appworkspace arrière plan de la fenêtre de l'application active.
xxxxxxxxxxxxxx
background arrière-plan du bureau.
xxxxxxxxxxxxxx
buttonface boutons dans les boites de message.
xxxxxxxxxxxxxx
buttonhighlight ombrages en 3D des boutons dans les boites de message.
xxxxxxxxxxxxxx
buttontext texte des boutons dans les boites de message.
xxxxxxxxxxxxxx
captiontext titres dans les boites de message.
xxxxxxxxxxxxxx
graytext texte désactivé dans les boites de message.
xxxxxxxxxxxxxx
highlight éléments choisis dans des listes de choix.
xxxxxxxxxxxxxx
highlighttext texte sélectionné.
xxxxxxxxxxxxxx
inactiveborder ligne de titre d'une fenêtre non active.
xxxxxxxxxxxxxx
inactivecaption titre dans la ligne de titre d'une fenêtre non active.
xxxxxxxxxxxxxx
infobackground info-bulles (petites aides déroulantes).
xxxxxxxxxxxxxx
infotext texte dans les info-bulles(petites aides déroulantes).
xxxxxxxxxxxxxx
menu barres de menu.
xxxxxxxxxxxxxx
menutext éléments de menu.
xxxxxxxxxxxxxx
scrollbar barre de défilement dans les fenêtres.
xxxxxxxxxxxxxx
threeddarkshadow couleur sombre pour les ombrages d'éléments 3D.
xxxxxxxxxxxxxx
threedface éléments 3D.
xxxxxxxxxxxxxx
threedhighlight éléments 3D venant d'être cliqués.
xxxxxxxxxxxxxx
threedlightshadow couleur claire pour les ombrages d'éléments 3D
xxxxxxxxxxxxxx
threedshadow couleur sombre pour les ombrages d'éléments 3D.
xxxxxxxxxxxxxx
window arrière plan pour les fenêtres de document.
xxxxxxxxxxxxxx
windowframe bordures de fenêtre.
xxxxxxxxxxxxxx
windowtext texte normal dans des fenêtres de document.
xxxxxxxxxxxxxx

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.

Exemples de styles de couleurs standards
Style Résultat du style appliqué à cette cellule
style="color:fuchsia"
XXXXXXXXXXXXXXXXXXXXX
style="color:#c0c0c0"
XXXXXXXXXXXXXXXXXXXXX
style="color:rgb(0,0,255)"
XXXXXXXXXXXXXXXXXXXXX
Exemples de styles de couleurs basés sur l'environnement
Style Résultat du style appliqué à cette cellule
style="color:highlight"
XXXXXXXXXXXXXXXXXXXXX
style="color:threedshadow"
XXXXXXXXXXXXXXXXXXXXX

Des noms de couleurs et leurs valeurs

Nom Valeur Hexa Couleur Nom Valeur Hexa Couleur
aliceblueF0F8FF antiquewhiteFAEBD7
aqua00FFFF aquamarine7FFFD4
azureF0FFFF beigeF5F5DC
bisqueFFE4C4 black000000
blanchedalmondFFEBCD blue0000FF
blueviolet8A2BE2 brownA52A2A
burlywoodDEB887 cadetblue5F9EA0
chartreuse7FFF00 chocolateD2691E
coralFF7F50 cornflowerblue6495ED
cornsilkFFF8DC crimsonDC143C
cyan00FFFF darkblue00008B
darkcyan008B8B darkgoldenrodB8860B
darkgrayA9A9A9 darkgreen006400
darkkhakiBDB76B darkmagenta8B008B
darkolivegreen556B2F darkorangeFF8C00
darkorchid9932CC darkred8B0000
darksalmonE9967A darkseagreen8FBC8F
darkslateblue483D8B darkslategray2F4F4F
darkturquoise00CED1 darkviolet9400D3
deeppinkFF1493 deepskyblue00BFFF
dimgray696969 dodgerblue1E90FF
firebrickB22222 floralwhiteFFFAF0
forestgreen228B22 fuchsiaFF00FF
gainsboroDCDCDC ghostwhiteF8F8FF
goldFFD700 goldenrodDAA520
gray808080 green008000
greenyellowADFF2F honeydewF0FFF0
hotpinkFF69B4 indianredCD5C5C
indigo4B0082 ivoryFFFFF0
khakiF0E68C lavenderE6E6FA
lavenderblushFFF0F5 lawngreen7CFC00
lightpinkFFB6C1 lightsalmonFFA07A
lightseagreen20B2AA lightskyblue87CEFA
lightslategray778899 lightsteelblueB0C4DE
lightyellowFFFFE0 lime00FF00
limegreen32CD32 linenFAF0E6
magentaFF00FF maroon800000
mediumaquamarine66CDAA mediumblue0000CD
mediumorchidBA55D3 mediumpurple9370DB
mediumseagreen3CB371 mediumslateblue7B68EE
mediumspringgreen00FA9A mediumturquoise48D1CC
mediumvioletredC71585 midnightblue191970
mintcreamF5FFFA mistyroseFFE4E1
moccasinFFE4B5 navajowhiteFFDEAD
navy000080 oldlaceFDF5E6
olive808000 olivedrab6B8E23
orangeFFA500 orangeredFFA500
orchidDA70D6 palegoldenrodEEE8AA
palegreen98FB98 paleturquoiseAFEEEE
palevioletredDB7093 papayawhipFFEFD5
peachpuffFFDAB9 peruCD853F
pinkFFC0CB plumDDA0DD
powderblueB0E0E6 purple800080
redFF0000 rosybrownBC8F8F
royalblue4169E1 saddlebrown8B4513
salmonFA8072 sandybrownF4A460
seagreen2E8B57 seashellFFF5EE
siennaA0522D silverC0C0C0
skyblue87CEEB slateblue6A5ACD
slategray708090 snowFFFAFA
springgreen00FF7F steelblue4682B4
tanD2B48C teal008080
thistleD8BFD8 tomatoFF6347
turquoise40E0D0 violetEE82EE
wheatF5DEB3 whiteFFFFFF
whitesmokeF5F5F5 yellowFFFF00
yellowgreen9ACD32

Convertisseur de couleurs

Tester les divers modes et observer les résultats. De plus cette simulation permet de retrouver les équivalence entre valeurs rgb et valeurs hexa

Hexa XX Hexa YY Hexa ZZ

Résultat couleur feuille de style rgb feuille de style Hexa
  rgb(0,0,0); #000000

rgb X rgb Y rgb Z

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


Respectons la propriété intellectuelle