From faa96e657621455284245018b8a3b5050b613e6b Mon Sep 17 00:00:00 2001 From: julieng Date: Sun, 14 Nov 2021 14:30:47 +0100 Subject: convert content to md --- .../learn/css/first_steps/getting_started/index.md | 319 +++++++------ .../css/first_steps/how_css_is_structured/index.md | 513 ++++++++++++--------- .../learn/css/first_steps/how_css_works/index.md | 200 ++++---- files/fr/learn/css/first_steps/index.md | 58 +-- .../first_steps/using_your_new_knowledge/index.md | 133 +++--- .../fr/learn/css/first_steps/what_is_css/index.md | 142 +++--- 6 files changed, 734 insertions(+), 631 deletions(-) (limited to 'files/fr/learn/css/first_steps') diff --git a/files/fr/learn/css/first_steps/getting_started/index.md b/files/fr/learn/css/first_steps/getting_started/index.md index 9bbccc2107..1bc1b5ff4e 100644 --- a/files/fr/learn/css/first_steps/getting_started/index.md +++ b/files/fr/learn/css/first_steps/getting_started/index.md @@ -11,256 +11,291 @@ tags: - Sélecteurs translation_of: Learn/CSS/First_steps/Getting_started --- -
{{LearnSidebar}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}} -
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
- -

Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS.

+Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS. - - - - - - - - - - + + + + + + + + + +
Prérequis :Connaissances élémentaires en informatique, suite logicielle de base installée, compréhension élémentaire du  travail avec des fichiers, des bases en HTML (cf. Introduction à HTML.)
Objectif :Comprendre comment associer une feuille de style CSS à un document HTML, savoir appliquer quelques règles simples de mise en forme d'un texte.
Prérequis : + Connaissances élémentaires en informatique, suite logicielle de base installée, compréhension élémentaire du  travail avec des fichiers, des bases en HTML (cf. Introduction à HTML.) +
Objectif : + Comprendre comment associer une feuille de style CSS à un document HTML, + savoir appliquer quelques règles simples de mise en forme d'un texte. +
-

D'abord un peu de HTML

+## D'abord un peu de HTML -

Notre point de départ est un document HTML. Pour suivre la leçon en travaillant sur votre ordinateur, vous pouvez copier le code ci-dessous. Collez le dans un fichier en utilisant un éditeur de code, puis sauvegardez le sous le nom index.html.

+Notre point de départ est un document HTML. Pour suivre la leçon en travaillant sur votre ordinateur, vous pouvez copier le code ci-dessous. Collez le dans un fichier en utilisant un éditeur de code, puis sauvegardez le sous le nom `index.html`. -
<!doctype html>
-<html lang="fr">
-<head>
-    <meta charset="utf-8">
-    <title>Démarrer avec CSS</title>
-</head>
+```html
+
+
+
+    
+    Démarrer avec CSS
+
 
-<body>
+
 
-    <h1>Je suis un titre de niveau un</h1>
+    
Je suis un titre de niveau un

 
-    <p>Ceci est un paragraphe. Dans ce texte il y a un <span>élément span</span>
- et aussi un <a href="http://example.com">lien</a>.</p>
+    
Ceci est un paragraphe. Dans ce texte il y a un élément span
+ et aussi un lien.

 
-    <p>Ceci est un second paragraphe. On y trouve un élément <em>mis en valeur</em>.</p>
+    
Ceci est un second paragraphe. On y trouve un élément mis en valeur.

 
-    <ul>
-        <li>Item un</li>
-        <li>Item deux</li>
-        <li>Item <em>trois</em></li>
-    </ul>
+    
 
-</body>
+
 
-</html>
-
+ +``` -
-

Note : Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page.

-
+> **Note :** Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page. -

Ajouter CSS à notre document

+## Ajouter CSS à notre document -

Pour commencer, on doit signaler au document HTML que nous souhaitons utiliser des règles CSS. Vous rencontrerez trois possibilités pour appliquer CSS à un document HTML. Nous nous contenterons de présenter la méthode la plus utilisée  — créer un lien vers la feuille de style CSS depuis l'en-tête du document HTML.

+Pour commencer, on doit signaler au document HTML que nous souhaitons utiliser des règles CSS. Vous rencontrerez trois possibilités pour appliquer CSS à un document HTML. Nous nous contenterons de présenter la méthode la plus utilisée  — créer un lien vers la feuille de style CSS depuis l'en-tête du document HTML. -

Avec votre éditeur de code, dans le dossier où se trouve le document HTML, créez un fichier et sauvegardez le sous le nom styles.css. L'extension .css indique que c'est un fichier CSS.

+Avec votre éditeur de code, dans le dossier où se trouve le document HTML, créez un fichier et sauvegardez le sous le nom `styles.css`. L'extension `.css` indique que c'est un fichier CSS. -

Pour lier styles.css à index.html ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML :

+Pour lier `styles.css` à `index.html` ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML : -
<link rel="stylesheet" href="styles.css">
+```html + +``` -

Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut rel ; la valeur de l'attribut href donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans styles.css. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS :

+Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut `rel` ; la valeur de l'attribut `href` donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans `styles.css`. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS : -
h1 {
+```css
+h1 {
   color: red;
-}
+} +``` -

Dans votre éditeur de code, sauvegardez vos documents HTML et CSS puis rechargez la page HTML dans votre navigateur. Le titre de niveau un en haut du document devrait maintenant apparaître en rouge. Si c'est le cas, félicitations — vous avez appliqué avec succès une règle CSS à votre document HTML. Si ce n'est pas le cas, vérifiez scrupuleusement que vous avez tout bien fait comme indiqué.

+Dans votre éditeur de code, sauvegardez vos documents HTML et CSS puis rechargez la page HTML dans votre navigateur. Le titre de niveau un en haut du document devrait maintenant apparaître en rouge. Si c'est le cas, félicitations — vous avez appliqué avec succès une règle CSS à votre document HTML. Si ce n'est pas le cas, vérifiez scrupuleusement que vous avez tout bien fait comme indiqué. -

Pour suivre le reste de ce tutoriel, vous pouvez continuer à éditer styles.css sur votre machine, ou utiliser l'éditeur interactif proposé ci-dessous. L'éditeur interactif se comporte comme si le CSS dans le premier cadre était lié au document HTML, exactement comme sur votre machine après les manipulations précédentes.

+Pour suivre le reste de ce tutoriel, vous pouvez continuer à éditer `styles.css` sur votre machine, ou utiliser l'éditeur interactif proposé ci-dessous. L'éditeur interactif se comporte comme si le CSS dans le premier cadre était lié au document HTML, exactement comme sur votre machine après les manipulations précédentes. -

Mettre en forme des éléments HTML

+## Mettre en forme des éléments HTML -

En passant la couleur de police des titres en rouge nous avons vu comment sélectionner et mettre en forme un élément HTML.

+En passant la couleur de police des titres en rouge nous avons vu comment sélectionner et mettre en forme un élément HTML. -

Cela est réalisé grâce à un sélecteur d'élément — dans la règle CSS, le sélecteur correspond au nom d'un élément HTML. Pour appliquer un style à tous les paragraphes du document HTML on utilisera le sélecteur p. Voilà la règle pour passer en vert tous les paragraphes :

+Cela est réalisé grâce à un sélecteur d'élément — dans la règle CSS, le sélecteur correspond au nom d'un élément HTML. Pour appliquer un style à tous les paragraphes du document HTML on utilisera le sélecteur `p`. Voilà la règle pour passer en vert tous les paragraphes : -
p {
+```css
+p {
   color: green;
-}
+} +``` -

On peut cibler plusieurs éléments d'un coup en les listant, séparés par une virgule. Si je veux que tous les paragraphes et tous les items de liste soient verts j'écrirai la règle suivante :

+On peut cibler plusieurs éléments d'un coup en les listant, séparés par une virgule. Si je veux que tous les paragraphes et tous les items de liste soient verts j'écrirai la règle suivante : -
p, li {
+```css
+p, li {
     color: green;
-}
+} +``` -

Testez cela dans l'éditeur interacif ci-dessous (éditer les boîtes de code) ou sur votre machine en local.

+Testez cela dans l'éditeur interacif ci-dessous (éditer les boîtes de code) ou sur votre machine en local. -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

+{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} -

Changer le comportement par défaut des éléments

+## Changer le comportement par défaut des éléments -

Quand on observe un document HTML bien formé, même simple comme notre exemple, on peut voir comment un navigateur le rend lisible par une mise en forme par défaut. Les titres sont écrits en gras dans une taille plus grande, les items des listes sont précédés d'une puce. Les navigateurs ont leurs feuilles de style internes qu'ils appliquent par défaut à toutes les pages ; sans cela, tout le texte s'agglutinerait en paquet et il faudrait tout mettre en forme à partir de zéro. Tous les navigateurs modernes rendent les contenus HTML par défaut essentiellement de la même manière.

+Quand on observe un document HTML bien formé, même simple comme notre exemple, on peut voir comment un navigateur le rend lisible par une mise en forme par défaut. Les titres sont écrits en gras dans une taille plus grande, les items des listes sont précédés d'une puce. Les navigateurs ont leurs feuilles de style internes qu'ils appliquent par défaut à toutes les pages ; sans cela, tout le texte s'agglutinerait en paquet et il faudrait tout mettre en forme à partir de zéro. Tous les navigateurs modernes rendent les contenus HTML par défaut essentiellement de la même manière. -

On recherche pourtant souvent autre chose que ce rendu par défaut. Il suffit alors de sélectionner l'élément HTML dont on veut modifier le rendu et d'écrire la règle CSS pour réaliser cette mise en forme.  Un bon exemple est notre <ul>, une liste non ordonnée. Ses items sont marqués par des puces et si on décide de se débarrasser de ces puces, on peut le faire comme suit :

+On recherche pourtant souvent autre chose que ce rendu par défaut. Il suffit alors de sélectionner l'élément HTML dont on veut modifier le rendu et d'écrire la règle CSS pour réaliser cette mise en forme.  Un bon exemple est notre `