Scribd
Importer
17 vues37 pages

HTML Et Css (True)

La structure d'un fichier HTML comprend des éléments essentiels tels que <!DOCTYPE html>, <html>, <head>, et <body>, chacun ayant des rôles spécifiques. Les balises sémantiques, comme <header>, <nav>, et <footer>, améliorent l'accessibilité et le référencement, tandis que les attributs fournissent des informations supplémentaires sur les éléments. L'ajout de CSS permet de styliser le contenu, avec des méthodes telles que le CSS inline, interne et externe, chaque méthode ayant ses avantages et inconvénients.

Transféré par

Mionjo Jesse
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
17 vues37 pages

HTML Et Css (True)

La structure d'un fichier HTML comprend des éléments essentiels tels que <!DOCTYPE html>, <html>, <head>, et <body>, chacun ayant des rôles spécifiques. Les balises sémantiques, comme <header>, <nav>, et <footer>, améliorent l'accessibilité et le référencement, tandis que les attributs fournissent des informations supplémentaires sur les éléments. L'ajout de CSS permet de styliser le contenu, avec des méthodes telles que le CSS inline, interne et externe, chaque méthode ayant ses avantages et inconvénients.

Transféré par

Mionjo Jesse
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 37

Structure d'un fichier HTML

La structure de base d'un fichier HTML est simple et suit un modèle standard. Voici un
exemple de la structure minimale d'un fichier HTML :

Explication de chaque partie :

1. <!DOCTYPE html>

o Déclare le type de document. Ici, il s'agit d'un document HTML5.

o Doit être la première ligne du fichier.

2. <html lang="fr">

o La balise <html> est la racine du document.

o L'attribut lang="fr" indique que la langue principale de la page est le


français.

3. <head>

o Contient les métadonnées et les liens vers des ressources externes


(comme les fichiers CSS).

o Ce qui est dans <head> n'est pas affiché sur la page, mais est essentiel
pour le navigateur.
o <meta charset="UTF-8">

▪ Définit l'encodage des caractères (UTF-8 est recommandé pour


prendre en charge tous les caractères spéciaux).

o <meta name="viewport" content="width=device-width, initial-


scale=1.0">

▪ Rend la page responsive en adaptant la largeur de la page à la


largeur de l'écran.

o <title>Titre de la page</title>

▪ Définit le titre de la page, qui apparaît dans l'onglet du navigateur.

o <link rel="stylesheet" href="styles.css">

▪ Lie un fichier CSS externe pour styliser la page.

4. <body>

o Contient tout le contenu visible de la page (texte, images, liens, etc.).

o C'est ici que tu ajoutes les éléments que les utilisateurs verront.

<header>

▪ Section d'en-tête de la page, souvent utilisée pour le logo, le titre et


la navigation.

o <main>

▪ Section principale de la page, où se trouve le contenu central.

o <footer>

▪ Section de pied de page, souvent utilisée pour les informations de


contact, les liens sociaux, etc.

5. Commentaires HTML

o Les commentaires (<!-- ... -->) ne sont pas affichés dans le navigateur,
mais sont utiles pour annoter ton code.
Exemple complet avec des balises courantes :

Points clés à retenir :

• Structure hiérarchique : Les balises sont imbriquées les unes dans les autres
(ex: <body> contient <header>, <main>, etc.).

• Sémantique : Utilise des balises sémantiques (<header>, <main>, <section>,


etc.) pour une meilleure compréhension du contenu.

• Accessibilité : Ajoute des attributs comme alt pour les images et utilise des
balises appropriées pour améliorer l'accessibilité.
1. Titres (<h1> à <h6>)

Les balises de titre sont utilisées pour structurer le contenu en sections hiérarchiques.

2. Paragraphes (<p>)

La balise <p> est utilisée pour afficher du texte en paragraphe.

3. Liens (<a>)

La balise <a> est utilisée pour créer des liens vers d'autres pages ou ressources.

4. Images (<img>)

La balise <img> est utilisée pour insérer des images. L'attribut « src « indique le chemin
de l'image, et « alt » fournit un texte alternatif.

5. Listes (<ul>, <ol>, <li>)

Les listes sont utilisées pour organiser des éléments.

Liste non ordonnée (<ul>)

Liste ordonnée (<ol>)


6. Tableaux (<table>, <tr>, <td>)

Les tableaux sont utilisés pour afficher des données structurées.

7. Formulaires (<form>, <input>, <button>)

