CSS-Eigenschaft column-rule

❮ Vorige Nächste ❯

Die Shorthand-Eigenschaft column-rule definiert den Stil, die Breite und die Farbe der Regel zwischen den Spalten. Sie wird durch die Eigenschaften column-rule-style, column-rule-width und column-rule-color angegeben.

Es wurden einige Eigenschaftserweiterungen hinzugefügt: -webkit- für Safari, Google Chrome und Opera (neuere Versionen), -moz- für Firefox, -o- für ältere Versionen von Opera usw.

Anfangswert	medium none currentColor
Filt für	medium none currentColor
Geerbt	Nein
Animierbar	Ja, die Farbe und die Breite von column-rule sind animierbar.
Version	CSS3
DOM Syntax	object.style.columnRule = "5px outset #ccc";

Syntax

column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;
      -webkit- column-rule: 5px dotted #ccc;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;
      -moz-column-rule: 5px dotted #ccc;
      column-count: 3;
      column-gap: 30px;
      column-rule: 5px dotted #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-style</h2>
    <p>Hier ist column-rule auf 5px dotted gray eingestellt.</p>
    <div>
      Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Versuch es selber!

Sie können nur einen Wert definieren und er wird trotzdem funktionieren.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;
      -webkit- column-rule: dashed;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;
      -moz-column-rule: dashed;
      column-count: 3;
      column-gap: 30px;
      column-rule: dashed;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-style</h2>
    <p>Hier ist column-rule nur mit "dashed" definiert.</p>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Versuch es selber!

In diesem Beispiel beträgt die Breite der Regel 10px, der Stil ist durch "groove" definiert und die Farbe ist grau.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 4;
      -webkit-column-gap: 30px;
      -webkit- column-rule: 10px groove #ccc;
      /* Firefox */
      -moz-column-count: 4;
      -moz-column-gap: 30px;
      -moz-column-rule: 10px groove #ccc;
      column-count: 4;
      column-gap: 30px;
      column-rule: 10px groove #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-style</h2>
    <p>Hier ist column-rule auf 10px groove gray eingestellt.</p>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
column-rule-width	Der Wert definiert die Breite zwischen den Spalten. Der Standardwert ist "medium".
column-rule-style	Der Wert definiert den Stil der Regel zwischen den Spalten. Der Standardwert ist "none".
column-rule-color	Der Wert definiert die Farbe der Regel. Der Standardwert ist die aktuelle Farbe des Elements.
initial	Es stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Es erbt die Eigenschaft von ihrem übergeordneten Element.