6.2.8 Sammeleigenschaften
Als Sammeleigenschaften werden solche Eigenschaften bezeichnet, die als „ein Wert“ zusammengefasst werden können. Dabei werden die Werte durch Leerzeichen getrennt nach der Eigenschaftsbezeichnung hintereinander aufgeschrieben.
Beispiel:
Tabelle: Wichtige Sammeleigenschaften
Sammeleigenschaft | Einzelne Eigenschaften | Zusammengefasste Eigenschaft |
---|---|---|
border | border-width , border-style , border-color |
border: 2px solid #ff0000; |
margin | margin-top , margin-right , margin-bottom , margin-left |
margin: 10px 15px 20px 25px; |
padding | padding-top , padding-right , padding-bottom , padding-left |
padding: 5px 10px; |
font | font-style , font-variant , font-weight , font-size , line-height , font-family |
font: italic small-caps bold 16px/20px Arial, sans-serif; |
background | background-color , background-image , background-position , background-repeat , background-size , background-attachment |
background: #ffffff url('image.png') no-repeat center/cover fixed; |
list-style | list-style-type , list-style-position , list-style-image |
list-style: square inside url('bullet.png'); |
outline | outline-width , outline-style , outline-color |
outline: 2px dotted red; |
Weitere Details und Beispiele zu Sammeleigenschaften finden Sie in der offiziellen CSS-Dokumentation auf MDN.
Reihenfolge und unvollständige Angaben
-
Reihenfolge: Bei allen genannten Sammeleigenschaften ist die Reihenfolge der Werte wichtig. Ein falsches Anordnen der Werte führt dazu, dass der Browser die CSS-Anweisung nicht korrekt interpretiert.
-
Werte auslassen:
-
Wenn ein Wert weggelassen wird, verwendet der Browser die Standardwerte. Zum Beispiel:
In diesem Fall bleibt die Farbe beim StandardwertcurrentColor
. -
Möchten wir einen bestimmten Wert nicht ändern, können wir ihn explizit weglassen, indem wir nur die relevanten Werte angeben. Beim border-Selektor könnten wir etwa den
border-style
unverändert lassen und nur die Breite und Farbe definieren:Hier bleibt der vorherige Stil (solid
,dotted
, etc.) erhalten.
-
Vor- und Nachteile von Sammeleigenschaften
Vorteile
-
Kürzere und übersichtliche Stylesheets: Die Zusammenfassung mehrerer Eigenschaften reduziert die Zeilenanzahl und steigert die Lesbarkeit.
-
Einfachere Wartung: Änderungen an zusammengefassten Werten können schneller und an weniger Stellen vorgenommen werden.
-
Konsistenz: Durch Sammeleigenschaften ist die Struktur des Stylesheets klarer und einheitlicher.
Nachteile
-
Standardwerte müssen bekannt sein: Wenn ein Wert nicht explizit angegeben wird, greift der Browser auf Standardwerte zurück, was zu unerwartetem Verhalten führen kann.
-
Reihenfolge beachten: Die Reihenfolge der Werte ist unbedingt einzuhalten. Ein Fehler führt dazu, dass der Browser die Regel ignoriert.
-
Fehlende Flexibilität bei einzelnen Anpassungen: In manchen Fällen kann es notwendig sein, einzelne Eigenschaften zu überschreiben, was durch Sammeleigenschaften erschwert wird.