Mesure et Couleur

Mesure

Il existe différentes unités de mesure en CSS, nous présentons ici les plus fréquentes :

  • px

  • em

  • %

Définitionpx

L'unité pixel dépend du support sur lequel vous affichez. 1 pixel sur un smartphone, un moniteur ou une imprimante n'a pas la même taille.

Les pixels doivent être exprimés en valeur entière.

1
width: 100px;

L’intérêt du pixel, est d’être une unité absolu sur un même support.

Définitionem

L’unité em (cadratin) correspond à la hauteur de l'élément de plomb qui permettait de représenter les caractères en imprimerie. Étant donné que tous les caractères n'ont pas la même taille, la taille d'un cadratin est donc la taille minimale permettant de contenir tous les caractères possibles d'une police.

En CSS, on peut donner la taille d'écriture comme un multiple de la taille du parent.

1
.conteneur {
2
  font-size : 10px;
3
}
4
.conteneur p {
5
  font-size : 1.4em; // la taille d'écriture correspondra à 14px
6
}
7
.bloc {
8
  font-size : 15px;
9
}
10
.bloc p {
11
  font-size : 1.4em; // la taille d'écriture correspondra à 21px
12
}

L'intérêt du em, est d'être une unité relative. Elle dépend de la taille de son parent.

1
<div class="conteneur">
2
  texte taille 10px
3
  <p>
4
    texte taille 1.4em = 14px
5
  </p>
6
</div>
7
<div class="bloc">
8
  texte taille 15px
9
  <p>
10
    texte taille 1.4em = 21px
11
  </p>
12
</div>
texte taille 10px

texte taille 1.4em = 14px

texte taille 15px

texte taille 1.4em = 21px

Interprétation de CSS

Définitionrem

L’unité rem (root em) est semblable à em mais n'hérite pas de son parent mais de la racine du document.

Définition%

La taille d'un élément peut être exprimée comme un pourcentage de la taille de son parent.

1
<div>
2
  <p>Bonjour</p>
3
</div>
1
div {width:200px;}
2
div p {width:50%}

Le paragraphe aura une taille de 100px.

Couleur

DéfinitionNom de couleur

Les couleurs peuvent être définies à l'aide de mots-clés (blue, green, red...) selon les navigateurs la liste est plus ou moins longue.

1
color: fuchsia;
2
background-color : magenta;
3
border-color: lightgray;

Définition#, rgb et rgba

Les couleurs peuvent être définies à l'aide du système de coordonnées cubiques RGB. Soit avec # suivit de la notation hexadécimale ou à l'aide des fonctions rgb() et rgba().

Hexa :

#rrggbb[AA] les lettres pouvant prendre les valeurs (0-9, A-F). r :rouge, v : vert, b : bleu, A : composant alpha optionnel (opacité).

#rgb[A] identique au précédent, mais moins de combinaisons possibles.

1
color: #ff000088; // rouge avec opacité de 50%
2
color: #0f0; // vert

rgb :

rgb(R, G, B, [A]) les lettres pouvant prendre les valeurs (0-255) ou (0%-100%). Le A optionnel est une valeur décimale entre 0 et 1 (0 opaque) ou (0%-100%)

Ecritures alternatives :

rgb(R G B [ / A])

rgba(R, G, B, A)

rgba(R G B / A)

1
color: rgb(255, 0, 0); // rouge
2
color: rgb(255, 0, 0, 0.5); // rouge avec opacité de 50%
3
color: rgb(100%, 0%, 0%, 50%); // rouge avec opacité de 50%
4
color: rgb(100% 0% 0% / 50%); // rouge avec opacité de 50%
5
color: rgba(100%, 0%, 0%, 50%); // rouge avec opacité de 50%
6
color: rgba(100 0% 0% / 50%); // rouge avec opacité de 50%

Définitionhsl

Les trois paramètres des couleurs HSL sont :

  • La teinte (H) : correspond à l'angle sur le cercle chromatique (Rouge = 0°)

  • La saturation (S) : du centre du cercle vers l'extérieur (0% - 100%)

  • La luminosité (L) : 0% noir, 100% blanc

Un quatrième paramètre optionnel peut donner l'opacité.

Couleurs HSL
1
color: hsl(0, 50%, 50%, 0.5);