Balises essentielles, propriétés et concepts clés
| Balise | Type | Description | Attributs clés |
|---|---|---|---|
| <!DOCTYPE html> | — | Déclare le type de document HTML5 | — |
| <html> | block | Racine du document | lang |
| <head> | — | Métadonnées, non affiché | — |
| <meta> | — | Métadonnées (charset, viewport…) | charset, name, content, viewport |
| <title> | — | Titre affiché dans l'onglet | — |
| <link> | — | Lie une ressource externe (CSS…) | rel, href |
| <script> | — | JavaScript inline ou externe | src, defer, async |
| <body> | block | Contenu visible de la page | — |
| Balise | Type | Description | Attributs clés |
|---|---|---|---|
| <header> | block | En-tête de page ou de section | — |
| <footer> | block | Pied de page ou de section | — |
| <nav> | block | Zone de navigation / liens | — |
| <main> | block | Contenu principal (unique par page) | — |
| <section> | block | Section thématique avec titre | id |
| <article> | block | Contenu autonome (post, carte…) | — |
| <aside> | block | Contenu secondaire / barre latérale | — |
| <div> | block | Conteneur générique (pas sémantique) | id, class |
| <span> | inline | Conteneur inline générique | class |
| Balise | Type | Description | Notes |
|---|---|---|---|
| <h1> … <h6> | block | Titres, du plus grand au plus petit | 1 seul h1 par page |
| <p> | block | Paragraphe | — |
| <strong> | inline | Texte important (gras sémantique) | ≠ b (juste visuel) |
| <em> | inline | Emphase (italique sémantique) | ≠ i |
| <br> | inline | Saut de ligne | Balise vide |
| <hr> | block | Séparateur horizontal | Balise vide |
| <pre> | block | Texte préformaté (espaces conservés) | Font monospace par défaut |
| <code> | inline | Fragment de code | Souvent dans pre |
| <cite> | inline | Titre d'une œuvre citée | Italique par défaut |
| <blockquote> | block | Citation longue | cite (URL source) |
| Balise | Type | Description | Attributs clés |
|---|---|---|---|
| <a> | inline | Lien hypertexte | href, target (_blank), rel |
| <img> | inline | Image | src, alt (obligatoire), width, height |
| <video> | block | Vidéo | src, controls, autoplay, loop, muted |
| <audio> | inline | Audio | src, controls |
| <figure> | block | Contenu illustratif (image + légende) | — |
| <figcaption> | block | Légende d'une figure | Dans figure |
| Balise | Type | Description | Notes |
|---|---|---|---|
| <ul> | block | Liste non ordonnée (puces) | Contient des li |
| <ol> | block | Liste ordonnée (numéros) | type, start, reversed |
| <li> | block | Élément de liste | Dans ul ou ol |
| <dl> / <dt> / <dd> | block | Liste de définitions (terme / def) | — |
| Balise | Description | Attributs clés |
|---|---|---|
| <table> | Conteneur du tableau | — |
| <caption> | Titre/légende du tableau | — |
| <thead> | En-tête du tableau | — |
| <tbody> | Corps du tableau | — |
| <tfoot> | Pied du tableau | — |
| <tr> | Ligne de tableau | — |
| <th> | Cellule d'en-tête (gras, centré) | colspan, rowspan, scope |
| <td> | Cellule de données | colspan, rowspan |
| Balise | Type | Description | Attributs clés |
|---|---|---|---|
| <form> | block | Formulaire | action, method (get/post) |
| <input> | inline | Champ de saisie | type, name, value, placeholder, required |
| <label> | inline | Étiquette d'un champ | for (= id de l'input) |
| <textarea> | inline | Zone de texte multiligne | rows, cols, name |
| <select> / <option> | inline | Liste déroulante | name, value, selected |
| <button> | inline | Bouton | type (submit/reset/button) |
| <fieldset> / <legend> | block | Groupe de champs avec titre | — |
| Sélecteur | Description | Exemple |
|---|---|---|
| balise | Toutes les balises de ce type | p { } |
| .classe | Éléments avec cette classe | .card { } |
| #id | Élément avec cet identifiant (unique) | #nav { } |
| A, B | A et B (groupement) | h1, h2 { } |
| A B | B descendant de A | nav a { } |
| A > B | B enfant direct de A | ul > li { } |
| A + B | B immédiatement après A | h1 + p { } |
| A ~ B | Tous les B frères après A | h2 ~ p { } |
| :hover | Au survol de la souris | a:hover { } |
| :focus | Élément actif (focus clavier/souris) | input:focus { } |
| :nth-child(n) | Le n-ème enfant | li:nth-child(2) { } |
| :first-child / :last-child | Premier / dernier enfant | li:first-child { } |
| :not(x) | Tout sauf x | p:not(.note) { } |
| ::before / ::after | Pseudo-élément avant/après le contenu | p::before { content: '»' } |
| [attr] | Élément ayant cet attribut | input[required] { } |
| Propriété | Description | Valeurs courantes |
|---|---|---|
| width / height | Largeur / hauteur | px, %, em, rem, auto, 100vw |
| min/max-width/height | Bornes min/max | min-width: 300px |
| padding | Marge interne (entre contenu et bordure) | 1rem (tous) | 1rem 2rem (haut/bas gauche/droite) |
| margin | Marge externe (autour de l'élément) | auto pour centrer horizontalement |
| border | Bordure | 1px solid red | 2px dashed #000 |
| border-radius | Coins arrondis | 8px, 50% (cercle) |
| box-sizing | Inclure padding+border dans width/height | border-box (recommandé) | content-box |
| box-shadow | Ombre portée | 2px 2px 8px rgba(0,0,0,0.3) |
| overflow | Contenu dépassant la boîte | visible | hidden | scroll | auto |
| Propriété | Description | Valeurs |
|---|---|---|
| display | Type d'affichage | block | inline | inline-block | flex | grid | none |
| position | Mode de positionnement | static | relative | absolute | fixed | sticky |
| top / right / bottom / left | Décalage (avec position ≠ static) | px, % |
| z-index | Ordre d'empilement (plus grand = devant) | Entier (ex: 10) |
| float | Élément flottant (ancien layout) | left | right | none |
| clear | Empêche les flottants adjacents | both | left | right |
| visibility | Visible ou invisible (garde la place) | visible | hidden |
| opacity | Transparence (0 = invisible, 1 = opaque) | 0 à 1 |
| Propriété | S'applique à | Description | Valeurs |
|---|---|---|---|
| display: flex | conteneur | Active flexbox | — |
| flex-direction | conteneur | Axe principal | row | column | row-reverse | column-reverse |
| flex-wrap | conteneur | Retour à la ligne si débordement | nowrap | wrap | wrap-reverse |
| justify-content | conteneur | Alignement sur l'axe principal | flex-start | center | flex-end | space-between | space-around |
| align-items | conteneur | Alignement sur l'axe secondaire | stretch | center | flex-start | flex-end | baseline |
| align-content | conteneur | Alignement des lignes (si wrap) | Mêmes valeurs que justify-content |
| gap | conteneur | Espace entre les enfants | 1rem | 1rem 2rem |
| flex | enfant | Raccourci grow / shrink / basis | 1 | 0 0 200px |
| flex-grow | enfant | Facteur d'agrandissement | 0 (pas de croissance) | 1 |
| flex-shrink | enfant | Facteur de rétrécissement | 1 (défaut) | 0 (ne rétrécit pas) |
| flex-basis | enfant | Taille initiale avant grow/shrink | auto, 200px |
| order | enfant | Ordre d'affichage (défaut 0) | Entier |
| align-self | enfant | Override align-items pour cet enfant | Mêmes valeurs que align-items |
| Propriété | S'applique à | Description | Exemple |
|---|---|---|---|
| display: grid | conteneur | Active la grille | — |
| grid-template-columns | conteneur | Définit les colonnes | repeat(3, 1fr) | 200px auto |
| grid-template-rows | conteneur | Définit les lignes | 100px auto |
| grid-template-areas | conteneur | Nommage visuel des zones | "header header" "sidebar main" |
| gap / column-gap / row-gap | conteneur | Espacement entre cellules | 1rem |
| grid-column | enfant | Colonnes occupées | 1 / 3 | span 2 |
| grid-row | enfant | Lignes occupées | 2 / 4 |
| grid-area | enfant | Nom de zone (avec template-areas) | header |
| justify-items / align-items | conteneur | Alignement des cellules | center | stretch |
| fr | — | Unité fractionnaire (part de l'espace restant) | 1fr 2fr = 1/3 et 2/3 |
| minmax(min, max) | — | Taille entre min et max | minmax(100px, 1fr) |
| auto-fill / auto-fit | — | Colonnes automatiques selon l'espace | repeat(auto-fill, minmax(200px, 1fr)) |
| Propriété | Description | Valeurs courantes |
|---|---|---|
| font-family | Police | Verdana, sans-serif | 'Georgia', serif |
| font-size | Taille de police | 16px, 1rem, 1.2em, 120% |
| font-weight | Graisse | normal | bold | 100–900 |
| font-style | Style | normal | italic | oblique |
| line-height | Hauteur de ligne (interligne) | 1.5 (sans unité recommandé) |
| text-align | Alignement horizontal du texte | left | right | center | justify |
| text-decoration | Décoration du texte | none | underline | line-through |
| text-transform | Casse du texte | uppercase | lowercase | capitalize |
| letter-spacing | Espacement entre lettres | 0.1em |
| white-space | Gestion des espaces/retours ligne | normal | nowrap | pre |
| Propriété | Description | Valeurs |
|---|---|---|
| color | Couleur du texte | red | #ff0000 | rgb(255,0,0) | hsl(0,100%,50%) |
| background-color | Couleur de fond | Mêmes formats + transparent |
| background-image | Image de fond ou dégradé | url('img.png') | linear-gradient(...) |
| background-repeat | Répétition de l'image de fond | repeat | no-repeat | repeat-x |
| background-size | Taille de l'image de fond | cover | contain | 100px |
| background-position | Position de l'image de fond | center | top left | 50% 50% |
| linear-gradient | Dégradé linéaire | linear-gradient(to right, red, blue) |
| rgba(r,g,b,a) | Couleur avec transparence | rgba(0, 0, 0, 0.5) = noir à 50% |
| Propriété | Description | Exemple |
|---|---|---|
| transition | Transition animée entre deux états | all 0.3s ease | color 0.2s linear |
| transition-property | Quelle propriété animer | color, transform, all |
| transition-duration | Durée | 0.3s, 500ms |
| transition-timing-function | Courbe de vitesse | ease | linear | ease-in-out | cubic-bezier(...) |
| animation | Animation complexe (raccourci) | spin 1s linear infinite |
| @keyframes | Définit les étapes d'une animation | @keyframes spin { from { ... } to { ... } } |
| animation-delay | Délai avant le début | 0.5s |
| animation-iteration-count | Nombre de répétitions | 1 | infinite |
| animation-fill-mode | État de l'élément avant/après animation | forwards | backwards | both |
| transform | Transformations géométriques | rotate(45deg) | scale(1.2) | translateX(10px) |
| Concept | Description | Exemple |
|---|---|---|
| --nom-variable | Déclaration d'une variable (custom property) | :root { --couleur: #7c6af7; } |
| var(--nom) | Utilisation d'une variable | color: var(--couleur); |
| var(--nom, fallback) | Valeur de repli si variable non définie | color: var(--couleur, black); |
| :root | Sélecteur racine (portée globale pour les variables) | :root { --font-size: 16px; } |
| Syntaxe | Description | Exemple |
|---|---|---|
| @media | Applique du CSS selon les conditions | @media (max-width: 768px) { ... } |
| max-width | Écran plus petit que X (mobile-first inversé) | @media (max-width: 600px) |
| min-width | Écran plus grand que X (mobile-first) | @media (min-width: 1024px) |
| orientation | Portrait ou paysage | @media (orientation: landscape) |
| prefers-color-scheme | Thème système clair/sombre | @media (prefers-color-scheme: dark) |
| and / or / not | Combiner les conditions | @media (min-width: 600px) and (max-width: 1024px) |
| Breakpoints courants | — | Mobile <600px | Tablette 600–1024px | Desktop >1024px |
| Propriété | Description | Valeurs |
|---|---|---|
| border-collapse | Fusion des bordures de cellules | collapse | separate |
| border-spacing | Espace entre cellules (si separate) | 4px |
| caption-side | Position de la légende | top | bottom |
| vertical-align | Alignement vertical du contenu cellule | top | middle | bottom |
| empty-cells | Affichage des cellules vides | show | hide |
| Propriété / Concept | Description | Exemple |
|---|---|---|
| cursor | Apparence du curseur | pointer | default | text | not-allowed |
| outline | Contour hors du box model (focus) | none | 2px solid blue |
| list-style | Style des puces | none | disc | decimal |
| content | Contenu inséré (::before / ::after) | content: '→' | content: '' |
| calc() | Calcul CSS dynamique | width: calc(100% - 2rem) |
| object-fit | Recadrage d'image dans un conteneur | cover | contain | fill |
| pointer-events | Réagit (ou non) aux événements souris | none | auto |
| user-select | Autoriser la sélection du texte | none | auto |