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éfinition : px
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.
width: 100px;
L’intérêt du pixel, est d’être une unité absolu sur un même support.
Définition : em
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.
.conteneur {
font-size : 10px;
}
.conteneur p {
font-size : 1.4em; // la taille d'écriture correspondra à 14px
}
.bloc {
font-size : 15px;
}
.bloc p {
font-size : 1.4em; // la taille d'écriture correspondra à 21px
}
L'intérêt du em, est d'être une unité relative. Elle dépend de la taille de son parent.
<div class="conteneur">
texte taille 10px
<p>
texte taille 1.4em = 14px
</p>
</div>
<div class="bloc">
texte taille 15px
<p>
texte taille 1.4em = 21px
</p>
</div>
texte taille 1.4em = 14px
texte taille 1.4em = 21px
Définition : rem
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.
<div>
<p>Bonjour</p>
</div>
div {width:200px;}
div p {width:50%}
Le paragraphe aura une taille de 100px.
Couleur
Définition : Nom 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.
color: fuchsia;
background-color : magenta;
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.
color: #ff000088; // rouge avec opacité de 50%
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)
color: rgb(255, 0, 0); // rouge
color: rgb(255, 0, 0, 0.5); // rouge avec opacité de 50%
color: rgb(100%, 0%, 0%, 50%); // rouge avec opacité de 50%
color: rgb(100% 0% 0% / 50%); // rouge avec opacité de 50%
color: rgba(100%, 0%, 0%, 50%); // rouge avec opacité de 50%
color: rgba(100 0% 0% / 50%); // rouge avec opacité de 50%
Définition : hsl
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é.
color: hsl(0, 50%, 50%, 0.5);