Historique des conversations
Chargement...
Chapitre 3 : Couleurs, unités et valeurs
1. Utiliser les couleurs en CSS
Il existe plusieurs façons de définir une couleur en CSS :
- Nom de couleur :
red,blue,green, etc. - Hexadécimal :
#ff0000(rouge),#000000(noir) - RGB :
rgb(255, 0, 0) - RGBA (avec transparence) :
rgba(255, 0, 0, 0.5) - HSL :
hsl(0, 100%, 50%)
Exemple :
body {
background-color: #f0f0f0;
color: rgb(30, 30, 30);
}2. Les unités en CSS
Les unités définissent les tailles en CSS : marges, polices, largeurs, etc.
- Pixels :
px— unité fixe - Pourcentage :
%— relatif au parent - em : relatif à la taille du texte du parent
- rem : relatif à la taille de la racine (
html) - vw / vh : relatif à la largeur / hauteur de la fenêtre
Exemple :
h1 {
font-size: 2em;
margin-bottom: 5vh;
}3. Valeurs spéciales
auto: taille automatique (ex: marges ou largeur)inherit: hérite de la valeur du parentinitial: valeur par défaut du navigateurunset: réinitialise (héritée ou initiale)
Exemple :
div {
margin-left: auto;
margin-right: auto;
}Conclusion
Comprendre les couleurs, les unités et les valeurs CSS est essentiel pour construire des designs cohérents, adaptables et professionnels. Dans le prochain chapitre, nous aborderons la gestion du texte : polices, tailles, interlignes, alignements…
Évaluation des acquis
Correction immédiate
Quiz du chapitre 3
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Couleur Hexadécimale
Atelier #1Applique la couleur blanche (#ffffff) en arrière-plan du body.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
body {
background-color: #ffffff;
}
#2 — Couleur RGB
Atelier #2Utilise la fonction rgb() pour mettre un texte en noir.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
p {
color: rgb(0, 0, 0);
}
#3 — Unité Relative (em)
Atelier #3Mets une marge de 2em à un div.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
div {
margin: 2em;
}
#4 — Unité de Vue (vh)
Atelier #4Donne une hauteur égale à 100% de la hauteur de l'écran à une section.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
section {
height: 100vh;
}
#5 — Opacité (rgba)
Atelier #5Applique un fond noir avec 50% de transparence à une classe 'overlay'.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
.overlay {
background-color: rgba(0, 0, 0, 0.5);
}