542 lines
12 KiB
Markdown
542 lines
12 KiB
Markdown
# 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: 16px;
|
|
}
|
|
```
|
|
|
|
**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: 2px solid black;
|
|
padding: 10px;
|
|
}
|
|
|
|
/* Classe pour coins arrondis */
|
|
.arrondi {
|
|
border-radius: 15px;
|
|
}
|
|
```
|
|
|
|
**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: 15px 20px;
|
|
}
|
|
|
|
/* 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: 20px;
|
|
}
|
|
|
|
/* Style de la carte */
|
|
.carte {
|
|
width: 300px;
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 8px 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: 200px;
|
|
object-fit: cover; /* L'image remplit l'espace sans déformation */
|
|
}
|
|
|
|
/* Contenu de la carte */
|
|
.carte-contenu {
|
|
padding: 15px;
|
|
}
|
|
|
|
.carte-contenu h2 {
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.carte-contenu p {
|
|
color: #666;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Bouton stylisé */
|
|
.bouton {
|
|
display: inline-block;
|
|
background-color: #007bff;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.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: 100vh;
|
|
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: 40px 60px;
|
|
border-radius: 10px;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
box-shadow: 0 10px 30px 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: 15px 20px;
|
|
z-index: 1000; /* S'assure que le header est au-dessus */
|
|
}
|
|
|
|
header h1 {
|
|
display: inline-block;
|
|
font-size: 24px;
|
|
}
|
|
|
|
/* ============= 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: 12px 25px;
|
|
}
|
|
|
|
nav a:hover {
|
|
background-color: #2c3e50;
|
|
}
|
|
|
|
/* ============= CONTENU PRINCIPAL ============= */
|
|
.conteneur {
|
|
display: flex;
|
|
margin-top: 120px; /* Espace pour header + nav fixes */
|
|
min-height: calc(100vh - 120px - 60px); /* Hauteur moins header et footer */
|
|
}
|
|
|
|
/* Contenu principal (70%) */
|
|
main {
|
|
flex: 7; /* 70% de l'espace */
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
main h2 {
|
|
color: #2c3e50;
|
|
margin-bottom: 15px;
|
|
border-bottom: 2px solid #3498db;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
main p {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Barre latérale (30%) */
|
|
aside {
|
|
flex: 3; /* 30% de l'espace */
|
|
padding: 20px;
|
|
background-color: #ecf0f1;
|
|
border-left: 1px solid #bdc3c7;
|
|
}
|
|
|
|
aside h3 {
|
|
color: #2c3e50;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
aside ul {
|
|
list-style: none;
|
|
}
|
|
|
|
aside li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
aside a {
|
|
color: #3498db;
|
|
text-decoration: none;
|
|
}
|
|
|
|
aside a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ============= FOOTER ============= */
|
|
footer {
|
|
background-color: #2c3e50;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 20px;
|
|
height: 60px;
|
|
}
|
|
```
|
|
|
|
**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
|
|
|
|
Licence CC BY NC
|
|
|
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-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-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.
|