Langage CSS (Cascade Style Sheet)

Sommaires

  1. Introduction
  2. Comment insérer une feuille de style
  3. Élément de type bloc ou en-ligne
  4. Introduction au déclaration CSS
  5. Attributs id et class
  6. Les sélecteurs simples
  7. Les sélecteurs complexes
  8. Les couleurs
    1. Format RGB
    2. Format RGBA
    3. Format HSL
    4. Format HSLA
    5. Formule de conversion de format RGB-HSL
    6. Formule de composition des couleurs
  9. Les unités de mesures
  10. Les fontes de caractères

 

1) Introdution

Ce langage permet de spécifier comment doit s'afficher chaque élément d'un documents HTML ou XML. Chaque élément possède une spécification d'affichage modifiable, appelé son style. L'ensemble des spécifications d'affichages, ou styles, regroupé dans un fichier, s'appel une feuille de style. Le langage CSS (Cascading Style Sheets) est un langage de feuille de style. On parlera de fichier css pour désigner des fichier contenant des feuilles de style, et ayant l'extention css.

Cette technique permet de séparer le style des documents, du contenu des documents, et simplifie ainsi l'édition de documents Web et leur maintenance.

2) Comment insérer une feuille de style

Chaque élément possède un style par défaut, qui peut être modifié par la feuille de style du document, ou bien directement par son attribut style. Voici quatre façons d'ajouter un style dans un document HTML.

Dans <body>
<div style="text-align:center">oOoOoOo</div>
<p style="color:red; background:#999">Bonjour</p>
oOoOoOo

Bonjour
Dans <style>
div {text-align:center}
p {color:red; background:#999}
Dans un fichier essai.css dont on fait référence après. div {text-align:center}
p {color:red; background:#999}
essai.css lié dans <head>
<link rel="stylesheet" type="text/css" href="essai.css" />
essai.css importé dans <style> ou dans un autre fichier css
 @import url(essai.css);

La feuille de style correspond au fichier essai.css. On notera que la dernière façon permet d'emboiter les feullles de styles les unes dans les autres en plusieurs fichiers avec des @import, sorte d'include, faisant qu'une feuille de style peut faire appel à d'autres feuilles de style et ainsi de suite.

Voici les 4 exemples complets :

Dans <body> 
<html>
  <head>
  </head>
  <body>
    <div style="text-align:center">
      oOoOoOo
    </div>
    <p style="color:red; background:#999">
      Bonjour
    </p>
  </body>
</html>
Dans <style> 
<html>
  <head>
    <style>
      p {color:red; background:#999}
      div {text-align:center}
    </style>
  </head>
  <body>
    <div>oOoOoOo</div>
    <p>Bonjour</p>
  </body>
</html>
Feuille de style importé dans <style>
<html>
  <head>
    <style>
      @import url(essai.css);
    </style>
  </head>
  <body>
    <div>oOoOoOo</div>
    <p>Bonjour</p>
  </body>
</html>
Feuille de style lié dans <head> 
<html>
  <head>
    <link rel="stylesheet" type="text/css"
          href="essai.css" />
  </head>
  <body>
    <div>oOoOoOo</div>
    <p>Bonjour</p>
  </body>
</html>

On lie une feuille de style essai.css dans un document XML à l'aide de la déclaration d'en-tête suivante :

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="essai1.css" type="text/css"?>

Noter qu'en HTML chaque élément possède un style prédéfini et certains éléments mettent en oeuvres des mécanismes d'affichage qui ne peuvent se traduire en feuille de style d'un document XML.

3) Élément de type bloc ou en-ligne

Les éléments en-lignes se comportent comme une suite de caractères s'insérant dans un flux de caractères selon le sens de l'écriture hérité. Ils peuvent contenir d'autres éléments en-ligne mais ne peuvent contenir d'élément de type bloc. L'élément en-ligne se comporte comme une portion linéaire de texte que l'on insérerait dans un texte en ligne, où la longueur de la ligne et les éventuels passages à la ligne ne dépendent pas de l'élément en-ligne question mais de l'élément de type bloc qui l'englobe.

Voici une liste d'éléments en-lignes : <a> <br /> <code> <img> <label> <input> <select> <span> <strong> <textarea>

Les éléments blocs se comportent comme des blocs de taille parfaitement définissable et de position absolue, ou relative, dans un flux de blocs de haut en bas, ou de gauche à droite d'abord si précisé, etc...

Voici une liste d'éléments blocs : <blockquote> <div> <form> <h1> <h2> <h3> <p> <pre> <table> <td> <tr> <li> <ol> <ul>

L'élément bloc le plus générale est <div>, et l'élément en-ligne le plus générale est <span>. La propriété display permet de changer le caractère en-ligne ou bloc de élément. Ainsi on peut inverser les rôles et l'élément suivant :

<div style="display:inline">coucou</div>

deviendra un élément en-ligne et l'élément suivant :

<span style="display:block">coucou</span>

deviendra un élément bloc.

4) Introduction aux déclarations CSS

Une feuille de style est une liste de déclarations CSS. Chaque déclaration se compose de deux parties, une première partie appelée sélecteur qui déterminent quels sont les éléments du document désignés par cette déclaration, et une seconde partie comprise entre accolade qui contient une liste de propriété-valeurs liées par un deux-points, et séparées par des point-virgules. Exemple :

p {text-align:justify; background:yellow; font-size:12px}

Cette déclaration précise que les éléments <p> (les paragraphes) auront toutes un texte justifé, un fond jaune et une taille de caractère de 12 pixels : Cette déclaration peut s'écrire également avec des espaces et en passant à la ligne comme suit :

p {
   text-align: justify;
   background: yellow;
   font-size: 12px
}

ou bien en répétant trois déclaration relative aux éléments <p> comme suit :

p {text-align: justify}
p {background: yellow}
 p {font-size: 12px}

Ainsi les propriétées CSS s'ajoutent-elles lors des différentes déclaration CSS.

5) Attributs id et class

