Propriété CSS column-rule-style
La propriété column-rule-style définit le style du règle entre les colonnes. Column-rule est similaire à une bordure, que vous pouvez ajouter pour séparer les colonnes adjacents. Ça peut aussi avoir le style comme une bordure.
On doit définir les propriétés columns ou column-count, car il doit exister des colonnes pour qu'on puisse spécifier leur style.
La propriété column-rule-style a les valeurs suivantes:
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Quelques extensions de la propriété sont ajoutées, telle que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), -moz- pour Firefox, -o- pour les versions anciennes d'Opera etc.
| Valeur initiale | none |
| Appliquée à | Éléments multicol. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.columnRuleStyle = "dashed" ; |
Syntaxe
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-rule-style: dotted;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-rule-style: dotted;
column-count: 3;
column-gap: 30px;
column-rule-style: dotted;
}
</style>
</head>
<body>
<h2>Exemple de la propriété column-rule-style</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
</div>
</body>
</html>Voici un autre exemple avec la valeur "double". Les règles entre les colonnes sont doubles. Dans cet exemple aussi, une couleur est spécifiée pour le règle avec la propriété column-rule-color.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-rule-style: double;
-webkit-column-rule-width: 5px;
-webkit-column-rule-color: #1c87c9;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-rule-style: double;
-moz-column-rule-width: 5px;
-moz-column-rule-color: #1c87c9;
column-count: 3;
column-gap: 30px;
column-rule-style: double;
column-rule-color: #1c87c9;
column-rule-width: 5px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Exemple de la propriété column-rule-style</h1>
<div>
Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| none | Aucun règle n'est spécifié. C'est la valeur initiale. |
| hidden | Le règle est masqué. |
| dotted | Le règle est en pointillée. |
| dashed | Le règle est de tirets. |
| solid | Le règle est solide. |
| double | Le règle est double. |
| groove | Le règle est 3D groove. Les valeurs width et color définissent l'effet. |
| ridge | Le règle est 3D ridge. Les valeurs width et color définissent l'effet. |
| inset | Le règle est 3D inset. Les valeurs width et color définissent l'effet. |
| outset | Le règle est 3D outset. Les valeurs width et color définissent l'effet. |
| initial | Définit la valeur initiale. |
| inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
|
|
|
|
|
|---|---|---|---|---|
|
50.0 -webkit- |
12.0 -webkit- |
52.0 + 3.5 -moz- |
3.0 -webkit- |
11.1 + 15.0 -webkit- |
Pratiquez vos connaissances
Quels sont les styles disponibles pour la propriété 'column-rule-style' en CSS?
Correcte!
Incorrecte!