aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/shorthand_properties/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/css/shorthand_properties/index.html')
-rw-r--r--files/fr/web/css/shorthand_properties/index.html36
1 files changed, 18 insertions, 18 deletions
diff --git a/files/fr/web/css/shorthand_properties/index.html b/files/fr/web/css/shorthand_properties/index.html
index 9bfeea32ff..fa605b0d38 100644
--- a/files/fr/web/css/shorthand_properties/index.html
+++ b/files/fr/web/css/shorthand_properties/index.html
@@ -21,7 +21,7 @@ original_slug: Web/CSS/Propriétés_raccourcies
<ol>
<li>Une valeur qui n'est pas définie pour la propriété raccourcie <strong>sera réinitialisée avec sa valeur initiale</strong>. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi :
- <pre class="brush:css notranslate">background-color: red;
+ <pre class="brush:css">background-color: red;
background: url(images/bg.gif) no-repeat top right;
</pre>
ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} <code>transparent</code> car la deuxième déclaration prend le pas sur la première.</li>
@@ -32,19 +32,19 @@ background: url(images/bg.gif) no-repeat top right;
<table>
<tbody>
<tr>
- <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
+ <td style="width: 79px;"><img alt="border1.png" src="border1.png"></td>
<td><em>1 valeur </em>: <code>border-width: 1em</code> — La valeur unique s'adresse à tous les côtés.</td>
</tr>
<tr>
- <td><img alt="border2.png" src="/files/3647/border2.png"></td>
+ <td><img alt="border2.png" src="border2.png"></td>
<td><em>2 valeurs </em>: <code>border-width: 1em 2em</code> — La première valeur représente les côtés horizontaux en haut et en bas. La seconde valeur représente les côtés verticaux, à gauche et à droite.</td>
</tr>
<tr>
- <td><img alt="border3.png" src="/files/3648/border3.png"></td>
+ <td><img alt="border3.png" src="border3.png"></td>
<td><em>3 valeurs </em>: <code>border-width: 1em 2em 3em</code> — La première valeur représente le côté haut, la deuxième les côtés gauche et droit et la troisième représente le côté bas.</td>
</tr>
<tr>
- <td><img alt="border4.png" src="/files/3649/border4.png"></td>
+ <td><img alt="border4.png" src="border4.png"></td>
<td>
<p><em>4 valeurs </em>: <code>border-width: 1em 2em 3em 4em</code> — Les quatre valeurs représentent respectivement le côté haut, le côté droit, le côté bas et le côté haut, toujours dans cet ordre (le sens horaire).</p>
</td>
@@ -56,19 +56,19 @@ background: url(images/bg.gif) no-repeat top right;
<table>
<tbody>
<tr>
- <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
+ <td style="width: 69px;"><img alt="corner1.png" src="corner1.png"></td>
<td><em>1 valeur </em>: <code>border-radius: 1em</code> — La valeur s'applique à tous les coins.</td>
</tr>
<tr>
- <td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
+ <td><img alt="corner2.png" src="corner2.png"></td>
<td><em>2 valeurs </em>: <code>border-radius: 1em 2em</code> — La première valeur s'applique aux coins en haut à gauche et en bas à droite et la deuxième s'applique aux coins en haut à droite et en bas à gauche.</td>
</tr>
<tr>
- <td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
+ <td><img alt="corner3.png" src="corner3.png"></td>
<td><em>3 valeurs </em>: <code>border-radius: 1em 2em 3em</code> — La première valeur représente le coin en haut à gauche, la deuxième représente les coins en haut à droite et en bas à gauche et la troisième valeur représente le coin en bas à droite.</td>
</tr>
<tr>
- <td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
+ <td><img alt="corner4.png" src="corner4.png"></td>
<td>
<p><em>4 valeurs </em>: <code>border-radius: 1em 2em 3em 4em</code> — Les quatre valeurs s'appliquent respectivement au coin en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, toujours dans cet ordre (le sens horaire).</p>
</td>
@@ -84,14 +84,14 @@ background: url(images/bg.gif) no-repeat top right;
<p>Lorsqu'on décrit un arrière-plan avec les propriétés suivantes :</p>
-<pre class="brush:css notranslate">background-color: #000;
+<pre class="brush:css">background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;</pre>
<p>On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent :</p>
-<pre class="brush:css notranslate">background: #000 url(images/bg.gif) no-repeat top right;</pre>
+<pre class="brush:css">background: #000 url(images/bg.gif) no-repeat top right;</pre>
<div class="note">
<p><strong>Note :</strong> Pour être tout à fait précis, la forme raccourcie présentée juste avant est équivalente aux propriétés détaillées qui précèdent auxquelles on ajoute <code>background-attachment: scroll</code> et d'autres propriétés avec CSS3).</p>
@@ -103,7 +103,7 @@ background-position: top right;</pre>
<p>Les déclarations suivantes :</p>
-<pre class="brush:css notranslate">font-style: italic;
+<pre class="brush:css">font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
@@ -111,7 +111,7 @@ font-family: Arial, sans-serif;</pre>
<p>Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :</p>
-<pre class="brush:css notranslate">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
+<pre class="brush:css">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
<div class="note">
<p><strong>Note :</strong> Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera <code>font-variant: normal</code> et <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p>
@@ -121,32 +121,32 @@ font-family: Arial, sans-serif;</pre>
<p>Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple,</p>
-<pre class="brush:css notranslate">border-width: 1px;
+<pre class="brush:css">border-width: 1px;
border-style: solid;
border-color: #000;</pre>
<p>peut être écrit ainsi :</p>
-<pre class="brush:css notranslate">border: 1px solid #000;</pre>
+<pre class="brush:css">border: 1px solid #000;</pre>
<h2 id="Les_propriétés_liées_à_la_marge_et_au_remplissage_padding">Les propriétés liées à la marge et au remplissage (<em>padding</em>)</h2>
<p>Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (<em>padding</em>) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes :</p>
-<pre class="brush:css notranslate">margin-top: 10px;
+<pre class="brush:css">margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;</pre>
<p>sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à <em>trouble</em>) :</p>
-<pre class="brush:css notranslate">margin: 10px 5px 10px 5px;</pre>
+<pre class="brush:css">margin: 10px 5px 10px 5px;</pre>
<h2 id="La_propriété_raccourcie_universelle">La propriété raccourcie universelle</h2>
<p>CSS fournit une propriété raccourcie qui permet d'appliquer une même valeur à l'ensemble des propriétés du document : {{cssxref("all")}}.</p>
-<p>Voir l'article sur <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">la cascade et l'héritage</a> pour plus d'informations sur le fonctionnement de l'héritage.</p>
+<p>Voir l'article sur <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">la cascade et l'héritage</a> pour plus d'informations sur le fonctionnement de l'héritage.</p>
<h2 id="Voir_aussi">Voir aussi</h2>