Les formulaires permettent de collecter des informations de l'utilisateur.

8. Balises sémantiques (<header>, <section>, <article>, <footer>)

Ces balises aident à structurer le contenu de manière logique.


9. Balises de mise en forme (<strong>, <em>, <br>, <hr>)

Ces balises sont utilisées pour mettre en forme le texte.

10. Balises multimédias (<audio>, <video>)

Ces balises permettent d'intégrer des fichiers audio et vidéo.

Audio

Vidéo

11. Balises de citation (<blockquote>, <cite>)

Ces balises sont utilisées pour citer des sources.

12. Balises de code (<code>, <pre>)

Ces balises sont utilisées pour afficher du code.


Exercice pratique :

Crée une page HTML simple en utilisant toutes ces balises. Par exemple :

- Un titre principal (<h1>)

- Un paragraphe (<p>)

- Une image (<img>)

- Une liste (<ul> ou <ol>)

- Un tableau (<table>)

- Un formulaire (<form>)

- Une section avec des balises sémantiques (<header>, <section>, <footer>)

Les **attributs** en HTML sont utilisés pour fournir des informations supplémentaires
sur les éléments. Ils sont placés à l'intérieur de la balise ouvrante et se présentent sous
la forme `nom="valeur"`. Voici une liste des attributs les plus couramment utilisés,
avec des exemples pour chaque cas.

-1. Attributs généraux

Ces attributs peuvent être utilisés sur presque tous les éléments HTML.

id

- Identifie un élément de manière unique dans la page.

- Utilisé pour le style CSS ou le JavaScript.

class

- Permet de regrouper des éléments pour leur appliquer un style commun en CSS.

- Plusieurs classes peuvent être ajoutées, séparées par des espaces.

style

- Permet d'ajouter des styles CSS directement dans l'élément (inline).


2. Attributs spécifiques aux liens (<a>) et aux images (<img>)

href ( pour <a> )

- Spécifie l'URL vers laquelle le lien pointe.

target ( pour <a> )

- Définit où ouvrir le lien (_blank pour un nouvel onglet)

src ( pour <img> )

- Spécifie le chemin de l'image à afficher.

alt ( pour <img> )

- Fournit un texte alternatif si l'image ne peut pas être affichée (utile pour l'accessibilité).

3. Attributs spécifiques aux formulaires ( <form>, <input>, etc )

action ( pour <form> )

- Spécifie l'URL où les données du formulaire seront envoyées.

method ( pour <form> )

- Définit la méthode HTTP pour envoyer les données ( get ou post )


type ( pour <input> )

- Définit le type de champ de saisie ( text, email, password, etc)

placeholder ( pour <input> )

- Affiche un texte indicatif dans le champ de saisie.

required ( pour <input> )

- Rend le champ obligatoire.

4. Attributs spécifiques aux tableaux ( <table>, <tr>, <td>)

colspan (pour <td> ou <th> )

- Fusionne plusieurs colonnes.

rowspan ( pour <td> ou <th> )

- Fusionne plusieurs lignes.


#5. Attributs multimédias (<audio> , <video> )

controls (pour <audio> et <video> )

- Affiche les contrôles de lecture (play, pause, volume, etc.).

autoplay (pour <audio> et <video> )

- Démarre la lecture automatiquement.

Loop (pour <audio> et <video> )

- Répète la lecture en boucle.

6. Attributs pour l'accessibilité**

aria-label

- Fournit une étiquette accessible pour les éléments sans texte visible.

aria-describedby

- Associe un élément à une description supplémentaire.

7. Attributs pour les métadonnées ( <meta> )

charset

- Définit l'encodage des caractères (généralement UTF-8).

name et content

- Définissent des métadonnées pour le moteur de recherche ou le navigateur.


Exercice pratique :

Crée une page HTML en utilisant plusieurs attributs.

Par exemple :

- Un formulaire avec des champs obligatoires ( required )

- Une image avec un texte alternatif ( alt )

- Un lien qui s'ouvre dans un nouvel onglet ( target="_blank" )

- Un tableau avec des cellules fusionnées ( colspan ou rowspan )

La sémantique

La sémantique en HTML fait référence à l'utilisation de balises qui donnent du sens au


contenu, plutôt que de simplement définir son apparence. Utiliser des balises
sémantiques améliore la lisibilité du code, l'accessibilité pour les utilisateurs (comme
les lecteurs d'écran) et le référencement (SEO). Voici un guide complet sur les balises
sémantiques essentielles et comment les utiliser.

