TP CSS

Exercice 1

Premier article

Contenu...

Deuxième article

Contenu...

Servoler sur la reponse pour activer la selection:

Sélectionnez tous les liens dans la navigation:
Réponse : nav.main-nav a
Sélectionnez uniquement le lien actif:
Réponse : .main-nav a.active
Sélectionnez l'article qui a la classe featured:
Réponse : article.post.featured
SSélectionnez le premier paragraphe de chaque article:
.post p:first-of-type
Sélectionnez les éléments li pairs:
Réponse : .main-nav li:nth-child(even)

Questions

Classez ces sélecteurs par spécificité croissante : p, .text, #main, p.text, #main .text p:
Réponse : p < .text < p.text < #main < #main .text p
Si deux règles ont la même spécificité, laquelle gagne ?
Réponse : la dernière règle déclarée l'emporte.
Pourquoi faut-il éviter !important ?
!important est considéré comme une mauvaise pratique dans la grande majorité des cas car il brise la cascade naturelle du CSS et crée des problèmes de maintenance.

Exercice 2

2.1 Comprendre le Box Model

Avec box-sizing: content-box (défaut), quelle est la largeur totale visible de .box ?
width : 300px

padding-left + padding-right : 20px + 20px = 40px

border-left + border-right : 5px + 5px = 10px

Largeur totale visible =350 px
Avec box-sizing: border-box, quelle est la largeur totale visible ?
300 px
Écrivez le reset CSS universel pour box-sizing
*, *::after, *::before { box-sizing: border-box; }

2.2 Centrer un élément

Centrez horizontalement un élément div de 600px de large, puis centrez-le aussi verticalement dans la page.

Exercice 3

3.1 Barre de navigation

Créez une barre de navigation horizontale avec un logo à gauche et des liens à droite :

3.2 Cartes de même hauteur

Créez 3 cartes côte à côte avec un footer qui reste toujours en bas :

Carte 1

Contenu court.

Carte 2

Contenu beaucoup plus long pour tester l'alignement vertical des boutons.

Carte 3

Contenu moyen.

Exercice 4

4.1 Grille de cartes responsive

Créez une grille de cartes qui s'adapte automatiquement au nombre de colonnes :

Carte 1

Carte 2

Carte 3

Carte 4

Carte 5

Carte 6

4.2 Layout complet avec Grid Areas

Créez une mise en page complète : header, sidebar, main, footer.

Contenu principal

Exercice 5

5.1 Mobile First

Layout responsive avec menu vertical sur mobile, horizontal sur desktop :

Contenu principal. Redimensionnez la fenêtre pour voir le comportement responsive.

Exercice 6

6.1 Système de couleurs

Cliquez sur le bouton pour basculer entre thème clair et sombre :

Voici un exemple de texte avec le thème actif.

Exercice 7

7.1 Bouton animé

Survolez le bouton pour voir la transition :

7.2 Animation de chargement

Spinner créé avec @keyframes :

Exercice 8 : Quiz de révision

Quel sélecteur a la spécificité la plus haute ?
- [ ] a) .header .nav a
- [x] b) #header a
- [ ] c) header nav a
- [ ] d) a.active
Avec box-sizing: border-box, un élément avec width: 200px et padding: 20px a une largeur totale de :
- [ ] a) 240px
- [x] b) 200px
- [ ] c) 220px
- [ ] d) 160px
Pour centrer un élément verticalement et horizontalement avec Flexbox :
- [ ] a) justify-content: center
- [ ] b) align-items: center
- [x] c) justify-content: center ET align-items: center
- [ ] d) text-align: center
La valeur 1fr en CSS Grid signifie :
- [ ] a) 1 pixel
- [x] b) 1 fraction de l'espace disponible
- [ ] c) 1 pourcentage
- [ ] d) 1 rem
L'approche "Mobile First" utilise :
- [ ] a) max-width dans les media queries
- [x] b) min-width dans les media queries
- [ ] c) device-width
- [ ] d) orientation