Les unités et les couleurs en CSS

Les unités absolues et relatives (px, em, rem, %, vw, vh) et les notations de couleur (hexadécimal, rgb, hsl, transparence) : savoir à quoi se rapporte chaque valeur et la convertir.

  • 26 cartes
  • 5 thèmes
  • Gratuit

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier
  4. Les chiffres
  5. Mises en situation

Quelques cartes du deck

  • rem : de quoi s'agit-il ?

    Voir la réponse

    Unité de longueur égale à la taille de police de l'élément racine html (16 px par défaut dans les navigateurs).

    Comme tous les rem partent de la même racine, ils ne se composent pas : 2rem vaut toujours 32 px par défaut, à n'importe quelle profondeur.

  • Quel est le padding gauche de ce bouton, en px ?

    ```css
    button {
    font-size: 20px;
    padding: 0.5em 1em;
    }
    `

    • 20 px
    • 10 px
    • 16 px
    • 8 px
    Voir la réponse

    20 px

    Hors font-size, em se rapporte à la taille de police de l'élément lui-même, pas à celle de la racine : 1em = 20 px, pas 16. Le padding haut et bas, 0,5em, fait 10 px.

  • Dans #RRGGBB, chaque paire de chiffres va de … à …, soit de 0 à 255 en décimal.

    Voir la réponse

    Dans #RRGGBB, chaque paire de chiffres va de 00 à FF, soit de 0 à 255 en décimal.

    Deux chiffres hexadécimaux font 16 × 16 = 256 valeurs, soit exactement un octet par canal.

  • em : de quoi s'agit-il ?

    Voir la réponse

    Unité de longueur relative à la taille de police : celle de l'élément lui-même pour la plupart des propriétés, celle de son parent pour font-size.

    Pour font-size, les em se composent à chaque niveau : 1.5em dans 1.5em donne 2,25 fois la taille de départ, ce qui surprend dans les listes imbriquées.