Pourquoi utiliser des balises sémantiques ?

1. Accessibilité : Les lecteurs d'écran utilisent les balises sémantiques pour naviguer
dans le contenu.

2. SEO : Les moteurs de recherche comprennent mieux la structure de la page.

3. Maintenance : Le code est plus facile à lire et à maintenir.

4. Compatibilité : Les balises sémantiques sont supportées par tous les navigateurs
modernes.

Balises sémantiques courantes

1. <header>

- Utilisé pour l'en-tête de la page ou d'une section.

- Contient souvent le logo, le titre et la navigation.


2. <nav>

- Utilisé pour la navigation principale (liens vers d'autres pages ou sections).

3. <main>

- Contient le contenu principal de la page.

- Il ne doit y avoir qu'un seul <main> par page.

4. <section>

- Utilisé pour regrouper du contenu thématique.

- Doit avoir un titre ( <h2> à <h6> )

5. <article>

- Utilisé pour du contenu autonome, comme un article de blog ou un post.

- Peut être réutilisé indépendamment du reste de la page.

6. <aside>

- Utilisé pour du contenu secondaire, comme des barres latérales ou des informations
complémentaires.
7. <footer>

- Utilisé pour le pied de page de la page ou d'une section.

- Contient souvent des informations de contact, des liens sociaux ou des mentions
légales.

8. <figure> et <figcaption>

- Utilisés pour insérer des images, diagrammes ou vidéos avec une légende.

9. <time>

- Utilisé pour indiquer une date ou une heure.

10. <mark>

- Utilisé pour mettre en surbrillance du texte.


Exemple complet d'une page sémantique

Bonnes pratiques pour la sémantique

1. Utilise les balises appropriées : Choisis toujours la balise qui correspond le mieux au
contenu.

2. Évite les <div> et <span> : Utilise-les uniquement lorsque aucune balise sémantique
ne convient.

3. Hiérarchise les titres : Utilise <h1> pour le titre principal, puis <h2> , <h3>, etc, pour
les sous-sections.
4. Accessibilité : Ajoute des attributs comme alt pour les images et aria-* pour
améliorer l'accessibilité.

Exercice pratique :

Crée une page HTML en utilisant les balises sémantiques suivantes :

- <header> pour l'en-tête.

- <nav> pour la navigation.

- <main> pour le contenu principal.

- <section> pour diviser le contenu.

- <article> pour des contenus autonomes.

- <aside> pour des informations complémentaires.

- <footer> pour le pied de page.

CSS
Ajouter du CSS (Cascading Style Sheets) à une page HTML permet de styliser le
contenu, c'est-à-dire de changer les couleurs, les polices, les espacements, les
alignements, etc. Il existe trois méthodes principales pour ajouter du CSS à une page

HTML :

1. CSS inline : Directement dans les balises HTML avec l'attribut `style`.

2. CSS interne : Dans une balise `<style>` dans l'en-tête (`<head>`) du document
HTML.

3. CSS externe: Dans un fichier séparé (`.css`) lié à la page HTML.

1. CSS Inline

Le CSS inline est appliqué directement à un élément HTML en utilisant l'attribut `style`.
Avantages :

- Rapide à écrire pour de petits ajustements.

- Utile pour des styles uniques sur un seul élément.

Inconvénients :

- Difficile à maintenir pour des styles répétitifs.

- Moins performant pour les grandes pages.

2. CSS Interne

Le CSS interne est écrit dans une balise `<style>` placée dans l'en-tête (`<head>`) du
document HTML.

Exemple :

Avantages :

- Facile à gérer pour des styles spécifiques à une seule page.

- Évite de créer des fichiers supplémentaires.

Inconvénients :

- Moins pratique pour des styles réutilisables sur plusieurs pages.

- Peut rendre le fichier HTML plus long et moins lisible.


3. CSS Externe

Le CSS externe est écrit dans un fichier séparé (`.css`) et lié à la page HTML via une
balise `<link>` dans l'en-tête (`<head>`).

Étape 1 : Crée un fichier CSS

Crée un fichier nommé `styles.css` avec le contenu suivant :

Étape 2 : Lie le fichier CSS à la page HTML

Ajoute une balise <link> dans l'en-tête (`<head>`) de ton fichier HTML :

Avantages :

- Réutilisable sur plusieurs pages.

- Facilite la maintenance et la mise à jour des styles.

- Rend le fichier HTML plus propre et plus lisible.

Inconvénients :

- Nécessite un fichier supplémentaire.


4. Méthode recommandée : CSS Externe

Pour des projets de taille moyenne à grande, il est recommandé d'utiliser le CSS externe
pour les raisons suivantes :

- Modularité : Les styles sont séparés du contenu.

- Réutilisabilité : Un seul fichier CSS peut être utilisé pour plusieurs pages.

- Performance : Le fichier CSS peut être mis en cache par le navigateur, ce qui améliore
les temps de chargement.

Exemple complet avec CSS Externe

Fichier HTML (`index.html`) :


Fichier CSS (`styles.css`) :

Exercice pratique :

1. Crée une page HTML simple avec un en-tête, un contenu principal et un pied de
page.

2. Ajoute du CSS en utilisant les trois méthodes (inline, interne, externe) pour voir les
différences.

3. Utilise le CSS externe pour styliser la page avec des couleurs, des polices et des
espacements.
Sélecteurs : Apprends à cibler les éléments avec element, .class, et #id

Les sélecteurs CSS sont utilisés pour cibler des éléments HTML afin de leur appliquer
des styles.

Les trois sélecteurs de base sont :

1. Sélecteur d'élément : Cible tous les éléments d'un type spécifique (ex: `p`, `h1`,
`div`).

2. **Sélecteur de classe** : Cible tous les éléments ayant une classe spécifique (ex:
`.ma-classe`).

3. **Sélecteur d'ID** : Cible un élément unique ayant un ID spécifique (ex: `#mon-id`).

Voici une explication détaillée de chaque sélecteur avec des exemples.

1. Sélecteur d'élément

Cible tous les éléments d'un type spécifique.

Syntaxe :

Exemple :

Cible tous les paragraphes (`<p>`) et change leur couleur en bleu.

Utilisation :
2. Sélecteur de classe

Cible tous les éléments ayant une classe spécifique.

Une classe peut être appliquée à plusieurs éléments.

Syntaxe :

Exemple :

Cible tous les éléments avec la classe `texte-rouge` et change leur couleur en rouge.

Utilisation :

3. Sélecteur d'ID

Cible un élément unique ayant un ID spécifique. Un ID doit être unique dans une page.

Exemple :

Cible l'élément avec l'ID `titre-principal` et change sa couleur en vert.

Utilisation :
Combinaison de sélecteurs

Les sélecteurs peuvent être combinés pour cibler des éléments de manière plus
précise.

Exemple 1 : Cibler un élément avec une classe spécifique

Cible uniquement les paragraphes (`<p>`) ayant la classe `texte-important`.

Exemple 2 : Cibler un enfant spécifique

Cible uniquement les éléments `<li>` qui sont enfants d'une liste non ordonnée

Exemple 3 : Cibler un élément avec plusieurs classes

Cible les éléments ayant à la fois les classes `texte-rouge` et `texte-grand`.

Exemple complet HTML


Exemple complet CSS

Exercice pratique :

1. Crée une page HTML avec plusieurs éléments (`<h1>`, `<p>`, `<ul>`, etc.).

2. Ajoute des classes et des ID à certains éléments.

3. Utilise les sélecteurs CSS pour :

- Changer la couleur de tous les paragraphes.

- Appliquer un style spécifique aux éléments avec une classe.

- Cibler un élément unique avec un ID.

- Combiner des sélecteurs pour des styles plus précis.


Box Model : Comprends comment margin, padding, border, width, et height affectent la
mise en page.

Le Box Model (modèle de boîte) est un concept fondamental en CSS qui décrit comment
les éléments HTML sont structurés et comment leurs dimensions sont calculées.
Chaque élément est considéré comme une boîte composée de quatre parties :

1. Contenu (content): Le contenu de l'élément (texte, image, etc.).

2. Rembourrage (padding) : L'espace entre le contenu et la bordure.

3. Bordure (border) : La bordure autour du padding.

4. Marge (margin): L'espace entre la bordure et les autres éléments.

Voici une explication détaillée de chaque composant et comment ils affectent la mise
en page.

---

1. Contenu (content)

Le contenu est la zone où le texte, les images ou d'autres éléments sont affichés. Sa
taille est définie par les propriétés `width` (largeur) et `height` (hauteur).

Exemple :

Résultat :

- Une boîte de 200px de large et 100px de haut avec un fond bleu clair.

---

2. Rembourrage (padding)

Le padding est l'espace entre le contenu et la bordure. Il augmente la taille interne de la


boîte.

Exemple :
Résultat :

- Le contenu reste à 200px de large et 100px de haut, mais la boîte totale (contenu +
padding) devient 240px de large (200 + 20 à gauche + 20 à droite) et 140px de haut (100 +
20 en haut + 20 en bas).

3. Bordure (border)

La bordure entoure le padding et le contenu. Elle a une épaisseur, un style et une


couleur.

Exemple :

Résultat :

- La boîte totale inclut maintenant la bordure : 250px de large (200 + 20 + 20 + 5 + 5) et


150px de haut (100 + 20 + 20 + 5 + 5).

4. Marge (margin)

La marge est l'espace entre la bordure et les autres éléments. Elle n'affecte pas la taille
de la boîte elle-même, mais l'espace autour d'elle.

Exemple :

Résultat :

Représentation visuelle du Box Model

- La boîte a une marge de 30px autour d'elle, ce qui la sépare des autres éléments.
Propriétés CSS associées

1. width et height

- Définissent la largeur et la hauteur du contenu.

- Exemple : width: 200px; height: 100px;

2. padding

- Définit l'espace entre le contenu et la bordure.

- Peut être spécifié pour chaque côté (haut, droite, bas, gauche) ou en une seule
déclaration.

- Exemple : padding: 20px; (identique sur les 4 côtés) ou padding: 10px 20px 30px 40px;
(haut, droite, bas, gauche).

3. border

- Définit la bordure autour du padding.

- Syntaxe : border: width style color;

- Exemple : border: 5px solid black;

4. margin

- Définit l'espace entre la bordure et les autres éléments.

- Fonctionne comme `padding` pour les côtés.

- Exemple : margin: 30px; ou margin: 10px 20px 30px 40px;

Exemple complet
Fichier CSS (`styles.css`) :

Calcul de la taille totale d'un élément

La taille totale d'un élément est calculée comme suit :

- Largeur totale = `width` + `padding-left` + `padding-right` + `border-left` + `border-


right` + `margin-left` + `margin-right`

- Hauteur totale = `height` + `padding-top` + `padding-bottom` + `border-top` +


`border-bottom` + `margin-top` + `margin-bottom`

Exemple :

Pour l'élément `.boite` ci-dessus :

- Largeur totale = 200 + 20 + 20 + 5 + 5 + 30 + 30 = 310px

- Hauteur totale = 100 + 20 + 20 + 5 + 5 + 30 + 30 = 210px

Propriété `box-sizing`

Par défaut, le `width` et le `height` ne prennent en compte que le contenu. Pour


inclure le padding et la bordure dans le calcul, utilisez `box-sizing: border-box;`.

Exemple :

Résultat :

- La largeur et la hauteur incluent maintenant le padding et la bordure.

- Largeur totale = 200px (au lieu de 310px).

- Hauteur totale = 100px (au lieu de 210px).


Exercice pratique :

1. Crée une page HTML avec plusieurs éléments `<div>`.

2. Applique des styles pour explorer les effets de `width`, `height`, `padding`,
`border`, et `margin`.

3. Expérimente avec `box-sizing: border-box` pour voir comment cela affecte la taille
des éléments.

Couleurs et typographie :

Utilise color, background-color, font-size, font-family, et text-align.

Les propriétés CSS liées aux **couleurs** et à la **typographie** sont essentielles pour
personnaliser l'apparence de ton texte et de tes éléments. Voici une explication
détaillée des propriétés les plus couramment utilisées, avec des exemples pour chaque
cas.

1. Couleur du texte (`color`)

La propriété `color` définit la couleur du texte.

Syntaxe :

Valeurs possibles :

- Noms de couleurs : `red`, `blue`, `green`, etc.

- Code hexadécimal : `#FF0000` (rouge), `#00FF00` (vert), etc.

- RGB/RGBA : `rgb(255, 0, 0)` (rouge), `rgba(255, 0, 0, 0.5)` (rouge semi-transparent).

- HSL/HSLA : `hsl(0, 100%, 50%)` (rouge), `hsla(0, 100%, 50%, 0.5)` (rouge semi-
transparent).

Exemple :

2. Couleur de fond (`background-color`)**

La propriété `background-color` définit la couleur de fond d'un élément.

Syntaxe :
Valeurs possibles :

- Identiques à `color` (noms, hexadécimal, RGB, RGBA, HSL, HSLA).

Exemple :

3. Taille de la police (`font-size`)

La propriété `font-size` définit la taille du texte.

Syntaxe :

Valeurs possibles :

- Unités absolues : `px` (pixels), `pt` (points).

- Unités relatives: `em`, `rem`, `%`.

- Mots-clés : `small`, `medium`, `large`, etc.

Exemple :

4. Famille de polices (`font-family`)

La propriété `font-family` définit la police de caractères à utiliser.

Syntaxe :

Valeurs possibles :

- Noms de polices : `Arial`, `Times New Roman`, `Georgia`, etc.

- Familles génériques : `serif`, `sans-serif`, `monospace`, etc.

Exemple :
5. Alignement du texte (`text-align`)

La propriété `text-align` définit l'alignement horizontal du texte.

Syntaxe :

Valeurs possibles :

- `left` : Alignement à gauche (par défaut).

- `right` : Alignement à droite.

- `center` : Centré.

- `justify` : Justifié (étire le texte pour remplir la ligne).

Exemple :

Exemple complet

Fichier HTML :
Fichier CSS (`styles.css`) :

Exercice pratique :

1. Crée une page HTML avec un en-tête, un contenu principal et un pied de page.

2. Utilise les propriétés suivantes pour styliser la page :

- `color` pour changer la couleur du texte.

- `background-color` pour définir les couleurs de fond.

- `font-size` pour ajuster la taille du texte.

- `font-family` pour choisir des polices.

- `text-align` pour aligner le texte.

3. Expérimente avec différentes valeurs pour voir leurs effets.


Display et positionnement : Expérimente avec block, inline, flex, grid, relative, et
absolute.

Les propriétés **`display`** et **`position`** en CSS sont essentielles pour contrôler


la mise en page et le positionnement des éléments sur une page web. Voici une
explication détaillée de chaque concept, avec des exemples pour t'aider à les
expérimenter.

1. Propriété `display`

La propriété `display` définit comment un élément est affiché dans le flux du


document.

Valeurs courantes :

1. block:

- L'élément occupe toute la largeur disponible et commence sur une nouvelle ligne.

- Exemples : `<div>`, `<p>`, `<h1>` à `<h6>`

2. inline :

- L'élément occupe seulement l'espace nécessaire et ne commence pas sur une


nouvelle ligne.

- Exemples : `<span>`, `<a>`, `<strong>`.

3. inline-block :

- Combine les caractéristiques de `block` et `inline`. L'élément occupe seulement


l'espace nécessaire, mais on peut lui appliquer des propriétés de bloc comme `width`,
`height`, `padding`, etc.
4. flex :

- Active le modèle de boîte flexible (Flexbox), qui permet de créer des layouts flexibles
et réactifs.

- Les éléments enfants deviennent des "flex items".

5. grid:

- Active le modèle de grille (CSS Grid), qui permet de créer des layouts en grille
complexes.

- Les éléments enfants deviennent des "grid items".

2. Propriété `position`

La propriété `position` définit comment un élément est positionné dans le document.

Valeurs courantes :

1. static (par défaut) :

- L'élément est positionné dans le flux normal du document.

- Les propriétés `top`, `right`, `bottom`, et `left` n'ont aucun effet.

2. relative :

- L'élément est positionné relativement à sa position normale dans le flux.

- Les propriétés `top`, `right`, `bottom`, et `left` déplacent l'élément par rapport à
sa position d'origine.
3. absolute:

- L'élément est positionné relativement à son premier ancêtre positionné (c'est-à-dire


un ancêtre avec `position` différente de `static`).

- Si aucun ancêtre n'est positionné, il est relatif au conteneur initial (généralement la


fenêtre du navigateur).

4. fixed :

- L'élément est positionné relativement à la fenêtre du navigateur.

- Il reste fixe même lors du défilement de la page.

5. sticky :

- L'élément est positionné de manière relative jusqu'à ce qu'il atteigne un certain point
de défilement, puis il devient fixe.
Exemple complet

Fichier HTML :
Fichier CSS (`styles.css`) :
Exercice pratique :

1. Crée une page HTML avec plusieurs éléments (`<div>`, `<span>`, etc.).

2. Expérimente avec les différentes valeurs de `display` (`block`, `inline`, `inline-


block`, `flex`, `grid`).

3. Ajoute des éléments avec des positions différentes (`relative`, `absolute`, `fixed`,
`sticky`).

4. Observe comment les éléments se comportent dans le flux du document.

Vous aimerez peut-être aussi