CSS column-rule-Eigenschaft
Die column-rule-Shorthand-Eigenschaft definiert den Stil, die Breite und die Farbe der Regel zwischen den Spalten. Beachten Sie, dass sie nur gerendert wird, wenn column-count oder columns für das Element festgelegt ist. Sie wird durch die folgenden Eigenschaften festgelegt:
Wenn die Eigenschaft column-rule-color nicht festgelegt ist, wird standardmäßig currentColor verwendet. Wie bei anderen Shorthand-Eigenschaften wird ein nicht angegebener Wert auf seinen Anfangswert gesetzt.
Die Eigenschaft column-rule ist eine der CSS3-Eigenschaften.
| Anfangswert | medium (Breite), none (Stil), currentColor (Farbe) |
|---|---|
| Gilt für | Block-Container, die ein mehrspaltiges Layout erstellen. Gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Ja. Die Farbe und die Breite der column-rule sind animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.columnRule = "5px outset #ccc"; |
Syntax
Syntax der CSS column-rule-Eigenschaft
css
column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;Hinweis: Die Reihenfolge der Werte für Breite, Stil und Farbe ist in der Shorthand-Schreibweise flexibel.
Beispiel zur column-rule-Eigenschaft:
Beispiel mit Werten für Breite, Stil und Farbe
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule: 5px dotted #ccc;
}
</style>
</head>
<body>
<h1>Column-rule example</h1>
<p>Here the column-rule is set to 5px dotted gray.</p>
<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
Wenn ein einzelner Wert angegeben wird, wird er als column-rule-style interpretiert.
Beispiel zur column-rule-Eigenschaft mit einem Wert:
Beispiel mit einem einzelnen Wert
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule: dashed;
}
</style>
</head>
<body>
<h2>Column-rule example</h2>
<p>Here the column-rule is set to only "dashed".</p>
<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>Beispiel zur column-rule-Eigenschaft mit angegebenem Breite, Stil und Farbe:
Beispiel mit allen angegebenen Werten
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: 30px;
column-rule: 10px groove #ccc;
}
</style>
</head>
<body>
<h2>Column-rule example</h2>
<p>Here the column-rule is set to 10px groove gray.</p>
<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 |
|---|---|
| column-rule-width | Definiert die Breite der Regel zwischen den Spalten. Standardwert ist "medium". |
| column-rule-style | Definiert den Stil der Regel zwischen den Spalten. Standardwert ist "none". |
| column-rule-color | Legt die Farbe der Regel fest. Standardwert ist die aktuelle Farbe des Elements. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
Was macht die 'column-rule'-Eigenschaft in CSS?