diff options
| author | Carolyn Wu <87150472+cw118@users.noreply.github.com> | 2021-12-31 07:37:26 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-12-31 13:37:26 +0100 |
| commit | aa35241c8f1ced44fa7fdca7d6bbd2ca4d8ab188 (patch) | |
| tree | 80ef88ddb7e2bb2d7a07487fbc57dc276d0c578b | |
| parent | 5cd5978ecc54b47833d75caaf4184ac6fe7afadc (diff) | |
| download | translated-content-aa35241c8f1ced44fa7fdca7d6bbd2ca4d8ab188.tar.gz translated-content-aa35241c8f1ced44fa7fdca7d6bbd2ca4d8ab188.tar.bz2 translated-content-aa35241c8f1ced44fa7fdca7d6bbd2ca4d8ab188.zip | |
Revise some fr CSS pages (#3472)
* Clean up some fr CSS pages
* More fixes, update another file
* Really minor typofixes
Co-authored-by: julieng <julien.gattelier@gmail.com>
| -rw-r--r-- | files/fr/learn/css/first_steps/how_css_works/index.md | 96 | ||||
| -rw-r--r-- | files/fr/learn/css/first_steps/what_is_css/index.md | 72 | ||||
| -rw-r--r-- | files/fr/learn/css/styling_text/styling_lists/index.md | 214 |
3 files changed, 193 insertions, 189 deletions
diff --git a/files/fr/learn/css/first_steps/how_css_works/index.md b/files/fr/learn/css/first_steps/how_css_works/index.md index f9e7ce2fd6..046e38db21 100644 --- a/files/fr/learn/css/first_steps/how_css_works/index.md +++ b/files/fr/learn/css/first_steps/how_css_works/index.md @@ -3,15 +3,14 @@ title: CSS, comment ça marche ? slug: Learn/CSS/First_steps/How_CSS_works translation_of: Learn/CSS/First_steps/How_CSS_works --- -{{LearnSidebar}} -{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}} -Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web. +Jusqu'ici, nous avons appris les bases du CSS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Notions de base en l'informatique, <a @@ -20,14 +19,14 @@ Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire >, <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" >savoir manipuler des fichiers</a - >, connaissance de base de HTML (cf. <a + >, connaissance de base de HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" - >Introduction à HTML</a + >Introduction au HTML</a >.) </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Comprendre, à un niveau élémentaire, comment un navigateur traite les codes CSS et HTML et ce qui se passe quand le navigateur rencontre du @@ -37,34 +36,34 @@ Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire </tbody> </table> -## CSS comment ça marche, en fait ? +## CSS : comment ça marche, en fait ? -Pour afficher un document, un navigateur doit combiner le contenu du document et les informations de mise en forme. Le traitement se fait en plusieurs phases que nous détaillons ci-dessous. Gardez à l'esprit que cette description est simplifiée, selon le modèle du navigateur, les étapes pourraient changer. Mais dans les grandes lignes, voilà ce qui se passe : +Pour afficher un document, un navigateur doit combiner le contenu du document et les informations de mise en forme. Le traitement se fait en plusieurs phases que nous détaillons ci-dessous. Gardez à l'esprit que cette description est simplifiée, selon le modèle du navigateur, les étapes pourraient changer. Mais dans les grandes lignes, voilà ce qui se passe : -1. Le navigateur charge le HTML (par ex. il le reçoit à travers le réseau). -2. Il traduit le {{Glossary("HTML")}} en un {{Glossary("DOM")}} (_Document Object Model_) : une représentation du document HTML stockable en mémoire sur votre ordinateur. Nous expliquons le DOM plus en détails dans la prochaine section. -3. Le navigateur récupère ensuite la plupart des ressources attachées au document HTML, telles les images, les vidéos ajoutées à la page... et la feuille CSS externe ! JavaScript est traité un peu plus tard et nous n'en parlerons pas ici pour simplifier la présentation. -4. Le navigateur *parse* le CSS, classe les différentes règles par types de sélecteur (par ex. élément, class, ID, etc...) dans des "buckets". En fonction des sélecteurs trouvés, le navigateur calcule quelle règle s'applique à quel nœud du DOM. Chaque nœud du DOM ciblé par CSS est étiqueté par sa règle de style. L'arbre ainsi obtenu s'appelle l'_arbre de rendu_ (render tree). -5. Pour chaque nœud de l'arbre de rendu, le navigateur calcule l'effet visuel de la règle CSS associée. -6. Le visuel ainsi produit est affiché à l'écran (cette étape s'appelle _painting_). +1. Le navigateur charge le HTML (par exemple, il le reçoit à travers le réseau). +2. Il traduit le [HTML](/fr/docs/Glossary/HTML) en un [DOM](/fr/docs/Glossary/DOM) (_Document Object Model_) : une représentation du document HTML stockable en mémoire sur votre ordinateur. Nous expliquons le DOM plus en détails dans la prochaine section. +3. Le navigateur récupère ensuite la plupart des ressources attachées au document HTML, telles les images, les vidéos ajoutées à la page… et la feuille CSS externe ! JavaScript est traité un peu plus tard et nous n'en parlerons pas ici pour simplifier la présentation. +4. Le navigateur *parse* le CSS, classe les différentes règles par types de sélecteur (par exemple, élément, classe, ID, etc.) dans des « _buckets_ ». En fonction des sélecteurs trouvés, le navigateur calcule quelle règle s'applique à quel nœud du DOM. Chaque nœud du DOM ciblé par CSS est étiqueté par sa règle de style. L'arbre ainsi obtenu s'appelle l'arbre de rendu (<i lang="en">render tree</i>). +5. Pour chaque nœud de l'arbre de rendu, le navigateur calcule l'effet visuel de la règle CSS associée. +6. Le visuel ainsi produit est affiché à l'écran (cette étape s'appelle « _painting_ »). Le diagramme suivant propose une vue synthétique de ce traitement.  -## À propos du DOM +## À propos du DOM -Tout DOM a une structure d'arbre. Chaque élément, attribut, bout de texte du langage de balises est traduit en un {{Glossary("Node/DOM","nœud du DOM")}} dans la structure en arbre. Les nœuds sont définis par leurs relations à d'autres nœuds du DOM. Certains éléments sont les _parents_ de _nœuds enfants_ (child nodes) et les nœuds enfants peuvent avoir des *frères et sœurs* (siblings). +Tout DOM a une structure d'arbre. Chaque élément, attribut et bout de texte du langage de balises est traduit en un [nœud du DOM](/fr/docs/Glossary/Node/DOM) dans la structure en arbre. Les nœuds sont définis par leurs relations à d'autres nœuds du DOM. Certains éléments sont les parents de nœuds enfants (<i lang="en">child nodes</i>) et les nœuds enfants peuvent avoir des frères et sœurs (<i lang="en">siblings</i>). -Comprendre le DOM vous aidera à concevoir, débugguer et maintenir votre CSS car le DOM est le point de jonction entre CSS et le contenu HTML du document. +Comprendre le DOM vous aidera à concevoir, déboguer et maintenir votre CSS, car le DOM est le point de jonction entre CSS et le contenu HTML du document. -Avec les DevTools de votre navigateur vous pourrez naviguer à travers le DOM en sélectionnant les items pour les inspecter et voir quelles règles s'appliquent sur eux. +Avec les DevTools de votre navigateur, vous pourrez naviguer à travers le DOM en sélectionnant les éléments pour les inspecter et voir quelles règles s'appliquent sur eux. ## Une représentation concrète du DOM -Plutôt qu'une explication longue et ennuyeuse, regardons comment un fragment de code HTML est converti en un DOM. +Plutôt qu'une explication longue et ennuyeuse, regardons comment un fragment de code HTML est converti en un DOM. -Partons du code ci-dessous : +Partons du code ci-dessous : ```html <p> @@ -75,7 +74,7 @@ Partons du code ci-dessous : </p> ``` -Dans le DOM, le nœud correspondant à l'élément `<p>` est un parent. Ses enfants sont le nœud texte et trois nœuds associés aux éléments `<span>`. Les nœuds `SPAN` sont eux-mêmes parents, avec pour enfant le nœud associé à leur texte : +Dans le DOM, le nœud correspondant à l'élément `<p>` est un parent. Ses enfants sont le nœud texte et les trois nœuds associés aux éléments `<span>`. Les nœuds `SPAN` sont eux-mêmes parents, avec pour enfant le nœud associé à leur texte : P ├─ "Let's use:" @@ -86,9 +85,9 @@ Dans le DOM, le nœud correspondant à l'élément `<p>` est un parent. Ses └─ SPAN └─ "Sheets" -C'est ainsi que le navigateur interprète notre fragment HTML—il transforme ce DOM en arbre de rendu puis affiche le résultat comme suit : +C'est ainsi que le navigateur interprète notre fragment HTML — il transforme ce DOM en arbre de rendu puis affiche le résultat comme suit : -{{EmbedLiveSample('Une_représentation_concrète_du_DOM', '100%', 55)}} +{{EmbedLiveSample('', '100%', 55)}} ```css hidden p {margin:0;} @@ -96,7 +95,7 @@ p {margin:0;} ## Appliquer CSS au DOM -Supposons maintenant que nous avons ajouté du CSS à notre document pour le mettre en forme. Le HTML n'a pas changé : +Supposons maintenant que nous avons ajouté du CSS à notre document pour le mettre en forme. Le HTML n'a pas changé : ```html <p> @@ -107,7 +106,7 @@ Supposons maintenant que nous avons ajouté du CSS à notre document pour le met </p> ``` -On lui applique le CSS suivant : +On lui applique le CSS suivant : ```css span { @@ -116,56 +115,63 @@ span { } ``` -Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Notre CSS a une unique règle avec un unique sélecteur `span`, ça va être rapide à trier ! La règle est attachée à chaque nœud SPAN du DOM pour obtenir l'arbre de rendu. Reste à calculer les rendus puis à *peindre* la représentation visuelle finale à l'écran. +Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Puisque notre CSS a une unique règle avec un unique sélecteur `span`, ça va être rapide à trier ! La règle est attachée à chaque nœud `SPAN` du DOM pour obtenir l'arbre de rendu. Reste à calculer les rendus puis à peindre (<i lang="en">paint</i>) la représentation visuelle finale à l'écran. -Voilà le résultat après mise à jour : +Voilà le résultat après mise à jour : -{{EmbedLiveSample('Appliquer_CSS_au_DOM', '100%', 55)}} +{{EmbedLiveSample('', '100%', 55)}} -Dans le prochain module, dans l'article [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS), nous utiliserons les DevTools du navigateur pour débuguer des erreurs CSS. Ce sera aussi l'occasion de mieux comprendre comment le navigateur interprète CSS. +Dans le prochain module, dans l'article [Débogage de CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS), nous utiliserons les DevTools du navigateur pour déboguer des erreurs CSS. Ce sera aussi l'occasion de mieux comprendre comment le navigateur interprète CSS. -## Que se passe-t-il quand un navigateur rencontre du CSS qu'il ne comprend pas ? +## Que se passe-t-il quand un navigateur rencontre du CSS qu'il ne comprend pas ? -Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle, j'avais mentionné ce fait [dans une leçon précédente](/fr/docs/Learn/CSS/First_steps/What_is_CSS#prise_en_charge_par_les_navigateurs). Rajoutez à cela le fait que trop de gens n'utilisent pas une version à jour de leur navigateur. CSS, lui, est en développement constant et donc toujours en avance par rapport à ce que les navigateurs peuvent implémenter. On doit donc se demander ce qui se passe quand un navigateur tombe sur un sélecteur ou une déclaration qu'il ne sait pas interpréter. +Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle — j'avais mentionné ce fait [dans une leçon précédente](/fr/docs/Learn/CSS/First_steps/What_is_CSS#prise_en_charge_par_les_navigateurs). Rajoutez à cela le fait que trop de gens n'utilisent pas une version à jour de leur navigateur. CSS, lui, est en développement constant et donc toujours en avance par rapport à ce que les navigateurs peuvent implémenter. On doit donc se demander ce qui se passe quand un navigateur tombe sur un sélecteur ou une déclaration qu'il ne sait pas interpréter. -La réponse : ne rien faire et passer à la suite ! +La réponse : ne rien faire et passer à la suite ! Quand un navigateur parse vos règles et rencontre une propriété ou une valeur qu'il ne comprend pas, il l'ignore et passe à la déclaration suivante. Cela se produit si vous avez mal orthographié le nom de la propriété ou de la valeur, ou s'ils sont trop nouveaux et pas encore pris en charge par le navigateur. De même quand le navigateur rencontre un sélecteur qu'il ne sait pas interpréter, il ignore la règle correspondante et passe à la suivante. -Dans l'exemple ci-dessous, j'ai utilisé l'orthographe anglaise `colour` pour le mot *couleur.* Cela contredit la convention CSS et rend ce code incompréhensible pour le navigateur. En conséquence, le paragraphe n'a pas été colorié en bleu. Par contre, tout le reste du CSS est appliqué, seule la ligne invalide est ignorée. +Dans l'exemple ci-dessous, j'ai utilisé l'orthographe anglaise `colour` pour le mot *couleur.* Cela contredit la convention CSS et rend ce code incompréhensible pour le navigateur. En conséquence, le paragraphe n'a pas été colorié en bleu. Par contre, tout le reste du CSS est appliqué ; seule la ligne invalide est ignorée. ```html -<p> Je veux que ce texte soit grand, gras et bleu.</p> +<p>Je veux que ce texte soit grand, gras et bleu.</p> ``` ```css p { font-weight: bold; - colour: blue; /* incorrect spelling of the color property */ + colour: blue; /* orthographe incorrecte de la propriété color */ font-size: 200%; } ``` -{{EmbedLiveSample('Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas_', '100%', 200)}} +{{EmbedLiveSample('', '100%', 200)}} + +Le comportement décrit ci-dessus est très utile : vous pouvez utiliser du CSS récent pour perfectionner la mise en forme de vos pages, sachant qu'aucune erreur ne se produira quand votre code n'est pas compris — le navigateur interprète la règle ou ne fait rien. Rappelez-vous maintenant la _cascade_ : entre deux règles de même spécificité, le navigateur choisira la dernière rencontrée. La cascade permet d'offrir une alternative pour les navigateurs qui ne prennent pas en charge le CSS le plus récent. -Le comportement décrit ci-dessus est très utile : vous pouvez utiliser du CSS récent pour perfectionner la mise en forme de vos pages, sachant qu'aucune erreur ne se produira quand votre code n'est pas compris — le navigateur interprète la règle... ou ne fait rien. Rappelez vous maintenant la _cascade_ : entre deux règles de même spécificité, le navigateur choisira la dernière rencontrée. La cascade permet d'offrir une alternative pour les navigateurs qui ne prennent pas en charge le CSS le plus récent. +Cela fonctionne particulièrement bien quand on désire utiliser une valeur CSS introduite récemment, pas encore prise en charge partout. Par exemple, quelques vieux navigateurs ne savent pas interpréter `calc()` pour les valeurs. Je pourrais donc donner une valeur en pixels pour la largeur de ma boîte, puis proposer une déclaration où la valeur de `width` est calculée par `calc(100% - 50px)`. Un vieux navigateur utilisera la première déclaration ayant une valeur en pixels ; il ignore la seconde parce qu'il ne le comprend pas. Les navigateurs récents interprètent la déclaration en pixels, puis celle avec `calc()` qui, par cascade, écrase la déclaration précédente. -Cela fonctionne particulièrement bien quand on désire utiliser une valeur CSS introduite récemment, pas encore prise en charge partout. Par exemple, quelques vieux navigateurs ne savent pas interpréter `calc()` pour les valeurs. Je peux donc donner une valeur en pixels pour la largeur de ma boîte, puis proposer une déclaration où la valeur de `width` est calculée par ` calc(``) `. Un vieux navigateur interprète la première déclaration, il ne comprend pas la seconde, il l'ignore — il utilisera donc la version pixels. Les navigateurs récents interprètent la déclaration en pixels, puis celle avec `calc()` qui, par cascade, écrase la déclaration précédente. +```css +.box { + width: 500px; + width: calc(100% - 50px); +} +``` Dans les leçons à venir, nous rencontrerons d'autres méthodes pour adapter le code aux différents navigateurs. ## Et enfin -Ce cours est presque achevé ; il nous reste un seul point à voir. Dans la prochaine leçon, vous allez [mettre en œuvre vos nouvelles connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) : vous allez remettre en forme un exemple, une occasion d'appliquer tout ce que vous avez appris de CSS. +Ce cours est presque achevé ; il nous reste un seul point à voir. Dans la prochaine leçon, vous allez [mettre en œuvre vos nouvelles connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) : vous allez remettre en forme un exemple, une occasion d'appliquer tout ce que vous avez appris sur les CSS. {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}} -## Dans ce cour +## Dans ce module -1. [CSS, c'est quoi ?](/fr/docs/Learn/CSS/First_steps/What_is_CSS) -2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +1. [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/What_is_CSS) +2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) 3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) -4. [CSS ça marche comment ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) -5. [Mettre en œuvre vos nouvelles connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) +4. [CSS, comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettre en œuvre vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/what_is_css/index.md b/files/fr/learn/css/first_steps/what_is_css/index.md index 1e0e49e9c1..48f5fc8f5f 100644 --- a/files/fr/learn/css/first_steps/what_is_css/index.md +++ b/files/fr/learn/css/first_steps/what_is_css/index.md @@ -6,62 +6,58 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS --- {{LearnSidebar}}{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}} -**{{Glossary("CSS")}}** (_Cascading Style Sheets_) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits. +**[CSS](/fr/docs/Glossary/CSS)** (_Cascading Style Sheets_) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe, puis quelques termes clés du langage seront introduits. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Notions de base en l'informatique, - <a - href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" + <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" >logiciels de base installés</a >, - <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers" + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" >savoir manipuler des fichiers</a - >, connaissance de base de HTML (cf. <a - href="/fr/docs/Learn/HTML/Introduction_to_HTML" - >Introduction à HTML</a - >.) + >, connaissance de base de HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction au HTML</a + >). </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Apprendre ce qu'est CSS.</td> </tr> </tbody> </table> -Dans le cours [Introduction à HTML](/fr/docs/Learn/HTML/Introduction_to_HTML), nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur. Les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne. Les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style. +Dans le cours [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML), nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur ; les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne, et les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style.  -Le Web serait d'un ennui terrible si tous les sites ressemblaient à la page ci-dessus. Grâce à CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix. +Le Web serait d'un ennui terrible si tous les sites ressemblaient à la page ci-dessus. Grâce aux CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix. -Pour plus d'informations sur les styles de navigateur/par défaut, consultez la vidéo suivante : +Pour plus d'informations sur les styles de navigateur/par défaut, consultez la vidéo suivante : {{EmbedYouTube("spK_S0HfzFw")}} -## À quoi sert CSS ? +## À quoi sert CSS ? Comme mentionné plus haut, CSS est un langage de mise en forme des documents. -Les **documents** en question sont des fichiers texte structurés avec un langage de balises — {{Glossary("HTML")}} est le plus connu de ces langages, d'autres exemples sont {{Glossary("SVG")}} ou {{Glossary("XML")}}. +Les **documents** en question sont des fichiers texte structurés avec un langage de balises — [HTML](/fr/docs/Glossary/HTML) est le plus connu de ces langages, d'autres exemples sont [SVG](/fr/docs/Glossary/SVG) ou [XML](/fr/docs/Glossary/XML). -**"Présenter** un document à l'utilisateur" signifie convertir ce document dans une forme utilisable par le public visé. Les {{Glossary("browser","navigateurs")}}, tels {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Apple Safari","Safari")}} ou {{Glossary("Microsoft Edge","Edge")}} sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante. +**Présenter** un document à l'utilisateur signifie convertir ce document dans une forme utilisable par le public visé. Les [navigateurs](/fr/docs/Glossary/Browser), tels [Firefox](/fr/docs/Glossary/Mozilla_Firefox), [Chrome](/fr/docs/Glossary/Google_Chrome), [Safari](/fr/docs/Glossary/Apple_Safari) ou [Edge](/fr/docs/Glossary/Microsoft_Edge) sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante. -> **Note :** Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents HTML et CSS en documents PDF imprimables. +> **Note :** Un navigateur est parfois appelé [agent utilisateur](/fr/docs/Glossary/User_agent). On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres agents utilisateurs comme les programmes qui convertissent des documents HTML et CSS en documents PDF imprimables. -CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer [la couleur](/fr/docs/Web/CSS/color_value) et [la taille](/fr/docs/Web/CSS/font-size) des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer [un texte affiché sur une colonne](/fr/docs/Web/CSS/Layout_cookbook/Column_layouts) en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des [animations](/fr/docs/Web/CSS/CSS_Animations). N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples. +CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple, changer [la couleur](/fr/docs/Web/CSS/color_value) et [la taille](/fr/docs/Web/CSS/font-size) des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple, [transformer un texte affiché sur une colonne en une composition](/fr/docs/Web/CSS/Layout_cookbook/Column_layouts) avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des [animations](/fr/docs/Web/CSS/CSS_Animations). N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples. ## Syntaxe de CSS -CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page. +CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page. Par exemple, « Je veux que le titre principal de ma page s'affiche en rouge en gros caractères. » -Par exemple "Je veux que le titre principal de ma page s'affiche en rouge en gros caractères." - -Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme : +Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme : ```css h1 { @@ -70,11 +66,11 @@ h1 { } ``` -La règle commence par un {{Glossary("CSS Selector", "sélecteur")}}, l'élément HTML mis en forme. Ici le style s'applique aux titres de niveau 1 ({{htmlelement("h1")}}). +La règle commence par un [sélecteur](/fr/docs/Glossary/CSS_Selector), l'élément HTML mis en forme. Ici, le style s'applique aux titres de niveau 1 ([`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements)). -Suivent une paire d'accolades `{ }` à l'intérieur desquelles on trouve une ou plusieurs **déclarations**, sous la forme d'une paire **propriété** : **valeur**. Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque {{Glossary("property/CSS","propriété")}} définie par CSS correspondent différentes valeurs possibles. Dans l'exemple, la propriété `color` peut prendre différentes [valeurs de type `<color>`](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#color). La propriété `font-size` accepte différentes [tailles](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages) comme valeurs. +Suivent une paire d'accolades `{ }` à l'intérieur desquelles on trouve une ou plusieurs **déclarations**, sous la forme d'une paire **propriété: valeur**. Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque [propriété](/fr/docs/Glossary/property/CSS) définie par CSS correspondent différentes valeurs possibles. Dans l'exemple, la propriété `color` peut prendre différentes [valeurs de type `<color>`](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#couleur). La propriété `font-size` accepte différentes [tailles](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#nombres_longueurs_et_pourcentages) comme valeurs. -Une feuille de style CSS est constituée d'une succession de telles règles : +Une feuille de style CSS est constituée d'une succession de telles règles : ```css h1 { @@ -89,11 +85,11 @@ p { On retient facilement certaines valeurs, d'autres sont plus difficiles à mémoriser. Pour s'y retrouver, sur MDN, la page individuelle de chaque propriété donne un aperçu rapide et complet des valeurs applicables. -> **Note :** Sur MDN, dans [la référence CSS](/fr/docs/Web/CSS/Reference), vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn _nom-de-propriété-ou-fonctionnalité-css_" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" ! +> **Note :** Sur MDN, dans [la référence CSS](/fr/docs/Web/CSS/Reference), vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes « mdn _nom-de-propriété-ou-fonctionnalité-css_ » dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez, par exemple, tester les requêtes « mdn color » et « mdn font-size » ! ## Modules CSS -L'ensemble des fonctionnalités CSS est si important que le langage et ses spécifications ont été découpés en _modules_. En naviguant dans le site MDN vous croiserez ces modules : quand des pages de documentation sont regroupées, c'est la plupart du temps qu'elles réfèrent à un même module. Par exemple, jetez un œil à la référence MDN pour le module *[Backgrounds and Borders](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders)*, vous y trouverez ce pour quoi il a été conçu, les différentes propriétés et fonctionnalités qu'il regroupe. Vous trouverez aussi des liens vers la spécification CSS qui définit cette technologie (voir plus bas). +L'ensemble des fonctionnalités CSS est si important que le langage et ses spécifications ont été découpés en _modules_. En naviguant dans le site MDN vous croiserez ces modules : quand des pages de documentation sont regroupées, c'est la plupart du temps qu'elles réfèrent à un même module. Par exemple, jetez un œil à la référence MDN pour le module *[Backgrounds and Borders](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders)*, vous y trouverez ce pour quoi il a été conçu, les différentes propriétés et fonctionnalités qu'il regroupe. Vous trouverez aussi des liens vers la spécification CSS qui définit cette technologie (voir plus bas). À ce stade, inutile de se préoccuper de la structure de CSS (même s'il est parfois plus simple de trouver une information quand on a compris qu'une propriété est reliée à une famille d'autres propriétés au sein d'un même module de spécification). @@ -101,21 +97,21 @@ Prenons un exemple précis et revenons au module *Backgrounds and Borders* — l ### Spécifications CSS -Chaque technologie standard du Web (HTML, CSS, JavaScript, etc.) est définie dans un grand document appelé spécification (parfois abrégé en "spec"). Les spécifications sont publiées par des organisations de standardisation (telles que le {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}), elles définissent précisément le comportement attendu de ces technologies. +Chaque technologie standard du Web (HTML, CSS, JavaScript, etc.) est définie dans un grand document appelé spécification (parfois abrégé en « spec »). Les spécifications sont publiées par des organisations de standardisation (telles que le [W3C](/fr/docs/Glossary/W3C), [WHATWG](/fr/docs/Glossary/WHATWG), [ECMA](/fr/docs/Glossary/ECMA), ou [Khronos](/fr/docs/Glossary/Khronos)), elles définissent précisément le comportement attendu de ces technologies. -CSS ne déroge pas à la règle — il est développé par un groupe au sein du W3C, nommé le [_CSS Working Group_ (ou "groupe de travail CSS" en français)](https://www.w3.org/Style/CSS/). Ce groupe est constitué de représentants des éditeurs de navigateurs et d'autres sociétés concernées par CSS. On y trouve aussi des _experts invités_ affiliés à aucune des organisations membres qui apporte une voix indépendante à la conception de CSS. +CSS ne déroge pas à la règle — il est développé par un groupe au sein du W3C, nommé le [_CSS Working Group_ (ou « groupe de travail CSS » en français)](https://www.w3.org/Style/CSS/). Ce groupe est constitué de représentants des éditeurs de navigateurs et d'autres sociétés concernées par CSS. On y trouve aussi des _experts invités_ affiliés à aucune des organisations membres qui apporte une voix indépendante à la conception de CSS. -De nouveaux aspects de CSS sont développés ou spécifiés par le groupe de travail CSS, parfois parce qu'un navigateur particulier désire tel comportement, d'autres fois parce que des concepteurs web et des développeurs demandent certaines fonctionnalités et enfin parfois lorsque le _CSS Working Group_ a identifié un besoin. CSS est en développement constant, avec de nouvelles fonctionnalités disponibles au fur et à mesure. Une des caractéristiques cruciale de chaque brique du Web et donc de CSS est la rétro-compatibilité : chaque contributeur s'attache à garantir qu'un site web développé en 2000 avec le CSS disponible à l'époque sera toujours utilisable dans un navigateur actuel ! +De nouveaux aspects de CSS sont développés ou spécifiés par le groupe de travail CSS, parfois parce qu'un navigateur particulier désire tel comportement, d'autres fois parce que des concepteurs web et des développeurs demandent certaines fonctionnalités et enfin parfois lorsque le groupe de travail CSS a identifié un besoin. CSS est en développement constant, avec de nouvelles fonctionnalités disponibles au fur et à mesure. Une des caractéristiques cruciales de chaque brique du Web et donc de CSS est la rétro-compatibilité : chaque contributeur s'attache à garantir qu'un site web développé en 2000 avec le CSS disponible à l'époque sera toujours utilisable dans un navigateur actuel ! -Si vous débutez en CSS, la lecture des spécifications peut être déroutante : elles s'adressent avant tout aux ingénieurs qui implémentent la prise en charge dans les navigateurs et pas aux développeurs web qui doivent comprendre les propriétés pour les utiliser dans leurs sites. Dans ce cas, la documentation MDN ou d'autres tutoriels sont recommandés. Il est pourtant important de savoir que les spécifications existent, de comprendre la relation entre celles-ci, le CSS que vous utilisez et la prise en charge des navigateurs (voir ci-dessous). +Si vous débutez en CSS, la lecture des spécifications peut être déroutante : elles s'adressent avant tout aux ingénieurs qui implémentent la prise en charge dans les navigateurs et pas aux développeurs web qui doivent comprendre les propriétés pour les utiliser dans leurs sites. Dans ce cas, la documentation MDN ou d'autres tutoriels sont recommandés. Il est pourtant important de savoir que les spécifications existent, de comprendre la relation entre celles-ci, le CSS que vous utilisez et la prise en charge des navigateurs (voir ci-dessous). ## Prise en charge par les navigateurs Les fonctionnalités CSS définies dans les spécifications peuvent uniquement être utilisées dans une page web si un ou plusieurs navigateurs les implémentent. Autrement dit, il faut bien qu'il y ait un programme qui puisse transformer les règles CSS en éléments affichés à l'écran. -Nous étudierons ce point plus en détail dans l'article sur [le fonctionnement de CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_works). Il est rare que les différents navigateurs implémentent simultanément une nouvelle fonctionnalité CSS. Il est donc fréquent que certains sous-ensembles de CSS soient fonctionnels pour certains navigateurs et pas pour d'autres. Pour cette raison, il est essentiel de vérifier l'état de la compatibilité et des implémentations. Sur chaque page MDN décrivant une propriété, le statut d'implémentation de la propriété est fourni dans un tableau de compatibilité web. Vous saurez ainsi s'il est pertinent de l'utiliser dans votre site web. +Nous étudierons ce point plus en détail dans l'article sur [le fonctionnement des CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_works). Il est rare que les différents navigateurs implémentent simultanément une nouvelle fonctionnalité CSS. Il est donc fréquent que certains sous-ensembles de CSS soient fonctionnels pour certains navigateurs et pas pour d'autres. Pour cette raison, il est essentiel de vérifier l'état de la compatibilité et des implémentations. Sur chaque page MDN décrivant une propriété, le statut d'implémentation de la propriété est fourni dans un tableau de compatibilité web. Vous saurez ainsi s'il est pertinent de l'utiliser dans votre site web. -Voici par exemple le tableau de compatibilité pour la propriété [`font-family`](/fr/docs/Web/CSS/font-family). +Voici, par exemple, le tableau de compatibilité pour la propriété [`font-family`](/fr/docs/Web/CSS/font-family). {{Compat("css.properties.font-family")}} @@ -125,10 +121,10 @@ Maintenant que vous avez compris ce qu'est CSS, vous pourrez commencer à écrir {{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}} -## Dans ce cours +## Dans ce module -1. [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/What_is_CSS) +1. [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/What_is_CSS) 2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) -3. [La façon dont CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) -4. [Le fonctionnement de CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_works) -5. [Mettre en œuvre vos nouvelles connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) +3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [CSS, comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettre en œuvre vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge)
\ No newline at end of file diff --git a/files/fr/learn/css/styling_text/styling_lists/index.md b/files/fr/learn/css/styling_text/styling_lists/index.md index 21adc02ed2..73a34ac54f 100644 --- a/files/fr/learn/css/styling_text/styling_lists/index.md +++ b/files/fr/learn/css/styling_text/styling_lists/index.md @@ -10,23 +10,23 @@ Les [listes](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lis <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Connaissances de base informatiques, bases HTML (étudiées dans - <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" - >Introduction à HTML</a + <a href="/fr/Learn/HTML/Introduction_to_HTML" + >Introduction au HTML</a >), bases CSS (étudiées dans - <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS" - >Introduction à CSS</a + <a href="/fr/Learn/CSS/Introduction_to_CSS" + >Introduction aux CSS</a >), <a - href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte" + href="/fr/docs/Learn/CSS/Styling_text/Fundamentals" >la mise en forme du texte</a >. </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Se familiariser avec les meilleures pratiques et propriétés liées aux styles de liste. @@ -37,9 +37,9 @@ Les [listes](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lis ## Un exemple de liste simple -Pour commencer, regardons un exemple de liste simple. Au long de cet article nous verrons les listes non ordonnées, ordonnées et des listes descriptives — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est [disponible sur GitHub](https://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html) (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html)). +Pour commencer, regardons un exemple de liste simple. Au long de cet article, nous verrons les listes non ordonnées, ordonnées et des listes descriptives — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est [disponible sur GitHub](https://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html) (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html)). -Le code HTML pour nos exemples de liste ressemble à ceci : +Le code HTML pour nos exemples de liste ressemble à ceci : ```html <h2>Liste de courses (non ordonnée)</h2> @@ -56,7 +56,7 @@ paragraphe de référence, paragraphe de référence, paragraphe de référence. <h2>Liste de recette (ordonnée)</h2> -<p>paragraphe de référence, paragraphe de référence, paragraphe de référence, +<p>Paragraphe de référence, paragraphe de référence, paragraphe de référence, paragraphe de référence, paragraphe de référence, paragraphe de référence.</p> <ol> @@ -68,7 +68,7 @@ paragraphe de référence, paragraphe de référence, paragraphe de référence. <h2>Liste descriptive des ingrédients</h2> -<p>paragraphe de référence, paragraphe de référence, paragraphe de référence, +<p>Paragraphe de référence, paragraphe de référence, paragraphe de référence, paragraphe de référence, paragraphe de référence, paragraphe de référence.</p> <dl> @@ -83,70 +83,66 @@ paragraphe de référence, paragraphe de référence, paragraphe de référence. </dl> ``` -Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant [les outils de développement du navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools), vous noterez quelques valeurs de style par défaut : +Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant [les outils de développement des navigateurs](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools), vous noterez quelques valeurs de style par défaut : -- Les éléments {{htmlelement("ul")}} et {{htmlelement("ol")}} ont une propriété {{cssxref("margin")}} de `16 px` (`1 em`) en haut et en bas et une propriété {{cssxref("padding-left")}} de `40 px` (`2.5 em`.) -- Les éléments de la liste ({{htmlelement("li")}}) n'ont aucun paramètre d'espacement par défaut. -- L'élément {{htmlelement("dl")}} a des propriétés {{cssxref("margin")}} de`16 px` (`1 em`) en haut et en bas , mais pas de définition du remplissage. -- Les éléments {{htmlelement("dd")}} ont une propriété {{cssxref("margin-left")}} de `40 px` (`2.5 em`.) -- Les éléments {{htmlelement("p")}}, inclus pour référence, ont des propriétés {{cssxref("margin")}} de `16 px` (`1 em`) en haut et en bas, identiques à ceux des différents types de listes. +- Les éléments [`<ul>`](/fr/docs/Web/HTML/Element/ul) et [`<ol>`](/fr/docs/Web/HTML/Element/ol) ont une propriété [`margin`](/fr/docs/Web/CSS/margin) de `16px` (`1em`) en haut et en bas et une propriété [`padding-left`](/fr/docs/Web/CSS/padding-left) de `40px` (`2.5em`). +- Les éléments de la liste ([`<li>`](/fr/docs/Web/HTML/Element/li)) n'ont aucun paramètre d'espacement par défaut. +- L'élément [`<dl>`](/fr/docs/Web/HTML/Element/dl) a des propriétés [`margin`](/fr/docs/Web/CSS/margin) de `16px` (`1em`) en haut et en bas, mais pas de définition du remplissage. +- Les éléments [`<dd>`](/fr/docs/Web/HTML/Element/dd) ont une propriété [`margin-left`](/fr/docs/Web/CSS/margin-left) de `40px` (`2.5em`). +- Les éléments [`<p>`](/fr/docs/Web/HTML/Element/p), inclus pour référence, ont des propriétés [`margin`](/fr/docs/Web/CSS/margin) de `16px` (`1em`) en haut et en bas, identiques à ceux des différents types de listes. ## Gestion d'espacement des listes -Si vous modifiez le style des listes, vous devez ajuster l'espacement vertical et horizontal de manière à le rendre identique à celui des éléments environnants (tels que paragraphes ou images : ce principe est parfois appelé « rythme vertical » — vous pouvez voir l'[exemple de style terminé](https://mdn.github.io/learning-area/css/styling-text/styling-lists/) sur GitHub et trouver[ le code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html) aussi.) - -Le CSS utilisé pour le style et l'espacement du texte est le suivant : +Si vous modifiez le style des listes, vous devez ajuster l'espacement vertical et horizontal de manière à le rendre identique à celui des éléments environnants (tels que paragraphes ou images : ce principe est parfois appelé « rythme vertical » — vous pouvez voir l'[exemple de style terminé](https://mdn.github.io/learning-area/css/styling-text/styling-lists/) sur GitHub et trouver [le code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html) aussi.) - /* Style général */ +Le CSS utilisé pour le style et l'espacement du texte est le suivant : - html { - font-family: Helvetica, Arial, sans-serif; - font-size: 10px; - } - - h2 { - font-size: 2rem; - } - - ul,ol,dl,p { - font-size: 1.5rem; - } +```css +/* Style général */ - li, p { - line-height: 1.5; - } +html { + font-family: Helvetica, Arial, sans-serif; + font-size: 10px; +} - /* Styles des listes descriptives */ +h2 { + font-size: 2rem; +} +ul,ol,dl,p { + font-size: 1.5rem; +} - dd, dt { - line-height: 1.5; - } +li, p { + line-height: 1.5; +} - dt { - font-weight: bold; - } +/* Styles des listes descriptives */ - dd { - margin-bottom: 1.5rem; - } +dd, dt { + line-height: 1.5; +} +dt { + font-weight: bold; +} +``` -- La première règle définit une police de caractères pour l'ensemble du site avec une taille de base de 10 px. Elles sont héritées par tous les éléments de la page. +- La première règle définit une police de caractères pour l'ensemble du site avec une taille de base de 10px. Elles sont héritées par tous les éléments de la page. - Les règles 2 et 3 définissent des tailles relatives de la police pour les titres, les différents types de liste (les enfants des éléments de liste en héritent) et les paragraphes. Cela signifie que les paragraphes et listes auront la même taille de police et les mêmes espacements entre le haut et le bas, ce qui aidera à garder un rythme vertical cohérent. -- La règle 4 définit la même propriété {{cssxref("line-height")}} pour les paragraphes et éléments de listes — ainsi les paragraphes et chaque élément de liste individuellement auront le même espacement entre les lignes. Cela aidera également à garder un rythme vertical cohérent. -- Les règles 5 et 6 s'appliquent à la liste descriptive — nous définissons la même valeur pour la propriété `line-height` pour les termes à décrire et les descriptions, valeur utilisée pour les paragraphes et les éléments de liste. Encore une fois, la cohérence est bonne ! Nous écrivons aussi les termes à décrire avec une police en gras, pour les distinguer visuellement plus facilement. +- La règle 4 définit la même propriété [`line-height`](/fr/docs/Web/CSS/line-height) pour les paragraphes et éléments de listes — ainsi, les paragraphes et chaque élément de liste individuellement auront le même espacement entre les lignes. Cela aidera également à garder un rythme vertical cohérent. +- Les règles 5 et 6 s'appliquent à la liste descriptive — nous définissons la même propriété `line-height` pour les termes à décrire et les descriptions, comme celle pour les paragraphes et les éléments de liste. Encore une fois, la cohérence est bonne ! Nous écrivons aussi les termes à décrire avec une police en gras, pour les distinguer visuellement plus facilement. ## Style propre à une liste -Maintenant que nous avons examiné l'espacement général des listes, explorons quelques propriétés propres à une liste. Il y a trois propriétés à connaître pour commencer ; elles s'appliquent aux éléments {{htmlelement("ul")}} ou {{htmlelement("ol")}} : +Maintenant que nous avons examiné l'espacement général des listes, explorons quelques propriétés propres à une liste. Il y a trois propriétés à connaître pour commencer ; elles s'appliquent aux éléments [`<ul>`](/fr/docs/Web/HTML/Element/ul) ou [`<ol>`](/fr/docs/Web/HTML/Element/ol) : -- {{cssxref("list-style-type")}} : définit le type de puces à utiliser pour la liste, par exemple des puces carrées ou rondes pour une liste non ordonnée ou bien des nombres, des lettres ou des chiffres romains pour une liste ordonnée. -- {{cssxref("list-style-position")}} : définit si les puces seront disposées à l'intérieur ou à l'extérieur du début de l'élément liste. -- {{cssxref("list-style-image")}} : permet d'utiliser une image personnalisée pour la puce, plutôt qu'un simple carré ou rond. +- [`list-style-type`](/fr/docs/Web/CSS/list-style-type) : définit le type de puces à utiliser pour la liste, par exemple des puces carrées ou rondes pour une liste non ordonnée ou bien des nombres, des lettres ou des chiffres romains pour une liste ordonnée. +- [`list-style-position`](/fr/docs/Web/CSS/list-style-position) : définit si les puces seront disposées à l'intérieur ou à l'extérieur du début de l'élément de liste. +- [`list-style-image`](/fr/docs/Web/CSS/list-style-image) : permet d'utiliser une image personnalisée pour la puce, plutôt qu'un simple carré ou rond. ### Styles de puces -Comme mentionné ci-dessus, la propriété {{cssxref("list-style-type")}} vous permet de définir le type de puce à utiliser. Dans notre exemple, nous avons défini une liste ordonnée utilisant les chiffres romains en majuscules avec : +Comme mentionné ci-dessus, la propriété [`list-style-type`](/fr/docs/Web/CSS/list-style-type) vous permet de définir le type de puce à utiliser. Dans notre exemple, nous avons défini une liste ordonnée utilisant les chiffres romains en majuscules avec : ```css ol { @@ -154,17 +150,17 @@ ol { } ``` -Cela donne l'apparence suivante : +Cela donne l'apparence suivante : - + -Vous pouvez trouver beaucoup plus d'options en consultant la page de référence {{cssxref("list-style-type")}}. +Vous pouvez trouver beaucoup plus d'options en consultant la page de référence [`list-style-type`](/fr/docs/Web/CSS/list-style-type). ### Position des puces -La propriété {{cssxref("list-style-position")}} définit si les puces apparaissent à l'extérieur ou à l'intérieur de la liste devant chaque élément. Par défaut, la valeur est `outside` et les puces apparaissent comme ci-dessus. +La propriété [`list-style-position`](/fr/docs/Web/CSS/list-style-position) définit si les puces apparaissent à l'extérieur ou à l'intérieur de la liste devant chaque élément. Par défaut, la valeur est `outside` et les puces apparaissent comme ci-dessus. -Si vous choisissez la valeur `inside`, les puces seront disposées dans la ligne : +Si vous choisissez la valeur `inside`, les puces seront disposées dans la ligne : ```css ol { @@ -173,11 +169,11 @@ ol { } ``` - + ### Utilisation d'une puce image personnalisée -La propriété {{cssxref("list-style-image")}} vous permet d'utiliser une image pour personnaliser vos puces. La syntaxe est assez simple : +La propriété [`list-style-image`](/fr/docs/Web/CSS/list-style-image) vous permet d'utiliser une image pour personnaliser vos puces. La syntaxe est assez simple : ```css ul { @@ -185,9 +181,9 @@ ul { } ``` -Cependant, cette propriété est un peu limitée en termes de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module [Styliser les boîtes](/fr/docs/Learn/CSS/Building_blocks). Pour l'instant, voici un avant-goût ! +Cependant, cette propriété est un peu limitée en termes de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de [`background`](/fr/docs/Web/CSS/background), dont vous apprendrez beaucoup plus dans le module [Blocs de base en CSS](/fr/docs/Learn/CSS/Building_blocks). Pour l'instant, voici un avant-goût ! -Dans notre exemple achevé, nous avons appliqué un style à la liste non ordonnée (en plus de ce que vous avez déjà vu ci-dessus) comme ceci : +Dans notre exemple achevé, nous avons appliqué un style à la liste non ordonnée (en plus de ce que vous avez déjà vu ci-dessus) comme ceci : ```css ul { @@ -204,24 +200,24 @@ ul li { } ``` -Voici ce que nous avons fait : +Voici ce que nous avons fait : -- abaissé la valeur de la propriété {{cssxref ("padding-left")}} de l'élément {{htmlelement ("ul")}} de `40px` par défaut à `20px`, puis défini la même valeur pour les éléments de la liste. Ainsi, l'ensemble des éléments d'une liste non ordonnée seront toujours alignés avec les éléments d'une liste ordonnée et les descriptions d'une liste descriptive; tout en disposant d'un remplissage où les images d'arrière-plan seront placées. Si nous ne le faisions pas, les images d'arrière-plan et le texte de l'élément de liste se superposeraient, ce qui ferait brouillon. -- défini la propriété {{cssxref("list-style-type")}} à `none`, ainsi aucune puce par défaut n'apparaît. Nous allons utiliser les propriétés de {{cssxref("background")}} pour gérer les puces. -- inséré une puce pour chaque élément de la liste désordonnée. Les propriétés pertinentes sont les suivantes : +- Abaissé la valeur de la propriété [`padding-left`](/fr/docs/Web/CSS/padding-left) de l'élément [`<ul>`](/fr/docs/Web/HTML/Element/ul) de `40px` par défaut à `20px`, puis défini la même valeur pour les éléments de la liste. Ainsi, l'ensemble des éléments d'une liste non ordonnée seront toujours alignés avec les éléments d'une liste ordonnée et les descriptions d'une liste descriptive ; tout en disposant d'un remplissage où les images d'arrière-plan seront placées. Si nous ne le faisions pas, les images d'arrière-plan et le texte de l'élément de liste se superposeraient, ce qui ferait brouillon. +- Défini la propriété [`list-style-type`](/fr/docs/Web/CSS/list-style-type) à `none`, ainsi aucune puce par défaut n'apparaît. Nous allons utiliser les propriétés de [`background`](/fr/docs/Web/CSS/background) pour gérer les puces. +- Inséré une puce pour chaque élément de la liste désordonnée. Les propriétés pertinentes sont les suivantes : - - {{cssxref("background-image")}} : référence du chemin d'accès au fichier image utilisé comme puce. - - {{cssxref("background-position")}} : emplacement de l'image dans l'arrière-plan de l'élément sélectionné — dans ce cas, nous disons `0 0` : la puce apparaîtra dans le coin supérieur gauche de chaque élément de la liste. - - {{cssxref("background-size")}} : taille de l'image d'arrière-plan. L'idéal est que les puces soient de même taille que les éléments de la liste (ou légèrement plus petites ou plus grandes). Nous utilisons une taille de `1.6rem` (`16px`), qui correspond bien au remplissage de `20px` dans lequel la puce est placée — 16 px plus 4 px d'espace entre la puce et le texte de l'élément de liste fonctionne bien. - - {{cssxref("background-repeat")}} : par défaut, les images d'arrière-plan se répètent jusqu'à avoir rempli l'espace d'arrière-plan disponible. Nous voulons l'insertion d'une seule copie de l'image sans répétition, donc nous choisissons la valeur `no-repeat`. + - [`background-image`](/fr/docs/Web/CSS/background-image) : la référence du chemin d'accès au fichier image utilisé comme puce. + - [`background-position`](/fr/docs/Web/CSS/background-position) : l'emplacement de l'image dans l'arrière-plan de l'élément sélectionné — dans ce cas, puisque nous disons `0 0`, la puce apparaîtra dans le coin supérieur gauche de chaque élément de la liste. + - [`background-size`](/fr/docs/Web/CSS/background-size) : la taille de l'image d'arrière-plan. L'idéal est que les puces soient de même taille que les éléments de la liste (ou légèrement plus petites ou plus grandes). Nous utilisons une taille de `1.6rem` (`16px`), qui correspond bien au remplissage de `20px` dans lequel la puce est placée — 16px plus 4px d'espace entre la puce et le texte de l'élément de liste fonctionne bien. + - [`background-repeat`](/fr/docs/Web/CSS/background-repeat) : par défaut, les images d'arrière-plan se répètent jusqu'à avoir rempli l'espace d'arrière-plan disponible. Nous voulons l'insertion d'une seule copie de l'image sans répétition, donc nous choisissons la valeur `no-repeat`. -Ceci nous donne le résultat suivant : +Ceci nous donne le résultat suivant : - + ### Raccourci de style de liste -Les 3 propriétés mentionnées ci-dessus peuvent toutes être définies en utilisant la propriété abrégée {{cssxref("list-style")}}. Par exemple, le CSS suivant : +Les 3 propriétés mentionnées ci-dessus peuvent toutes être définies en utilisant la propriété abrégée [`list-style`](/fr/docs/Web/CSS/list-style). Par exemple, le CSS suivant : ```css ul { @@ -231,21 +227,23 @@ ul { } ``` -peut être remplacé par cela : +peut être remplacé par cela : - ul { - list-style: square url(example.png) inside; - } +```css +ul { + list-style: square url(example.png) inside; +} +``` -Les valeurs peuvent être listées dans n'importe quel ordre et vous pouvez en mentionner une, deux ou les trois (les valeurs par défaut utilisées pour les propriétés non-citées sont `disc`, `none` et `outside`. Si un `type` et une `image` sont donnés, le type sera affiché en solution de repli dans le cas où l'image ne peut pas être chargée pour une raison quelconque. +Les valeurs peuvent être listées dans n'importe quel ordre et vous pouvez en mentionner une, deux ou les trois (les valeurs par défaut utilisées pour les propriétés non-citées sont `disc`, `none` et `outside`). Si un `type` et une `image` sont donnés, le type sera affiché en solution de repli dans le cas où l'image ne peut pas être chargée pour une raison quelconque. ## Contrôle du numérotage des listes -Parfois, vous pouvez vouloir numéroter différemment une liste ordonnée — par exemple, à partir d'un nombre autre que 1 ou en comptant à rebours ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre. +Parfois, vous pouvez vouloir numéroter différemment une liste ordonnée — par exemple, à partir d'un nombre autre que 1, en comptant à rebours ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre. ### Numéro de départ -L'attribut {{htmlattrxref("start","ol")}} vous permet de commencer le numérotage de la liste à partir d'un nombre autre que 1. L'exemple suivant : +L'attribut [`start`](/fr/docs/Web/HTML/Element/ol#attr-start) vous permet de commencer le numérotage de la liste à partir d'un nombre autre que 1. L'exemple suivant : ```html <ol start="4"> @@ -256,13 +254,13 @@ L'attribut {{htmlattrxref("start","ol")}} vous permet de commencer le numérotag </ol> ``` -vous donne cette sortie : +vous donne cette sortie : -{{ EmbedLiveSample('Numéro_de_départ', '100%', 150) }} +{{ EmbedLiveSample('', '100%', 150) }} ### Numérotation inversée -L'attribut {{htmlattrxref("reversed","ol")}} inverse la numérotation de la liste. L'exemple suivant : +L'attribut [`reversed`](/fr/docs/Web/HTML/Element/ol#attr-reversed) inverse la numérotation de la liste. L'exemple suivant : ```html <ol start="4" reversed> @@ -273,13 +271,15 @@ L'attribut {{htmlattrxref("reversed","ol")}} inverse la numérotation de la list </ol> ``` -donne cette sortie : +donne cette sortie : -{{ EmbedLiveSample('Numérotation_inversée', '100%', 150) }} +{{ EmbedLiveSample('', '100%', 150) }} + +> **Note :** S'il existe plus d'éléments dans une liste inversée que la valeur de l'attribut `start`, la numérotation continuera à zéro, puis à des valeurs négatives. ### Valeurs individualisées -L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix. L'exemple suivant : +L'attribut [`value`](/fr/docs/Web/HTML/Element/ol#attr-value) vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix. L'exemple suivant : ```html <ol> @@ -290,20 +290,20 @@ L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les élémen </ol> ``` -vous donne cette sortie : +vous donne cette sortie : -{{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }} +{{ EmbedLiveSample('', '100%', 150) }} -> **Note :** Même si vous utilisez une propriété {{cssxref ("type-style-list")}} avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut `value`. +> **Note :** Même si vous utilisez une propriété [`list-style-type`](/fr/docs/Web/CSS/list-style-type) avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut `value`. -## Apprentissage actif : définir le style d'une liste imbriquée +## Apprentissage actif : définir le style d'une liste imbriquée -Dans cette session d'apprentissage actif, vous devez utiliser ce que vous avez appris ci-dessus en donnant un certain style à une liste imbriquée. Avec le code HTML fourni, nous vous demandons de : +Dans cette session d'apprentissage actif, vous devez utiliser ce que vous avez appris ci-dessus en donnant un certain style à une liste imbriquée. Avec le code HTML fourni, nous vous demandons de : -1. mettre une puce carrée devant les éléments de la liste non ordonnée, -2. donner aux éléments des listes, ordonnées ou non, une hauteur de ligne de 1.5 fois la taille de la police de caractères. -3. donner à la liste ordonnée une puce alphabétique en minuscules. -4. ne pas hésiter à jouer avec l'exemple de liste autant que vous le souhaitez, en expérimentant les types de puces, l'espacement ou tout ce que vous pouvez trouver. +1. Mettre une puce carrée devant les éléments de la liste non ordonnée. +2. Donner aux éléments des listes, ordonnées ou non, une hauteur de ligne de 1.5 fois la taille de la police de caractères. +3. Donner à la liste ordonnée une puce alphabétique en minuscules. +4. Ne pas hésiter à jouer avec l'exemple de liste autant que vous le souhaitez, en expérimentant les types de puces, l'espacement ou tout ce que vous pouvez trouver. Si vous faites une erreur, vous pourrez toujours tout remettre à zéro avec le bouton _Réinitialiser_. Si vous êtes vraiment bloqué, pressez le bouton _Voir la solution_ pour voir une réponse possible. @@ -315,7 +315,7 @@ Si vous faites une erreur, vous pourrez toujours tout remettre à zéro avec le <li>Ensuite, ouvrez la boîte.</li> <li>Puis, mettez les trois objets magiques dans la boîte, dans cet ordre exactement, pour terminer - le charme : + le charme : <ol> <li>le livre de sorts,</li> <li>la baguette brillante,</li> @@ -371,15 +371,19 @@ cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); ``` -{{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }} +{{ EmbedLiveSample('', 700, 800) }} ## Voir aussi -Les compteurs CSS fournissent des outils avancés pour personnaliser le comptage et le style des listes, mais ils sont assez complexes. Nous vous recommandons de les examiner si vous voulez vous étendre sur le sujet. Voir : +Les compteurs CSS fournissent des outils avancés pour personnaliser le comptage et le style des listes, mais ils sont assez complexes. Nous vous recommandons de les examiner si vous voulez vous étendre sur le sujet. Voir : + +- [`@counter-style`](/fr/docs/Web/CSS/@counter-style) +- [`counter-increment`](/fr/docs/Web/CSS/counter-increment) +- [`counter-reset`](/fr/docs/Web/CSS/counter-reset) + +## Testez vos compétences ! -- {{cssxref("@counter-style")}} -- {{cssxref("counter-increment")}} -- {{cssxref("counter-reset")}} +Vous avez atteint la fin de cet article, mais pourriez-vous retenir les informations les plus importantes ? Vous trouverez une évaluation de vos compétences à la fin de ce module — voir [Composition de la page d'accueil d'une école de communauté](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage). Peut-être que vous voudriez revoir les autres articles avant de l'essayer. ## Résumé @@ -389,10 +393,8 @@ Les listes sont relativement faciles à saisir lorsque vous connaissez les quelq ## Dans ce module - - - [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/Fundamentals) - [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists) - [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Styling_links) -- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) -- [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) +- [Fontes Web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) +- [Composition de la page d'accueil d'une école de communauté](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage)
\ No newline at end of file |