Aide-mémoire des styles CSS

Le CSS (Cascading Style Sheets) est utilisé pour contrôler la mise en page et le style des pages web. Cet aide-mémoire couvre les propriétés et les sélecteurs les plus couramment utilisés.

Sélecteurs

Type	Exemple	Description
All	`* { }`	Cible tous les éléments
Type	`h1 { }`	Cible une balise HTML spécifique
Class	`.header { }`	Cible les éléments avec class=“header”
ID	`#main { }`	Cible l’élément avec id=“main”
Descendant	`div p { }`	Cible tous les p dans un div
Pseudo	`a:hover { }`	État au survol de la souris

Modèle de Boîte

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* Marge interne */
  border: 1px solid #ccc; /* Bordure */
  margin: 20px;     /* Marge externe */
  box-sizing: border-box; /* Inclut bordure et marge interne */
}

Typographie

Property	Description	Exemple
`font-family`	Famille de police	`font-family: Arial, sans-serif;`
`font-size`	Taille de police	`font-size: 16px;`
`font-weight`	Graisse de police	`font-weight: bold;`
`text-align`	Alignement du texte	`text-align: center;`
`line-height`	Hauteur de ligne	`line-height: 1.5;`
`color`	Couleur du texte	`color: #333;`

Couleurs & Arrière-plans

Property	Description	Exemple
`background-color`	Couleur de fond	`background-color: #f0f0f0;`
`background-image`	Image de fond	`background-image: url('bg.jpg');`
`background-size`	Taille du fond	`background-size: cover;`
`opacity`	Opacité	`opacity: 0.8;`

Positionnement

position: static; : Flux normal par défaut
position: relative; : Décalage par rapport à sa position normale
position: absolute; : Position par rapport au premier ancêtre non statique
position: fixed; : Position par rapport à la fenêtre du navigateur
position: sticky; : Fixé lors du défilement à une position donnée
z-index: 10; : Ordre de superposition

Affichage & Mise en Page

display: block; : Élément bloc
display: inline; : Élément en ligne
display: inline-block; : Élément en ligne-bloc
display: flex; : Active la mise en page flex
display: grid; : Active la mise en page grid
display: none; : Cache l’élément sans occuper d’espace

Propriétés Raccourcies

margin: 10px 5px 15px 20px; (Haut Droite Bas Gauche)
padding: 10px 5px; (Haut-Bas Gauche-Droite)
border: 1px dashed red; (Largeur Style Couleur)