My Terrarium
``` **Ce que fait ce code :** - **Applique** une couleur rouge directement à l’élément `` via un style en ligne
- **Utilise** l’attribut `style` pour insérer du CSS directement dans le HTML
- **Crée** la règle de style la plus prioritaire pour cet élément spécifique
Ensuite, ajoutez cette règle dans votre fichier `style.css` :
```css
h1 {
color: blue;
}
```
**Dans ce qui précède, nous avons :**
- **Défini** une règle CSS ciblant tous les éléments ``
- **Mis** la couleur du texte en bleu à l’aide d’une feuille de style externe
- **Créé** une règle de priorité inférieure comparée au style en ligne
✅ **Vérification de connaissances** : Quelle couleur s’affiche dans votre application web ? Pourquoi cette couleur gagne-t-elle ? Pouvez-vous penser à des scénarios où vous voudriez outrepasser des styles ?
```mermaid
flowchart TD
A["Le navigateur rencontre l'élément h1"] --> B{"Vérifier les styles en ligne"}
B -->|Trouvé| C["style='color: red'"]
B -->|Aucun| D{"Vérifier les règles d'ID"}
C --> E["Appliquer la couleur rouge (1000 points)"]
D -->|Trouvé| F["#heading { color: green }"]
D -->|Aucun| G{"Vérifier les règles de classe"}
F --> H["Appliquer la couleur verte (100 points)"]
G -->|Trouvé| I[".title { color: blue }"]
G -->|Aucun| J{"Vérifier les règles d'élément"}
I --> K["Appliquer la couleur bleue (10 points)"]
J -->|Trouvé| L["h1 { color: purple }"]
J -->|Aucun| M["Utiliser la valeur par défaut du navigateur"]
L --> N["Appliquer la couleur violette (1 point)"]
style C fill:#ff6b6b
style F fill:#51cf66
style I fill:#339af0
style L fill:#9775fa
```
> 💡 **Ordre de priorité CSS (du plus élevé au plus bas) :**
> 1. **Styles en ligne** (attribut style)
> 2. **IDs** (#monId)
> 3. **Classes** (.maClasse) et attributs
> 4. **Sélecteurs d’éléments** (h1, div, p)
> 5. **Valeurs par défaut du navigateur**
## Héritage CSS en action
L’héritage CSS fonctionne comme la génétique - les éléments héritent certaines propriétés de leurs parents. Si vous définissez la police sur l’élément body, tout le texte à l’intérieur utilise automatiquement cette même police. C’est semblable à la façon dont la mâchoire distinctive de la famille Habsbourg apparaissait à travers les générations sans être spécifiée individuellement.
Cependant, tout n’est pas hérité. Les styles de texte comme les polices et les couleurs s’héritent, mais les propriétés de mise en page comme les marges et bordures ne le sont pas. Comme les enfants peuvent hériter des traits physiques mais pas des choix vestimentaires de leurs parents.
### Observer l’héritage de la police
Voyons l’héritage en action en définissant une police sur l’élément `` :
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
```
**Décryptage de ce qui se passe ici :**
- **Définit** la famille de polices pour toute la page en ciblant l’élément ``
- **Utilise** une pile de polices avec des options de secours pour une meilleure compatibilité navigateur
- **Applique** des polices système modernes qui rendent bien sur différents systèmes d’exploitation
- **Assure** que tous les éléments enfants héritent cette police sauf si spécifiquement substituée
Ouvrez les outils de développement de votre navigateur (F12), allez dans l’onglet Éléments, et inspectez votre élément ``. Vous verrez qu’il hérite de la famille de polices du body :
✅ **Temps d’expérimentation** : Essayez de définir d’autres propriétés héritables sur le `` comme `color`, `line-height` ou `text-align`. Que se passe-t-il pour votre titre et les autres éléments ?
> 📝 **Propriétés héritables comprennent** : `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **Propriétés non héritables comprennent** : `margin`, `padding`, `border`, `width`, `height`, `position`
### 🔄 **Bilan pédagogique**
**Compréhension des fondations CSS** : Avant de passer aux sélecteurs, assurez-vous de pouvoir :
- ✅ Expliquer la différence entre cascade et héritage
- ✅ Prédire quel style l’emportera en cas de conflit de spécificité
- ✅ Identifier quelles propriétés sont héritées des éléments parents
- ✅ Relier correctement les fichiers CSS au HTML
**Test rapide** : Si vous avez ces styles, de quelle couleur sera un `` dans un `` ?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*Réponse : Rouge (le sélecteur d’élément cible directement h1)*
## Maîtriser les sélecteurs CSS
Les sélecteurs CSS sont votre moyen de cibler des éléments spécifiques pour les styler. Ils fonctionnent comme donner des directions précises - au lieu de dire « la maison », vous pourriez dire « la maison bleue avec la porte rouge dans la rue Maple ».
Le CSS offre différentes façons d’être spécifique, et choisir le bon sélecteur, c’est comme choisir le bon outil pour la tâche. Parfois vous devez styliser toutes les portes du quartier, parfois une porte en particulier.
### Sélecteurs d’éléments (balises)
Les sélecteurs d’éléments ciblent des éléments HTML par leur nom de balise. Ils sont parfaits pour définir des styles de base qui s’appliquent largement sur votre page :
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**Comprendre ces styles :**
- **Définit** une typographie cohérente sur toute la page avec le sélecteur `body`
- **Supprime** les marges et le padding par défaut du navigateur pour un meilleur contrôle
- **Style** tous les éléments de titre avec couleur, alignement et espacement
- **Utilise** les unités `rem` pour une taille de police évolutive et accessible
Tandis que les sélecteurs d’éléments fonctionnent bien pour les styles généraux, vous aurez besoin de sélecteurs plus spécifiques pour les composants individuels comme les plantes dans votre terrarium.
### Sélecteurs ID pour les éléments uniques
Les sélecteurs ID utilisent le symbole `#` et ciblent les éléments avec un attribut `id` spécifique. Puisque les IDs doivent être uniques sur une page, ils sont parfaits pour styler des éléments individuels et particuliers comme nos conteneurs latéraux de plantes.
Créons le style pour les conteneurs latéraux de notre terrarium où les plantes seront placées :
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**Ce que fait ce code :**
- **Positionne** les conteneurs aux extrémités gauche et droite en utilisant une position `absolute`
- **Utilise** les unités `vh` (hauteur de la fenêtre) pour une hauteur responsive qui s’adapte à la taille de l’écran
- **Applique** `box-sizing: border-box` pour inclure le padding dans la largeur totale
- **Supprime** les unités `px` inutiles quand la valeur est zéro pour un code plus propre
- **Définit** une couleur de fond subtile plus douce que le gris vif
✅ **Défi Qualité de Code** : Remarquez comment ce CSS viole le principe DRY (Don't Repeat Yourself). Pouvez-vous le refactorer en utilisant à la fois un ID et une classe ?
**Approche améliorée :**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### Sélecteurs de classes pour styles réutilisables
Les sélecteurs de classes utilisent le symbole `.` et sont parfaits lorsque vous voulez appliquer les mêmes styles à plusieurs éléments. Contrairement aux IDs, les classes peuvent être réutilisées partout dans votre HTML, ce qui les rend idéales pour des styles cohérents et répétitifs.
Dans notre terrarium, chaque plante nécessite un style similaire mais doit aussi être positionnée individuellement. Nous allons utiliser une combinaison de classes pour les styles partagés et d’IDs pour le positionnement unique.
**Voici la structure HTML pour chaque plante :**
```html
```
**Explication des éléments clés :**
- **Utilise** `class="plant-holder"` pour un style de conteneur uniforme sur toutes les plantes
- **Applique** `class="plant"` pour un style d’image partagé et comportement commun
- **Inclus** un `id="plant1"` unique pour positionnement individuel et interaction JavaScript
- **Fournit** un texte alternatif descriptif pour l’accessibilité aux lecteurs d’écran
Ajoutez maintenant ces styles à votre fichier `style.css` :
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**Décryptage de ces styles :**
- **Crée** un positionnement relatif pour le conteneur de plante afin d’établir un contexte de positionnement
- **Fixe** chaque conteneur de plante à 13% de hauteur pour que toutes les plantes tiennent verticalement sans défilement
- **Décale** légèrement les conteneurs vers la gauche pour mieux centrer les plantes dans leurs conteneurs
- **Permet** aux plantes de s’adapter de façon responsive avec `max-width` et `max-height`
- **Utilise** `z-index` pour superposer les plantes au-dessus d’autres éléments du terrarium
- **Ajoute** un effet subtil au survol avec des transitions CSS pour une meilleure interaction utilisateur
✅ **Réflexion critique** : Pourquoi avons-nous besoin à la fois des sélecteurs `.plant-holder` et `.plant` ? Que se passerait-il si on utilisait un seul seul ?
> 💡 **Patron de conception** : Le conteneur (`.plant-holder`) contrôle la mise en page et le positionnement, tandis que le contenu (`.plant`) contrôle l’apparence et la mise à l’échelle. Cette séparation rend le code plus maintenable et flexible.
## Comprendre le positionnement CSS
Le positionnement CSS est comme être le metteur en scène d’une pièce de théâtre - vous dirigez où chaque acteur se place et comment il se déplace sur scène. Certains acteurs suivent la formation standard, tandis que d’autres ont besoin d’un positionnement spécifique pour un effet dramatique.
Une fois que vous comprenez le positionnement, beaucoup de défis de mise en page deviennent gérables. Besoin d’une barre de navigation qui reste en haut pendant que l’utilisateur défile ? Le positionnement gère cela. Vous voulez une infobulle qui apparaît à un endroit précis ? C’est aussi du positionnement.
### Les cinq valeurs de position
```mermaid
quadrantChart
title Stratégie de Positionnement CSS
x-axis Flux du Document --> Retiré du Flux
y-axis Position Statique --> Contrôle Précis
quadrant-1 Absolu
quadrant-2 Fixe
quadrant-3 Statique
quadrant-4 Collant
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| Valeur de position | Comportement | Cas d’usage |
|--------------------|--------------|-------------|
| `static` | Flux par défaut, ignore top/left/right/bottom | Mise en page normale du document |
| `relative` | Positionné par rapport à sa position normale | Ajustements mineurs, création de contexte de positionnement |
| `absolute` | Positionné par rapport à l’ancêtre positionné le plus proche | Placement précis, superpositions |
| `fixed` | Positionné par rapport à la fenêtre d’affichage | Barres de navigation, éléments flottants |
| `sticky` | Passe de relatif à fixe selon le défilement | En-têtes qui restent visibles lors du défilement |
### Positionnement dans notre terrarium
Notre terrarium utilise une combinaison stratégique de types de positionnement pour créer la mise en page désirée :
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**Comprendre la stratégie de positionnement :**
- **Les conteneurs absolus** sont retirés du flux normal du document et attachés aux bords de l’écran
- **Les conteneurs de plantes relatifs** créent un contexte de positionnement tout en restant dans le flux du document
- **Les plantes en position absolue** peuvent être positionnées précisément à l’intérieur de leurs conteneurs relatifs
- **Cette combinaison** permet aux plantes d’être empilées verticalement tout en pouvant être positionnées individuellement
> 🎯 **Pourquoi c’est important** : Les éléments `plant` ont besoin d’un positionnement absolu pour devenir déplaçables dans la leçon suivante. Le positionnement absolu les retire du flux normal, rendant possible les interactions de glisser-déposer.
✅ **Temps d’expérimentation** : Essayez de changer les valeurs de positionnement et observez les résultats :
- Que se passe-t-il si vous changez `.container` de `absolute` à `relative` ?
- Comment la mise en page change-t-elle si `.plant-holder` utilise `absolute` au lieu de `relative` ?
- Que se passe-t-il lorsque vous passez `.plant` en positionnement `relative` ?
### 🔄 **Point pédagogique**
**Maîtrise du positionnement CSS** : Faites une pause pour vérifier votre compréhension :
- ✅ Pouvez-vous expliquer pourquoi les plantes ont besoin d'un positionnement absolu pour le drag-and-drop ?
- ✅ Comprenez-vous comment les conteneurs relatifs créent un contexte de positionnement ?
- ✅ Pourquoi les conteneurs latéraux utilisent-ils un positionnement absolu ?
- ✅ Que se passerait-il si vous supprimiez entièrement les déclarations de position ?
**Lien avec le monde réel** : Pensez à la façon dont le positionnement CSS reflète la disposition dans la vie réelle :
- **Static** : Livres sur une étagère (ordre naturel)
- **Relative** : Déplacer un livre légèrement tout en gardant sa place
- **Absolute** : Placer un marque-page à une page précise
- **Fixed** : Un post-it qui reste visible lorsque vous tournez les pages
## Construire le terrarium avec CSS
Nous allons maintenant construire un bocal en verre en utilisant uniquement du CSS - pas besoin d'images ou de logiciels graphiques.
Créer l’illusion d’un verre réaliste, des ombres et des effets de profondeur à l’aide du positionnement et de la transparence démontre les capacités visuelles du CSS. Cette technique reflète la manière dont les architectes du mouvement Bauhaus utilisaient des formes géométriques simples pour créer des structures complexes et esthétiques. Une fois ces principes compris, vous reconnaîtrez les techniques CSS derrière beaucoup de designs web.
```mermaid
flowchart LR
A[Haut du bocal] --> E[Terrarium complet]
B[Parois du bocal] --> E
C[Couche de terre] --> E
D[Fond du bocal] --> E
F[Effets de verre] --> E
A1["50% largeur
5% hauteur
Position haute"] --> A
B1["60% largeur
80% hauteur
Coins arrondis
0.5 opacité"] --> B
C1["60% largeur
5% hauteur
Marron foncé
Couche inférieure"] --> C
D1["50% largeur
1% hauteur
Position basse"] --> D
F1["Ombres subtiles
Transparence
Superposition Z-index"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### Création des composants du bocal en verre
Construisons le bocal du terrarium pièce par pièce. Chaque partie utilise un positionnement absolu et des tailles en pourcentages pour un design responsive :
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
**Compréhension de la construction du terrarium :**
- **Utilise** des dimensions en pourcentage pour un redimensionnement adaptatif sur toutes tailles d'écran
- **Positionne** les éléments en absolu pour les empiler et les aligner précisément
- **Applique** différentes valeurs d’opacité pour créer l’effet de transparence du verre
- **Implémente** un `z-index` pour que les plantes apparaissent à l’intérieur du bocal
- **Ajoute** des ombres portées subtiles et un rayon de bordure affiné pour un aspect plus réaliste
### Design responsif avec des pourcentages
Remarquez que toutes les dimensions utilisent des pourcentages plutôt que des valeurs fixes en pixels :
**Pourquoi c’est important :**
- **Assure** que le terrarium s’adapte proportionnellement à toute taille d’écran
- **Maintient** les relations visuelles entre les composants du bocal
- **Offre** une expérience cohérente des mobiles aux grands écrans de bureau
- **Permet** au design de s’adapter sans casser la mise en page
### Unités CSS en action
Nous utilisons les unités `rem` pour le border-radius, qui s’échelonnent en fonction de la taille de police racine. Cela crée des designs plus accessibles qui respectent les préférences de police de l’utilisateur. En savoir plus sur les [unités relatives CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths) dans la spécification officielle.
✅ **Expérimentation visuelle** : Essayez de modifier ces valeurs et observez les effets :
- Changez l’opacité du bocal de 0.5 à 0.8 – comment cela affecte-t-il l’apparence du verre ?
- Ajustez la couleur de la terre de `#3a241d` à `#8B4513` – quel impact visuel cela a-t-il ?
- Modifiez le `z-index` de la terre à 2 – que se passe-t-il dans la superposition ?
### 🔄 **Point pédagogique**
**Compréhension du design visuel CSS** : Confirmez votre maîtrise du CSS visuel :
- ✅ Comment les dimensions en pourcentage créent-elles du design adaptatif ?
- ✅ Pourquoi l’opacité crée-t-elle l’effet de transparence du verre ?
- ✅ Quel rôle joue le z-index dans la superposition des éléments ?
- ✅ Comment les valeurs de border-radius créent-elles la forme du bocal ?
**Principe de design** : Remarquez comment nous construisons des visuels complexes à partir de formes simples :
1. **Rectangles** → **Rectangles arrondis** → **Composants du bocal**
2. **Couleurs plates** → **Opacité** → **Effet verre**
3. **Éléments individuels** → **Composition en couches** → **Apparence 3D**
---
## Défi GitHub Copilot Agent 🚀
Utilisez le mode Agent pour relever le défi suivant :
**Description :** Créez une animation CSS qui fait doucement osciller les plantes du terrarium, simulant un effet de brise naturelle. Cela vous aidera à pratiquer les animations, transformations et keyframes CSS tout en améliorant l’esthétique de votre terrarium.
**Consigne :** Ajoutez des animations keyframe CSS pour faire balancer doucement les plantes du terrarium de gauche à droite. Créez une animation oscillante qui fait pivoter chaque plante légèrement (2 à 3 degrés) à gauche et à droite avec une durée de 3 à 4 secondes, et appliquez-la à la classe `.plant`. Assurez-vous que l’animation boucle infiniment avec une fonction d’accélération pour un mouvement naturel.
Pour en savoir plus sur le [mode agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode), cliquez ici.
## 🚀 Défi : Ajouter des reflets de verre
Prêt à améliorer votre terrarium avec des reflets de verre réalistes ? Cette technique ajoutera profondeur et réalisme au design.
Vous allez créer des reflets subtils qui simulent la façon dont la lumière se reflète sur les surfaces de verre. Cette approche est similaire à celle utilisée par les peintres de la Renaissance comme Jan van Eyck qui utilisaient lumière et réflexion pour donner un aspect tridimensionnel au verre peint. Voici ce que vous devrez viser :
**Votre défi :**
- **Créer** des formes ovales blanches ou claires subtiles pour les reflets du verre
- **Les positionner** stratégiquement sur le côté gauche du bocal
- **Appliquer** l’opacité et l’effet de flou appropriés pour un reflet lumineux réaliste
- **Utiliser** le `border-radius` pour créer des formes organiques rappelant des bulles
- **Expérimenter** avec des dégradés ou des ombres portées pour plus de réalisme
## Quiz post-conférence
[Quiz post-conférence](https://ff-quizzes.netlify.app/web/quiz/18)
## Approfondissez vos connaissances CSS
Le CSS peut sembler complexe au début, mais comprendre ces concepts fondamentaux fournit une base solide pour des techniques plus avancées.
**Vos prochaines étapes en CSS :**
- **Flexbox** – simplifie l’alignement et la distribution des éléments
- **CSS Grid** – offre des outils puissants pour créer des mises en page complexes
- **Variables CSS** – réduit la répétition et améliore la maintenabilité
- **Design responsive** – garantit un bon fonctionnement sur différentes tailles d’écran
### Ressources d’apprentissage interactives
Pratiquez ces concepts avec ces jeux ludiques et pratiques :
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) – Maîtrisez Flexbox par des défis amusants
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) – Apprenez CSS Grid en cultivant des carottes virtuelles
- 🎯 [CSS Battle](https://cssbattle.dev/) – Testez vos compétences CSS avec des défis de code
### Apprentissage complémentaire
Pour maîtriser les bases du CSS, complétez ce module Microsoft Learn : [Styliser votre application HTML avec CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **Ce que vous pouvez faire dans les 5 prochaines minutes**
- [ ] Ouvrir DevTools et inspecter les styles CSS de n’importe quel site avec le panneau Éléments
- [ ] Créer un fichier CSS simple et le lier à une page HTML
- [ ] Essayer de changer les couleurs avec différentes méthodes : hexadécimal, RGB et noms de couleur
- [ ] Pratiquer le modèle de boîte en ajoutant padding et margin à une div
### 🎯 **Ce que vous pouvez accomplir cette heure**
- [ ] Compléter le quiz post-leçon et revoir les fondamentaux du CSS
- [ ] Styliser votre page HTML avec des polices, couleurs et espacements
- [ ] Créer une mise en page simple avec flexbox ou grid
- [ ] Expérimenter les transitions CSS pour des effets fluides
- [ ] Pratiquer le design responsive avec des media queries
### 📅 **Votre aventure CSS sur une semaine**
- [ ] Réaliser le style du terrarium avec créativité
- [ ] Maîtriser CSS Grid en construisant une galerie photo
- [ ] Apprendre les animations CSS pour animer vos designs
- [ ] Explorer les préprocesseurs CSS comme Sass ou Less
- [ ] Étudier les principes de design et les appliquer en CSS
- [ ] Analyser et recréer des designs intéressants trouvés en ligne
### 🌟 **Votre maîtrise du design en un mois**
- [ ] Construire un système complet de design de site web responsive
- [ ] Apprendre CSS-in-JS ou des frameworks utilitaires comme Tailwind
- [ ] Contribuer à des projets open source avec des améliorations CSS
- [ ] Maîtriser des concepts avancés CSS comme les propriétés personnalisées et le containment
- [ ] Créer des bibliothèques de composants réutilisables avec du CSS modulaire
- [ ] Encadrer d’autres apprentis CSS et partager vos connaissances design
## 🎯 Votre chronologie de maîtrise CSS
```mermaid
timeline
title Progression d'apprentissage CSS
section Fondations (10 minutes)
Connexion de fichiers : Lier CSS à HTML
: Comprendre les règles de cascade
: Apprendre les bases de l'héritage
section Sélecteurs (15 minutes)
Ciblage des éléments : Sélecteurs d'éléments
: Modèles de classes
: Spécificité des ID
: Combinateurs
section Modèle de boîte (20 minutes)
Fondamentaux de mise en page : Marges et padding
: Propriétés de bordure
: Dimensionnement du contenu
: Comportement de box-sizing
section Positionnement (25 minutes)
Placement des éléments : Statique vs relatif
: Positionnement absolu
: Superposition avec z-index
: Unités adaptées
section Conception visuelle (30 minutes)
Maîtrise du style : Couleurs et opacité
: Ombres et effets
: Transitions
: Propriétés de transformation
section Conception adaptative (45 minutes)
Support multi-appareils : Requêtes media
: Mise en page flexible
: Approche mobile-first
: Optimisation du viewport
section Techniques avancées (1 semaine)
CSS moderne : Dispositions Flexbox
: Systèmes CSS Grid
: Propriétés personnalisées
: Images-clés d'animation
section Compétences professionnelles (1 mois)
Architecture CSS : Modèles de composants
: Code maintenable
: Optimisation des performances
: Compatibilité multi-navigateurs
```
### 🛠️ Résumé de votre boîte à outils CSS
Après cette leçon, vous avez maintenant :
- **Compréhension de la cascade** : Comment les styles héritent et se remplacent
- **Maîtrise des sélecteurs** : Ciblage précis avec éléments, classes et IDs
- **Compétences en positionnement** : Placement stratégique et gestion des couches d’éléments
- **Design visuel** : Création d’effets verre, ombres et transparence
- **Techniques responsives** : Mise en page en pourcentages qui s’adapte à tout écran
- **Organisation du code** : Structure CSS propre et maintenable
- **Pratiques modernes** : Utilisation d’unités relatives et design accessible
**Prochaines étapes** : Votre terrarium possède désormais structure (HTML) et style (CSS). La dernière leçon ajoutera de l’interactivité avec JavaScript !
## Devoir
[Refactorisation CSS](assignment.md)
---
**Avertissement** :
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant autorité. Pour des informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées résultant de l’utilisation de cette traduction.
`. Vous verrez qu’il hérite de la famille de polices du body :
✅ **Temps d’expérimentation** : Essayez de définir d’autres propriétés héritables sur le `` comme `color`, `line-height` ou `text-align`. Que se passe-t-il pour votre titre et les autres éléments ?
> 📝 **Propriétés héritables comprennent** : `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **Propriétés non héritables comprennent** : `margin`, `padding`, `border`, `width`, `height`, `position`
### 🔄 **Bilan pédagogique**
**Compréhension des fondations CSS** : Avant de passer aux sélecteurs, assurez-vous de pouvoir :
- ✅ Expliquer la différence entre cascade et héritage
- ✅ Prédire quel style l’emportera en cas de conflit de spécificité
- ✅ Identifier quelles propriétés sont héritées des éléments parents
- ✅ Relier correctement les fichiers CSS au HTML
**Test rapide** : Si vous avez ces styles, de quelle couleur sera un `` dans un `` ?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*Réponse : Rouge (le sélecteur d’élément cible directement h1)*
## Maîtriser les sélecteurs CSS
Les sélecteurs CSS sont votre moyen de cibler des éléments spécifiques pour les styler. Ils fonctionnent comme donner des directions précises - au lieu de dire « la maison », vous pourriez dire « la maison bleue avec la porte rouge dans la rue Maple ».
Le CSS offre différentes façons d’être spécifique, et choisir le bon sélecteur, c’est comme choisir le bon outil pour la tâche. Parfois vous devez styliser toutes les portes du quartier, parfois une porte en particulier.
### Sélecteurs d’éléments (balises)
Les sélecteurs d’éléments ciblent des éléments HTML par leur nom de balise. Ils sont parfaits pour définir des styles de base qui s’appliquent largement sur votre page :
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**Comprendre ces styles :**
- **Définit** une typographie cohérente sur toute la page avec le sélecteur `body`
- **Supprime** les marges et le padding par défaut du navigateur pour un meilleur contrôle
- **Style** tous les éléments de titre avec couleur, alignement et espacement
- **Utilise** les unités `rem` pour une taille de police évolutive et accessible
Tandis que les sélecteurs d’éléments fonctionnent bien pour les styles généraux, vous aurez besoin de sélecteurs plus spécifiques pour les composants individuels comme les plantes dans votre terrarium.
### Sélecteurs ID pour les éléments uniques
Les sélecteurs ID utilisent le symbole `#` et ciblent les éléments avec un attribut `id` spécifique. Puisque les IDs doivent être uniques sur une page, ils sont parfaits pour styler des éléments individuels et particuliers comme nos conteneurs latéraux de plantes.
Créons le style pour les conteneurs latéraux de notre terrarium où les plantes seront placées :
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**Ce que fait ce code :**
- **Positionne** les conteneurs aux extrémités gauche et droite en utilisant une position `absolute`
- **Utilise** les unités `vh` (hauteur de la fenêtre) pour une hauteur responsive qui s’adapte à la taille de l’écran
- **Applique** `box-sizing: border-box` pour inclure le padding dans la largeur totale
- **Supprime** les unités `px` inutiles quand la valeur est zéro pour un code plus propre
- **Définit** une couleur de fond subtile plus douce que le gris vif
✅ **Défi Qualité de Code** : Remarquez comment ce CSS viole le principe DRY (Don't Repeat Yourself). Pouvez-vous le refactorer en utilisant à la fois un ID et une classe ?
**Approche améliorée :**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### Sélecteurs de classes pour styles réutilisables
Les sélecteurs de classes utilisent le symbole `.` et sont parfaits lorsque vous voulez appliquer les mêmes styles à plusieurs éléments. Contrairement aux IDs, les classes peuvent être réutilisées partout dans votre HTML, ce qui les rend idéales pour des styles cohérents et répétitifs.
Dans notre terrarium, chaque plante nécessite un style similaire mais doit aussi être positionnée individuellement. Nous allons utiliser une combinaison de classes pour les styles partagés et d’IDs pour le positionnement unique.
**Voici la structure HTML pour chaque plante :**
```html
```
**Explication des éléments clés :**
- **Utilise** `class="plant-holder"` pour un style de conteneur uniforme sur toutes les plantes
- **Applique** `class="plant"` pour un style d’image partagé et comportement commun
- **Inclus** un `id="plant1"` unique pour positionnement individuel et interaction JavaScript
- **Fournit** un texte alternatif descriptif pour l’accessibilité aux lecteurs d’écran
Ajoutez maintenant ces styles à votre fichier `style.css` :
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**Décryptage de ces styles :**
- **Crée** un positionnement relatif pour le conteneur de plante afin d’établir un contexte de positionnement
- **Fixe** chaque conteneur de plante à 13% de hauteur pour que toutes les plantes tiennent verticalement sans défilement
- **Décale** légèrement les conteneurs vers la gauche pour mieux centrer les plantes dans leurs conteneurs
- **Permet** aux plantes de s’adapter de façon responsive avec `max-width` et `max-height`
- **Utilise** `z-index` pour superposer les plantes au-dessus d’autres éléments du terrarium
- **Ajoute** un effet subtil au survol avec des transitions CSS pour une meilleure interaction utilisateur
✅ **Réflexion critique** : Pourquoi avons-nous besoin à la fois des sélecteurs `.plant-holder` et `.plant` ? Que se passerait-il si on utilisait un seul seul ?
> 💡 **Patron de conception** : Le conteneur (`.plant-holder`) contrôle la mise en page et le positionnement, tandis que le contenu (`.plant`) contrôle l’apparence et la mise à l’échelle. Cette séparation rend le code plus maintenable et flexible.
## Comprendre le positionnement CSS
Le positionnement CSS est comme être le metteur en scène d’une pièce de théâtre - vous dirigez où chaque acteur se place et comment il se déplace sur scène. Certains acteurs suivent la formation standard, tandis que d’autres ont besoin d’un positionnement spécifique pour un effet dramatique.
Une fois que vous comprenez le positionnement, beaucoup de défis de mise en page deviennent gérables. Besoin d’une barre de navigation qui reste en haut pendant que l’utilisateur défile ? Le positionnement gère cela. Vous voulez une infobulle qui apparaît à un endroit précis ? C’est aussi du positionnement.
### Les cinq valeurs de position
```mermaid
quadrantChart
title Stratégie de Positionnement CSS
x-axis Flux du Document --> Retiré du Flux
y-axis Position Statique --> Contrôle Précis
quadrant-1 Absolu
quadrant-2 Fixe
quadrant-3 Statique
quadrant-4 Collant
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| Valeur de position | Comportement | Cas d’usage |
|--------------------|--------------|-------------|
| `static` | Flux par défaut, ignore top/left/right/bottom | Mise en page normale du document |
| `relative` | Positionné par rapport à sa position normale | Ajustements mineurs, création de contexte de positionnement |
| `absolute` | Positionné par rapport à l’ancêtre positionné le plus proche | Placement précis, superpositions |
| `fixed` | Positionné par rapport à la fenêtre d’affichage | Barres de navigation, éléments flottants |
| `sticky` | Passe de relatif à fixe selon le défilement | En-têtes qui restent visibles lors du défilement |
### Positionnement dans notre terrarium
Notre terrarium utilise une combinaison stratégique de types de positionnement pour créer la mise en page désirée :
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**Comprendre la stratégie de positionnement :**
- **Les conteneurs absolus** sont retirés du flux normal du document et attachés aux bords de l’écran
- **Les conteneurs de plantes relatifs** créent un contexte de positionnement tout en restant dans le flux du document
- **Les plantes en position absolue** peuvent être positionnées précisément à l’intérieur de leurs conteneurs relatifs
- **Cette combinaison** permet aux plantes d’être empilées verticalement tout en pouvant être positionnées individuellement
> 🎯 **Pourquoi c’est important** : Les éléments `plant` ont besoin d’un positionnement absolu pour devenir déplaçables dans la leçon suivante. Le positionnement absolu les retire du flux normal, rendant possible les interactions de glisser-déposer.
✅ **Temps d’expérimentation** : Essayez de changer les valeurs de positionnement et observez les résultats :
- Que se passe-t-il si vous changez `.container` de `absolute` à `relative` ?
- Comment la mise en page change-t-elle si `.plant-holder` utilise `absolute` au lieu de `relative` ?
- Que se passe-t-il lorsque vous passez `.plant` en positionnement `relative` ?
### 🔄 **Point pédagogique**
**Maîtrise du positionnement CSS** : Faites une pause pour vérifier votre compréhension :
- ✅ Pouvez-vous expliquer pourquoi les plantes ont besoin d'un positionnement absolu pour le drag-and-drop ?
- ✅ Comprenez-vous comment les conteneurs relatifs créent un contexte de positionnement ?
- ✅ Pourquoi les conteneurs latéraux utilisent-ils un positionnement absolu ?
- ✅ Que se passerait-il si vous supprimiez entièrement les déclarations de position ?
**Lien avec le monde réel** : Pensez à la façon dont le positionnement CSS reflète la disposition dans la vie réelle :
- **Static** : Livres sur une étagère (ordre naturel)
- **Relative** : Déplacer un livre légèrement tout en gardant sa place
- **Absolute** : Placer un marque-page à une page précise
- **Fixed** : Un post-it qui reste visible lorsque vous tournez les pages
## Construire le terrarium avec CSS
Nous allons maintenant construire un bocal en verre en utilisant uniquement du CSS - pas besoin d'images ou de logiciels graphiques.
Créer l’illusion d’un verre réaliste, des ombres et des effets de profondeur à l’aide du positionnement et de la transparence démontre les capacités visuelles du CSS. Cette technique reflète la manière dont les architectes du mouvement Bauhaus utilisaient des formes géométriques simples pour créer des structures complexes et esthétiques. Une fois ces principes compris, vous reconnaîtrez les techniques CSS derrière beaucoup de designs web.
```mermaid
flowchart LR
A[Haut du bocal] --> E[Terrarium complet]
B[Parois du bocal] --> E
C[Couche de terre] --> E
D[Fond du bocal] --> E
F[Effets de verre] --> E
A1["50% largeur
5% hauteur
Position haute"] --> A
B1["60% largeur
80% hauteur
Coins arrondis
0.5 opacité"] --> B
C1["60% largeur
5% hauteur
Marron foncé
Couche inférieure"] --> C
D1["50% largeur
1% hauteur
Position basse"] --> D
F1["Ombres subtiles
Transparence
Superposition Z-index"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### Création des composants du bocal en verre
Construisons le bocal du terrarium pièce par pièce. Chaque partie utilise un positionnement absolu et des tailles en pourcentages pour un design responsive :
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
**Compréhension de la construction du terrarium :**
- **Utilise** des dimensions en pourcentage pour un redimensionnement adaptatif sur toutes tailles d'écran
- **Positionne** les éléments en absolu pour les empiler et les aligner précisément
- **Applique** différentes valeurs d’opacité pour créer l’effet de transparence du verre
- **Implémente** un `z-index` pour que les plantes apparaissent à l’intérieur du bocal
- **Ajoute** des ombres portées subtiles et un rayon de bordure affiné pour un aspect plus réaliste
### Design responsif avec des pourcentages
Remarquez que toutes les dimensions utilisent des pourcentages plutôt que des valeurs fixes en pixels :
**Pourquoi c’est important :**
- **Assure** que le terrarium s’adapte proportionnellement à toute taille d’écran
- **Maintient** les relations visuelles entre les composants du bocal
- **Offre** une expérience cohérente des mobiles aux grands écrans de bureau
- **Permet** au design de s’adapter sans casser la mise en page
### Unités CSS en action
Nous utilisons les unités `rem` pour le border-radius, qui s’échelonnent en fonction de la taille de police racine. Cela crée des designs plus accessibles qui respectent les préférences de police de l’utilisateur. En savoir plus sur les [unités relatives CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths) dans la spécification officielle.
✅ **Expérimentation visuelle** : Essayez de modifier ces valeurs et observez les effets :
- Changez l’opacité du bocal de 0.5 à 0.8 – comment cela affecte-t-il l’apparence du verre ?
- Ajustez la couleur de la terre de `#3a241d` à `#8B4513` – quel impact visuel cela a-t-il ?
- Modifiez le `z-index` de la terre à 2 – que se passe-t-il dans la superposition ?
### 🔄 **Point pédagogique**
**Compréhension du design visuel CSS** : Confirmez votre maîtrise du CSS visuel :
- ✅ Comment les dimensions en pourcentage créent-elles du design adaptatif ?
- ✅ Pourquoi l’opacité crée-t-elle l’effet de transparence du verre ?
- ✅ Quel rôle joue le z-index dans la superposition des éléments ?
- ✅ Comment les valeurs de border-radius créent-elles la forme du bocal ?
**Principe de design** : Remarquez comment nous construisons des visuels complexes à partir de formes simples :
1. **Rectangles** → **Rectangles arrondis** → **Composants du bocal**
2. **Couleurs plates** → **Opacité** → **Effet verre**
3. **Éléments individuels** → **Composition en couches** → **Apparence 3D**
---
## Défi GitHub Copilot Agent 🚀
Utilisez le mode Agent pour relever le défi suivant :
**Description :** Créez une animation CSS qui fait doucement osciller les plantes du terrarium, simulant un effet de brise naturelle. Cela vous aidera à pratiquer les animations, transformations et keyframes CSS tout en améliorant l’esthétique de votre terrarium.
**Consigne :** Ajoutez des animations keyframe CSS pour faire balancer doucement les plantes du terrarium de gauche à droite. Créez une animation oscillante qui fait pivoter chaque plante légèrement (2 à 3 degrés) à gauche et à droite avec une durée de 3 à 4 secondes, et appliquez-la à la classe `.plant`. Assurez-vous que l’animation boucle infiniment avec une fonction d’accélération pour un mouvement naturel.
Pour en savoir plus sur le [mode agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode), cliquez ici.
## 🚀 Défi : Ajouter des reflets de verre
Prêt à améliorer votre terrarium avec des reflets de verre réalistes ? Cette technique ajoutera profondeur et réalisme au design.
Vous allez créer des reflets subtils qui simulent la façon dont la lumière se reflète sur les surfaces de verre. Cette approche est similaire à celle utilisée par les peintres de la Renaissance comme Jan van Eyck qui utilisaient lumière et réflexion pour donner un aspect tridimensionnel au verre peint. Voici ce que vous devrez viser :
**Votre défi :**
- **Créer** des formes ovales blanches ou claires subtiles pour les reflets du verre
- **Les positionner** stratégiquement sur le côté gauche du bocal
- **Appliquer** l’opacité et l’effet de flou appropriés pour un reflet lumineux réaliste
- **Utiliser** le `border-radius` pour créer des formes organiques rappelant des bulles
- **Expérimenter** avec des dégradés ou des ombres portées pour plus de réalisme
## Quiz post-conférence
[Quiz post-conférence](https://ff-quizzes.netlify.app/web/quiz/18)
## Approfondissez vos connaissances CSS
Le CSS peut sembler complexe au début, mais comprendre ces concepts fondamentaux fournit une base solide pour des techniques plus avancées.
**Vos prochaines étapes en CSS :**
- **Flexbox** – simplifie l’alignement et la distribution des éléments
- **CSS Grid** – offre des outils puissants pour créer des mises en page complexes
- **Variables CSS** – réduit la répétition et améliore la maintenabilité
- **Design responsive** – garantit un bon fonctionnement sur différentes tailles d’écran
### Ressources d’apprentissage interactives
Pratiquez ces concepts avec ces jeux ludiques et pratiques :
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) – Maîtrisez Flexbox par des défis amusants
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) – Apprenez CSS Grid en cultivant des carottes virtuelles
- 🎯 [CSS Battle](https://cssbattle.dev/) – Testez vos compétences CSS avec des défis de code
### Apprentissage complémentaire
Pour maîtriser les bases du CSS, complétez ce module Microsoft Learn : [Styliser votre application HTML avec CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **Ce que vous pouvez faire dans les 5 prochaines minutes**
- [ ] Ouvrir DevTools et inspecter les styles CSS de n’importe quel site avec le panneau Éléments
- [ ] Créer un fichier CSS simple et le lier à une page HTML
- [ ] Essayer de changer les couleurs avec différentes méthodes : hexadécimal, RGB et noms de couleur
- [ ] Pratiquer le modèle de boîte en ajoutant padding et margin à une div
### 🎯 **Ce que vous pouvez accomplir cette heure**
- [ ] Compléter le quiz post-leçon et revoir les fondamentaux du CSS
- [ ] Styliser votre page HTML avec des polices, couleurs et espacements
- [ ] Créer une mise en page simple avec flexbox ou grid
- [ ] Expérimenter les transitions CSS pour des effets fluides
- [ ] Pratiquer le design responsive avec des media queries
### 📅 **Votre aventure CSS sur une semaine**
- [ ] Réaliser le style du terrarium avec créativité
- [ ] Maîtriser CSS Grid en construisant une galerie photo
- [ ] Apprendre les animations CSS pour animer vos designs
- [ ] Explorer les préprocesseurs CSS comme Sass ou Less
- [ ] Étudier les principes de design et les appliquer en CSS
- [ ] Analyser et recréer des designs intéressants trouvés en ligne
### 🌟 **Votre maîtrise du design en un mois**
- [ ] Construire un système complet de design de site web responsive
- [ ] Apprendre CSS-in-JS ou des frameworks utilitaires comme Tailwind
- [ ] Contribuer à des projets open source avec des améliorations CSS
- [ ] Maîtriser des concepts avancés CSS comme les propriétés personnalisées et le containment
- [ ] Créer des bibliothèques de composants réutilisables avec du CSS modulaire
- [ ] Encadrer d’autres apprentis CSS et partager vos connaissances design
## 🎯 Votre chronologie de maîtrise CSS
```mermaid
timeline
title Progression d'apprentissage CSS
section Fondations (10 minutes)
Connexion de fichiers : Lier CSS à HTML
: Comprendre les règles de cascade
: Apprendre les bases de l'héritage
section Sélecteurs (15 minutes)
Ciblage des éléments : Sélecteurs d'éléments
: Modèles de classes
: Spécificité des ID
: Combinateurs
section Modèle de boîte (20 minutes)
Fondamentaux de mise en page : Marges et padding
: Propriétés de bordure
: Dimensionnement du contenu
: Comportement de box-sizing
section Positionnement (25 minutes)
Placement des éléments : Statique vs relatif
: Positionnement absolu
: Superposition avec z-index
: Unités adaptées
section Conception visuelle (30 minutes)
Maîtrise du style : Couleurs et opacité
: Ombres et effets
: Transitions
: Propriétés de transformation
section Conception adaptative (45 minutes)
Support multi-appareils : Requêtes media
: Mise en page flexible
: Approche mobile-first
: Optimisation du viewport
section Techniques avancées (1 semaine)
CSS moderne : Dispositions Flexbox
: Systèmes CSS Grid
: Propriétés personnalisées
: Images-clés d'animation
section Compétences professionnelles (1 mois)
Architecture CSS : Modèles de composants
: Code maintenable
: Optimisation des performances
: Compatibilité multi-navigateurs
```
### 🛠️ Résumé de votre boîte à outils CSS
Après cette leçon, vous avez maintenant :
- **Compréhension de la cascade** : Comment les styles héritent et se remplacent
- **Maîtrise des sélecteurs** : Ciblage précis avec éléments, classes et IDs
- **Compétences en positionnement** : Placement stratégique et gestion des couches d’éléments
- **Design visuel** : Création d’effets verre, ombres et transparence
- **Techniques responsives** : Mise en page en pourcentages qui s’adapte à tout écran
- **Organisation du code** : Structure CSS propre et maintenable
- **Pratiques modernes** : Utilisation d’unités relatives et design accessible
**Prochaines étapes** : Votre terrarium possède désormais structure (HTML) et style (CSS). La dernière leçon ajoutera de l’interactivité avec JavaScript !
## Devoir
[Refactorisation CSS](assignment.md)
---
**Avertissement** :
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant autorité. Pour des informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées résultant de l’utilisation de cette traduction.
` ?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*Réponse : Rouge (le sélecteur d’élément cible directement h1)*
## Maîtriser les sélecteurs CSS
Les sélecteurs CSS sont votre moyen de cibler des éléments spécifiques pour les styler. Ils fonctionnent comme donner des directions précises - au lieu de dire « la maison », vous pourriez dire « la maison bleue avec la porte rouge dans la rue Maple ».
Le CSS offre différentes façons d’être spécifique, et choisir le bon sélecteur, c’est comme choisir le bon outil pour la tâche. Parfois vous devez styliser toutes les portes du quartier, parfois une porte en particulier.
### Sélecteurs d’éléments (balises)
Les sélecteurs d’éléments ciblent des éléments HTML par leur nom de balise. Ils sont parfaits pour définir des styles de base qui s’appliquent largement sur votre page :
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**Comprendre ces styles :**
- **Définit** une typographie cohérente sur toute la page avec le sélecteur `body`
- **Supprime** les marges et le padding par défaut du navigateur pour un meilleur contrôle
- **Style** tous les éléments de titre avec couleur, alignement et espacement
- **Utilise** les unités `rem` pour une taille de police évolutive et accessible
Tandis que les sélecteurs d’éléments fonctionnent bien pour les styles généraux, vous aurez besoin de sélecteurs plus spécifiques pour les composants individuels comme les plantes dans votre terrarium.
### Sélecteurs ID pour les éléments uniques
Les sélecteurs ID utilisent le symbole `#` et ciblent les éléments avec un attribut `id` spécifique. Puisque les IDs doivent être uniques sur une page, ils sont parfaits pour styler des éléments individuels et particuliers comme nos conteneurs latéraux de plantes.
Créons le style pour les conteneurs latéraux de notre terrarium où les plantes seront placées :
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**Ce que fait ce code :**
- **Positionne** les conteneurs aux extrémités gauche et droite en utilisant une position `absolute`
- **Utilise** les unités `vh` (hauteur de la fenêtre) pour une hauteur responsive qui s’adapte à la taille de l’écran
- **Applique** `box-sizing: border-box` pour inclure le padding dans la largeur totale
- **Supprime** les unités `px` inutiles quand la valeur est zéro pour un code plus propre
- **Définit** une couleur de fond subtile plus douce que le gris vif
✅ **Défi Qualité de Code** : Remarquez comment ce CSS viole le principe DRY (Don't Repeat Yourself). Pouvez-vous le refactorer en utilisant à la fois un ID et une classe ?
**Approche améliorée :**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### Sélecteurs de classes pour styles réutilisables
Les sélecteurs de classes utilisent le symbole `.` et sont parfaits lorsque vous voulez appliquer les mêmes styles à plusieurs éléments. Contrairement aux IDs, les classes peuvent être réutilisées partout dans votre HTML, ce qui les rend idéales pour des styles cohérents et répétitifs.
Dans notre terrarium, chaque plante nécessite un style similaire mais doit aussi être positionnée individuellement. Nous allons utiliser une combinaison de classes pour les styles partagés et d’IDs pour le positionnement unique.
**Voici la structure HTML pour chaque plante :**
```html
```
**Explication des éléments clés :**
- **Utilise** `class="plant-holder"` pour un style de conteneur uniforme sur toutes les plantes
- **Applique** `class="plant"` pour un style d’image partagé et comportement commun
- **Inclus** un `id="plant1"` unique pour positionnement individuel et interaction JavaScript
- **Fournit** un texte alternatif descriptif pour l’accessibilité aux lecteurs d’écran
Ajoutez maintenant ces styles à votre fichier `style.css` :
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**Décryptage de ces styles :**
- **Crée** un positionnement relatif pour le conteneur de plante afin d’établir un contexte de positionnement
- **Fixe** chaque conteneur de plante à 13% de hauteur pour que toutes les plantes tiennent verticalement sans défilement
- **Décale** légèrement les conteneurs vers la gauche pour mieux centrer les plantes dans leurs conteneurs
- **Permet** aux plantes de s’adapter de façon responsive avec `max-width` et `max-height`
- **Utilise** `z-index` pour superposer les plantes au-dessus d’autres éléments du terrarium
- **Ajoute** un effet subtil au survol avec des transitions CSS pour une meilleure interaction utilisateur
✅ **Réflexion critique** : Pourquoi avons-nous besoin à la fois des sélecteurs `.plant-holder` et `.plant` ? Que se passerait-il si on utilisait un seul seul ?
> 💡 **Patron de conception** : Le conteneur (`.plant-holder`) contrôle la mise en page et le positionnement, tandis que le contenu (`.plant`) contrôle l’apparence et la mise à l’échelle. Cette séparation rend le code plus maintenable et flexible.
## Comprendre le positionnement CSS
Le positionnement CSS est comme être le metteur en scène d’une pièce de théâtre - vous dirigez où chaque acteur se place et comment il se déplace sur scène. Certains acteurs suivent la formation standard, tandis que d’autres ont besoin d’un positionnement spécifique pour un effet dramatique.
Une fois que vous comprenez le positionnement, beaucoup de défis de mise en page deviennent gérables. Besoin d’une barre de navigation qui reste en haut pendant que l’utilisateur défile ? Le positionnement gère cela. Vous voulez une infobulle qui apparaît à un endroit précis ? C’est aussi du positionnement.
### Les cinq valeurs de position
```mermaid
quadrantChart
title Stratégie de Positionnement CSS
x-axis Flux du Document --> Retiré du Flux
y-axis Position Statique --> Contrôle Précis
quadrant-1 Absolu
quadrant-2 Fixe
quadrant-3 Statique
quadrant-4 Collant
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| Valeur de position | Comportement | Cas d’usage |
|--------------------|--------------|-------------|
| `static` | Flux par défaut, ignore top/left/right/bottom | Mise en page normale du document |
| `relative` | Positionné par rapport à sa position normale | Ajustements mineurs, création de contexte de positionnement |
| `absolute` | Positionné par rapport à l’ancêtre positionné le plus proche | Placement précis, superpositions |
| `fixed` | Positionné par rapport à la fenêtre d’affichage | Barres de navigation, éléments flottants |
| `sticky` | Passe de relatif à fixe selon le défilement | En-têtes qui restent visibles lors du défilement |
### Positionnement dans notre terrarium
Notre terrarium utilise une combinaison stratégique de types de positionnement pour créer la mise en page désirée :
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**Comprendre la stratégie de positionnement :**
- **Les conteneurs absolus** sont retirés du flux normal du document et attachés aux bords de l’écran
- **Les conteneurs de plantes relatifs** créent un contexte de positionnement tout en restant dans le flux du document
- **Les plantes en position absolue** peuvent être positionnées précisément à l’intérieur de leurs conteneurs relatifs
- **Cette combinaison** permet aux plantes d’être empilées verticalement tout en pouvant être positionnées individuellement
> 🎯 **Pourquoi c’est important** : Les éléments `plant` ont besoin d’un positionnement absolu pour devenir déplaçables dans la leçon suivante. Le positionnement absolu les retire du flux normal, rendant possible les interactions de glisser-déposer.
✅ **Temps d’expérimentation** : Essayez de changer les valeurs de positionnement et observez les résultats :
- Que se passe-t-il si vous changez `.container` de `absolute` à `relative` ?
- Comment la mise en page change-t-elle si `.plant-holder` utilise `absolute` au lieu de `relative` ?
- Que se passe-t-il lorsque vous passez `.plant` en positionnement `relative` ?
### 🔄 **Point pédagogique**
**Maîtrise du positionnement CSS** : Faites une pause pour vérifier votre compréhension :
- ✅ Pouvez-vous expliquer pourquoi les plantes ont besoin d'un positionnement absolu pour le drag-and-drop ?
- ✅ Comprenez-vous comment les conteneurs relatifs créent un contexte de positionnement ?
- ✅ Pourquoi les conteneurs latéraux utilisent-ils un positionnement absolu ?
- ✅ Que se passerait-il si vous supprimiez entièrement les déclarations de position ?
**Lien avec le monde réel** : Pensez à la façon dont le positionnement CSS reflète la disposition dans la vie réelle :
- **Static** : Livres sur une étagère (ordre naturel)
- **Relative** : Déplacer un livre légèrement tout en gardant sa place
- **Absolute** : Placer un marque-page à une page précise
- **Fixed** : Un post-it qui reste visible lorsque vous tournez les pages
## Construire le terrarium avec CSS
Nous allons maintenant construire un bocal en verre en utilisant uniquement du CSS - pas besoin d'images ou de logiciels graphiques.
Créer l’illusion d’un verre réaliste, des ombres et des effets de profondeur à l’aide du positionnement et de la transparence démontre les capacités visuelles du CSS. Cette technique reflète la manière dont les architectes du mouvement Bauhaus utilisaient des formes géométriques simples pour créer des structures complexes et esthétiques. Une fois ces principes compris, vous reconnaîtrez les techniques CSS derrière beaucoup de designs web.
```mermaid
flowchart LR
A[Haut du bocal] --> E[Terrarium complet]
B[Parois du bocal] --> E
C[Couche de terre] --> E
D[Fond du bocal] --> E
F[Effets de verre] --> E
A1["50% largeur
5% hauteur
Position haute"] --> A B1["60% largeur
80% hauteur
Coins arrondis
0.5 opacité"] --> B C1["60% largeur
5% hauteur
Marron foncé
Couche inférieure"] --> C D1["50% largeur
1% hauteur
Position basse"] --> D F1["Ombres subtiles
Transparence
Superposition Z-index"] --> F style E fill:#d1e1df,stroke:#3a241d style A fill:#e8f5e8 style B fill:#e8f5e8 style C fill:#8B4513 style D fill:#e8f5e8 ``` ### Création des composants du bocal en verre Construisons le bocal du terrarium pièce par pièce. Chaque partie utilise un positionnement absolu et des tailles en pourcentages pour un design responsive : ```css .jar-walls { height: 80%; width: 60%; background: #d1e1df; border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; opacity: 0.5; z-index: 1; box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1); } .jar-top { width: 50%; height: 5%; background: #d1e1df; position: absolute; bottom: 80.5%; left: 25%; opacity: 0.7; z-index: 1; border-radius: 0.5rem 0.5rem 0 0; } .jar-bottom { width: 50%; height: 1%; background: #d1e1df; position: absolute; bottom: 0; left: 25%; opacity: 0.7; border-radius: 0 0 0.5rem 0.5rem; } .dirt { width: 60%; height: 5%; background: #3a241d; position: absolute; border-radius: 0 0 1rem 1rem; bottom: 1%; left: 20%; opacity: 0.7; z-index: -1; } ``` **Compréhension de la construction du terrarium :** - **Utilise** des dimensions en pourcentage pour un redimensionnement adaptatif sur toutes tailles d'écran - **Positionne** les éléments en absolu pour les empiler et les aligner précisément - **Applique** différentes valeurs d’opacité pour créer l’effet de transparence du verre - **Implémente** un `z-index` pour que les plantes apparaissent à l’intérieur du bocal - **Ajoute** des ombres portées subtiles et un rayon de bordure affiné pour un aspect plus réaliste ### Design responsif avec des pourcentages Remarquez que toutes les dimensions utilisent des pourcentages plutôt que des valeurs fixes en pixels : **Pourquoi c’est important :** - **Assure** que le terrarium s’adapte proportionnellement à toute taille d’écran - **Maintient** les relations visuelles entre les composants du bocal - **Offre** une expérience cohérente des mobiles aux grands écrans de bureau - **Permet** au design de s’adapter sans casser la mise en page ### Unités CSS en action Nous utilisons les unités `rem` pour le border-radius, qui s’échelonnent en fonction de la taille de police racine. Cela crée des designs plus accessibles qui respectent les préférences de police de l’utilisateur. En savoir plus sur les [unités relatives CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths) dans la spécification officielle. ✅ **Expérimentation visuelle** : Essayez de modifier ces valeurs et observez les effets : - Changez l’opacité du bocal de 0.5 à 0.8 – comment cela affecte-t-il l’apparence du verre ? - Ajustez la couleur de la terre de `#3a241d` à `#8B4513` – quel impact visuel cela a-t-il ? - Modifiez le `z-index` de la terre à 2 – que se passe-t-il dans la superposition ? ### 🔄 **Point pédagogique** **Compréhension du design visuel CSS** : Confirmez votre maîtrise du CSS visuel : - ✅ Comment les dimensions en pourcentage créent-elles du design adaptatif ? - ✅ Pourquoi l’opacité crée-t-elle l’effet de transparence du verre ? - ✅ Quel rôle joue le z-index dans la superposition des éléments ? - ✅ Comment les valeurs de border-radius créent-elles la forme du bocal ? **Principe de design** : Remarquez comment nous construisons des visuels complexes à partir de formes simples : 1. **Rectangles** → **Rectangles arrondis** → **Composants du bocal** 2. **Couleurs plates** → **Opacité** → **Effet verre** 3. **Éléments individuels** → **Composition en couches** → **Apparence 3D** --- ## Défi GitHub Copilot Agent 🚀 Utilisez le mode Agent pour relever le défi suivant : **Description :** Créez une animation CSS qui fait doucement osciller les plantes du terrarium, simulant un effet de brise naturelle. Cela vous aidera à pratiquer les animations, transformations et keyframes CSS tout en améliorant l’esthétique de votre terrarium. **Consigne :** Ajoutez des animations keyframe CSS pour faire balancer doucement les plantes du terrarium de gauche à droite. Créez une animation oscillante qui fait pivoter chaque plante légèrement (2 à 3 degrés) à gauche et à droite avec une durée de 3 à 4 secondes, et appliquez-la à la classe `.plant`. Assurez-vous que l’animation boucle infiniment avec une fonction d’accélération pour un mouvement naturel. Pour en savoir plus sur le [mode agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode), cliquez ici. ## 🚀 Défi : Ajouter des reflets de verre Prêt à améliorer votre terrarium avec des reflets de verre réalistes ? Cette technique ajoutera profondeur et réalisme au design. Vous allez créer des reflets subtils qui simulent la façon dont la lumière se reflète sur les surfaces de verre. Cette approche est similaire à celle utilisée par les peintres de la Renaissance comme Jan van Eyck qui utilisaient lumière et réflexion pour donner un aspect tridimensionnel au verre peint. Voici ce que vous devrez viser :  **Votre défi :** - **Créer** des formes ovales blanches ou claires subtiles pour les reflets du verre - **Les positionner** stratégiquement sur le côté gauche du bocal - **Appliquer** l’opacité et l’effet de flou appropriés pour un reflet lumineux réaliste - **Utiliser** le `border-radius` pour créer des formes organiques rappelant des bulles - **Expérimenter** avec des dégradés ou des ombres portées pour plus de réalisme ## Quiz post-conférence [Quiz post-conférence](https://ff-quizzes.netlify.app/web/quiz/18) ## Approfondissez vos connaissances CSS Le CSS peut sembler complexe au début, mais comprendre ces concepts fondamentaux fournit une base solide pour des techniques plus avancées. **Vos prochaines étapes en CSS :** - **Flexbox** – simplifie l’alignement et la distribution des éléments - **CSS Grid** – offre des outils puissants pour créer des mises en page complexes - **Variables CSS** – réduit la répétition et améliore la maintenabilité - **Design responsive** – garantit un bon fonctionnement sur différentes tailles d’écran ### Ressources d’apprentissage interactives Pratiquez ces concepts avec ces jeux ludiques et pratiques : - 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) – Maîtrisez Flexbox par des défis amusants - 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) – Apprenez CSS Grid en cultivant des carottes virtuelles - 🎯 [CSS Battle](https://cssbattle.dev/) – Testez vos compétences CSS avec des défis de code ### Apprentissage complémentaire Pour maîtriser les bases du CSS, complétez ce module Microsoft Learn : [Styliser votre application HTML avec CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon) ### ⚡ **Ce que vous pouvez faire dans les 5 prochaines minutes** - [ ] Ouvrir DevTools et inspecter les styles CSS de n’importe quel site avec le panneau Éléments - [ ] Créer un fichier CSS simple et le lier à une page HTML - [ ] Essayer de changer les couleurs avec différentes méthodes : hexadécimal, RGB et noms de couleur - [ ] Pratiquer le modèle de boîte en ajoutant padding et margin à une div ### 🎯 **Ce que vous pouvez accomplir cette heure** - [ ] Compléter le quiz post-leçon et revoir les fondamentaux du CSS - [ ] Styliser votre page HTML avec des polices, couleurs et espacements - [ ] Créer une mise en page simple avec flexbox ou grid - [ ] Expérimenter les transitions CSS pour des effets fluides - [ ] Pratiquer le design responsive avec des media queries ### 📅 **Votre aventure CSS sur une semaine** - [ ] Réaliser le style du terrarium avec créativité - [ ] Maîtriser CSS Grid en construisant une galerie photo - [ ] Apprendre les animations CSS pour animer vos designs - [ ] Explorer les préprocesseurs CSS comme Sass ou Less - [ ] Étudier les principes de design et les appliquer en CSS - [ ] Analyser et recréer des designs intéressants trouvés en ligne ### 🌟 **Votre maîtrise du design en un mois** - [ ] Construire un système complet de design de site web responsive - [ ] Apprendre CSS-in-JS ou des frameworks utilitaires comme Tailwind - [ ] Contribuer à des projets open source avec des améliorations CSS - [ ] Maîtriser des concepts avancés CSS comme les propriétés personnalisées et le containment - [ ] Créer des bibliothèques de composants réutilisables avec du CSS modulaire - [ ] Encadrer d’autres apprentis CSS et partager vos connaissances design ## 🎯 Votre chronologie de maîtrise CSS ```mermaid timeline title Progression d'apprentissage CSS section Fondations (10 minutes) Connexion de fichiers : Lier CSS à HTML : Comprendre les règles de cascade : Apprendre les bases de l'héritage section Sélecteurs (15 minutes) Ciblage des éléments : Sélecteurs d'éléments : Modèles de classes : Spécificité des ID : Combinateurs section Modèle de boîte (20 minutes) Fondamentaux de mise en page : Marges et padding : Propriétés de bordure : Dimensionnement du contenu : Comportement de box-sizing section Positionnement (25 minutes) Placement des éléments : Statique vs relatif : Positionnement absolu : Superposition avec z-index : Unités adaptées section Conception visuelle (30 minutes) Maîtrise du style : Couleurs et opacité : Ombres et effets : Transitions : Propriétés de transformation section Conception adaptative (45 minutes) Support multi-appareils : Requêtes media : Mise en page flexible : Approche mobile-first : Optimisation du viewport section Techniques avancées (1 semaine) CSS moderne : Dispositions Flexbox : Systèmes CSS Grid : Propriétés personnalisées : Images-clés d'animation section Compétences professionnelles (1 mois) Architecture CSS : Modèles de composants : Code maintenable : Optimisation des performances : Compatibilité multi-navigateurs ``` ### 🛠️ Résumé de votre boîte à outils CSS Après cette leçon, vous avez maintenant : - **Compréhension de la cascade** : Comment les styles héritent et se remplacent - **Maîtrise des sélecteurs** : Ciblage précis avec éléments, classes et IDs - **Compétences en positionnement** : Placement stratégique et gestion des couches d’éléments - **Design visuel** : Création d’effets verre, ombres et transparence - **Techniques responsives** : Mise en page en pourcentages qui s’adapte à tout écran - **Organisation du code** : Structure CSS propre et maintenable - **Pratiques modernes** : Utilisation d’unités relatives et design accessible **Prochaines étapes** : Votre terrarium possède désormais structure (HTML) et style (CSS). La dernière leçon ajoutera de l’interactivité avec JavaScript ! ## Devoir [Refactorisation CSS](assignment.md) --- **Avertissement** : Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant autorité. Pour des informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées résultant de l’utilisation de cette traduction.
5% hauteur
Position haute"] --> A B1["60% largeur
80% hauteur
Coins arrondis
0.5 opacité"] --> B C1["60% largeur
5% hauteur
Marron foncé
Couche inférieure"] --> C D1["50% largeur
1% hauteur
Position basse"] --> D F1["Ombres subtiles
Transparence
Superposition Z-index"] --> F style E fill:#d1e1df,stroke:#3a241d style A fill:#e8f5e8 style B fill:#e8f5e8 style C fill:#8B4513 style D fill:#e8f5e8 ``` ### Création des composants du bocal en verre Construisons le bocal du terrarium pièce par pièce. Chaque partie utilise un positionnement absolu et des tailles en pourcentages pour un design responsive : ```css .jar-walls { height: 80%; width: 60%; background: #d1e1df; border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; opacity: 0.5; z-index: 1; box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1); } .jar-top { width: 50%; height: 5%; background: #d1e1df; position: absolute; bottom: 80.5%; left: 25%; opacity: 0.7; z-index: 1; border-radius: 0.5rem 0.5rem 0 0; } .jar-bottom { width: 50%; height: 1%; background: #d1e1df; position: absolute; bottom: 0; left: 25%; opacity: 0.7; border-radius: 0 0 0.5rem 0.5rem; } .dirt { width: 60%; height: 5%; background: #3a241d; position: absolute; border-radius: 0 0 1rem 1rem; bottom: 1%; left: 20%; opacity: 0.7; z-index: -1; } ``` **Compréhension de la construction du terrarium :** - **Utilise** des dimensions en pourcentage pour un redimensionnement adaptatif sur toutes tailles d'écran - **Positionne** les éléments en absolu pour les empiler et les aligner précisément - **Applique** différentes valeurs d’opacité pour créer l’effet de transparence du verre - **Implémente** un `z-index` pour que les plantes apparaissent à l’intérieur du bocal - **Ajoute** des ombres portées subtiles et un rayon de bordure affiné pour un aspect plus réaliste ### Design responsif avec des pourcentages Remarquez que toutes les dimensions utilisent des pourcentages plutôt que des valeurs fixes en pixels : **Pourquoi c’est important :** - **Assure** que le terrarium s’adapte proportionnellement à toute taille d’écran - **Maintient** les relations visuelles entre les composants du bocal - **Offre** une expérience cohérente des mobiles aux grands écrans de bureau - **Permet** au design de s’adapter sans casser la mise en page ### Unités CSS en action Nous utilisons les unités `rem` pour le border-radius, qui s’échelonnent en fonction de la taille de police racine. Cela crée des designs plus accessibles qui respectent les préférences de police de l’utilisateur. En savoir plus sur les [unités relatives CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths) dans la spécification officielle. ✅ **Expérimentation visuelle** : Essayez de modifier ces valeurs et observez les effets : - Changez l’opacité du bocal de 0.5 à 0.8 – comment cela affecte-t-il l’apparence du verre ? - Ajustez la couleur de la terre de `#3a241d` à `#8B4513` – quel impact visuel cela a-t-il ? - Modifiez le `z-index` de la terre à 2 – que se passe-t-il dans la superposition ? ### 🔄 **Point pédagogique** **Compréhension du design visuel CSS** : Confirmez votre maîtrise du CSS visuel : - ✅ Comment les dimensions en pourcentage créent-elles du design adaptatif ? - ✅ Pourquoi l’opacité crée-t-elle l’effet de transparence du verre ? - ✅ Quel rôle joue le z-index dans la superposition des éléments ? - ✅ Comment les valeurs de border-radius créent-elles la forme du bocal ? **Principe de design** : Remarquez comment nous construisons des visuels complexes à partir de formes simples : 1. **Rectangles** → **Rectangles arrondis** → **Composants du bocal** 2. **Couleurs plates** → **Opacité** → **Effet verre** 3. **Éléments individuels** → **Composition en couches** → **Apparence 3D** --- ## Défi GitHub Copilot Agent 🚀 Utilisez le mode Agent pour relever le défi suivant : **Description :** Créez une animation CSS qui fait doucement osciller les plantes du terrarium, simulant un effet de brise naturelle. Cela vous aidera à pratiquer les animations, transformations et keyframes CSS tout en améliorant l’esthétique de votre terrarium. **Consigne :** Ajoutez des animations keyframe CSS pour faire balancer doucement les plantes du terrarium de gauche à droite. Créez une animation oscillante qui fait pivoter chaque plante légèrement (2 à 3 degrés) à gauche et à droite avec une durée de 3 à 4 secondes, et appliquez-la à la classe `.plant`. Assurez-vous que l’animation boucle infiniment avec une fonction d’accélération pour un mouvement naturel. Pour en savoir plus sur le [mode agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode), cliquez ici. ## 🚀 Défi : Ajouter des reflets de verre Prêt à améliorer votre terrarium avec des reflets de verre réalistes ? Cette technique ajoutera profondeur et réalisme au design. Vous allez créer des reflets subtils qui simulent la façon dont la lumière se reflète sur les surfaces de verre. Cette approche est similaire à celle utilisée par les peintres de la Renaissance comme Jan van Eyck qui utilisaient lumière et réflexion pour donner un aspect tridimensionnel au verre peint. Voici ce que vous devrez viser :  **Votre défi :** - **Créer** des formes ovales blanches ou claires subtiles pour les reflets du verre - **Les positionner** stratégiquement sur le côté gauche du bocal - **Appliquer** l’opacité et l’effet de flou appropriés pour un reflet lumineux réaliste - **Utiliser** le `border-radius` pour créer des formes organiques rappelant des bulles - **Expérimenter** avec des dégradés ou des ombres portées pour plus de réalisme ## Quiz post-conférence [Quiz post-conférence](https://ff-quizzes.netlify.app/web/quiz/18) ## Approfondissez vos connaissances CSS Le CSS peut sembler complexe au début, mais comprendre ces concepts fondamentaux fournit une base solide pour des techniques plus avancées. **Vos prochaines étapes en CSS :** - **Flexbox** – simplifie l’alignement et la distribution des éléments - **CSS Grid** – offre des outils puissants pour créer des mises en page complexes - **Variables CSS** – réduit la répétition et améliore la maintenabilité - **Design responsive** – garantit un bon fonctionnement sur différentes tailles d’écran ### Ressources d’apprentissage interactives Pratiquez ces concepts avec ces jeux ludiques et pratiques : - 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) – Maîtrisez Flexbox par des défis amusants - 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) – Apprenez CSS Grid en cultivant des carottes virtuelles - 🎯 [CSS Battle](https://cssbattle.dev/) – Testez vos compétences CSS avec des défis de code ### Apprentissage complémentaire Pour maîtriser les bases du CSS, complétez ce module Microsoft Learn : [Styliser votre application HTML avec CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon) ### ⚡ **Ce que vous pouvez faire dans les 5 prochaines minutes** - [ ] Ouvrir DevTools et inspecter les styles CSS de n’importe quel site avec le panneau Éléments - [ ] Créer un fichier CSS simple et le lier à une page HTML - [ ] Essayer de changer les couleurs avec différentes méthodes : hexadécimal, RGB et noms de couleur - [ ] Pratiquer le modèle de boîte en ajoutant padding et margin à une div ### 🎯 **Ce que vous pouvez accomplir cette heure** - [ ] Compléter le quiz post-leçon et revoir les fondamentaux du CSS - [ ] Styliser votre page HTML avec des polices, couleurs et espacements - [ ] Créer une mise en page simple avec flexbox ou grid - [ ] Expérimenter les transitions CSS pour des effets fluides - [ ] Pratiquer le design responsive avec des media queries ### 📅 **Votre aventure CSS sur une semaine** - [ ] Réaliser le style du terrarium avec créativité - [ ] Maîtriser CSS Grid en construisant une galerie photo - [ ] Apprendre les animations CSS pour animer vos designs - [ ] Explorer les préprocesseurs CSS comme Sass ou Less - [ ] Étudier les principes de design et les appliquer en CSS - [ ] Analyser et recréer des designs intéressants trouvés en ligne ### 🌟 **Votre maîtrise du design en un mois** - [ ] Construire un système complet de design de site web responsive - [ ] Apprendre CSS-in-JS ou des frameworks utilitaires comme Tailwind - [ ] Contribuer à des projets open source avec des améliorations CSS - [ ] Maîtriser des concepts avancés CSS comme les propriétés personnalisées et le containment - [ ] Créer des bibliothèques de composants réutilisables avec du CSS modulaire - [ ] Encadrer d’autres apprentis CSS et partager vos connaissances design ## 🎯 Votre chronologie de maîtrise CSS ```mermaid timeline title Progression d'apprentissage CSS section Fondations (10 minutes) Connexion de fichiers : Lier CSS à HTML : Comprendre les règles de cascade : Apprendre les bases de l'héritage section Sélecteurs (15 minutes) Ciblage des éléments : Sélecteurs d'éléments : Modèles de classes : Spécificité des ID : Combinateurs section Modèle de boîte (20 minutes) Fondamentaux de mise en page : Marges et padding : Propriétés de bordure : Dimensionnement du contenu : Comportement de box-sizing section Positionnement (25 minutes) Placement des éléments : Statique vs relatif : Positionnement absolu : Superposition avec z-index : Unités adaptées section Conception visuelle (30 minutes) Maîtrise du style : Couleurs et opacité : Ombres et effets : Transitions : Propriétés de transformation section Conception adaptative (45 minutes) Support multi-appareils : Requêtes media : Mise en page flexible : Approche mobile-first : Optimisation du viewport section Techniques avancées (1 semaine) CSS moderne : Dispositions Flexbox : Systèmes CSS Grid : Propriétés personnalisées : Images-clés d'animation section Compétences professionnelles (1 mois) Architecture CSS : Modèles de composants : Code maintenable : Optimisation des performances : Compatibilité multi-navigateurs ``` ### 🛠️ Résumé de votre boîte à outils CSS Après cette leçon, vous avez maintenant : - **Compréhension de la cascade** : Comment les styles héritent et se remplacent - **Maîtrise des sélecteurs** : Ciblage précis avec éléments, classes et IDs - **Compétences en positionnement** : Placement stratégique et gestion des couches d’éléments - **Design visuel** : Création d’effets verre, ombres et transparence - **Techniques responsives** : Mise en page en pourcentages qui s’adapte à tout écran - **Organisation du code** : Structure CSS propre et maintenable - **Pratiques modernes** : Utilisation d’unités relatives et design accessible **Prochaines étapes** : Votre terrarium possède désormais structure (HTML) et style (CSS). La dernière leçon ajoutera de l’interactivité avec JavaScript ! ## Devoir [Refactorisation CSS](assignment.md) --- **Avertissement** : Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant autorité. Pour des informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées résultant de l’utilisation de cette traduction.