diff options
Diffstat (limited to 'files/fr/web/css/shorthand_properties/index.html')
-rw-r--r-- | files/fr/web/css/shorthand_properties/index.html | 36 |
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> |