Aide-mémoire CSS
Dernière mise à jour
Sélecteurs
Comment cibler les éléments que vous voulez styliser.
| Sélecteur | Correspond à |
|---|---|
* | Tous les éléments |
p | Tous les éléments <p> (par balise) |
.btn | Les éléments avec class="btn" |
#main | L'élément avec id="main" |
div p | Tous les <p> dans un <div> (descendant) |
div > p | Enfants directs uniquement |
a:hover | Liens survolés (pseudo-classe) |
li:first-child | Premier <li> dans son parent |
li:nth-child(2n) | Chaque <li> pair |
input[type="text"] | Champs ayant cet attribut |
p::before | Contenu généré avant <p> (pseudo-élément) |
Modèle de boîte
Chaque élément est une boîte : contenu, padding, bordure, marge.
| Propriété | Ce qu'elle fait |
|---|---|
width / height | Taille de la boîte de contenu |
padding | Espace à l'intérieur de la bordure |
border | 1px solid #333 - largeur, style, couleur |
margin | Espace à l'extérieur de la bordure |
box-sizing: border-box | Faire en sorte que la largeur inclue padding + bordure |
margin: 0 auto | Centrer horizontalement un élément de bloc |
overflow: hidden | Rogner le contenu qui déborde |
Typographie et couleur
| Propriété | Exemple |
|---|---|
color | color: #333 - couleur du texte |
background | background: #fff ou une image/un dégradé |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px (ou rem, em) |
font-weight | 400 (normal) … 700 (gras) |
line-height | 1.5 - espacement entre les lignes |
text-align | left, center, right, justify |
text-decoration | underline, none |
Flexbox
Mise en page unidimensionnelle - lignes ou colonnes. Définissez display: flex sur le parent.
| Propriété (sur le conteneur) | Ce qu'elle fait |
|---|---|
display: flex | Faire des enfants des éléments flex |
flex-direction | row (par défaut) ou column |
justify-content | Aligner le long de l'axe principal (center, space-between) |
align-items | Aligner le long de l'axe transversal (center, stretch) |
gap | Espace entre les éléments, ex. gap: 16px |
flex-wrap | wrap laisse les éléments passer à la ligne |
flex: 1 (sur un enfant) | L'élément grandit pour remplir l'espace disponible |
Grid
Mise en page bidimensionnelle. Définissez display: grid sur le parent.
| Propriété | Ce qu'elle fait |
|---|---|
display: grid | Faire des enfants des éléments de grille |
grid-template-columns | 1fr 1fr 1fr ou repeat(3, 1fr) |
grid-template-rows | Définir la taille des lignes |
gap | Espace entre les lignes et les colonnes |
grid-column | 1 / 3 - étendre un élément sur plusieurs colonnes |
auto-fit / minmax | repeat(auto-fit, minmax(200px, 1fr)) pour des grilles responsives |
place-items: center | Centrer chaque élément dans sa cellule |
Positionnement et affichage
| Propriété / valeur | Ce qu'elle fait |
|---|---|
position: static | Par défaut - dans le flux normal |
position: relative | Décalé par rapport à sa position normale |
position: absolute | Positionné par rapport à l'ancêtre positionné le plus proche |
position: fixed | Épinglé au viewport |
position: sticky | Se fige une fois un seuil de défilement atteint |
top / right / bottom / left | Décalages pour les éléments positionnés |
z-index | Ordre d'empilement (plus élevé = au-dessus) |
display: none | Retire l'élément de la mise en page |
display: inline-block | S'affiche en ligne mais accepte width/height |
Transitions et transformations
| Propriété | Exemple |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0) - déplacer |
transform: scale | scale(1.1) - redimensionner |
transform: rotate | rotate(45deg) |
opacity | 0 (invisible) … 1 (opaque) |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px - coins arrondis |
Unités et design responsive
| Unité / fonctionnalité | Signification |
|---|---|
px | Pixels absolus |
% | Relatif au parent |
rem | Relatif à la taille de police racine |
em | Relatif à la taille de police courante |
vw / vh | 1 % de la largeur / hauteur du viewport |
fr | Fraction de l'espace libre (grid) |
@media (max-width: 600px) { … } | Appliquer des règles en dessous d'un point de rupture |
Les sélecteurs, le modèle de boîte, flexbox, grid et les propriétés que vous oubliez toujours - sur une seule page. Cet aide-mémoire CSS est une référence rapide pour styliser et mettre en page des pages web, du ciblage des éléments à leur centrage.
Tout ce qui figure ici est du CSS standard qui fonctionne dans les navigateurs modernes. Copiez une règle, ou essayez-la en direct dans le playground HTML où vous pouvez modifier le CSS avec un aperçu instantané.
FAQ de l'aide-mémoire CSS
Cet aide-mémoire CSS est-il gratuit ?
Oui. Cet aide-mémoire CSS est gratuit, sans inscription. Mettez-le en favori et utilisez-le dès que vous devez retrouver un sélecteur, une propriété ou un schéma de mise en page.
Dois-je utiliser flexbox ou grid ?
Utilisez flexbox pour les mises en page unidimensionnelles - une rangée de boutons, une barre de navigation, des éléments sur une seule ligne ou colonne. Utilisez grid pour les mises en page bidimensionnelles où vous contrôlez à la fois les lignes et les colonnes en même temps, comme la mise en page d'une page ou une galerie de cartes. Ils fonctionnent bien ensemble : une grille de cartes où chaque carte utilise flexbox en interne est courante.
Comment centrer une div en CSS ?
La façon moderne la plus simple est flexbox sur le parent :
display: flex; justify-content: center; align-items: center; centre un enfant à la fois horizontalement et verticalement. Pour un simple centrage horizontal d'un élément de bloc à largeur définie, margin: 0 auto fonctionne toujours.Puis-je m'entraîner à CSS en ligne ?
Oui. Ouvrez le playground HTML pour écrire du HTML et du CSS ensemble avec un aperçu en direct. Quand vous voulez de la structure, le cours CSS interactif gratuit de Coddy couvre les sélecteurs, le modèle de boîte, flexbox et grid étape par étape.
Cet aide-mémoire convient-il aux débutants ?
Oui. Il passe des sélecteurs et du modèle de boîte (les fondations) à flexbox, grid et aux transitions, pour que vous puissiez commencer par les premières sections et progresser vers la mise en page moderne.
Ressources connexes
Plus d'aide-mémoires