Chaque élément HTML posséde des attributs quelconques. Mais il existe deux attributs qui ont un rôle particulier, l'attribut id qui contient un nom permettant d'identifier l'élément, et l'attribut class qui contient la liste des classes (séparées par des caractères blancs) auxquels l'élément appartient.

6) Les sélecteurs simples

Dans l'exemple précédent le sélecteur p désigne toutes les éléments <p> présent dans le document.

Il existe 7 types de sélecteurs simples :

  1. le sélecteur universel *,
  2. le sélecteur d'élément div,
  3. le sélecteur d'indentificateur #intro,
  4. le sélecteur d'attribut [att="Toto],
  5. le sélecteur de classe .menu,
  6. le sélecteur de pseudo-classe - :first-child, :link, :visited, :hover, :active, :focus, et :lang(fr)
  7. le sélecteur de pseudo-éléments.:first-line, :first-letter, :before, et :after.

Dans le tableau synoptique, les noms en italique peuvent être remplacé par tout autre nom. Ainsi on utilise l'élément div à titre d'exemple, mais celui-ci peut être remplacée par n'importe quelle autre tye d'élément que l'on souhaite. De même on utilise un identificateur "intro", une classe "prem", et une chaîne de caratère "Toto", mais ceux-ci peuvent être remplacés par n'importe quelle autre chaine de caractères que l'on souhaite. De même, on utilise un attribut att, mais celui-ci peut être remplacé par n'importe quelle nom d'attribut que l'on souhaite. Ces noms en italiques sont variables.

Type de sélecteur simple
Exemple de sélecteur
Déscription
Universel
*
 Désigne toutes les éléments.
Balise
div
 Désigne les éléments <div>.
Identificateur
#intro
 Désigne l'élément qui possède un attribut id égal à "intro".
Attribut
[att]

Désigne les éléments qui possèdent un attribut att.
[att = "Toto"]
Désigne les élémentsqui possèdent un attribut att égal à "Toto".
[att ~= "Toto"]
Désigne les éléments qui possèdent un attribut att contenant le mot "Toto".
Classe
.prem
 Désigne les élémentsqui possèdent l'attribut class contenant le mot "prem".
Pseudo-classe
:first-child

Désigne les éléments qui sont premières enfants de leur parent

:link

Désigne les éléments de lien qui n'ont pas encore été visité.
:visited
 Désigne les éléments de lien qui ont été visité.
:hover
 Désigne les éléments qui sont survolées par la souris.
:active
 Désigne les éléments activables qui sont activées, c'est à dire par exemple, entre le moment où l'utilisateur presse le bouton de la souris et le relâche.
:focus
 Désigne l'élément focalisable qui possède le focus (celle-ci acceptant alors les événements du clavier ou d'autres formes d'entrées de texte).
:lang(fr)
 Désigne les élémentsdont la langue est fr.
Pseudo-élément
:first-line
 Désigne les premières lignes de caractères s'affichant dans les éléments blocs.
Seul les propriétés de police, de couleur, d'arrière-plan, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' et 'clear' s'appliquent.
:first-letter
 Désigne les premières lettres initiales s'affichant dans les éléments blocs.
Seul les propriétés de police, de couleur, d'arrière-plan, 'text-decoration', 'vertical-align' (seulement si la valeur de la propriété 'float' est 'none'), 'text-transform', 'line-height', de marge, d'espacement, de bordure, 'float', 'text-shadow' et 'clear' s'appliquent.
:before
 Désigne les textes s'affichant avant le texte de tout élément.
La propriété content permet d'initialiser ce texte.
:after
 Désigne les textes s'affichant après le texte de tout élément.
La propriété content permet d'initialiser ce texte.

Voici quelques exemples :

