Cet aide-mémoire n'est volontairement pas exhaustif. Il est principalement destiné aux étudiants de la HELHa qui apprennent les bases du développement web. Il se limite donc aux éléments les plus fréquemment utilisés en CSS.
Le navigateur va interpréter les CSS dans un ordre bien précis : la dernière déclaration du flux est celle prise en compte MAIS un système de priorités risque de venir perturber cette règle de base.
|
45 pixels |
|
2 fois la taille de police du parent |
|
3 fois et demi la taille de police par défaut du site ou du navigateur |
|
33% de la taille de l'élément parent |
|
50% de la largeur du viewport |
|
25% de la hauteur du viewport |
|
50% de la plus grande valeur entre la hauteur ou la largeur du viewport |
|
Calcul : 100% de la hauteur du viewport - 50 pixels |
|
Spécifique à Grid, représente une fraction de l'espace disponible dans le conteneur de la grille. Par exemple divise un espace en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d'une fraction. |
|
45 degrés, utile pour les rotations et déformations |
Pour les décimales, ne jamais utiliser de virgule, toujours des points : 1.2em ou 25.50%
|
top : 10px, right : 15px, bottom : 20px, left : 20px |
|
top-left : 10px, top-right : 0, bottom-right : 10px, bottom-left : 0 |
|
Top et bottom : 20px, left et right : 10px |
|
Top : 10px, left et right : 15px, bottom : 20px |
|
Hexadécimal : un code hexadécimal définit une couleur RGB grâce à 3 codes de 2 chiffres sur une échelle de 0 à F (#rrggbb). Pour des couleurs plus simple, on peut utiliser une seule lettre par canal (#rgb). Certains navigateurs acceptent une quatrième valeur de transparence (#rrggbbaa) |
|
RGB : ce code définit une couleur RGB grâce à 3 chiffres sur une échelle de 0 à 255 |
|
RGBa : ce code définit une couleur RGB ainsi que sa transparence sur une échelle de 0 à 1. Dans notre exemple, il s'agit d'un blanc à 60% d'opacité |
|
HSL : ce code définit une couleur grâce à 3 chiffres sur une échelle de 0 à 255, la teinte (h comme hue), la saturation (s) et la luminosité (l) |
|
HSLa : ce code définit une couleur HSL ainsi que sa transparence sur une échelle de 0 à 1 |
|
Mots-clés : certaines couleurs (environs 150) ont un mot-clé qui peut être utilisé en CSS. La page liée ci-dessous contient un tableau complet de ces couleurs |