Propriété CSS column-rule-color
La propriété CSS column-rule-color définit la couleur du séparateur entre les colonnes. Découvrez des exemples et définissez vos propres couleurs.
La propriété CSS column-rule-color définit la couleur du séparateur (la ligne de division) tracé entre les colonnes d'une mise en page à plusieurs colonnes. Le séparateur lui-même est créé avec column-rule-style ; si aucun style n'est défini, le séparateur — et donc sa couleur — n'est pas affiché.
Cette propriété ne prend effet que sur les éléments multicolonnes, c'est-à-dire les éléments mis en page en colonnes avec column-count ou column-width (ou le raccourci columns). Elle fait partie des propriétés CSS3.
La couleur du séparateur peut également être définie conjointement avec sa largeur et son style grâce à la propriété raccourcie column-rule, qui est la façon courante de déclarer les trois à la fois.
Par défaut, la valeur est currentColor, de sorte qu'une couleur de séparateur non définie correspond à la color de texte de l'élément. Vous pouvez trouver les couleurs web dans notre section couleurs HTML et choisir la vôtre avec l'outil Color Picker.
Quand l'utiliser
Utilisez column-rule-color lorsque vous souhaitez que le séparateur entre les colonnes diffère de la couleur du texte — par exemple un séparateur gris discret entre un texte de corps foncé, ou une ligne d'accentuation de marque. Étant purement décoratif, le séparateur n'occupe pas d'espace de mise en page (il se situe à l'intérieur du column-gap), donc modifier sa couleur ne provoque jamais de recalcul de votre contenu.
| Valeur initiale | currentColor |
|---|---|
| S'applique à | Éléments multicolonnes. |
| Héritage | Non. |
| Animatable | Oui. La couleur du séparateur est animatable. |
| Version | CSS3 |
| Syntaxe DOM | object.style.columnRuleColor = "#666"; |
Syntaxe
Syntaxe de la propriété CSS column-rule-color
column-rule-color: color | initial | inherit;Vous pouvez passer n'importe quelle couleur CSS valide : une couleur nommée, un code hexadécimal, ou une valeur rgb(), rgba(), hsl(), ou hsla().
Exemples
Valeur de nom de couleur
Exemple de la propriété CSS column-rule-color avec la valeur lightgreen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 20px;
column-rule-style: dashed;
column-rule-color: lightgreen;
}
</style>
</head>
<body>
<h1>The column-rule-color 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>N'oubliez pas de définir également column-rule-style — sans un style (tel que solid, dashed, ou double), le séparateur n'est pas tracé et sa couleur n'a aucun effet visible.
Valeur hexadécimale
Exemple de la propriété CSS column-rule-color avec une valeur hexadécimale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-color: #8ebf42;
}
</style>
</head>
<body>
<h1>The column-rule-color 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>Résultat :
Valeur RGB
Exemple de la propriété CSS column-rule-color avec une valeur RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: double;
column-rule-color: rgb(234, 211, 21);
}
</style>
</head>
<body>
<h1>The column-rule-color 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>Valeur HSL
Exemple de la propriété CSS column-rule-color avec une valeur HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule-style: solid;
column-rule-color: hsl(351, 97%, 57%);
}
</style>
</head>
<body>
<h1>The column-rule-color 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
| Valeur | Description | Essayer |
|---|---|---|
| color | Définit la couleur du séparateur. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. | |
| initial | Rétablit la valeur par défaut de la propriété. | |
| inherit | Hérite la propriété de son élément parent. |
Propriétés associées
Le séparateur de colonne est contrôlé par trois propriétés longues, généralement combinées avec le raccourci :
column-rule— raccourci pour définir le style, la largeur et la couleur en une seule fois.column-rule-style— le style de ligne ; requis pour que le séparateur (et sa couleur) apparaisse.column-rule-width— l'épaisseur du séparateur.
Voir aussi column-gap, qui définit l'espace dans lequel se trouve le séparateur, et le raccourci columns pour construire la mise en page multicolonnes elle-même.