Solutions TP CSS

Exercice 1 : Sélecteurs et spécificité

1.1 Sélecteurs

Survolez les règles CSS pour voir les éléments correspondants s'illuminer.

1.2 Spécificité

1. Classez ces sélecteurs par spécificité croissante : p, .text, #main, p.text, #main .text p

   p < .text < p.text < #main .text < #main .text p

2. Si deux règles ont la même spécificité, laquelle gagne ?

   La dernière règle déclarée gagne.

3. Pourquoi faut-il éviter !important ?

   Car il rend le code difficile à maintenir et à déboguer.

Exercice 2 : Box Model

2.1 Comprendre le Box Model

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid #333;
    margin: 15px;
}

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

   width + padding + border = 300px + 20px*2 + 5px*2 = 350px

2. Avec box-sizing: border-box, quelle est la largeur totale visible ?

   width = 300px

3. Écrivez le reset CSS universel pour box-sizing

   * { 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 : Flexbox

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 :

Exercice 4 : CSS Grid

4.1 Grille de cartes responsive

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

4.2 Layout complet avec Grid Areas

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

Exercice 5 : Responsive Design

5.1 Mobile First

Transformez cette page pour qu'elle soit responsive (mobile first) :

/* Base mobile */
.container {
    width: 100%;
    padding: 15px;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.content {
    display: block;
}

.sidebar {
    display: none;
}

Solution :

/* Tablette (à partir de 600px) */
@media (min-width: 600px) {
    .container {
        max-width: 900px;
    }

    .nav-menu {
        flex-direction: row;
        justify-content: space-between;
    }

    .content {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 20px;
    }

    .sidebar {
        display: block;
    }
}
 
/* Desktop (à partir de 768px) */
@media (min-width: 768px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .nav-menu {
        flex-direction: row;
        justify-content: space-between;
    }

    .content {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 20px;
    }

    .sidebar {
        display: block;
    }
}

Exercice 6 : Variables CSS et thèmes

6.1 Système de couleurs

Créez un système de variables CSS pour un thème clair et sombre :

/* Thème clair */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --primary-color: #007bff;
}

/* Thème sombre */
[data-theme="dark"] {
    --bg-color: #333333;
    --text-color: #ffffff;
    --primary-color: #007bff;
}

Exercice 7 : Transitions et animations

7.1 Bouton animé

Créez un bouton avec des transitions au survol :

7.2 Animation de chargement

Créez un spinner de chargement avec @keyframes :

Exercice 8 : Quiz de révision

1. 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
2. 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
3. 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
4. La valeur 1fr en CSS Grid signifie :
   • [ ] a) 1 pixel
   • [x] b) 1 fraction de l'espace disponible
   • [ ] c) 1 pourcentage
   • [ ] d) 1 rem
5. 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