Structure HTML
Hello World
Éléments courants
Texte et titres
Heading 1
...Heading 6
Paragraph text
Bold ItalicLiens et images
Listes
- Item
- First
Formulaires
Types de champs
Select et Textarea
HTML sémantique
| <header> | Contenu d'introduction ou conteneur de navigation |
| <nav> | Liens de navigation |
| <main> | Contenu principal de la page (un seul par page) |
| <section> | Regroupement thématique de contenu |
| <article> | Contenu autonome |
| <aside> | Barre latérale ou contenu tangentiel |
| <footer> | Pied de page d'une section ou de la page |
| <figure> | Image ou diagramme avec légende |
| <figcaption> | Légende pour |
Sélecteurs CSS
Sélecteurs de base
| 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
| 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
| :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
| 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
| 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
| 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
| 480px | Petits téléphones |
| 768px | Tablettes |
| 1024px | Petits ordinateurs de bureau / tablettes en paysage |
| 1280px | Ordinateurs de bureau |