* {margin:0} Les marges de tous les éléments sont nulles
p {text-align:justify} Les éléments <p> affichent un texte justifié.
#intro {color:red} L'élément dont l'attribut id est égale à "intro" possède une écriture rouge.
[att] {font-weight:bold} Les éléments possédant l'attribut att possèdent une écriture grasse.
[att = "Toto"] {color:red} Les éléments dont l'attribut att est égale à "Toto" possèdent une écriture rouge.
.prem {width:200px} Les éléments de classe "prem" ont une largeur de 200 pixels
:first-child {background:red} Les éléments qui sont premiers enfants de leur parent ont un fond rouge.
:link {color:blue}
 Les liens hypertextes qui n'ont pas encore été visités sont écrit en bleu
:visited {color:black}
 Les liens hypertextes qui ont été visités sont écrit en noir
:hover {font-size:25px}
 Les éléments survolé affiche un texte avec une taille de caractère de 25 pixels
:active {background:red}
 Les éléments activable qui sont activé ont un fond rouge
:focus {background:#AAA}
 L' élément focalisable qui a le focus possède un fond gris
:lang(fr) {background:pink}
 Les éléments dont la langue est fr ont un fond rose
:first-line {color:red}
 Les premières lignes de chaque éléments de type blocs sont rouges
:first-letter {color:red}
 Les premières lettres de chaque éléments de type blocs sont rouges
:before {content:"Note"}
Chaque éléments est précédé par le texte "Note"
:after {content:"Fin"}
Chaque éléments est suivi par le texte "Fin"

7) Les sélecteurs complexes

Plusieur sélecteurs simples A, B, C peuvent être collés en ABC, avec comme restriction que l'éventuel sélecteur d'élément ou universel soit placé en premier, et que l'éventuel sélecteur de pseudo-élément soit placé en dernier. Ce groupe de sélecteurs collés désigne alors les éléments qui sont à la fois A, B et C.

Les sélecteurs complexes se construisent à partir des sélecteurs simples ou collés X, Y, en les ajoutants à la suite selon deux opérations possibles symbolisées par le caractère blanc et le symbole > et qui dénotent un lien de descendance d'un ou plusieur niveaux, ou seulement d'un seul niveau (lien parent-enfant). Mais il y a une restriction. L'éventuel sélecteur de pseudo-élément doit être placé en dernier :

X Y     désigne les éléments Y descendant des éléments X
X > Y  désigne les éléments Y qui sont enfants des éléments X

Une dernière opération accessoire qu'est la virgule, et qui est de priorité plus faible que les autres opérations, permet d'unir les différents sélecteurs en un seul sélecteur :

X, Y    désigne les éléments X et les éléments Y réunis.

Voici quelques exemples :

div > :hover.toto p[att]#ju {background:red} L'élément <p> ayant un attribut att et un attribut id égal à "ju", et étant descendant d'un élément de classe "toto" survolé par la souris et étant lui-même un enfant d'un élément <div>, possède un fond rouge.
* > :first-letter {}
 :hover > :first-letter {font-size:25px}		 Les premières lettres affichées par les éléments blocs, enfants d'un élément survolé par la souris, ont une taille de caractère de 25 pixels.
Noter dans cette exemples qu'il faut au préalable déclarer les pseudo-éléments pour qu'ils soient pris en compte dans la seconde déclaration qui est dynamique.
div > p:first-child {color:blue} Les éléments <p> qui sont premier fils des éléments <div>, autrement dit les premiers paragraphes des blocs <div>, sont écrits en bleu.
p.toto.titi.tata {color:blue} Les éléments <p> qui sont de classe "toto", "titi" et "tata" sont écrits en bleu.

Ce langage CSS, trés riche, se confronte aux restrictions nombreuses et arbitraires du HTML. Mais il peut être utilisé pour le XML dans lequel il n'y a pas de tels restrictions.

8) Les couleurs

Dans le langage CSS, il existe 4 formats de définition de couleur : RGB, RGBA, HSL, HSLA, qui utilisent sous certaine condition des nombres hexadécimaux, des nomrbres décimaux et des pourcentages.

8.1) Format RGB

Le format RGB (Red, Green, Blue) demande trois valeurs comprise entre 0 et 255 pour les intensités lumineuses du rouge, du vert et du bleu. Voici un exemple de déclaration CSS, précisant la couleur d'écriture des paragraphes. Ce même exemple est exprimé sous 4 façons différentes :

