From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/border-left-style/index.md | 302 +++++++++++++++------------- 1 file changed, 166 insertions(+), 136 deletions(-) (limited to 'files/fr/web/css/border-left-style') diff --git a/files/fr/web/css/border-left-style/index.md b/files/fr/web/css/border-left-style/index.md index 3bb7d560f3..1f09e7474f 100644 --- a/files/fr/web/css/border-left-style/index.md +++ b/files/fr/web/css/border-left-style/index.md @@ -7,19 +7,18 @@ tags: - Reference translation_of: Web/CSS/border-left-style --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété border-left-style définit le style de ligne utilisé pour mettre en forme la bordure sur le côté gauche d'une boîte.

+La propriété** `border-left-style`** définit le style de ligne utilisé pour mettre en forme la bordure sur le côté gauche d'une boîte. -
{{EmbedInteractiveExample("pages/css/border-left-style.html")}}
+{{EmbedInteractiveExample("pages/css/border-left-style.html")}} -
-

Note : La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.

-
+> **Note :** La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins. -

Syntaxe

+## Syntaxe -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 border-left-style: none;
 border-left-style: hidden;
 border-left-style: dotted;
@@ -35,71 +34,121 @@ border-left-style: outset;
 border-left-style: inherit;
 border-left-style: initial;
 border-left-style: unset;
-
- -

Valeurs

- -
-
<br-style>
-
Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté gauche. Il peut prendre l'une des valeurs suivantes : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
noneL'effet obtenu est le même qu'avec hidden : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, none a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.
hiddenL'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.
dottedAffiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-left-width")}}.
dashedAffiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
solidAffiche une ligne droite continue.
doubleDeux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-left-width")}}.
grooveLa bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridgeLa bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
insetLa bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut collapsed, cette valeur se comporte comme groove.
outset -

La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut collapsed, cette valeur se comporte comme ridge.

-
-
-
- -

Syntaxe formelle

+``` + +### Valeurs + +- `` + + - : Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté gauche. Il peut prendre l'une des valeurs suivantes : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none + L'effet obtenu est le même qu'avec hidden : aucune bordure + n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est + définie, la valeur calculée de + {{cssxref("border-left-width")}} sera 0, même + si cette dernière indique une autre valeur. Lorsqu'utilisée sur une + cellule d'un tableau avec la fusion des bordures, none a la + priorité la plus basse donc si une autre bordure est définie et fusionne + avec celle-ci, elle sera  affichée. +
hidden + L'effet obtenu est le même qu'avec none : aucune bordure + n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est + définie, la valeur calculée de + {{cssxref("border-left-width")}} sera 0, même + si cette dernière indique une autre valeur. Lorsqu'utilisée sur une + cellule d'un tableau avec la fusion des bordures, hidden a + la plus haute priorité et donc si une autre bordure est définie et + fusionne avec celle-ci, aucune ne sera  affichée. +
dotted + Affiche une série de points ronds. L'espace entre ces points n'est pas + défini par la spécification et est donc laissé à l'implémentation. Le + rayon des points correspond à la moitié de + {{cssxref("border-left-width")}}. +
dashed + Affiche une série de tirets. La taille de ces tirets n'est pas définie + par la spécification et est laissée à l'implémentation. +
solidAffiche une ligne droite continue.
double + Deux lignes droites sont affichées dont la somme des épaisseurs + correspond à la valeur fournie par {{cssxref("border-width")}} + ou {{cssxref("border-left-width")}}. +
groove + La bordure crée un effet 3D donnant l'impression qu'elle a été gravée + dans le document. On obtient un effet opposé à ridge. +
ridge + La bordure crée un effet 3D donnant l'impression que la bordure ressort + du document. L'effet obtenu est opposé à celui obtenu avec + groove. +
inset + La bordure crée un effet 3D qui donne l'impression que la boîte est + renfoncée dans le document (l'effet obtenu est opposé à celui obtenu + avec outset). Lorsqu'elle est appliquée sur une cellule de + tableau et que {{cssxref("border-collapse")}} vaut + collapsed, cette valeur se comporte comme + groove. +
outset +

+ La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est + opposé à inset). Lorsqu'elle est utilisé sur une cellule + de tableau avec {{cssxref("border-collapse")}} qui vaut + collapsed, cette valeur se comporte comme + ridge. +

+
+ +### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
/* On applique un style sur le tableau */
+```css
+/* On applique un style sur le tableau */
 table {
   border-width: 2px;
   background-color: #52E385;
@@ -118,79 +167,60 @@ tr, td {
 .b7 {border-left-style:groove;}
 .b8 {border-left-style:ridge;}
 .b9 {border-left-style:inset;}
-.b10 {border-left-style:outset;}
- -

HTML

- -
<table>
-  <tr>
-    <td class="b1">none</td>
-    <td class="b2">hidden</td>
-    <td class="b3">petits points</td>
-    <td class="b4">tirets</td>
-  </tr>
-  <tr>
-    <td class="b5">solid</td>
-    <td class="b6">double</td>
-    <td class="b7">groove</td>
-    <td class="b8">ridge</td>
-  </tr>
-  <tr>
-    <td class="b9">inset</td>
-    <td class="b10">outset</td>
-  </tr>
-</table>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 300, 200)}}

- -

Spécifications

- - - +.b10 {border-left-style:outset;} +``` + +### HTML + +```html +
- - - + + + + - - - - - + + + + - - - + + -
SpécificationÉtatCommentairesnonehiddenpetits pointstirets
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}{{Spec2('CSS3 Backgrounds')}}Aucune modification significative.soliddoublegrooveridge
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}{{Spec2('CSS2.1')}}Définition initiale.insetoutset
+``` + +### Résultat + +{{EmbedLiveSample('Exemples', 300, 200)}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------- | +| {{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}} | {{Spec2('CSS3 Backgrounds')}} | Aucune modification significative. | +| {{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}} | {{Spec2('CSS2.1')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.border-left-style")}} + +## Voir aussi + +- Les autres propriétés liées au style des bordures : + + - {{cssxref("border-right-style")}} + - {{cssxref("border-top-style")}} + - {{cssxref("border-bottom-style")}} + - {{cssxref("border-style")}}. + +- Les autres propriétés liées à la bordure gauche : -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-left-style")}}

- -

Voir aussi

- - + - {{cssxref("border-left")}} + - {{cssxref("border-left-color")}} + - {{cssxref("border-left-width")}}. -- cgit v1.2.3-54-g00ecf