2026-01-15 18:32:27 +01:00
# Correction des exercices - CSS
---------
## Exercice 1 : Premiers styles
**Fichier `style.css` :**
```css
/* Couleur de fond de la page */
body {
background-color : #f0f0f0 ;
}
/* Titres h1 en bleu et centrés */
h1 {
color : blue ;
text-align : center ;
}
/* Paragraphes en Arial, taille 16px */
p {
font-family : Arial , sans-serif ;
font-size : 16 px ;
}
```
**Fichier HTML associé :**
```html
<!DOCTYPE html>
< html lang = "fr" >
< head >
< meta charset = "UTF-8" >
< title > Exercice 1</ title >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< h1 > Mon titre principal</ h1 >
< p > Ceci est un paragraphe de texte pour tester mes premiers styles CSS.</ p >
< p > Voici un deuxième paragraphe.</ p >
</ body >
</ html >
```
**Points importants :**
- `#f0f0f0` est un gris très clair en hexadécimal
- `sans-serif` est une police de secours si Arial n'est pas disponible
- Les commentaires en CSS s'écrivent entre `/*` et `*/`
---------
## Exercice 2 : Les classes
```css
/* Classe pour texte important */
. important {
color : red ;
font-weight : bold ;
}
/* Classe pour encadrer un élément */
. encadre {
border : 2 px solid black ;
padding : 10 px ;
}
/* Classe pour coins arrondis */
. arrondi {
border-radius : 15 px ;
}
```
**Exemple d'utilisation en HTML :**
```html
<!DOCTYPE html>
< html lang = "fr" >
< head >
< meta charset = "UTF-8" >
< title > Exercice 2</ title >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< p class = "important" > Ce texte est important !</ p >
< p class = "encadre" > Ce texte est encadré.</ p >
< p class = "encadre arrondi" > Ce texte est encadré avec des coins arrondis.</ p >
< div class = "important encadre arrondi" >
On peut combiner plusieurs classes sur un même élément !
</ div >
</ body >
</ html >
```
**Points importants :**
- Les classes commencent par un point `.` en CSS
- On peut appliquer plusieurs classes à un élément en les séparant par des espaces
- `font-weight: bold` met le texte en gras
- `padding` ajoute un espace intérieur entre le contenu et la bordure
---------
## Exercice 3 : Navigation
**Fichier `style.css` :**
```css
/* Reset des marges par défaut de la liste */
nav ul {
list-style : none ; /* Supprime les puces */
margin : 0 ;
padding : 0 ;
display : flex ; /* Affichage horizontal */
background-color : #333 ;
}
/* Style des éléments de liste */
nav li {
margin : 0 ;
}
/* Style des liens */
nav a {
display : block ;
color : white ;
text-decoration : none ; /* Supprime le soulignement */
padding : 15 px 20 px ;
}
/* Effet au survol */
nav a : hover {
background-color : #555 ;
color : #ffd700 ; /* Couleur dorée */
}
```
**Fichier HTML :**
```html
<!DOCTYPE html>
< html lang = "fr" >
< head >
< meta charset = "UTF-8" >
< title > Navigation</ title >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< nav >
< ul >
< li >< a href = "index.html" > Accueil</ a ></ li >
< li >< a href = "produits.html" > Produits</ a ></ li >
< li >< a href = "services.html" > Services</ a ></ li >
< li >< a href = "contact.html" > Contact</ a ></ li >
</ ul >
</ nav >
</ body >
</ html >
```
**Points importants :**
- `list-style: none` supprime les puces de la liste
- `display: flex` sur le `<ul>` met les `<li>` en ligne
- `display: block` sur les liens permet d'appliquer padding correctement
- `:hover` est une pseudo-classe qui s'active au survol de la souris
---------
## Exercice 4 : Carte de présentation
**Fichier `style.css` :**
```css
/* Reset de base */
* {
margin : 0 ;
padding : 0 ;
box-sizing : border-box ;
}
body {
font-family : Arial , sans-serif ;
background-color : #f5f5f5 ;
padding : 20 px ;
}
/* Style de la carte */
. carte {
width : 300 px ;
background-color : white ;
border-radius : 10 px ;
box-shadow : 0 4 px 8 px rgba ( 0 , 0 , 0 , 0.2 );
overflow : hidden ; /* Pour que l'image respecte le border-radius */
}
/* Image dans la carte */
. carte img {
width : 100 % ;
height : 200 px ;
object-fit : cover ; /* L'image remplit l'espace sans déformation */
}
/* Contenu de la carte */
. carte-contenu {
padding : 15 px ;
}
. carte-contenu h2 {
color : #333 ;
margin-bottom : 10 px ;
}
. carte-contenu p {
color : #666 ;
font-size : 14 px ;
line-height : 1.5 ;
margin-bottom : 15 px ;
}
/* Bouton stylisé */
. bouton {
display : inline-block ;
background-color : #007bff ;
color : white ;
padding : 10 px 20 px ;
text-decoration : none ;
border-radius : 5 px ;
border : none ;
cursor : pointer ;
font-size : 14 px ;
}
. bouton : hover {
background-color : #0056b3 ;
}
```
**Fichier HTML :**
```html
<!DOCTYPE html>
< html lang = "fr" >
< head >
< meta charset = "UTF-8" >
< title > Carte de présentation</ title >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div class = "carte" >
< img src = "photo.jpg" alt = "Photo de profil" >
< div class = "carte-contenu" >
< h2 > Jean Dupont</ h2 >
< p >
Développeur web passionné par les nouvelles technologies.
J'aime créer des sites web modernes et accessibles.
</ p >
< a href = "#" class = "bouton" > En savoir plus</ a >
</ div >
</ div >
</ body >
</ html >
```
**Points importants :**
- `box-shadow` crée une ombre (décalage-X, décalage-Y, flou, couleur)
- `rgba(0, 0, 0, 0.2)` est du noir avec 20% d'opacité
- `overflow: hidden` cache ce qui dépasse (ici, les coins de l'image)
- `object-fit: cover` permet à l'image de remplir son conteneur sans déformation
- `cursor: pointer` change le curseur en main sur le bouton
---------
## Exercice 5 : Centrage Flexbox
**Fichier `style.css` :**
```css
/* Reset */
* {
margin : 0 ;
padding : 0 ;
box-sizing : border-box ;
}
/* Le body prend toute la hauteur de l'écran */
body {
min-height : 100 vh ;
display : flex ;
justify-content : center ; /* Centrage horizontal */
align-items : center ; /* Centrage vertical */
background-color : #2c3e50 ;
}
/* L'élément à centrer */
. boite {
background-color : #3498db ;
color : white ;
padding : 40 px 60 px ;
border-radius : 10 px ;
font-family : Arial , sans-serif ;
font-size : 24 px ;
text-align : center ;
box-shadow : 0 10 px 30 px rgba ( 0 , 0 , 0 , 0.3 );
}
```
**Fichier HTML :**
```html
<!DOCTYPE html>
< html lang = "fr" >
< head >
< meta charset = "UTF-8" >
< title > Centrage Flexbox</ title >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div class = "boite" >
Je suis parfaitement centré !
</ div >
</ body >
</ html >
```
**Points importants :**
- `min-height: 100vh` fait que le body prend au minimum toute la hauteur de la fenêtre
- `vh` signifie "viewport height" (1vh = 1% de la hauteur de la fenêtre)
- `display: flex` active le mode Flexbox
- `justify-content: center` centre sur l'axe principal (horizontal par défaut)
- `align-items: center` centre sur l'axe secondaire (vertical par défaut)
---------
## Exercice 6 : Mise en page complète
**Fichier `style.css` :**
```css
/* Reset et base */
* {
margin : 0 ;
padding : 0 ;
box-sizing : border-box ;
}
body {
font-family : Arial , sans-serif ;
line-height : 1.6 ;
color : #333 ;
}
/* ============= HEADER ============= */
header {
position : fixed ;
top : 0 ;
left : 0 ;
width : 100 % ;
background-color : #2c3e50 ;
color : white ;
padding : 15 px 20 px ;
z-index : 1000 ; /* S'assure que le header est au-dessus */
}
header h1 {
display : inline-block ;
font-size : 24 px ;
}
/* ============= NAVIGATION ============= */
nav {
background-color : #34495e ;
}
nav ul {
list-style : none ;
display : flex ;
justify-content : center ;
}
nav a {
display : block ;
color : white ;
text-decoration : none ;
padding : 12 px 25 px ;
}
nav a : hover {
background-color : #2c3e50 ;
}
/* ============= CONTENU PRINCIPAL ============= */
. conteneur {
display : flex ;
margin-top : 120 px ; /* Espace pour header + nav fixes */
min-height : calc ( 100 vh - 120 px - 60 px ); /* Hauteur moins header et footer */
}
/* Contenu principal (70%) */
main {
flex : 7 ; /* 70% de l'espace */
padding : 20 px ;
background-color : #fff ;
}
main h2 {
color : #2c3e50 ;
margin-bottom : 15 px ;
border-bottom : 2 px solid #3498db ;
padding-bottom : 10 px ;
}
main p {
margin-bottom : 15 px ;
}
/* Barre latérale (30%) */
aside {
flex : 3 ; /* 30% de l'espace */
padding : 20 px ;
background-color : #ecf0f1 ;
border-left : 1 px solid #bdc3c7 ;
}
aside h3 {
color : #2c3e50 ;
margin-bottom : 15 px ;
}
aside ul {
list-style : none ;
}
aside li {
margin-bottom : 10 px ;
}
aside a {
color : #3498db ;
text-decoration : none ;
}
aside a : hover {
text-decoration : underline ;
}
/* ============= FOOTER ============= */
footer {
background-color : #2c3e50 ;
color : white ;
text-align : center ;
padding : 20 px ;
height : 60 px ;
}
```
**Fichier HTML :**
```html
<!DOCTYPE html>
< html lang = "fr" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Mise en page complète</ title >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< header >
< h1 > Mon Site Web</ h1 >
</ header >
< nav >
< ul >
< li >< a href = "#" > Accueil</ a ></ li >
< li >< a href = "#" > Articles</ a ></ li >
< li >< a href = "#" > Projets</ a ></ li >
< li >< a href = "#" > Contact</ a ></ li >
</ ul >
</ nav >
< div class = "conteneur" >
< main >
< h2 > Bienvenue sur mon site</ h2 >
< p >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ p >
< p >
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</ p >
< h2 > Mes projets récents</ h2 >
< p >
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</ p >
</ main >
< aside >
< h3 > Liens utiles</ h3 >
< ul >
< li >< a href = "#" > Documentation</ a ></ li >
< li >< a href = "#" > Tutoriels</ a ></ li >
< li >< a href = "#" > Ressources</ a ></ li >
< li >< a href = "#" > FAQ</ a ></ li >
</ ul >
< h3 > Catégories</ h3 >
< ul >
< li >< a href = "#" > HTML</ a ></ li >
< li >< a href = "#" > CSS</ a ></ li >
< li >< a href = "#" > JavaScript</ a ></ li >
< li >< a href = "#" > Python</ a ></ li >
</ ul >
</ aside >
</ div >
< footer >
< p > © 2024 - Mon Site Web - Tous droits réservés</ p >
</ footer >
</ body >
</ html >
```
**Points importants :**
- `position: fixed` fixe le header en haut de la page
- `z-index` contrôle l'ordre d'empilement (plus grand = au-dessus)
- `flex: 7` et `flex: 3` créent une proportion 70/30
- `calc()` permet de faire des calculs (ex: `100vh - 120px` )
- `margin-top` sur le conteneur compense la hauteur du header fixe
---------
Auteur : Florian Mathieu
2026-08-11 23:29:03 +02:00
Licence CC BY-SA
2026-01-15 18:32:27 +01:00
2026-08-11 23:29:03 +02:00
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a> <br />Ce cours est mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International</a>.