p { color: #2F1 }
p { color: #22FF11 }
p { color: rgb(34,255,17) }
p { color: rgb(13.3%, 100%, 6.7%) }

Le symbole # demande un nombre héxadécimal en 3 caractères ou bien en 3*2 caractères. Le format RGB accepte soit 3 entiers positifs ou négatifs quelconques qui sont tronqués en des entiers compris entre 0 et 255, soit 3 pourcentages positifs ou négatifs quelconques avec d'éventuel décimal qui sont tronqués en des pourcentage compris entre 0.0% et 100.0%

8.2) Format RGBA

Le format RGBA (Red, Green, Blue, Alpha) demande une valeur décimale supplémentaire comprise entre 0 et 1 spécifiant l'opacité (0 = transparent, 0.5 = semi-transparent, 1 = opaque).

p { color: rgba(34,255,17,0.5) }
p { color: rgba(13.3%, 100%, 6.7%, 0.5) }

La valeur d'opacité est un nombre positif ou négatif quelconque, avec ou sans décimal, qui est tronqués en un nombre compris entre 0.0 et 1.0

8.3) Format HSL

Le format HSL (Hue, Saturation, Lightness) demande une première valeur comprise entre 0 et 360, pour désigner la nuance (0 = rouge, 120 = vert, 240 = bleu), et un pourcentage pour désigner la saturation de la couleur (100% = couleur pure, 50% = couleur pastel, 0% = gris), et un pourcentage pour désigner la luminosité de la couleur (100% = blanc, 50% = moitier lumineux, 0% = noir).

p { color: hsl(34, 100%, 6.7%) }

Le format HSL accepte un premier nombre positif ou négatif quelconque, avec ou sans décimal, qui est transformé modulo 360 en un nombre compris entre 0.0 et 360.0, puis accepte 2 pourcentages relatifs quelconques avec d'éventuel décimal qui sont tronqués en des pourcentages compris entre 0.0% et 100.0%

8.4) Format HSLA

Le format HSLA (Hue, Saturation, Lightness, Alpha) demande une valeur décimale supplémentaire comprise entre 0 et 1 spécifiant l'opacité (0 = transparent, 0.5 = semi-transparant, 1 = opaque).

p { color: hsla(34, 100%, 6.7%, 0.5) }

La valeur d'opacité est un nombre positif ou négatif quelconque, avec ou sans décimal, qui est tronqués en un nombre compris entre 0.0 et 1.0

8.5) Formule de conversion de format RGB-HSL

http://www.irem.univ-montp2.fr/optionsciences/20052006/nuanciers.pdf

(R,G,B) (H,S,L)

soit M=max(R,G,B), et m = min(R,G,B)

si M =R alors H = 60+(G-B)/M-m
si M =G alors H = 120+(B-R)/M-m
si M =B alors H = 240+(G-B)/M-m

L = (M+m)/2

si (M+m)<1 alors S = (M-m)/(M+m)
si (M+m)>1 alors S = (M-m)/(1-M-m)

8.6) Formule de composition des couleurs

La lumière est composée d'un spéctre trés riche. Chaque composante de la lumière correspond à une fréquence. Mais ici, il n'y a que trois composantes rouge, vert, bleue que l'on note sous la forme d'un vecteur x = [x1,x2,x3], l'indice évocant l'ordre des fréquences. x1 représente l'intensité de la lumière rouge, x2 l'intensité de la lumière verte, et x3 l'intensité de la lumière bleue.

Voir théorie des couleurs

8.7) Noms standarts des couleurs

Les 16 premières couleurs

Nom
Valeur
R
G
B
Couleur
R
G
B
black
#000000
0
0
0
0%
0%
0%
silver
#C0C0C0
192
192
192
75%
75%
75%
gray
#808080
192
128
128
75%
50%
50%
white
#FFFFFF
255
255
255
100%
100%
100%
maroon
#800000
128
0
0
50%
0%
0%
red
#FF0000
255
0
0
100%
0%
0%
purple
#800080
128
0
128
50%
0%
50%
fuchsia
#FF00FF
255
0
255
100%
0%
100%
green
#008000
0
128
0
0%
50%
0%
lime
#00FF00
0
255
0
0%
100%
0%
olive
#808000
128
128
0
50%
50%
0%
yellow
#FFFF00
255
255
0
100%
100%
0%
navy
#000080
0
0
128
0%
0%
50%
blue
#0000FF
0
0
255
0%
0%
100%
teal
#008080
0
128
128
0%
50%
50%
aqua
#00FFFF
0
255
255
0%
100%
100%

 

Color name
Hex rgb
R
G
B
 
R
G
B
aliceblue
#f0f8ff
240
248
255
  
94,1%
97,3%
100,0%
antiquewhite
#faebd7
250
235
215
  
98,0%
92,2%
84,3%
aqua
#00ffff
0
255
255
  
0,0%
100,0%
100,0%
aquamarine
#7fffd4
127
255
212
  
49,8%
100,0%
83,1%
azure
#f0ffff
240
255
255
  
94,1%
100,0%
100,0%
beige
#f5f5dc
245
245
220
  
96,1%
96,1%
86,3%
bisque
#ffe4c4
255
228
196
  
100,0%
89,4%
76,9%
black
#000000
0
0
0
  
0,0%
0,0%
0,0%
blanchedalmond
#ffebcd
255
235
205
  
