2e étageC CSSPièce 7/7Mémo

CSS

Le mémo de CSS : sélecteurs, cascade, boîtes, unités, flexbox, grid, responsive, variables et animations.

Ce mémo résume l'essentiel de CSS. Chaque section renvoie au cours qui l'explique en détail.

Relier et écrire une règle

<link rel="stylesheet" href="style.css">

style.css

sélecteur {
  propriété: valeur;
}

Détails : Premiers pas en CSS.

Sélecteurs

Écriture	Cible
`p`	tous les `p`
`.recette`	les éléments de classe `recette`
`#entete`	l'élément d'identifiant `entete`
`.a .b`	`.b` à l'intérieur de `.a`
`.a > .b`	`.b` enfant direct de `.a`
`h1, h2`	les deux sélecteurs
`a:hover`	un lien survolé

Détails : Premiers pas en CSS.

Cascade et spécificité

Critère	Règle
Spécificité	identifiant > classe > balise
Ordre	à égalité, la dernière règle gagne
Héritage	`color`, `font-*`, `line-height` oui ; `margin`, `border` non
Mots-clés	`inherit`, `initial`, `unset`, `revert`

Évite !important et les identifiants dans le CSS. Détails : Cascade et spécificité.

Modèle de boîte

*, *::before, *::after { box-sizing: border-box; }

.carte {
  padding: 1rem;            /* intérieur */
  border: 1px solid #ccc;   /* bordure */
  margin: 0 auto;           /* extérieur */
}

margin et padding : 1 valeur (4 côtés), 2 (haut-bas, gauche-droite), 4 (haut, droite, bas, gauche). Détails : Boîtes, unités et texte.

Unités et texte

Unité	Sens
`px`	pixel fixe
`rem`	multiple de la taille de texte de la page
`em`	multiple de la taille de texte de l'élément
`%`	part de la taille du parent
`vw`, `vh`	1 % de la largeur, de la hauteur de la fenêtre

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

Détails : Boîtes, unités et texte.

Flexbox

Propriété	Rôle
`display: flex`	active flexbox sur le parent
`flex-direction`	axe principal (`row`, `column`)
`justify-content`	répartition sur l'axe principal
`align-items`	alignement sur l'axe secondaire
`gap`	espace entre les éléments
`flex-wrap: wrap`	retour à la ligne
`flex: 1 1 12rem`	croissance, rétrécissement, base

Détails : Flexbox.

Grid

.recettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

1fr = une part de l'espace libre. grid-column: span 2 étend un élément sur deux colonnes. Détails : Grid et responsive.

Responsive

<meta name="viewport" content="width=device-width, initial-scale=1">

@media (min-width: 48rem) {
  .recettes { grid-template-columns: repeat(2, 1fr); }
}

Mobile d'abord : style de base pour le petit écran, min-width pour élargir. Détails : Grid et responsive.

Variables

:root { --couleur: #8b1a1a; }
.titre { color: var(--couleur, black); }

Détails : Variables, transitions et animations.

Transitions et animations

.bouton { transition: background-color 0.3s ease; }

@keyframes apparition {
  from { opacity: 0; }
  to { opacity: 1; }
}
.carte { animation: apparition 0.5s ease-out; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none; transition: none; }
}

Détails : Variables, transitions et animations.

Sources officielles

MDN, Référence CSS

Ensuite

Premiers pas en CSS

Relier une feuille de style à une page HTML, écrire des règles avec sélecteurs et propriétés, et comprendre les premières couleurs.

Projet: Lignes de code
Niveau: 2e étage
Appartement: CSS
Pièce: 7/7
Plan n°: css/index