TP CSS3

Exercice 1 : Sélecteurs et spécificité

1.1 Sélecteurs :

.main-nav a
a.active
article.featured
article p:first-of-type
li:nth-child(even)
    

1.2 Spécificité

Classement : p < .text < p.text < #main < #main .text p

Si deux règles ont la même spécificité : la dernière règle gagne

Pourquoi éviter !important : crée des conflits CSS et casse la logique

Exercice 2 : Box Model

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

content-box= width + padding +border= 350px

border-box= width= 300px

*,
*::before,
*::after {
  box-sizing: border-box;
}
    

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

Exercice 3 : Flexbox

3.1 Barre de navigation

.navbar { display: flex; justify-content: space-between; align-items: center; background-color: #d6b7b7; }
.nav-links { display: flex; list-style: none; }
.nav-links li { margin-left: 20px; }
.nav-links a { color: white; text-decoration: none; }
    

3.2 Cartes de même hauteur

.cards { display: flex; gap: 20px; }
.card { flex: 1; display: flex; flex-direction: column; }
.card-link { margin-top: auto; }
    

Exercice 4 : CSS Grid

4.1 Grille de cartes responsive

.grid-cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    

4.2 Layout complet

.page-layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: 10px; height: 400px; }
    

Exercice 5 : Responsive

5.1 Mobile First

/* Base mobile */
.container { width: 100%; padding: 15px; }
.nav-menu { display: flex; flex-direction: column; gap: 5px; }
.content { display: block; }
.sidebar-hidden { display: none; }

/* Tablette */
@media (min-width: 768px) {
  .nav-menu { flex-direction: row; gap: 10px; }
  .content { display: flex; gap: 20px; }
  .sidebar-hidden { display: block; width: 200px; }
}
    

Exercice 6 : Variables CSS et thèmes

:root { --bg-color: #fff0f5; --text-color: #000; }
body.dark-theme { --bg-color: #000; --text-color: #fff; }
body { background-color: var(--bg-color); color: var(--text-color); }
    

Exercice 7 : Transitions et animations

7.1 Bouton animé

button { background-color: #ffb6c1; transition: background-color 0.3s, transform 0.3s; }
button:hover { background-color: #ff69b4; transform: scale(1.1); }
    

7.2 Spinner de chargement

.spinner { border: 4px solid #ffe4e1; border-top: 4px solid #ff69b4; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    

Exercice 8: Quiz

1. #header a
2. 200px
3. justify + align
4. 1fr
5. min-width