100,0%
92,2%
80,4%
blue
#0000ff
0
0
5
  
0,0%
0,0%
2,0%
blueviolet
#8a2be2
138
43
26
  
54,1%
16,9%
10,2%
brown
#a52a2a
165
42
42
  
64,7%
16,5%
16,5%
burlywood
#deb887
222
184
135
  
87,1%
72,2%
52,9%
cadetblue
#5f9ea0
95
158
160
  
37,3%
62,0%
62,7%
chartreuse
#7fff00
127
255
5,0
  
49,8%
100,0%
2,0%
chocolate
#d2691e
210
105
,30
  
82,4%
41,2%
0,1%
coral
#ff7f50
255
127
,80
  
100,0%
49,8%
0,3%
cornflowerblue
#6495ed
100
149
237
  
39,2%
58,4%
92,9%
cornsilk
#fff8dc
255
248
220
  
100,0%
97,3%
86,3%
crimson
#dc143c
220
20
60
  
86,3%
7,8%
23,5%
cyan
#00ffff
0
255
255
  
0,0%
100,0%
100,0%
darkblue
#00008b
0
0
9
  
0,0%
0,0%
3,5%
darkcyan
#008b8b
0
139
139
  
0,0%
54,5%
54,5%
darkgoldenrod
#b8860b
184
134
,11
  
72,2%
52,5%
0,0%
darkgray
#a9a9a9
169
169
169
  
66,3%
66,3%
66,3%
darkgreen
#006400
0
100
0,0
  
0,0%
39,2%
0,0%
darkgrey
#a9a9a9
169
169
169
  
66,3%
66,3%
66,3%
darkkhaki
#bdb76b
189
183
107
  
74,1%
71,8%
42,0%
darkmagenta
#8b008b
139
0
9
  
54,5%
0,0%
3,5%
darkolivegreen
#556b2f
85
107
,47
  
33,3%
42,0%
0,2%
darkorange
#ff8c00
255
140
0,0
  
100,0%
54,9%
0,0%
darkorchid
#9932cc
153
50
04
  
60,0%
19,6%
1,6%
darkred
#8b0000
139
0
0
  
54,5%
0,0%
0,0%
darksalmon
#e9967a
233
150
122
  
91,4%
58,8%
47,8%
darkseagreen
#8fbc8f
143
188
143
  
56,1%
73,7%
56,1%
darkslateblue
#483d8b
72
61
39
  
28,2%
23,9%
15,3%
darkslategray
#2f4f4f
47
79
79
  
18,4%
31,0%
31,0%
darkslategrey
#2f4f4f
47
79
79
  
18,4%
31,0%
31,0%
darkturquoise
#00ced1
0
206
209
  
0,0%
80,8%
82,0%
darkviolet
#9400d3
148
0
1
  
58,0%
0,0%
0,4%
deeppink
#ff1493
255
20
47
  
100,0%
7,8%
18,4%
deepskyblue
#00bfff
0
191
255
  
0,0%
74,9%
100,0%
dimgray
#696969
105
105
105
  
41,2%
41,2%
41,2%
dimgrey
#696969
105
105
105
  
41,2%
41,2%
41,2%
dodgerblue
#1e90ff
30
144
255
  
11,8%
56,5%
100,0%
firebrick
#b22222
178
34
34
  
69,8%
13,3%
13,3%
floralwhite
#fffaf0
255
250
240
  
100,0%
98,0%
94,1%
forestgreen
#228b22
34
139
,34
  
13,3%
54,5%
0,1%
fuchsia
#ff00ff
255
0
5
  
100,0%
0,0%
2,0%
gainsboro
#dcdcdc
220
220
220
  
86,3%
86,3%
86,3%
ghostwhite
#f8f8ff
248
248
255
  
97,3%
97,3%
100,0%
gold
#ffd700
255
215
5,0
  
100,0%
84,3%
2,0%
goldenrod
#daa520
218
165
,32
  
85,5%
64,7%
0,1%
gray
#808080
128
128
128
  
50,2%
50,2%
50,2%
green
#008000
0
128
8,0
  
0,0%
50,2%
3,1%
greenyellow
#adff2f
173
255
,47
  
67,8%
100,0%
0,2%
grey
#808080
128
128
128
  
50,2%
50,2%
50,2%
honeydew
#f0fff0
240
255
240
  
94,1%
100,0%
94,1%
hotpink
#ff69b4
255
105
180
  
100,0%
41,2%
70,6%
indianred
#cd5c5c
205
92
92
  
80,4%
36,1%
36,1%
indigo
#4b0082
75
0
0
  
29,4%
0,0%
0,0%
ivory
#fffff0
255
255
240
  
100,0%
100,0%
94,1%
khaki
#f0e68c
240
230
140
  
94,1%
90,2%
54,9%
lavender
#e6e6fa
230
230
250
  
