diff options
Diffstat (limited to 'files/fr/learn/css/first_steps/getting_started/index.html')
| -rw-r--r-- | files/fr/learn/css/first_steps/getting_started/index.html | 50 |
1 files changed, 25 insertions, 25 deletions
diff --git a/files/fr/learn/css/first_steps/getting_started/index.html b/files/fr/learn/css/first_steps/getting_started/index.html index 999acf147b..9bbccc2107 100644 --- a/files/fr/learn/css/first_steps/getting_started/index.html +++ b/files/fr/learn/css/first_steps/getting_started/index.html @@ -15,9 +15,9 @@ translation_of: Learn/CSS/First_steps/Getting_started <div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> -<p class="summary">Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS.</p> +<p>Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -34,7 +34,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>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 <code>index.html</code>.</p> -<pre class="brush: html notranslate"><!doctype html> +<pre class="brush: html"><!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> @@ -61,8 +61,8 @@ translation_of: Learn/CSS/First_steps/Getting_started </html> </pre> -<div class="blockIndicator note"> -<p><strong>Note </strong>: 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.</p> +<div class="note"> +<p><strong>Note :</strong> 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.</p> </div> <h2 id="Ajouter_CSS_à_notre_document">Ajouter CSS à notre document</h2> @@ -73,11 +73,11 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Pour lier <code>styles.css</code> à <code>index.html</code> ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML :</p> -<pre class="brush: html notranslate"><link rel="stylesheet" href="styles.css"></pre> +<pre class="brush: html"><link rel="stylesheet" href="styles.css"></pre> <p>Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut <code>rel</code> ; la valeur de l'attribut <code>href</code> donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans <code>styles.css</code>. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: red; }</pre> @@ -91,13 +91,13 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>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 <code>p</code>. Voilà la règle pour passer en vert tous les paragraphes :</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: green; }</pre> <p>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> -<pre class="brush: css notranslate">p, li { +<pre class="brush: css">p, li { color: green; }</pre> @@ -111,7 +111,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>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 <code><ul></code>, 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 :</p> -<pre class="brush: css notranslate">li { +<pre class="brush: css">li { list-style-type: none; }</pre> @@ -127,7 +127,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Dans le document HTML, ajouter un <a href="/fr/docs/Web/HTML/Attributs_universels/class">attribut class</a> au deuxième item de la liste :</p> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>Item un</li> <li <strong>class="special"</strong>>Item deux</li> <li>Item <em>trois</em></li> @@ -135,7 +135,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Dans votre CSS vous pouvez maintenant cibler la classe <code>special</code> grâce à un sélecteur fait du nom de la classe précédé d'un point. Ajoutez le code suivant à votre feuille de style :</p> -<pre class="brush: css notranslate">.special { +<pre class="brush: css">.special { color: orange; font-weight: bold; }</pre> @@ -146,14 +146,14 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Vous verrez parfois des règles avec un sélecteur qui combine le nom de l'élément HTML avec celui de la classe :</p> -<pre class="brush: css notranslate">li.special { +<pre class="brush: css">li.special { color: orange; font-weight: bold; }</pre> <p>Cette syntaxe signifie "s'applique à tous les éléments <code>li</code> dont l'attribut <code>class</code> a la valeur <code>special</code><em> </em>". Cette règle ne s'applique alors plus à l'élément <code><span></code> ou à tout autre élément dont l'attribut <code>class</code> a la valeur <code>special</code><em> </em>mais<em> </em>qui n'est pas un <code><li>.</code> Pour que la règle s'applique aussi au <code><span></code> il faudrait l'ajouter dans la liste des sélecteurs :</p> -<pre class="brush: css notranslate">li.special, +<pre class="brush: css">li.special, span.special { color: orange; font-weight: bold; @@ -167,7 +167,7 @@ span.special { <p>Ajoutez la règle suivante à votre feuille de style :</p> -<pre class="brush: css notranslate">li em { +<pre class="brush: css">li em { color: rebeccapurple; }</pre> @@ -177,7 +177,7 @@ span.special { <p>Ajoutez cette règle à votre feuille de style :</p> -<pre class="brush: css notranslate">h1 + p { +<pre class="brush: css">h1 + p { font-size: 200%; }</pre> @@ -185,15 +185,15 @@ span.special { <p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS Selectors</a> du cours suivant.</p> +<div class="note"> +<p><strong>Note :</strong> A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS Selectors</a> du cours suivant.</p> </div> <h2 id="Mise_en_forme_basée_sur_létat">Mise en forme basée sur l'état</h2> -<p>Pour finir ce tutoriel, voyons comment on peut appliquer une mise en forme basée sur l'état d'un élément. La mise en forme des liens illustre cela à merveille. Pour appliquer un style sur un lien, on doit cibler l'élément <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> (ancre). Cet élément a différents états selon que le lien a ou n'a pas été visité (<code>visited</code>), est survolé par le curseur (<code>hover</code>), a le focus clavier (<code>focus</code>), ou si l'utilisateur est en train de cliquer sur ce lien (<code>active</code>). CSS permet de cibler ces différents états — les règles ci-dessous colorent en rose les liens non visités et en vert ceux qui l'ont été.</p> +<p>Pour finir ce tutoriel, voyons comment on peut appliquer une mise en forme basée sur l'état d'un élément. La mise en forme des liens illustre cela à merveille. Pour appliquer un style sur un lien, on doit cibler l'élément <code><a href="/fr/docs/Web/HTML/Element/a"><a></a></code> (ancre). Cet élément a différents états selon que le lien a ou n'a pas été visité (<code>visited</code>), est survolé par le curseur (<code>hover</code>), a le focus clavier (<code>focus</code>), ou si l'utilisateur est en train de cliquer sur ce lien (<code>active</code>). CSS permet de cibler ces différents états — les règles ci-dessous colorent en rose les liens non visités et en vert ceux qui l'ont été.</p> -<pre class="brush: css notranslate">a:link { +<pre class="brush: css">a:link { color: pink; } @@ -203,7 +203,7 @@ a:visited { <p>On peut changer l'aspect des liens survolés, par exemple en supprimant le soulignement, avec la règle suivante :</p> -<pre class="brush: css notranslate">a:hover { +<pre class="brush: css">a:hover { text-decoration: none; }</pre> @@ -213,8 +213,8 @@ a:visited { <p>Nous avons supprimé le soulignement quand le lien est survolé.Vous pourriez supprimer le soulignement quel que soit l'état du lien. Dans un vrai site, il est quand même important que le visiteur sache qu'un lien est un lien. Le soulignement donne un indice important aux visiteurs pour réaliser qu'un bout de texte dans un paragraphe est cliquable — c'est le comportement auquel ils sont habitués. Avec le contrôle que donne CSS, les changements de style peuvent parfois rendre le document moins accessible — à chaque fois que nécessaire nous nous efforcerons de signaler les pièges classiques dans cette direction.</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'<a href="/fr/docs/Apprendre/a11y">accessibilité</a> : les règles pour que nos pages soient compréhensibles et utilisables par tous.</p> +<div class="note"> +<p><strong>Note :</strong> dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'<a href="/fr/docs/Apprendre/a11y">accessibilité</a> : les règles pour que nos pages soient compréhensibles et utilisables par tous.</p> <p>Vos visiteurs peuvent consulter votre page depuis un ordinateur équipé d'une souris ou d'un trackpad, ou depuis un téléphone avec un écran tactile. Ils peuvent aussi utiliser un lecteur d'écran qui parcourt le contenu du document. Ils pourraient avoir besoin d'un affichage en grands caractères, ou parcourir votre site en ne naviguant qu'avec le clavier.</p> @@ -225,7 +225,7 @@ a:visited { <p>On peut associer sélecteurs et combinateurs. Par exemple :</p> -<pre class="brush: css notranslate">/* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article> */ +<pre class="brush: css">/* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article> */ article p span { ... } /* sélectionne tout <p> qui vient juste après un <ul>, lui-même venant just après un <h1> */ @@ -233,7 +233,7 @@ h1 + ul + p { ... }</pre> <p>On peut aussi combiner les types multiples. Essayez d'ajouter les règles suivantes à votre feuille de style :</p> -<pre class="brush: css notranslate">body h1 + p .special { +<pre class="brush: css">body h1 + p .special { color: yellow; background-color: black; padding: 5px; |