🎯 SÉLECTEURS
#monId { }
Sélecteur d'ID - cible un élément unique avec id="monId"
.maClasse { }
Sélecteur de classe - cible tous les éléments avec class="maClasse"
p { }
Sélecteur de balise - cible tous les <p>
div p { }
Sélecteur descendant - tous les <p> à l'intérieur d'un <div>
div > p { }
Sélecteur enfant direct - <p> directement dans un <div>
h1 + p { }
Sélecteur adjacent - <p> juste après un <h1>
h1 ~ p { }
Sélecteur frère - tous les <p> après un <h1> (même niveau)
div.maClasse { }
Combinaison - <div> avec class="maClasse"
.classe1.classe2 { }
Multiple classes - élément ayant les deux classes
[type="text"] { }
Sélecteur d'attribut - éléments avec cet attribut
* { }
Sélecteur universel - tous les éléments
🎨 ATTRIBUTS CSS
color: #333;
Couleur du texte
background-color: #ffffff;
Couleur de fond
font-family: Arial, sans-serif;
Police de caractères
font-size: 16px;
Taille du texte
font-weight: bold;
Graisse du texte (normal, bold)
text-align: center;
Alignement du texte (left, center, right)
text-decoration: underline;
Décoration du texte (underline, none)
line-height: 1.5;
Hauteur de ligne (espacement vertical)
width: 200px;
Largeur de l'élément
height: 100px;
Hauteur de l'élément
margin: 10px;
Marge extérieure (espace autour)
padding: 20px;
Marge intérieure (espace interne)
border: 1px solid #000;
Bordure (largeur, style, couleur)
border-radius: 5px;
Coins arrondis
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
Ombre portée
display: block;
Type d'affichage (block, inline, flex, grid, none)
position: absolute;
Positionnement (static, relative, absolute, fixed)
top: 10px; left: 20px;
Position (top, bottom, left, right)
float: left;
Flottant (left, right, none)
z-index: 10;
Ordre d'empilement (profondeur)
opacity: 0.5;
Transparence (0 à 1)
overflow: hidden;
Débordement (visible, hidden, scroll, auto)
cursor: pointer;
Type de curseur (pointer, default, text)
transition: all 0.3s;
Animation de transition
transform: rotate(45deg);
Transformation (rotate, scale, translate, skew)
background-image: url('image.jpg');
Image de fond
background-size: cover;
Taille de l'image de fond (cover, contain, auto)
background-position: center;
Position de l'image de fond
background-repeat: no-repeat;
Répétition de l'image de fond (repeat, no-repeat)
max-width: 800px;
Largeur maximale
min-height: 100vh;
Hauteur minimale (vh = % de la hauteur d'écran)
flex-direction: row;
Direction flexbox (row, column, row-reverse, column-reverse)
justify-content: center;
Alignement flexbox axe principal (center, space-between, flex-start)
align-items: center;
Alignement flexbox axe secondaire (center, flex-start, stretch)
gap: 20px;
Espacement entre éléments flexbox ou grid
grid-template-columns: 1fr 2fr;
Colonnes de grille CSS (fr = fraction)
grid-template-rows: auto 1fr;
Lignes de grille CSS
text-transform: uppercase;
Transformation du texte (uppercase, lowercase, capitalize)
letter-spacing: 2px;
Espacement entre les lettres
word-spacing: 5px;
Espacement entre les mots
text-shadow: 2px 2px 4px #000;
Ombre du texte
list-style: none;
Style de liste (none, disc, circle, square, decimal)
vertical-align: middle;
Alignement vertical (top, middle, bottom)
white-space: nowrap;
Gestion des espaces (nowrap, pre, pre-wrap)
object-fit: cover;
Ajustement des images (cover, contain, fill)
filter: blur(5px);
Filtres CSS (blur, brightness, contrast, grayscale)
animation: spin 2s infinite;
Animation CSS (avec @keyframes)
@media (max-width: 768px) { }
Media query pour responsive design
✨ PSEUDO-CLASSES & PSEUDO-ÉLÉMENTS
:hover { }
Style au survol de la souris
:active { }
Style au clic
:focus { }
Style quand l'élément a le focus
:visited { }
Style pour les liens déjà visités
:first-child { }
Premier enfant de son parent
:last-child { }
Dernier enfant de son parent
:nth-child(2) { }
N-ième enfant (2nd ici, ou odd/even pour pair/impair)
:not(.maClasse) { }
Négation - tous sauf ceux avec .maClasse
::before { content: '★'; }
Ajouter du contenu avant l'élément
::after { content: ''; }
Ajouter du contenu après l'élément
::first-letter { }
Première lettre du texte
::first-line { }
Première ligne du texte
visibility: hidden;
Visibilité (visible, hidden) - garde l'espace
pointer-events: none;
Désactiver les interactions souris (none, auto)
user-select: none;
Empêcher la sélection de texte
outline: 2px solid blue;
Contour (ne prend pas d'espace)
box-sizing: border-box;
Mode de calcul des dimensions (border-box, content-box)
aspect-ratio: 16 / 9;
Ratio d'aspect largeur/hauteur
/* Commentaire CSS */
Commentaire (invisible dans le rendu)