90,2%
90,2%
98,0%
lavenderblush
#fff0f5
255
240
245
  
100,0%
94,1%
96,1%
lawngreen
#7cfc00
124
252
2,0
  
48,6%
98,8%
0,8%
lemonchiffon
#fffacd
255
250
205
  
100,0%
98,0%
80,4%
lightblue
#add8e6
173
216
230
  
67,8%
84,7%
90,2%
lightcoral
#f08080
240
128
128
  
94,1%
50,2%
50,2%
lightcyan
#e0ffff
224
255
255
  
87,8%
100,0%
100,0%
lightgoldenrodyellow
#fafad2
250
250
210
  
98,0%
98,0%
82,4%
lightgray
#d3d3d3
211
211
211
  
82,7%
82,7%
82,7%
lightgreen
#90ee90
144
238
144
  
56,5%
93,3%
56,5%
lightgrey
#d3d3d3
211
211
211
  
82,7%
82,7%
82,7%
lightpink
#ffb6c1
255
182
193
  
100,0%
71,4%
75,7%
lightsalmon
#ffa07a
255
160
122
  
100,0%
62,7%
47,8%
lightseagreen
#20b2aa
32
178
170
  
12,5%
69,8%
66,7%
lightskyblue
#87cefa
135
206
250
  
52,9%
80,8%
98,0%
lightslategray
#778899
119
136
153
  
46,7%
53,3%
60,0%
lightslategrey
#778899
119
136
153
  
46,7%
53,3%
60,0%
lightsteelblue
#b0c4de
176
196
222
  
69,0%
76,9%
87,1%
lightyellow
#ffffe0
255
255
224
  
100,0%
100,0%
87,8%
lime
#00ff00
0
255
5,0
  
0,0%
100,0%
2,0%
limegreen
#32cd32
50
205
,50
  
19,6%
80,4%
0,2%
linen
#faf0e6
250
240
230
  
98,0%
94,1%
90,2%
magenta
#ff00ff
255
0
5
  
100,0%
0,0%
2,0%
maroon
#800000
128
0
0
  
50,2%
0,0%
0,0%
mediumaquamarine
#66cdaa
102
205
170
  
40,0%
80,4%
66,7%
mediumblue
#0000cd
0
0
5
  
0,0%
0,0%
2,0%
mediumorchid
#ba55d3
186
85
11
  
72,9%
33,3%
4,3%
mediumpurple
#9370db
147
112
219
  
57,6%
43,9%
85,9%
mediumseagreen
#3cb371
60
179
113
  
23,5%
70,2%
44,3%
mediumslateblue
#7b68ee
123
104
238
  
48,2%
40,8%
93,3%
mediumspringgreen
#00fa9a
0
250
154
  
0,0%
98,0%
60,4%
mediumturquoise
#48d1cc
72
209
204
  
28,2%
82,0%
80,0%
mediumvioletred
#c71585
199
21
33
  
78,0%
8,2%
12,9%
midnightblue
#191970
25
25
12
  
9,8%
9,8%
4,7%
mintcream
#f5fffa
245
255
250
  
96,1%
100,0%
98,0%
mistyrose
#ffe4e1
255
228
225
  
100,0%
89,4%
88,2%
moccasin
#ffe4b5
255
228
181
  
100,0%
89,4%
71,0%
navajowhite
#ffdead
255
222
173
  
100,0%
87,1%
67,8%
navy
#000080
0
0
8
  
0,0%
0,0%
3,1%
oldlace
#fdf5e6
253
245
230
  
99,2%
96,1%
90,2%
olive
#808000
128
128
8,0
  
50,2%
50,2%
3,1%
olivedrab
#6b8e23
107
142
,35
  
42,0%
55,7%
0,1%
orange
#ffa500
255
165
5,0
  
100,0%
64,7%
2,0%
orangered
#ff4500
255
69
,0
  
100,0%
27,1%
0,0%
orchid
#da70d6
218
112
214
  
85,5%
43,9%
83,9%
palegoldenrod
#eee8aa
238
232
170
  
93,3%
91,0%
66,7%
palegreen
#98fb98
152
251
152
  
59,6%
98,4%
59,6%
paleturquoise
#afeeee
175
238
238
  
68,6%
93,3%
93,3%
palevioletred
#db7093
219
112
147
  
85,9%
43,9%
57,6%
papayawhip
#ffefd5
255
239
213
  
100,0%
93,7%
83,5%
peachpuff
#ffdab9
255
218
185
  
100,0%
85,5%
72,5%
peru
#cd853f
205
133
,63
  
80,4%
52,2%
0,2%
pink
#ffc0cb
255
192
203
  
100,0%
75,3%
79,6%
plum
#dda0dd
221
160
221
  
86,7%
62,7%
86,7%
powderblue
#b0e0e6
176
224
230
  
69,0%
87,8%
90,2%
purple
#800080
128
0
8
  
