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; }
.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; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
  .nav-menu { gap: 20px; }
  .sidebar-hidden { width: 250px; }
}
  

Exercice 6 : Variables CSS et thèmes

:root { --bg-color: #f5efe6; --text-color: #2e2a25; }
body.dark-theme { --bg-color: #1c1a17; --text-color: #f0ebe3; }
body { background-color: var(--bg-color); color: var(--text-color); }
  

Exercice 7 : Transitions et animations

7.1 Bouton animé

button { background-color: var(--vert-sauge); transition: background-color 0.3s, transform 0.3s; }
button:hover { background-color: var(--vert-sauge-dark); transform: scale(1.05); }
  

7.2 Spinner de chargement

.spinner { border: 4px solid var(--beige-fonce); border-top: 4px solid var(--caramel); 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