Mettre en forme le texte, comprendre le modèle de boîte (contenu, padding, bordure, marge), ajouter des bordures arrondies et des ombres, dimensionner les images et décorer les fonds.
Une boutique de babouches à Fès présente ses modèles sur des fiches produits. Pour que chaque fiche ressemble à une vraie carte, avec de l'espace autour du texte, un cadre arrondi, une ombre légère et une photo bien dimensionnée, il faut comprendre une idée centrale du CSS : chaque élément est une boîte.
Au centre, le contenu : ici le texte de la carte, sur une largeur (width) de 200 px.
| Propriété | Exemple | Effet |
|---|---|---|
font-family | Georgia, serif | la police (avec une police de secours) |
font-size | 1.125rem | la taille |
font-weight | 700 ou bold | la graisse |
font-style | italic | l’italique |
line-height | 1.6 | l’interligne |
text-transform | uppercase | majuscules |
text-decoration | none | supprimer le soulignement |
letter-spacing | 1px | espacement des lettres |
Chaque élément est une boîte composée de quatre zones, de l’intérieur vers l’extérieur :
width, height) ;border: 2px solid #8b5a2b) ;margin) : l’espace extérieur, transparent, qui éloigne les voisins.Les raccourcis suivent le sens des aiguilles d’une montre : padding: haut droite bas gauche. La règle * { box-sizing: border-box; } fait que width inclut le padding et la bordure : les calculs deviennent beaucoup plus simples.
.carte {
border: 1px solid #ddd;
border-radius: 12px; /* coins arrondis */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* x y flou couleur */
}
text-shadow fonctionne de la même façon pour le texte.
img {
max-width: 100%; /* ne déborde jamais de son parent */
height: auto; /* garde les proportions */
}
.vignette {
width: 120px;
height: 120px;
object-fit: cover; /* recadre sans déformer */
}
| Propriété | Rôle |
|---|---|
background-color | couleur de fond |
background-image: url(...) | image de fond |
background-size: cover | l’image couvre toute la zone |
background-position: center | position de l’image |
background-repeat: no-repeat | pas de répétition |
linear-gradient(...) | dégradé : background: linear-gradient(#0b5394, #6fa8dc); |
La photo est le contenu. Le passe-partout blanc autour est le padding. Le cadre en bois est la bordure. L'espace laissé entre deux cadres sur le mur est la marge.
.carte { padding: 16px; /* le passe-partout */ border: 2px solid #8b5a2b; /* le cadre */ margin: 20px; /* l'espace sur le mur */ }
Un colis de 30 cm avec 5 cm de papier bulle de chaque côté prend 40 cm de place. Une boîte CSS aussi : sa largeur réelle ajoute le padding et la bordure, sauf si on écrit box-sizing: border-box.
* { box-sizing: border-box; } /* width inclut padding et bordure */
Une boîte a width: 200px; padding: 10px; border: 5px solid; margin: 20px. Quelle place occupe-t-elle en largeur (sans box-sizing) ? Et avec box-sizing: border-box ?
Sans box-sizing : 200 + 2×10 + 2×5 = 230 px de boîte visible, plus 2×20 de marge = 270 px de place occupée. Avec border-box : la boîte visible fait 200 px (le contenu rétrécit à 170 px), plus 40 de marge = 240 px.
Que signifient : (1) margin: 10px 20px ; (2) padding: 5px 10px 15px 20px ; (3) margin: 0 auto ?
Le sens des aiguilles d'une montre : haut, droite, bas, gauche.
1. 10 px en haut et en bas, 20 px à gauche et à droite 2. haut 5, droite 10, bas 15, gauche 20 3. 0 en haut et en bas, marges automatiques à gauche et à droite : la boîte (si elle a une largeur) est centrée horizontalement.
Écrivez la règle d'un en-tête qui affiche l'image zellige.jpg en fond, qui couvre toute la zone, centrée, sans répétition, avec un texte blanc.
header { background-image: url("images/zellige.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; color: white; }