Propriété CSS column-rule-style
La propriété column-rule-style spécifie le style de la règle entre les colonnes. Une column-rule est similaire à une border que vous pouvez ajouter pour séparer des colonnes adjacentes. Elle peut également avoir des styles comme une bordure.
Cette propriété fait partie des propriétés CSS3.
Pour utiliser cette propriété, vous devez d’abord définir des colonnes à l’aide des propriétés columns ou column-count.
La propriété column-rule-style accepte les valeurs suivantes :
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
| Initial Value | none |
|---|---|
| Applies to | Éléments multicolonnes. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.columnRuleStyle = "dashed" ; |
Syntaxe
Syntaxe de la propriété CSS column-rule-style
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Exemple de la propriété column-rule-style :
Exemple de la propriété CSS column-rule-style avec la valeur dotted
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule-style: dotted;
}
</style>
</head>
<body>
<h2>Column-rule-style property example</h2>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Résultat
Dans l’exemple suivant, les règles entre les colonnes sont doubles. Dans cet exemple, la couleur est spécifiée pour la règle avec la propriété column-rule-color.
Exemple de la propriété column-rule-style avec la valeur "double" :
Exemple de la propriété CSS column-rule-style avec la valeur double
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
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>Column-rule-style property example</h1>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Valeurs
| Value | Description |
|---|---|
| none | Aucune règle n’est définie. C’est la valeur par défaut. |
| hidden | La règle est masquée. |
| dotted | La règle est pointillée. |
| dashed | La règle est en tirets. |
| solid | La règle est pleine. |
| double | La règle est double. |
| groove | La règle est en relief 3D. Les valeurs de largeur et de couleur définissent l’effet. |
| ridge | La règle est en arête 3D. Les valeurs de largeur et de couleur définissent l’effet. |
| inset | La règle est en creux 3D. Les valeurs de largeur et de couleur définissent l’effet. |
| outset | La règle est en relief 3D sortant. Les valeurs de largeur et de couleur définissent l’effet. |
| initial | Définit la propriété sur sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Practice
Which of the following statements are true about the CSS column-rule-style property?