50,2%
0,0%
3,1%
red
#ff0000
255
0
0
  
100,0%
0,0%
0,0%
rosybrown
#bc8f8f
188
143
143
  
73,7%
56,1%
56,1%
royalblue
#4169e1
65
105
225
  
25,5%
41,2%
88,2%
saddlebrown
#8b4513
139
69
19
  
54,5%
27,1%
7,5%
salmon
#fa8072
250
128
114
  
98,0%
50,2%
44,7%
sandybrown
#f4a460
244
164
,96
  
95,7%
64,3%
0,4%
seagreen
#2e8b57
46
139
,87
  
18,0%
54,5%
0,3%
seashell
#fff5ee
255
245
238
  
100,0%
96,1%
93,3%
sienna
#a0522d
160
82
45
  
62,7%
32,2%
17,6%
silver
#c0c0c0
192
192
192
  
75,3%
75,3%
75,3%
skyblue
#87ceeb
135
206
235
  
52,9%
80,8%
92,2%
slateblue
#6a5acd
106
90
05
  
41,6%
35,3%
2,0%
slategray
#708090
112
128
144
  
43,9%
50,2%
56,5%
slategrey
#708090
112
128
144
  
43,9%
50,2%
56,5%
snow
#fffafa
255
250
250
  
100,0%
98,0%
98,0%
springgreen
#00ff7f
0
255
127
  
0,0%
100,0%
49,8%
steelblue
#4682b4
70
130
180
  
27,5%
51,0%
70,6%
tan
#d2b48c
210
180
140
  
82,4%
70,6%
54,9%
teal
#008080
0
128
128
  
0,0%
50,2%
50,2%
thistle
#d8bfd8
216
191
216
  
84,7%
74,9%
84,7%
tomato
#ff6347
255
99
71
  
100,0%
38,8%
27,8%
turquoise
#40e0d0
64
224
208
  
25,1%
87,8%
81,6%
violet
#ee82ee
238
130
238
  
93,3%
51,0%
93,3%
wheat
#f5deb3
245
222
179
  
96,1%
87,1%
70,2%
white
#ffffff
255
255
255
  
100,0%
100,0%
100,0%
whitesmoke
#f5f5f5
245
245
245
  
96,1%
96,1%
96,1%
yellow
#ffff00
255
255
5,0
  
100,0%
100,0%
2,0%
yellowgreen
#9acd32
154
205
,50
  
60,4%
80,4%
0,2%

8.8) Les unités de mesures

Les longueurs sont exprimées par une valeur numérique, positive ou négative, avec ou sans décimal, directement suivie d'une unité. Pour la valeur 0, l'unité est toutefois facultative.

Il existe 3 types d'unités de distance, les unités absolues, les unités relatives et les pourcentages.

 

Les valeurs de longueur

Les valeurs de longueur sont données en valeur numérique. Pour cela, il y a deux sortes d'unités :

Les unités de longueur absolues

Les unités absolues ont un certain rapport entre elles comme l'indiquent les valeurs suivantes :

Par contre, elles n'ont pas de rapport avec le contexte, avec le reste du document. Nous allons voir maintenant les unités de longueur relatives

L'unité em

L'unité em se rapporte à la taille de la police. Avec elle on peut affecter une mesure relative à la taille de police de l'élément parent. Elle permet d'avoir des feuilles de style plus facilement adaptables d'un média à un autre. Les nombres décimaux sont autorisés, mais il faut tout simplement remplacer la virgule par un point. Cette valeur em est utilisable pour d'autres propriétés acceptant la mention de longueur.

L'unité ex

L'unité ex est utilisée souvent pour exprimer la hauteur des caractères. Le point de référence est la hauteur des minuscules souvent appelée hauteur "x" lowercase. En d'autres termes, dans le cas où la taille est donnée avec une unité "ex", celle-ci est alors mesurée par rapport à la hauteur de la minuscule x de l'élément parent.

Tout comme l'unité em, cette unité est utilisée pour toutes les propriétés acceptant la mention de longueur. Toutefois, la plupart des navigateurs ont encore une certaine hésitation à traduire correctement cette valeur.

L'unité px

L'écran d'un ordinateur ou moniteur est formé par plusieurs petits "carrés". Ces carrés définissent la résolution ou densité de l'écran en pixels d'affichage selon l'unité de sortie, c'est-à-dire l'écran de l'ordinateur. L'unité px qui veut dire pixel correspond à un de ces petits carrés.

C'est en fait le plus petit élément de la résolution d'écran. Cette unité peut être utilisée pour toutes les propriétés acceptant les mentions de longueur.

 

8.9) Les fontes de caractères

Après la couleur, la fonte, appelé aussi police de caractère, est probablement la propriété la plus fondamentale dans une page. Toutes les fontes ne sont pas disponibles sur tous les ordinateurs (il y a des milliers de fontes). CSS fournit un mécanisme de choix de fonte par défaut. Vous inscrivez les fontes que vous voulez d'abord et vous finissez la liste avec une fonte générique.

