CSS column-rule-color Eigenschaft
Die CSS-Eigenschaft column-rule-color legt die Farbe des Spaltentrennstrichs fest. Beispiele und eigene Farben festlegen.
Die CSS-Eigenschaft column-rule-color legt die Farbe des Trennstrichs (der Trennlinie) fest, der zwischen den Spalten eines Mehrspalten-Layouts gezeichnet wird. Der Trennstrich selbst wird mit column-rule-style erstellt; wenn kein Stil gesetzt ist, wird der Trennstrich — und damit auch seine Farbe — nicht angezeigt.
Diese Eigenschaft wirkt sich nur auf Multicol-Elemente aus, d. h. Elemente, die mit column-count oder column-width (oder der Kurzschreibweise columns) in Spalten angeordnet sind. Sie gehört zu den CSS3-Eigenschaften.
Die Farbe des Trennstrichs kann auch zusammen mit seiner Breite und seinem Stil über die Kurzschreibweise column-rule festgelegt werden, was die gebräuchliche Methode ist, alle drei auf einmal zu deklarieren.
Standardmäßig ist der Wert currentColor, sodass eine nicht gesetzte Trennstrichfarbe der Text-color des Elements entspricht. Webfarben finden Sie in unserem Bereich HTML-Farben und können Ihre eigenen mit dem Color Picker-Tool auswählen.
Wann verwenden
Verwenden Sie column-rule-color, wenn sich der Trennstrich zwischen den Spalten von der Textfarbe unterscheiden soll — beispielsweise ein dezenter grauer Strich zwischen dunklem Fließtext oder eine Markenlinie als Akzent. Da der Trennstrich rein dekorativ ist, nimmt er keinen Layout-Raum ein (er liegt innerhalb des column-gap), sodass eine Farbänderung den Inhalt nie neu umbricht.
| Anfangswert | currentColor |
|---|---|
| Gilt für | Multicol-Elemente. |
| Vererbbar | Nein. |
| Animierbar | Ja. Die Farbe des Trennstrichs ist animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.columnRuleColor = "#666"; |
Syntax
Syntax der CSS-Eigenschaft column-rule-color
column-rule-color: color | initial | inherit;Sie können jede gültige CSS-Farbe übergeben: einen Farbnamen, einen Hexadezimalcode oder einen Wert vom Typ rgb(), rgba(), hsl() oder hsla().
Beispiele
Farbname als Wert
Beispiel der CSS-Eigenschaft column-rule-color mit dem Wert 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>Denken Sie daran, auch column-rule-style zu setzen — ohne einen Stil (wie solid, dashed oder double) wird der Trennstrich nicht gezeichnet und seine Farbe hat keinen sichtbaren Effekt.
Hexadezimalwert
Beispiel der CSS-Eigenschaft column-rule-color mit einem Hexadezimalwert
<!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>Ergebnis:
RGB-Wert
Beispiel der CSS-Eigenschaft column-rule-color mit einem RGB-Wert
<!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>HSL-Wert
Beispiel der CSS-Eigenschaft column-rule-color mit einem HSL-Wert
<!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>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| color | Legt die Farbe des Trennstrichs fest. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. | |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
Der Spaltentrennstrich wird durch drei Langschreibweise-Eigenschaften gesteuert, die üblicherweise mit der Kurzschreibweise kombiniert werden:
column-rule— Kurzschreibweise zum gleichzeitigen Setzen von Stil, Breite und Farbe.column-rule-style— der Linienstil; erforderlich, damit der Trennstrich (und seine Farbe) sichtbar ist.column-rule-width— die Stärke des Trennstrichs.
Siehe auch column-gap, das den Raum definiert, in dem der Trennstrich liegt, sowie die Kurzschreibweise columns zum Aufbau des Mehrspalten-Layouts selbst.