623 lines
16 KiB
Markdown
623 lines
16 KiB
Markdown
# TP CSS - Mise en forme et structuration d'une page web
|
|
|
|
**Spécialité NSI - Première**
|
|
|
|
---
|
|
|
|
## Objectifs
|
|
|
|
- Comprendre le rôle du CSS (séparation contenu/présentation)
|
|
- Maîtriser la syntaxe CSS (sélecteurs, propriétés, valeurs)
|
|
- Utiliser les balises sémantiques HTML5 pour structurer une page
|
|
- Créer une mise en page complète avec CSS
|
|
|
|
**Prérequis** : TP HTML terminé
|
|
|
|
---
|
|
|
|
## Partie A : Introduction au CSS
|
|
|
|
### A.1 Le rôle du CSS
|
|
|
|
**CSS** (*Cascading Style Sheets* - Feuilles de style en cascade) gère l'**apparence** d'une page web.
|
|
|
|
> **Principe fondamental** : HTML = structure (le fond) | CSS = présentation (la forme)
|
|
|
|
|
|
|
|
### A.2 Syntaxe CSS
|
|
|
|
```css
|
|
selecteur {
|
|
propriete: valeur;
|
|
propriete2: valeur2;
|
|
}
|
|
```
|
|
|
|
**Exemple :**
|
|
```css
|
|
body {
|
|
background-color: chocolate;
|
|
}
|
|
|
|
p {
|
|
font-size: 32px;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
```
|
|
|
|
### A.3 Les 3 façons d'appliquer du CSS
|
|
|
|
| Méthode | Exemple | Portée |
|
|
|---------|---------|--------|
|
|
| **Inline** (attribut style) | `<p style="color: red;">` | Un seul élément |
|
|
| **Interne** (balise style) | `<style> p { color: red; } </style>` | Une seule page |
|
|
| **Externe** (fichier .css) | `<link rel="stylesheet" href="style.css">` | Tout le site |
|
|
|
|
**Bonne pratique** : Toujours utiliser un fichier CSS externe !
|
|
|
|
```html
|
|
<!-- Dans le <head> de votre HTML -->
|
|
<link rel="stylesheet" href="styles/style.css">
|
|
```
|
|
|
|
---
|
|
|
|
## Partie B : Les sélecteurs CSS
|
|
|
|
### B.1 Sélecteurs de base
|
|
|
|
| Sélecteur | Cible | Exemple |
|
|
|-----------|-------|---------|
|
|
| `element` | Toutes les balises de ce type | `p { }` → tous les `<p>` |
|
|
| `.classe` | Tous les éléments avec cette classe | `.important { }` → `class="important"` |
|
|
| `#id` | L'élément unique avec cet id | `#menu { }` → `id="menu"` |
|
|
|
|
### B.2 Sélecteurs combinés
|
|
|
|
| Sélecteur | Signification | Exemple HTML |
|
|
|-----------|---------------|--------------|
|
|
| `p span` | `<span>` à l'intérieur de `<p>` | `<p><span>...</span></p>` |
|
|
| `p, span` | `<p>` ET `<span>` (les deux) | `<p>` ou `<span>` |
|
|
| `div p span` | `<span>` dans `<p>` dans `<div>` | `<div><p><span>` |
|
|
| `.intro` | Classe "intro" | `<p class="intro">` |
|
|
| `p.intro` | `<p>` avec classe "intro" | `<p class="intro">` |
|
|
| `#titre` | Id "titre" | `<h1 id="titre">` |
|
|
| `a:hover` | Lien survolé | `<a>` au survol souris |
|
|
|
|
### B.3 Exercice interactif : CSS Diner
|
|
|
|
Avant de continuer, entraînez-vous sur **CSS Diner** :
|
|
|
|
👉 **[flukeout.github.io](https://flukeout.github.io)** (30 niveaux)
|
|
|
|
Objectif : atteindre au moins le niveau 15.
|
|
|
|
---
|
|
|
|
## Partie C : Propriétés CSS essentielles
|
|
|
|
### C.1 Texte
|
|
|
|
```css
|
|
p {
|
|
color: #333333; /* Couleur du texte */
|
|
font-size: 16px; /* Taille */
|
|
font-family: Arial, sans-serif; /* Police */
|
|
font-weight: bold; /* Gras */
|
|
font-style: italic; /* Italique */
|
|
text-align: center; /* Alignement: left, center, right, justify */
|
|
text-decoration: underline; /* Soulignement */
|
|
text-transform: uppercase; /* Majuscules */
|
|
line-height: 1.5; /* Interligne */
|
|
}
|
|
```
|
|
|
|
### C.2 Couleurs
|
|
|
|
```css
|
|
/* 3 façons d'écrire une couleur */
|
|
color: red; /* Nom */
|
|
color: #ff0000; /* Hexadécimal */
|
|
color: rgb(255, 0, 0); /* RGB */
|
|
```
|
|
|
|
### C.3 Arrière-plan
|
|
|
|
```css
|
|
body {
|
|
background-color: #f0f0f0;
|
|
background-image: url("images/fond.png");
|
|
background-repeat: no-repeat; /* repeat, repeat-x, repeat-y */
|
|
background-position: center;
|
|
background-size: cover; /* cover, contain, 100px */
|
|
}
|
|
```
|
|
|
|
### C.4 Le modèle de boîte (box model)
|
|
|
|
Chaque élément HTML est une "boîte" avec :
|
|
|
|
```
|
|
┌─────────────────────────────────────┐
|
|
│ margin │ ← Marge extérieure
|
|
│ ┌───────────────────────────────┐ │
|
|
│ │ border │ │ ← Bordure
|
|
│ │ ┌─────────────────────────┐ │ │
|
|
│ │ │ padding │ │ │ ← Marge intérieure
|
|
│ │ │ ┌───────────────────┐ │ │ │
|
|
│ │ │ │ CONTENU │ │ │ │
|
|
│ │ │ └───────────────────┘ │ │ │
|
|
│ │ └─────────────────────────┘ │ │
|
|
│ └───────────────────────────────┘ │
|
|
└─────────────────────────────────────┘
|
|
```
|
|
|
|
```css
|
|
div {
|
|
width: 300px;
|
|
height: 200px;
|
|
padding: 20px; /* Intérieur */
|
|
margin: 10px; /* Extérieur */
|
|
border: 2px solid black; /* Bordure */
|
|
border-radius: 5px; /* Coins arrondis */
|
|
box-shadow: 4px 4px 5px #999; /* Ombre */
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Partie D : Les balises sémantiques HTML5
|
|
|
|
### D.1 Structure d'une page moderne
|
|
|
|
|
|
|
|
```
|
|
┌─────────────────────────────────────────────┐
|
|
│ <header> │
|
|
│ ┌─────────────────────────────────────┐ │
|
|
│ │ <nav> │ │
|
|
│ └─────────────────────────────────────┘ │
|
|
├─────────────────────────────────────────────┤
|
|
│ ┌───────────────────────┐ ┌───────────┐ │
|
|
│ │ <section> │ │ <aside> │ │
|
|
│ │ ┌─────────────────┐ │ │ │ │
|
|
│ │ │ <article> │ │ │ │ │
|
|
│ │ └─────────────────┘ │ │ │ │
|
|
│ └───────────────────────┘ └───────────┘ │
|
|
├─────────────────────────────────────────────┤
|
|
│ <footer> │
|
|
└─────────────────────────────────────────────┘
|
|
```
|
|
|
|
### D.2 Rôle de chaque balise
|
|
|
|
| Balise | Usage |
|
|
|--------|-------|
|
|
| `<header>` | En-tête de page (logo, titre, navigation) |
|
|
| `<nav>` | Menu de navigation principal |
|
|
| `<main>` | Contenu principal (unique par page) |
|
|
| `<section>` | Section thématique avec un titre |
|
|
| `<article>` | Contenu autonome (article, post de blog) |
|
|
| `<aside>` | Contenu complémentaire (sidebar, encadré) |
|
|
| `<footer>` | Pied de page (copyright, liens, contact) |
|
|
| `<div>` | Conteneur générique (quand rien d'autre ne convient) |
|
|
|
|
---
|
|
|
|
## Partie E : Mise en page avec Flexbox
|
|
|
|
### E.1 Introduction à Flexbox
|
|
|
|
Flexbox est une méthode moderne pour créer des mises en page flexibles.
|
|
|
|
```css
|
|
.conteneur {
|
|
display: flex;
|
|
}
|
|
```
|
|
|
|
### E.2 Propriétés du conteneur flex
|
|
|
|
```css
|
|
.conteneur {
|
|
display: flex;
|
|
flex-direction: row; /* row, column, row-reverse, column-reverse */
|
|
justify-content: center; /* Alignement horizontal */
|
|
align-items: center; /* Alignement vertical */
|
|
flex-wrap: wrap; /* Retour à la ligne si nécessaire */
|
|
gap: 20px; /* Espacement entre les éléments */
|
|
}
|
|
```
|
|
|
|
**justify-content** (axe principal) :
|
|
- `flex-start` : début
|
|
- `flex-end` : fin
|
|
- `center` : centré
|
|
- `space-between` : espace entre les éléments
|
|
- `space-around` : espace autour des éléments
|
|
|
|
**align-items** (axe secondaire) :
|
|
- `flex-start`, `flex-end`, `center`, `stretch`
|
|
|
|
### E.3 Propriétés des éléments flex
|
|
|
|
```css
|
|
.element {
|
|
flex: 1; /* Prend l'espace disponible */
|
|
flex-basis: 200px; /* Taille de base */
|
|
order: 2; /* Ordre d'affichage */
|
|
}
|
|
```
|
|
|
|
### E.4 Exercice interactif : Flexbox Froggy
|
|
|
|
Maîtrisez Flexbox avec **Flexbox Froggy** :
|
|
|
|
👉 **[flexboxfroggy.com](https://flexboxfroggy.com)** (24 niveaux)
|
|
|
|
Objectif : terminer tous les niveaux !
|
|
|
|
---
|
|
|
|
## Partie F : Projet - Site "Pastor"
|
|
|
|
Vous allez créer un site de blog culinaire avec une mise en page complète.
|
|
|
|
### F.1 Préparation
|
|
|
|
Créez l'arborescence suivante :
|
|
|
|
```
|
|
TP_CSS/
|
|
├── pages/
|
|
│ └── index.html
|
|
├── images/
|
|
│ └── (télécharger la banque d'images fournie)
|
|
└── styles/
|
|
└── style.css
|
|
```
|
|
|
|
### F.2 Structure HTML
|
|
|
|
Voici la structure visuelle du site Pastor :
|
|
|
|
|
|
|
|
Créez `index.html` avec la structure suivante :
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Pastor - Grimoire de la cuisine</title>
|
|
<link rel="stylesheet" href="../styles/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="bloc_page">
|
|
|
|
<header>
|
|
<div id="titre_principal">
|
|
<!-- Logo + Titre h1 "Pastor" + Sous-titre h2 "Grimoire de la cuisine" -->
|
|
</div>
|
|
<nav>
|
|
<!-- Menu : Accueil, Blog, CV, Contact -->
|
|
</nav>
|
|
</header>
|
|
|
|
<div id="banniere_image">
|
|
<!-- Image de bannière + bouton "Voir l'article" -->
|
|
</div>
|
|
|
|
<section>
|
|
<article>
|
|
<!-- Titre + 5 paragraphes de texte -->
|
|
</article>
|
|
<aside>
|
|
<!-- "A propos de l'auteur" + icônes réseaux sociaux -->
|
|
</aside>
|
|
</section>
|
|
|
|
<footer>
|
|
<div id="tweet">
|
|
<!-- "Mon dernier tweet..." -->
|
|
</div>
|
|
<div id="mes_photos">
|
|
<!-- 4 miniatures de photos -->
|
|
</div>
|
|
<div id="mes_amis">
|
|
<!-- 2 listes de liens -->
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
### F.3 Contenu HTML détaillé
|
|
|
|
**Header (`titre_principal` + `nav`)** :
|
|
- Image `pastor.png` (logo)
|
|
- Titre h1 : "Pastor"
|
|
- Titre h2 : "Grimoire de la cuisine"
|
|
- Menu de navigation : Accueil, Blog, CV, Contact (liens vers le site du lycée)
|
|
|
|
**Bannière (`banniere_image`)** :
|
|
- Texte : "Retour sur mes vacances en Asie... Voir l'article"
|
|
- Image de flèche `flecheblanchedroite.png`
|
|
- Lien de classe `bouton_rouge`
|
|
|
|
**Article** :
|
|
- Image `ico_epingle.png`
|
|
- Titre h1 : "Je suis un grand gourmand"
|
|
- 5 paragraphes de texte (lorem ipsum)
|
|
|
|
**Aside** :
|
|
- Titre h1 : "A propos de l'auteur"
|
|
- Image `bulle.png` (id="bulle")
|
|
- Image `pastor.png` (id="pastor")
|
|
- Paragraphe de présentation
|
|
- Icônes : `facebook.png`, `twitter.png`, `vimeo.png`, `flickr.png`, `rss.png`
|
|
|
|
**Footer** :
|
|
- `tweet` : Titre + 2 paragraphes (class="ragot")
|
|
- `mes_photos` : Titre + 4 images `photo_min_X.jpg`
|
|
- `mes_amis` : Titre + 2 listes (Perceval, Roi Arthur, Léodagan, Karadoc / Merlin, Lancelot, Bohort, Guenièvre)
|
|
|
|
### F.4 Styles CSS
|
|
|
|
Voici le schéma de positionnement CSS du site :
|
|
|
|
|
|
|
|
Créez `style.css` avec les règles suivantes :
|
|
|
|
#### Styles généraux
|
|
|
|
```css
|
|
body {
|
|
background-image: url("../images/fond_jaune.png");
|
|
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
|
|
color: #333333;
|
|
}
|
|
|
|
#bloc_page {
|
|
width: 900px;
|
|
margin: 0 auto; /* Centrage horizontal */
|
|
}
|
|
|
|
h1 {
|
|
text-transform: uppercase;
|
|
}
|
|
```
|
|
|
|
#### Header
|
|
|
|
```css
|
|
header {
|
|
background: url("../images/separateur.png") repeat-x bottom;
|
|
}
|
|
|
|
#titre_principal h1 {
|
|
font-size: 5em;
|
|
font-family: Arial, cursive;
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#titre_principal h2 {
|
|
font-size: 1.1em;
|
|
font-family: Verdana, Geneva, sans-serif;
|
|
margin-top: 0;
|
|
}
|
|
|
|
nav {
|
|
display: inline-block;
|
|
width: 90%;
|
|
text-align: right;
|
|
}
|
|
|
|
nav ul {
|
|
list-style: none;
|
|
}
|
|
|
|
nav li {
|
|
display: inline-block;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
nav a {
|
|
font-size: 1.3em;
|
|
color: #181818;
|
|
text-decoration: none;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
nav a:hover {
|
|
color: #760000;
|
|
border-bottom: 3px solid #760000;
|
|
}
|
|
```
|
|
|
|
#### Bannière
|
|
|
|
```css
|
|
#banniere_image {
|
|
margin-top: 15px;
|
|
height: 200px;
|
|
border-radius: 5px;
|
|
background: url("../images/bangkok.jpg") no-repeat;
|
|
background-size: cover;
|
|
color: white;
|
|
font-size: 0.8em;
|
|
position: relative;
|
|
box-shadow: 0 14px 14px #1c1a19;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.bouton_rouge {
|
|
display: inline-block;
|
|
height: 20px;
|
|
position: absolute;
|
|
background-color: #993300;
|
|
font-size: 1.2em;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 5px 10px;
|
|
text-decoration: none;
|
|
}
|
|
```
|
|
|
|
#### Section (article + aside)
|
|
|
|
```css
|
|
section {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
article {
|
|
flex: 2; /* Prend 2/3 de l'espace */
|
|
text-align: justify;
|
|
}
|
|
|
|
article p {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
aside {
|
|
flex: 1; /* Prend 1/3 de l'espace */
|
|
background-color: #706b64;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
color: white;
|
|
font-size: 0.9em;
|
|
box-shadow: 4px 4px 5px #1c1a19;
|
|
}
|
|
|
|
#bulle {
|
|
position: absolute;
|
|
top: 100px;
|
|
left: -12px;
|
|
}
|
|
```
|
|
|
|
#### Footer
|
|
|
|
```css
|
|
footer {
|
|
margin-top: 10px;
|
|
padding: 30px;
|
|
background: url("../images/separateur.png") no-repeat top;
|
|
display: flex;
|
|
}
|
|
|
|
#tweet {
|
|
width: 25%;
|
|
}
|
|
|
|
#mes_photos {
|
|
width: 40%;
|
|
}
|
|
|
|
#mes_amis {
|
|
width: 25%;
|
|
}
|
|
|
|
#mes_photos img {
|
|
border: 1px solid #181818;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.ragot {
|
|
font-style: italic;
|
|
}
|
|
|
|
footer h1 {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
footer p, footer ul {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.amis {
|
|
color: #760000;
|
|
text-decoration: none;
|
|
}
|
|
```
|
|
|
|
### F.5 Rendu attendu
|
|
|
|
Votre page doit ressembler à ceci :
|
|
|
|
|
|
|
|
---
|
|
|
|
## Résumé des propriétés CSS
|
|
|
|
### Texte
|
|
| Propriété | Valeurs courantes |
|
|
|-----------|-------------------|
|
|
| `color` | `#333`, `red`, `rgb(0,0,0)` |
|
|
| `font-size` | `16px`, `1.2em`, `1rem` |
|
|
| `font-family` | `Arial, sans-serif` |
|
|
| `font-weight` | `normal`, `bold`, `700` |
|
|
| `text-align` | `left`, `center`, `right`, `justify` |
|
|
| `text-decoration` | `none`, `underline` |
|
|
| `text-transform` | `uppercase`, `lowercase`, `capitalize` |
|
|
|
|
### Boîte
|
|
| Propriété | Valeurs courantes |
|
|
|-----------|-------------------|
|
|
| `width`, `height` | `300px`, `50%`, `auto` |
|
|
| `margin` | `10px`, `10px 20px`, `auto` |
|
|
| `padding` | `10px`, `10px 20px 10px 20px` |
|
|
| `border` | `1px solid black` |
|
|
| `border-radius` | `5px`, `50%` |
|
|
| `box-shadow` | `4px 4px 5px #999` |
|
|
|
|
### Arrière-plan
|
|
| Propriété | Valeurs courantes |
|
|
|-----------|-------------------|
|
|
| `background-color` | `#fff`, `transparent` |
|
|
| `background-image` | `url("image.png")` |
|
|
| `background-size` | `cover`, `contain`, `100px` |
|
|
| `background-position` | `center`, `top left` |
|
|
| `background-repeat` | `no-repeat`, `repeat-x` |
|
|
|
|
### Flexbox
|
|
| Propriété | Valeurs courantes |
|
|
|-----------|-------------------|
|
|
| `display` | `flex` |
|
|
| `flex-direction` | `row`, `column` |
|
|
| `justify-content` | `center`, `space-between` |
|
|
| `align-items` | `center`, `flex-start` |
|
|
| `gap` | `20px` |
|
|
| `flex` | `1`, `2` |
|
|
|
|
---
|
|
|
|
## Ressources
|
|
|
|
- **CSS Diner** : [flukeout.github.io](https://flukeout.github.io) - Sélecteurs CSS
|
|
- **Flexbox Froggy** : [flexboxfroggy.com](https://flexboxfroggy.com) - Flexbox
|
|
- **MDN CSS** : [developer.mozilla.org/fr/docs/Web/CSS](https://developer.mozilla.org/fr/docs/Web/CSS)
|
|
- **Can I Use** : [caniuse.com](https://caniuse.com) - Compatibilité navigateurs
|
|
|
|
---
|
|
|
|
## Licence
|
|
|
|
**Auteur** : Florian Mathieu
|
|
**Licence** : [CC BY-NC-SA 4.0](http://creativecommons.org/licenses/by-nc-sa/4.0/)
|
|
|
|
[](http://creativecommons.org/licenses/by-nc-sa/4.0/)
|
|
|
|
Ce document 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.
|