Il y a 5 font génériques : serif, sans-serif, monospace, cursive et fantasy :

On peut consulter la liste des fontes les plus couramment installées. Voir le site http://www.codestyle.org/css/font-family/sampler-CombinedResultsFull.shtml, et en rangeant les fontes selon leur pourcentage d'installation a, b et c réspectivement sur les systèmes Windows, Mac et Unix et en évaluant selon la valuation a + b + c + a*b + b*c + a*c + a*b*c, on optient la liste préférentielle suivante (décembre 2010) :

Font
Win
Mac
Unix
Valuation
Arial
100
98
70
707819
Verdana
100
98
68
687881
Times New Roman
100
96
69
683752
Courier New
100
93
69
662605
Georgia
99
96
67
660259
Trebuchet MS
99
95
67
655410
Arial Black
98
95
67
647968
Comic Sans MS
99
92
66
624034
Impact
99
92
65
614106
Lucida Sans
77
86
68
469955
Lucida Bright
54
86
67
326576
Lucida Sans Typewriter
54
86
67
326576
Andale Mono
4
92
65
30537
Garamond
87
34
7
24519
Bitstream Vera Sans Mono
23
11
71
20715
Arial Narrow
89
91
1
16523
Helvetica
7
100
19
16159
Bitstream Vera Sans
18
11
70
16135
Bitstream Vera Serif
17
11
65
14344
Times
5
99
16
10149
Tahoma
100
86
0
8777
Papyrus
66
90
0
6083
Arial Rounded MT Bold
56
92
0
5274
Brush Script MT
53
87
0
4741
Century Gothic
88
41
0
3733
Courier
0
100
33
3416
Bookman Old Style
86
32
0
2857
Book Antiqua
86
31
0
2790
Monotype Corsiva
83
30
0
2609
Copperplate Gothic Bold
63
34
0
2252
Haettenschweiler
68
30
0
2143
Lucida Handwriting
59
34
0
2096
Century Schoolbook
54
32
0
1828
Goudy Old Style
54
30
0
1714
Britannic Bold
54
29
0
1650
Playbill
54
29
0
1644
Footlight MT Light
53
29
0
1630
Calisto MT
55
28
0
1625
Colonna MT
53
29
0
1613
Wide Latin
54
28
0
1598
Matura MT Script Capitals
54
28
0
1583
Calibri
70
20
0
1497
Cambria
70
18
0
1357
Consolas
70
17
0
1278
Corbel
70
17
0
1277
Candara
70
16
0
1207
Monaco
3
100
2
1205
Constantia
70
16
0
1201
Palatino
4
81
0
411
Geneva
2
100
0
301
Helvetica Neue
2
97
0
292
Gill Sans
2
94
0
283
Optima
2
91
0
274
New Century Schoolbook
4
2
15
236
Futura
1
92
0
186
Apple Chancery
1
92
0
185
Hoefler Text
1
89
0
180
Abadi MT Condensed Light
5
28
0
171
Braggadocio
4
29
0
150
News Gothic MT
4
28
0
145
Kino MT
4
27
0
141
Desdemona
3
29
0
117
Algerian
54
1
0
108
Univers
6
14
0
102
Lucida Grande
0
100
0
100
Microsoft Sans Serif
100
0
0
100

Les meilleures familles de polices compatibles linux/windows/mac :

Le site http://www.logz.org/art-407-tit-Les-meilleures-familles-de-polices-compatibles-linux-windows-mac propose d'utiliser les familles suivantes :

serif
 font-family:
"URW Palladio L",
"URW Bookman L",
"Century Schoolbook",
Georgia,
Times,
"Times New Roman",
"Palatino Linotype",
serif
sans-serif
font-family:
"Nimbus Sans L",
"URW Gothic L",
Verdana,Tahoma,
Helvetica,
"Lucida Grande",
Geneva,
"DejaVu Sans",
"Microsoft Sans Serif",
sans-serif
monospace
 font-family:
"Bitstream Vera Sans Mono",
"Courier 10 Pitch",
"Nimbus Mono L",
Monaco,
"Courier New",
Courier,
"OCR A Extended",
"DejaVu Sans Mono",
"Lucida Console",
monospace
cursive
 font-family:
"Domestic Manners",
"URW Chancery L",
"Brush Script MT",
Zapfino,
"Apple Chancery",
"Bradley Hand ITC",
"Monotype Corsiva",
"Comic Sans MS",
cursive
fantasy
 font-family:
"Marked Fool",
Junkyard,
Balker,
Papyrus,
Haettenschweiler,
Impact,
fantasy

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

8.10) Les ombres

text-shadow

-moz-box-shadow

-moz-radial-gradient
-moz-linear-gradient