Workshop Internet-Präsenz
Referenz Cascading Style Sheet
- Texteigenschaften
- Ausrichtung und Absatzkontrolle
- Box-Eigenschaften
- Hintergrundeigenschaften
- Visuelle Formatierung
- Listendarstellung
- Tabellen
- Optische Effekte
- Generierter Inhalt, automatische Nummerierung, Listen
- Seitenweise Ausgabe
- Akustische Wiedergabe
- Referenzen
Texteigenschaften (Schriftformatierung)
| Eigenschaften | Werte | Beispiele Bemerkungen |
CSS Level |
| color | (farbe) | Angabe der Farbe in Hex-Code oder Schlüsselwort. | CSS 1 |
| direction | ltr, rtl, inherit | ltr - Links-nach-rechts rtl - Rechts-nach-links |
CSS 2 |
| font-family | family-name | Arial, Tahoma | CSS 1 |
| generic-family | serif, sans-serif monospace cursive, fantasy |
CSS 1 | |
| font-size | (pt), (px), (prozent) medium, (größe), xx-small, x-small, smaller, small, large, larger, x-large, xx-large |
pt ist Punkt, z.B. 12pt. px ist Pixel, z.B. 20px. |
CSS 1 |
| font-size-adjust | (zahl), none, inherit | CSS 2, nicht CSS 2.1 | |
| font-stretch | normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit | CSS 2, nicht CSS 2.1 | |
| font-style | normal, italic, oblique | CSS 1 | |
| font-variant | normal, small-caps | CSS 1 | |
| font-weight | normal, (zahl), bold, bolder, light, lighter | Mögliche Zahlenangaben 100, 200, 300, 400, 500, 600, 700, 800 oder 900. | CSS 1 |
| font | Alle der oben angegebenen Werte, jeweils durch Leerräume zu trennen. | {font: tahoma 12pt oblique bold} | CSS 1 |
| letter-spacing | normal, 1em | 1em, 2em und so weiter. | CSS 1 |
| text-decoration | none, underline, overline, line-through, blink | CSS 1 | |
| text-shadow | none, color length length length, inherit | CSS 2, nicht CSS 2.1 | |
| text-transform | none, capitalize, uppercase, lowercase | CSS 1 | |
| word-spacing | normal, 1em | 1em, 2em und so weiter. | CSS 1 |
Ausrichtung und Absatzkontrolle
| Eigenschaften | Werte | Beispiele Bemerkungen |
CSS Level |
| line-height | normal, (höhe), (prozent) | Länge in Pixeln. | CSS 1 |
| text-align | left, right, center, justify | CSS 1 | |
| text-indent | (breite), (prozent) | Länge des Texteinzugs in Pixeln. | CSS 1 |
| vertical-align | baseline, sub, super, top, text-top, middle, bottom, text-bottom, (prozent) | CSS 1 | |
| white-space | normal, pre, nowrap, pre-wrap, pre-line | CSS 1 |
Box-Eigenschaften
| Eigenschaften | Werte | Beispiele Bemerkungen |
CSS Level |
| border-bottom-width | medium, thin, thick, (höhe) | Länge in Pixeln. | CSS 1 |
| border-bottom | Jeder der Werte für border-top-bottom, border-color und border-style. | {border-bottom: thin inset blue} | CSS 1 |
| border-color | (farbe) | Angabe der Farbe in Hex-Code. | CSS 1 |
| border-left-width | medium, thin, thick, (breite) | Länge in Pixeln. | CSS 1 |
| border-left | Jeder der Werte für border-top-left, border-color und border-style. | {border-left: thick inset green} | CSS 1 |
| border-right-width | medium, thin, thick, (breite) | Länge in Pixeln. | CSS 1 |
| border-right | Jeder der Werte für border-right-width, border-color und border-style. | {border-right: thin inset blue} | CSS 1 |
| border-style | none, dotted, dashed, solid, double, groove, ridge, inset, outset | CSS 1 | |
| border-top-width | medium, thin, thick, (höhe) | Länge in Pixeln. | CSS 1 |
| border-top | Jeder der Werte für border-top-width, border-color und border-style. | {border-top: thin inset red} | CSS 1 |
| border | Alle der border-Werte. Angaben beziehen sich auf alle Seiten. | {border: medium blue} | CSS 1 |
| margin-bottom | (höhe), (prozent), auto | Länge in Pixeln. | CSS 1 |
| margin-left | (breite), (prozent), auto | Länge in Pixeln. | CSS 1 |
| margin-right | (breite), (prozent), auto | Länge in Pixeln. | CSS 1 |
| margin-top | (höhe), (prozent), auto | Länge in Pixeln. | CSS 1 |
| margin | Jeder der oben angegebenen margin-Werte für top, right, bottom und left in der angegebenen Folge, jeweils durch Komma getrennt. | {margin: 5px 2px 5px 3px} Wenn nur ein Wert angegeben wurde, sind davon alle Ränder betroffen. |
CSS 1 |
| padding-bottom | (höhe), (prozent) | Länge in Pixeln. | CSS 1 |
| padding-left | (breite), (prozent) | Länge in Pixeln. | CSS 1 |
| padding-right | (breite), (prozent) | Länge in Pixeln. | CSS 1 |
| padding-top | (höhe), (prozent) | Länge in Pixeln. | CSS 1 |
| padding | Jeder der oben angegebenen padding-Werte für top, right, bottom und left in der angegebenen Folge, jeweils durch Komma getrennt. | {padding: 5em 6em 3em 6em} Wenn nur ein Wert angegeben wurde, sind davon alle Seiten betroffen. |
CSS 1 |
Hintergrundeigenschaften
| Eigenschaften | Werte | Beispiele Bemerkungen |
CSS Level |
| background-attachment | scroll, fixed | CSS 1 | |
| background-color | (farbe), transparent | Angabe der Farbe in Hex-Code. | CSS 1 |
| background-image | none, (location) | CSS 1 | |
| background-position | (prozent), (länge), top, center, bottom, left, center, right | CSS 1 | |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat | CSS 1 | |
| background | Alle der oben angegebenen Werte, jeweils durch Komma getrennt. | {background: URL(back.gif) repeat fixed} | CSS 1 |
Visuelle Formatierung
| Eigenschaften | Werte | Beispiele Bemerkungen |
CSS Level |
| bottom | auto, inherit, (höhe), (prozent) | Länge in Pixeln. | CSS 2 |
| clear | none, left, right, both, inherit | CSS 1 | |
| display | inline, block, list-item, run-in, table, inline-block, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit | CSS 2 | |
| float | none, left, right, inherit | CSS 1 | |
| height | auto, inherit, (höhe), (prozent) | Länge in Pixeln. | CSS 1 |
| left | auto, inherit, (breite), (prozent) | Länge in Pixeln. | CSS 2 |
| max-height | none, inherit, (höhe), (prozent) | Länge in Pixeln. | CSS 2 |
| max-width | none, inherit, (breite), (prozent) | Länge in Pixeln. | CSS 2 |
| min-height | inherit, (höhe), (prozent) | Länge in Pixeln. | CSS 2 |
| min-width | inherit, (breite), (prozent) | Länge in Pixeln. | CSS 2 |
| position | static, absolute, relative, fixed, inherit | CSS 2 | |
| right | auto, inherit, (breite), (prozent) | Länge in Pixeln. | CSS 2 |
| top | auto, inherit, (höhe), (prozent) | Länge in Pixeln. | CSS 2 |
| unicode-bidi | normal, embed, bidi-override, inherit | CSS 2 | |
| width | auto, (breite), (prozent) | Länge in Pixeln. | CSS 1 |
| z-index | auto, inherit, (integer) | CSS 2 |
Listendarstellung
| Eigenschaften | Werte | Beispiele Bemerkungen |
CSS Level |
| list-style-type | disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, upper-alpha, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, none | CSS 2 | |
| list-style-image | none, (url) | CSS 1 | |
| list-style-position | outside, inside | CSS 1 | |
| list-style | Jeder der obigen Werte für list-style, jeweils durch Leerräume getrennt. | {list-style: disc inside} | CSS 1 |
Tabellen
| Eigenschaften | Werte | Beispiele Bemerkungen |
CSS Level |
| border-collapse | collapse, separate, inherit | CSS 2 | |
| border-spacing | (abstand x) (abstand y), inherit | CSS 2 | |
| caption-side | top, bottom, inherit | CSS 2.1 | |
| empty-cells | show, hide, inherit | CSS 2 | |
| speak-header | once, always, inherit | CSS 2 | |
| table-layout | auto, fixed, inherit | CSS 2 |
Optische Effekte
| Eigenschaften | Werte | Beispiele Bemerkungen |
CSS Level |
| clip | auto, (form) | Momentan ist die einzig gültige Form "rect(top, right, bottom, left)". | CSS 2 |
| cursor | auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help | CSS 1 | |
| outline-width | medium, thin, thick, (breite), inherit | CSS 2 | |
| outline-style | none, dotted, dashed, solid, double, groove, ridge, inset, outset | CSS 2 | |
| outline-color | (farbe), invert, inherit | CSS 2 | |
| outline | Jeder der obigen outline-Werte, jeweils durch Leerräume getrennt. | {outline: dotted thick} | CSS 2 |
| overflow | visible, hidden, scroll, auto | CSS 2 | |
| visibility | inherit, visible, hidden | CSS 2 |
Generierter Inhalt, automatische Nummerierung, Listen
| Eigenschaften | Werte | Beispiele Bemerkungen |
CSS Level |
| content | (zeichenkette), (uri), (counter), attr(X), open-quote, close-quote, no-open-quote, no-close-quote, inherit | Wird mit :before, :after Pseudoformaten benutzt. | CSS 2 |
| counter-reset | (identifier) (integer), none, inherit | Benutzt counter()- und counters()-Funktionen der content-Eigentschaft. | CSS 2 |
| counter-increment | (identifier) (integer), none, inherit | Benutzt counter()- und counters()-Funktionen der content-Eigenschaft. | CSS 2 |
| marker-offset | (länge), auto, inherit | CSS 2 | |
| quotes | (zeichenkette) (zeichenkette) oder more, inherit | CSS 2 |
Seitenweise Ausgabe
| Eigenschaften | Werte | Beispiele Bemerkungen |
CSS Level |
| size | (länge){1,2}, auto, portrait, landscape, inherit | Ausrichtung und Orientierung einer Seite. @page { size: 8.5in 11in; } |
CSS 2, nicht CSS 2.1 |
| marks | none, crop, cross, inherit | Korrekturmarken außerhalb der Seitenfläche. | CSS 2, nicht CSS 2.1 |
| page | auto, (identifier) | Alternativer Seitentyp für Ausgabe eines Elements. @page rotated {size: landscape} table {page: rotated; page-break-before: right} |
CSS 2, nicht CSS 2.1 |
| orphans | (anzahl) | Minimale Zeilenanzahl eines Absatzes am Seitenende (Hurensohn). | CSS 2 |
| widows | (anzahl) | Minimale Zeilenanzahl eines Absatzendes am Seitenanfang (Schusterjunge). | CSS 2 |
| page-break-after | auto, always, avoid, left, right, inherit | Verhalten Seitenumbruch nach Element. | CSS 2 |
| page-break-before | auto, always, avoid, left, right, inherit | Verhalten Seitenumbruch vor Element. | CSS 2 |
| page-break-inside | auto, avoid, inherit | Verhalten Seitenumbruch innerhalb des Elements. | CSS 2 |
Akustische Wiedergabe
| Eigenschaften | Werte | Beispiele Bemerkungen |
CSS Level |
| volume | number, percentage, silent, x-soft, soft, medium, loud, x-loud, inherit | CSS 2 | |
| speak | normal, none, spell-out, inherit | CSS 2 | |
| pause-before | time, percentage, inherit | CSS 2 | |
| pause-after | time, percentage, inherit | CSS 2 | |
| pause | time, percentage, inherit | CSS 2 | |
| cue-before | uri, none, inherit | CSS 2 | |
| cue-after | uri, none, inherit | CSS 2 | |
| cue | Jede der obigen cue-Eigenschaften. | CSS 2 | |
| play-during | uri, mix, repeat, auto, none, inherit | CSS 2 | |
| azimuth | angle, left-side, far-left, left, center-left, center, center-right, right, far-right, right-side, behind, leftwards, rightwards, inherit | CSS 2 | |
| elevation | angle, below, level, above, higher, lower, inherit | CSS 2 | |
| speech-rate | number, x-slow, slow, medium, fast, x-fast, faster, slower, inherit | CSS 2 | |
| voice-family | specific-voice generic-voice |
CSS 2 | |
| pitch | frequency, x-low, low, medium, high, x-high, inherit | CSS 2 | |
| pitch-range | number, inherit | CSS 2 | |
| stress | number, inherit | CSS 2 | |
| richness | number, inherit | CSS 2 | |
| speak-punctuation | code, none, inherit | CSS 2 | |
| speak-numeral | digits, continuous, inherit | CSS 2 |
Referenzen
- Cascading Style Sheets, level 1 (W3 Consortium)
- Cascading Style Sheets, level 2 revision 1 (W3 Consortium), Änderungen gegenüber Level 2