CSS 2.1-Eigenschaften
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Name | Werte | Startwert | Angewendet auf (Standard: alle) | Vererbt? | Prozentwerte möglich? (Standard: nein) | Medientyp |
---|---|---|---|---|---|---|
background-attachment | scroll | fixed | inherit | scroll | nein | visual | ||
background-color | <Farbwert> | transparent | inherit | transparent | nein | visual | ||
background-image | <URI> | none | inherit | none | nein | visual | ||
background-position | [ [<Prozentwert> | <Längenangabe> | left | center | right ] [<Prozentwert> | <Längenangabe> | top | center | bottom]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit | 0% 0% | nein | beziehen sich auf den entsprechenden Punkt des Elements u. des Ursprungsbilds | visual | |
background-repeat | repeat | repeat-x | repeat-y | no-repeat | inherit | repeat | nein | visual | ||
background | [ <backgroundcolor> || <backgroundimage> || <background- repeat> || <backgroundattachment> || <backgroundposition>] | inherit | siehe die einzelnen Eigenschaften | nein | erlaubt für background-position | visual | |
border-collapse | collapse | separate | inherit | separate | Elemente mit dem display-Wert table bzw. inlinetable | ja | visual | |
border-color | [ <Farbwert> | transparent ]{1,4} | inherit | siehe die einzelnen Eigenschaften | nein | visual | ||
border-spacing | <Längenangabe> <Längenangabe>? | inherit | 0 | Elemente mit dem display-Wert table bzw. inlinetable | ja | visual | |
border-style | <border-style> {1,4} | inherit | siehe die einzelnen Eigenschaften | nein | visual | ||
border-top border-right borderbottom border-left | [ <border-width> || <border-style> || <border-top-color> ] | inherit | siehe die einzelnen Eigenschaften | nein | visual | ||
border-top-color border-right-color border-bottom-color border-left-color | <Farbwert> | transparent | inherit | Der Wert der Eigenschaft color | nein | visual | ||
border-top-style border-right-style border-bottom-style border-left-style | <border-style> | inherit | none | nein | visual | ||
border-top-width border-right-width border-bottom-width border-left-width | <border-width> | inherit | medium | nein | visual | ||
border-width | <border-width> {1,4} | inherit | siehe die einzelnen Eigenschaften | nein | visual | ||
border | [ <border-width> ||<border-style> || <border-topcolor>] | inherit | siehe die einzelnen Eigenschaften | nein | visual | ||
bottom | <Längenangabe> | <Prozentwert> | auto | inherit | auto | positionierte Elemente | nein | beziehen sich auf die Höhe des umgebenden Blocks | visual |
caption-side | top | bottom | inherit | top | Elemente mit dem display-Wert table-caption | ja | visual | |
clear | none | left | right | both | inherit | none | Block-Elemente | nein | visual | |
clip | <Form> | auto | inherit | auto | absolut positionierte Elemente | nein | visual | |
color | <Farbwert> | inherit | abhängig vom Benutzerprogramm | ja | visual | ||
content | normal | none | [<Zeichenkette> | <URI> | <Zähler> | attr(<Identifier>) | open-quote | closequote | no-openquote | no-closequote]+ | inherit | normal | die Pseudoelemente :before und :after | nein | all | |
counter-increment | [<Identifier> <Integerwert>?]+ | none | inherit | none | nein | all | ||
counter-reset | [<Identifier> <Integerwert>? ]+ | none | inherit | none | nein | all | ||
cursor | [ [ <URI> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit | auto | ja | visual, interactive | ||
direction | inline | block | listitem | run-in | inline-block | table | inline-table | tablerow-group | tableheader- group | table-footer-group | table-row | tablecolumn-group | table-column | table-cell | tablecaption | none | inherit | inline | nein | all | ||
empty-cells | show | hide | inherit | show | Elemente mit dem display-Wert table-cell | ja | visual | |
float | left | right | none | inherit | none | alle, Näheres im Rezept Spalten mit Floats in beliebiger Reihenfolge darstellen | nein | visual | |
font-family | [[ <Schriftfamilie> | <allgemeine Schriftfamilie> ] [,<Schriftfamilie>| <allgemeine Schriftfamilie> ]* ] | inherit | abhängig vom Benutzerprogramm | ja | visual | ||
font-size | <absolute Größe> | <relative Größe> | <Längenangabe> | <Prozentwert> | inherit | medium | ja | beziehen sich auf den berechneten Wert von font-size des Elternelements | visual | |
font-style | normal | italic | oblique | inherit | normal | ja | visual | ||
font-variant | normal | small-caps | inherit | normal | ja | visual | ||
font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | normal | ja | visual | ||
font | [ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | messagebox | small-caption | status-bar | inherit | siehe die einzelnen Eigenschaften | ja | siehe die einzelnen Eigenschaften | visual | |
height | <Längenangabe> | <Prozentwert> | auto | inherit | auto | Block- und ersetzte Elemente | nein | werden im Verhältnis zur Höhe des umgebenden Blocks berechnet | visual |
left | <Längenangabe> | <Prozentwert> | auto | inherit | auto | positionierte Elemente | nein | beziehen sich auf die Breite des umgebenden Blocks | visual |
letter-spacing | normal | <Längenangabe> | inherit | normal | ja | visual | ||
line-height | normal | <number> | <Längenangabe> | <Prozentwert> | inherit | normal | ja | relativ zur Schriftgröße (font-size) des Elements | visual | |
list-style-image | <URI> | none | inherit | none | Elemente mit dem display-Wert list-item | ja | visual | |
list-style-position | inside | outside | inherit | outside | Elemente mit dem display-Wert list-item | ja | visual | |
list-style-type | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit | disc | Elemente mit dem display-Wert list-item | ja | visual | |
list-style | [<list-style-type> || <list-style-position> || <list-style-image>] | inherit | siehe die einzelnen Eigenschaften | Elemente mit dem display-Wert list-item | ja | visual | |
margin-right margin-left | <Breite> | <Prozentwert> | auto | inherit | 0 | alle Elemente, außer Tabellen- Elemente, die nicht den display-Wert table oder inline-table haben | nein | beziehen sich auf die Breite des umgebenden Blocks | visual |
margin-top margin-bottom | <Breite> | <Prozentwert> | auto | inherit | 0 | alle Elemente, außer Tabellen- Elemente, die nicht den display-Wert table oder inline-table haben | nein | beziehen sich auf die Breite des umgebenden Blocks | visual |
margin | <margin-width> { 1,4} | inherit | siehe die einzelnen Eigenschaften | alle Elemente, außer Tabellen- Elemente, die nicht den display-Wert table oder inline-table haben | nein | beziehen sich auf die Breite des umgebenden Blocks | visual |
max-height | <Längenangabe> | <Prozentwert> | none | inherit | none | alle Elemente außer nicht-ersetzte Inline- und Tabellen-Elemente | nein | beziehen sich auf die Höhe des umgebenden Blocks | visual |
max-width | <Längenangabe> | <Prozentwert> | none | inherit | none | alle Elemente außer nicht-ersetzte Inline- und Tabellen- Elemente | nein | beziehen sich auf die Breite des umgebenden Blocks | visual |
min-height | <Längenangabe> | <Prozentwert> | inherit | 0 | alle Elemente außer nicht-ersetzte Inline- und Tabellen- Elemente | nein | beziehen sich auf die Höhe des umgebenden Blocks | visual |
min-width | <Längenangabe> | <Prozentwert> | inherit | 0 | alle Elemente außer nicht-ersetzte Inline- und Tabellen- Elemente | nein | beziehen sich auf die Breite des umgebenden Blocks | visual |
orphans | <Integerwert> | inherit | 2 | Block-Elemente | ja | visual, paged | |
outline-color | <Farbwert> | invert | inherit | invert | nein | visual, interactive | ||
outline-style | <border-style> | inherit | none | nein | visual, interactive | ||
outline-width | <border-width> | inherit | medium | nein | visual, interactive | ||
outline | [ <outline-color> || <outline-style> || <outline-width> ] | inherit | siehe die einzelnen Eigenschaften | nein | visual, interactive | ||
overflow | visible | hidden | scroll | auto | inherit | visible | Block- und ersetzte Elemente | nein | visual | |
padding-top padding-right padding-bottom padding-left | <padding-width> | inherit | 0 | alle Elemente, außer Tabellen- Elemente, die nicht den display-Wert table, inline-table oder table-cell haben | nein | beziehen sich auf die Breite des umgebenden Blocks | visual |
padding | <padding-width> {1,4} | inherit | siehe die einzelnen Eigenschaften | alle Elemente, außer Tabellen- Elemente, die nicht den display-Wert table, inline-table oder table-cell haben | nein | beziehen sich auf die Breite des umgebenden Blocks | visual |
page-break-after | auto | always | avoid | left | right | inherit | auto | Block-Elemente | nein | visual, paged | |
page-break-before | auto | always | avoid | left | right | inherit | auto | Block-Elemente | nein | visual, paged | |
page-break-inside | avoid | auto | inherit | auto | Block-Elemente | ja | visual, paged | |
position | static | relative | absolute | fixed | inherit | static | nein | visual | ||
quotes | [<Zeichenkette> <Zeichenkette>]+ | none | inherit | abhängig vom Benutzerprogramm | ja | visual | ||
right | <Längenangabe> | <Prozentwert> | auto | inherit | auto | positionierte Elemente | nein | beziehen sich auf die Breite des umgebenden Blocks | visual |
table-layout | auto | fixed | inherit | auto | Elemente mit dem display-Wert table oder inline-table | nein | visual | |
text-align | left | right | center | justify | inherit | abhängig vom Benutzerprogramm, kann u.U. auch von der Schreibrichtung (Eigenschaft ltr) abhängen | Block-Elemente, Elemente mit dem display-Wert table-cell oder inline-block | ja | visual | |
text-decoration | none | [ underline || overline || linethrough || blink ] | inherit | none | nein | visual | ||
text-indent | <Längenangabe> | <Prozentwert> | inherit | 0 | Block-Elemente, Elemente mit dem display-Wert table-cell oder inline-block | ja | beziehen sich auf die Breite des umgebenden Blocks | visual |
text-transform | capitalize | uppercase | lowercase | none | inherit | none | ja | visual | ||
top | <Längenangabe> | <Prozentwert> | auto | inherit | auto | positionierte Elemente | nein | beziehen sich auf die Höhe des umgebenden Blocks | visual |
unicode-bidi | normal | embed | bidi-override | inherit | normal | alle Elemente | nein | visual | |
vertical-align | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <Prozentwert> | <Längenangabe> | inherit | baseline | Inline-Elemente und Tabellenzellen | nein | beziehen sich auf den Wert von line-height für das betreffende Element | visual |
visibility | visible | hidden | collapse | inherit | visible | ja | visual | ||
white-space | normal | pre | nowrap | pre-wrap | pre-line | inherit | normal | ja | visual | ||
widows | <Integerwert> | inherit | 2 | Block-Elemente | ja | visual | |
width | <Längenangabe> | <Prozentwert> | auto | inherit | auto | Block- und ersetzte Inline- Elemente | nein | beziehen sich auf die Breite des umgebenden Blocks | visual |
word-spacing | normal | <Längenangabe> | inherit | normal | ja | visual | ||
z-index | auto | <Integerwert> | inherit | auto | positionierte Elemente | nein | visual |
Die CSS 2.1-Eigenschaftstabelle ist urheberrechtlich geschützt: © 2005, World Wide Web Consortium (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University). Alle Rechte vorbehalten. W3C DOCUMENT LICENSE.
<< zurück | vor >> |
Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln