|
## Sélecteurs CSS
### Sélecteurs de base
| Command | Description |
|---------|-------------|
| `element` | `p { }` — tous les éléments |
| `.class` | `.card { }` — sélecteur de classe |
| `#id` | `#main { }` — sélecteur d'identifiant |
| `*` | Sélecteur universel (tous les éléments) |
### Combinateurs
| Command | Description |
|---------|-------------|
| `A B` | Descendant (B à l'intérieur de A) |
| `A > B` | Enfant direct uniquement |
| `A + B` | Frère adjacent (B juste après A) |
| `A ~ B` | Frère général (B après A) |
### Pseudo-classes
| Command | Description |
|---------|-------------|
| `:hover` | Souris sur l'élément |
| `:focus` | L'élément a le focus |
| `:first-child` | Premier enfant du parent |
| `:nth-child(n)` | N-ième enfant (2n = pair, odd = impair) |
## Modèle de boîte
```
.box {
margin: 10px; /* extérieur */
border: 1px solid #333; /* bordure */
padding: 15px; /* intérieur */
width: 200px;
box-sizing: border-box; /* inclure pad+border */
}
```
### Notation abrégée
| Command | Description |
|---------|-------------|
| `margin: 10px` | Tous les côtés |
| `margin: 10px 20px` | Haut/bas \| gauche/droite |
| `margin: 10px 20px 15px` | Haut \| gauche/droite \| bas |
| `margin: 10px 20px 15px 5px` | Haut \| droite \| bas \| gauche |
## Flexbox
### Conteneur
```
.flex-container {
display: flex;
flex-direction: row; /* row | column */
justify-content: center; /* axe principal */
align-items: center; /* axe transversal */
gap: 10px;
flex-wrap: wrap;
}
```
### Propriétés des éléments
| Command | Description |
|---------|-------------|
| `flex: 1` | S'agrandir pour remplir l'espace disponible |
| `flex-grow: 2` | Ratio d'agrandissement par rapport aux frères |
| `flex-shrink: 0` | Ne pas rétrécir sous la base |
| `flex-basis: 200px` | Taille initiale avant agrandissement/rétrécissement |
| `align-self: flex-end` | Remplacer l'alignement du conteneur |
| `order: -1` | Ordre visuel (0 par défaut) |
## Grid
### Conteneur
```
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 10px;
}
```
### Placement des éléments
```
.item {
grid-column: 1 / 3; /* couvrir col 1-2 */
grid-row: 1 / 2;
}
/* abréviation : repeat, minmax */
grid-template-columns: repeat(3, 1fr);
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
```
## Positionnement
| Command | Description |
|---------|-------------|
| `static` | Flux par défaut (pas de propriétés de décalage) |
| `relative` | Décalage par rapport à la position normale |
| `absolute` | Décalage par rapport à l'ancêtre positionné le plus proche |
| `fixed` | Décalage par rapport au viewport (reste au défilement) |
| `sticky` | Relatif jusqu'au seuil de défilement, puis fixe |
### Exemple
```
.parent { position: relative; }
.child {
position: absolute;
top: 0; right: 0; /* coin supérieur droit */
}
```
## Media queries
```
/* Mobile-first : styles de base pour petits écrans */
.container { padding: 10px; }
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; }
}
```
### Points de rupture courants
| Command | Description |
|---------|-------------|
| `480px` | Petits téléphones |
| `768px` | Tablettes |
| `1024px` | Petits ordinateurs de bureau / tablettes en paysage |
| `1280px` | Ordinateurs de bureau |
```
### Listes
```