# 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 Exercice 1

Mon titre principal

Ceci est un paragraphe de texte pour tester mes premiers styles CSS.

Voici un deuxième paragraphe.

``` **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 Exercice 2

Ce texte est important !

Ce texte est encadré.

Ce texte est encadré avec des coins arrondis.

On peut combiner plusieurs classes sur un même élément !

``` **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 Navigation ``` **Points importants :** - `list-style: none` supprime les puces de la liste - `display: flex` sur le `

` 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 Carte de présentation

Jean Dupont

Développeur web passionné par les nouvelles technologies. J'aime créer des sites web modernes et accessibles.
En savoir plus

``` **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 Centrage Flexbox
Je suis parfaitement centré !
``` **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 Mise en page complète

Mon Site Web
- Accueil
- Articles
- Projets
- Contact
Bienvenue sur mon site

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Mes projets récents

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Liens utiles
Catégories
- HTML
- CSS
- JavaScript
- Python
© 2024 - Mon Site Web - Tous droits réservés

``` **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
Ce cours est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.

Mon titre principal

Jean Dupont

Bienvenue sur mon site

Mes projets récents