css mit Adi Prinz

list-style-type

Mit list-style-type wird die Art des Aufzählungszeichens beziehungsweise der Nummerierung bestimmt. Die Eigenschaft ist vererbbar.

Für Aufzählungen sollte semantisch ein ul-Element und für nummerierte Listen ein ol-Element verwendet werden.

ul {
  list-style-type: square;
}

ol {
  list-style-type: lower-roman;
}

Häufige Werte für Aufzählungszeichen

• disc: gefüllter Kreis, Standardwert bei ul
• circle: nicht ausgefüllter Kreis
• square: Quadrat
• none: kein Listenzeichen

Häufige Werte für Nummerierungen

• decimal: 1, 2, 3 usw.
• decimal-leading-zero: 01, 02, 03 usw.
• lower-roman: i, ii, iii usw.
• upper-roman: I, II, III usw.
• lower-alpha: a, b, c usw.
• upper-alpha: A, B, C usw.
• lower-latin: entspricht normalerweise lower-alpha
• upper-latin: entspricht normalerweise upper-alpha
• none: keine sichtbare Nummerierung

list-style-position

Mit list-style-position wird festgelegt, ob sich das Listenzeichen innerhalb oder außerhalb des Inhaltsbereichs eines Listeneintrags befindet. Die Eigenschaft ist vererbbar.

ul {
  list-style-position: inside;
}

Werte für list-style-position

• outside: Das Listenzeichen befindet sich außerhalb des Inhaltsbereichs. Dies ist der Standardwert.
• inside: Das Listenzeichen gehört zum Inhaltsbereich des Listeneintrags.

list-style-image

Mit list-style-image kann ein Bild als Listenzeichen verwendet werden. Die Eigenschaft ist vererbbar.

ul {
  list-style-image: url("bild.png");
}

Werte für list-style-image

• url(): Pfad zur Bilddatei
• none: Es wird kein Bild als Listenzeichen verwendet.

Die Größe des Bildes lässt sich mit list-style-image nicht direkt einstellen. Für besser kontrollierbare eigene Listenzeichen eignen sich häufig Pseudoelemente wie ::before.

list-style

list-style ist die Kurzschreibweise für list-style-type, list-style-position und list-style-image. Die Eigenschaft ist vererbbar.

ul {
  list-style: circle inside;
}

Werden gleichzeitig ein Bild und ein alternatives Listenzeichen angegeben, wird das Listenzeichen verwendet, wenn das Bild nicht geladen werden kann.

ul {
  list-style: square outside url("bild.png");
}

::marker

Mit dem Pseudoelement ::marker kann das Listenzeichen eines li-Elements formatiert werden. Beispielsweise lassen sich Farbe, Schriftgröße oder Schriftstärke verändern.

li::marker {
  color: darkred;
  font-size: 1.2em;
  font-weight: bold;
}

columns

columns ist die Kurzschreibweise für column-width und column-count. Die Eigenschaft ist nicht vererbbar.

p {
  columns: 100px 3;
}

Der Browser erzeugt damit höchstens drei Spalten mit einer angestrebten Breite von 100 Pixeln. Die tatsächliche Spaltenanzahl und Spaltenbreite richten sich nach dem verfügbaren Platz.

column-width

Mit column-width wird die angestrebte Mindestbreite der Spalten festgelegt. Der Browser berechnet daraus die passende Anzahl gleich breiter Spalten. Die Eigenschaft ist nicht vererbbar.

p {
  column-width: 250px;
}

Mögliche Werte von column-width

• auto: Die Spaltenbreite wird durch andere Eigenschaften bestimmt.
• Längenangabe, zum Beispiel 250px oder 20rem

column-count

Mit column-count wird die angestrebte Anzahl der Spalten festgelegt. Die Eigenschaft ist nicht vererbbar.

p {
  column-count: 3;
}

Mögliche Werte von column-count

• auto: Die Spaltenanzahl wird durch andere Eigenschaften bestimmt.
• Positive ganze Zahl, zum Beispiel 2 oder 3

column-gap

Mit column-gap wird der Abstand zwischen den Spalten festgelegt. Die Eigenschaft ist nicht vererbbar.

p {
  column-gap: 40px;
}

Mögliche Werte von column-gap

• normal: Standardwert; bei Spalten entspricht er üblicherweise 1em.
• Längenangabe, zum Beispiel 40px oder 2rem

column-rule

column-rule ist die Kurzschreibweise für column-rule-width, column-rule-style und column-rule-color. Damit wird eine Trennlinie zwischen den Spalten gestaltet. Die Eigenschaft ist nicht vererbbar.

p {
  column-rule: 2px solid #777;
}

column-rule-style

Mit column-rule-style wird die Linienart bestimmt. Ohne eine Linienart wird keine Trennlinie angezeigt. Die Eigenschaft ist nicht vererbbar.

p {
  column-rule-style: solid;
}

Mögliche Werte von column-rule-style

• none: keine Linie, Standardwert
• hidden: keine sichtbare Linie
• dotted: gepunktet
• dashed: gestrichelt
• solid: durchgezogen
• double: doppelte Linie
• groove, ridge, inset, outset: 3D-artige Linien

column-rule-width

Mit column-rule-width wird die Breite der Trennlinie festgelegt. Die Eigenschaft ist nicht vererbbar.

p {
  column-rule-width: 4px;
}

Mögliche Werte von column-rule-width

• medium: Standardwert
• thin: dünne Linie
• thick: dicke Linie
• Längenangabe, zum Beispiel 4px

column-rule-color

Mit column-rule-color wird die Farbe der Trennlinie festgelegt. Wird keine Farbe angegeben, kommt die aktuelle Schriftfarbe zum Einsatz. Die Eigenschaft ist nicht vererbbar.

p {
  column-rule-color: #ff0000;
}

column-span

Mit column-span kann ein Element innerhalb eines mehrspaltigen Bereichs über alle Spalten ausgedehnt werden. Das eignet sich beispielsweise für eine Zwischenüberschrift. Die Eigenschaft ist nicht vererbbar.

h3 {
  column-span: all;
}

Mögliche Werte von column-span

• none: Das Element bleibt innerhalb einer Spalte. Dies ist der Standardwert.
• all: Das Element erstreckt sich über alle Spalten.

column-fill

Mit column-fill wird bestimmt, wie der Inhalt auf die Spalten verteilt wird. Der Unterschied ist besonders bei Elementen mit festgelegter Höhe erkennbar. Die Eigenschaft ist nicht vererbbar.

div {
  height: 300px;
  column-count: 3;
  column-fill: auto;
}

Mögliche Werte von column-fill

• balance: Der Inhalt wird möglichst gleichmäßig verteilt. Dies ist der Standardwert.
• auto: Die Spalten werden der Reihe nach gefüllt.

break-before, break-after, break-inside

Mit diesen Eigenschaften können Umbrüche zwischen Spalten beeinflusst werden. Beispielsweise lässt sich verhindern, dass ein Element auf zwei Spalten aufgeteilt wird.

article {
  break-inside: avoid;
}

h3 {
  break-after: avoid;
}

• break-before: Umbruch vor einem Element
• break-after: Umbruch nach einem Element
• break-inside: Umbruch innerhalb eines Elements