unslug fr: move

1 files changed, 137 insertions, 0 deletions

diff --git a/files/fr/conflicting/learn/css/building_blocks/selectors/index.html b/files/fr/conflicting/learn/css/building_blocks/selectors/index.html
new file mode 100644
index 0000000000..d3ab8e9794
--- /dev/null
+++ b/files/fr/conflicting/learn/css/building_blocks/selectors/index.html
@@ -0,0 +1,137 @@
+---
+title: Les propriétés CSS et comment s'en servir
+slug: Apprendre/CSS/Les_propriétés_CSS
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - NeedsActiveLearning
+translation_of: Learn/CSS/Building_blocks/Selectors
+translation_of_original: Learn/CSS/CSS_properties
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+<div class="summary">
+<p>{{Glossary("CSS")}} définit l'apparence d'une page web. Il utilise des règles prédéfinies à l'aide de sélecteurs et de propriétés pour appliquer différents styles aux éléments et groupes d'éléments HTML.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Comprendre les bases de {{Glossary("HTML")}}, <a href="/fr/Apprendre/HTML/Balises_HTML">des éléments HTML</a>, et <a href="/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web#La_balise_link">comment lier des documents HTML aux feuilles de style CSS</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Connaître différents sélecteurs et propriétés CSS afin d'appliquer une mise en forme simple sur une page web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Séparer le contenu de la mise en forme rend le développement web plus rapide et facile. En définissant la structure du document uniquement dans votre fichier HTML, tandis que les informations de mise en forme sont indiquées pour leur part dans un fichier séparé (appelé feuille de style), vous pouvez mettre à jour la mise en forme de nombreux documents en une seule fois (et en profiter pour économiser des ressources ordinateur en même temps).</p>
+
+<p>La syntaxe CSS fait appel à des mots-clés intuitifs et faciles à utiliser.</p>
+
+<pre class="brush: css">p {
+   font-family: "Times New Roman", georgia, sans-serif;
+   font-size: 24px;
+}</pre>
+
+<p>Dans l'exemple précédent,  <code>p</code> est un sélecteur qui applique un style à tous les éléments <code>{{HTMLElement("p")}}</code> en même temps. Les propriétés CSS <code>font-family</code> et <code>font-size</code> sont incluses dans des accolades et les valeurs correspondantes, juste après les deux-points, déterminent le style à appliquer.</p>
+
+<p>Il existe plus de <a href="/fr/docs/Web/CSS/Reference">250 propriétés</a> pour mettre en forme votre document. Du texte à la mise en page complexe, (presque) tout est possible.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p>Si les propriétés sont plutôt simples à utiliser, il en va parfois autrement des sélecteurs. Ne vous inquiétez pas, ce n'est pas si ardu et les maitriser permet de tirer parti du grand potentiel du CSS. Dans les exemples qui suivent, nous allons faire connaissance avec les sélecteurs les plus courants.</p>
+
+<p>Pour définir une règle CSS, on utilise des sélecteurs qu'on associe à des propriétés. Ces sélecteurs déterminent quels élements vont recevoir les propriétés précisées dans la règle. Notez que plusieurs règles peuvent s'appliquer à un même élément. La cascade CSS (dont on reparlera plus tard) définit alors quelle règle s'appliquera en cas de conflit. Pour l'instant, retenez simplement que la règle contenant les <a href="/fr/docs/Web/CSS/Spécificité">sélecteurs les plus précis</a> prend le dessus sur les règles avec les sélecteurs plus basiques.</p>
+
+<h3 id="Le_sélecteur_d'élément">Le sélecteur d'élément</h3>
+
+<p>Les sélecteurs d'éléments désignent des éléments HTML uniquement par leur nom. De plus, comme tous les sélecteurs CSS, vous pouvez appliquer un ensemble de propriétés communes à plusieurs élements à la fois.</p>
+
+<p>Pour notre premier exemple, intéressons nous au fragment de code HTML suivant :</p>
+
+<pre class="brush: html">&lt;h1&gt;Je suis un exemple.&lt;/h1&gt;
+&lt;p&gt;Dans cet exemple, je suis un paragraphe.&lt;/p&gt;
+&lt;p&gt;Et je suis un second paragraphe.&lt;/p&gt;
+</pre>
+
+<p>Dans la règle CSS qui suit, le sélecteur d'élement <code>p</code> applique les styles définis à tous les éléments <code>{{HTMLElement("p")}}</code> de notre document HTML simultanément, évitant ainsi d'inutiles répétitions. On utilise la propriété {{cssxref("font-family")}} (qui définit la police avec laquelle le texte apparait) et {{cssxref("font-size")}} (qui définit pour sa part la taille du texte).</p>
+
+<pre class="brush: css">p {
+  font-family: "Helvetica", Arial, sans-serif;
+  font-size  : 12px;
+}</pre>
+
+<p>La prochaine règle CSS s'applique uniquement à l'élément<code> {{HTMLElement("h1")}}</code>. On fait appel à la propriété {{cssxref("font-size")}} pour que la taille du titre soit deux fois plus grande que celle du texte et à la propriété {{cssxref("font-weight")}} pour qu'il soit également en gras.</p>
+
+<pre class="brush: css">h1 {
+  font-size  : 24px;
+  font-weight: bold;
+}</pre>
+
+<p>La règle CSS suivante applique les styles demandés à la fois aux éléments <code>{{HTMLElement("h1")}}</code> et aux éléments <code>{{HTMLElement("p")}}</code>, cela permet potentiellement d'éviter des redondances inutiles dans le code. Cette façon de procéder est appelée « groupe de sélecteurs » ou « chaîne de sélecteurs ». Notez qu'un point virgule est nécessaire pour séparer les sélecteurs. Ici nous utilisons la propriété {{cssxref("color")}} pour appliquer la même couleur au texte des <code>h1</code> et à celui des paragraphes.</p>
+
+<pre class="brush: css">h1, p {
+  color: darkmagenta;
+}</pre>
+
+<p>Voici le résultat obtenu avec ce code :</p>
+
+<p>{{EmbedLiveSample('Le_sélecteur_d\'élément')}}</p>
+
+<h3 id="Le_sélecteur_id">Le sélecteur <code>id</code></h3>
+
+<p>L'attribut <code>id</code><strong> </strong>d'un élément HTML donné permet d'identifier de façon unique cet élément. Par conséquent, un sélecteur <code>id</code> est utilisé uniquement lorsqu'un ensemble de règles de style s'applique à un seul élement.</p>
+
+<p>Pour notre prochain exemple, prenons le fragment de code HTML suivant :</p>
+
+<pre class="brush: html">&lt;p id="coucou"&gt;Coucou monde !&lt;/p&gt; </pre>
+
+<p>La règle CSS suivante s'applique exclusivement à cet élément, identifié et unique. Pour transformer un sélecteur ordinaire en sélecteur <code>id</code>, il suffit de placer un signe dièse (#) devant le nom de l'identifiant (<em>id</em>). Nous faisons appel à trois propriétés : {{cssxref("text-align")}} pour centrer le texte dans le paragraphe,  {{cssxref("border")}} pour encadrer le paragraphe d'un cadre fin, et {{cssxref("padding")}} afin d'ajouter une marge intérieure supplémentaire entre le texte et le cadre.</p>
+
+<pre class="brush: css">#coucou {
+  text-align: center;
+  border    : 1px solid black;
+  padding   : 8px;
+}</pre>
+
+<p>Voici le résultat final obtenu:</p>
+
+<p>{{EmbedLiveSample('Le_sélecteur_id')}}</p>
+
+<h3 id="Le_sélecteur_class">Le sélecteur <code>class</code></h3>
+
+<p>À l'intérieur du code HTML, l'attribut <code>class</code><strong> </strong>permet de donner des identifiants multiples aux élements HTML. Ces identifiants peuvent ainsi être combinés avec le CSS pour regrouper des élements en fonction de leur nom.</p>
+
+<p>Pour notre prochain exemple, analysez le fragment de code HTML suivant :</p>
+
+<pre class="brush: html">&lt;h1 class="coucou"&gt;Coucou !&lt;/h1&gt;
+&lt;p class="coucou salut"&gt;Retrouvons-nous !&lt;/p&gt;
+&lt;p class="salut"&gt;Et déplaçons des montagnes.&lt;/p&gt;
+</pre>
+
+<p>Nous allons appliquer une règle CSS à tous les éléments contenant la classe <code>coucou</code>. Pour transformer un sélecteur en sélecteur class, placez simplement un point devant le nom de la classe (de la même manière que nous avions mis un signe dièse dans le cas précédent). Nous utilisons ici la propriété {{cssxref("font-style")}} pour mettre le texte en italique.</p>
+
+<pre class="brush: css">.coucou {
+  font-style: italic;
+}</pre>
+
+<p>En voici une autre pour tous les éléments avec la classe <code>salut</code>. Ici, nous utilisons la propriété {{cssxref("text-decoration")}} pour barrer le texte d'une ligne.</p>
+
+<pre class="brush: css">.salut {
+  text-decoration: line-through;
+}</pre>
+
+<p>Voici le résultat obtenu :</p>
+
+<p>{{EmbedLiveSample('Le_sélecteur_class')}}</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Nous venons de voir les bases pour commencer en CSS. Vous pouvez maintenant en <a href="/fr/Apprendre/CSS/formatage_texte_CSS">apprendre davantage sur le formatage du texte</a> ou commencer à explorer <a href="/fr/docs/Web/CSS/Tutorials">nos tutoriels CSS</a> dès maintenant.</p>