TP CSS3 - Corrigé Complet

Exercice 1 : Sélecteurs

1. Sélectionner tous les liens dans la navigation

nav.main-nav a { }

2. Sélectionner uniquement le lien actif

nav.main-nav a.active { }

3. Sélectionner l'article avec la classe featured

article.featured { }

4. Premier paragraphe de chaque article

article p:first-of-type { }

5. Éléments li pairs

li:nth-child(even) { }

p < .text < p.text < #main < #main .text p Même spécificité → la dernière règle gagne !important → à éviter car casse la logique CSS

Largeur totale (content-box)

350px

Largeur totale (border-box)

300px

Reset box-sizing

* { box-sizing: border-box; }


body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}


.navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
}


.card {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}


grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));


grid-template-areas:
"header header"
"sidebar main"
"footer footer";


@media (min-width: 768px) { }
@media (min-width: 1024px) { }


:root { --color-bg: white; }
[data-theme="dark"] { --color-bg: black; }


@keyframes spin {
 0% { transform: rotate(0); }
 100% { transform: rotate(360deg); }
}

1. b) #header a 2. b) 200px 3. c) justify-content + align-items 4. b) 1 fraction 5. b) min-width