Schriftformate | font-family: Arial,Helvetica,sans-serif; font-style: [italic/oblique/normal]; font-variant: [small-caps/normal]; font-size: [..px/..%/x-small/small/medium/large/x-large]; font-weight: [bold/bolder/lighter/100/200/../900]; font-stretch: [narrower/normal/wider]; word-spacing: [..px]; letter-spacing: [..px]; text-decoration: [underline/overline/line-through/blink/none]; text-transform: [capitalize/uppercase/lowercase/none]; color: [#XXXXXX/Farbname]; text-shadow: [#XXXXXX/Farbname/none]; |
Schriftart (einzelne Schriften kommagetrennt) Schriftstil Schriftvariante Schriftgröße Schriftgewicht Schriftlaufweite Wortabstand Zeichenabstand Textdekoration Gross-/Kleinbuchstaben Textfarbe Textschatten |
Text-Ausrichtung |
text-indent: [..px]; line-height: [..px]; vertical-align: [top/middle/bottom/baseline/sub/super/text-top/text-bottom]; text-align: [left/center/right/justify]; white-space: [normal/pre/nowrap]; |
Texteinrückung Zeilenhöhe Vertikale Ausrichtung Horizontale Ausrichtung Textumbruch |
Box-Modell |
Die Grafik verdeutlicht den Zusammenhang zwischen margin (Aussen-Abstand), border (Rahmen) und padding (Innenabstand). |
|
Aussen-Abstand |
margin-top: [..px]; margin-right: [..px]; margin-bottom: [..px]; margin-left: [..px]; margin: [..px]; margin: [..px] [..px] [..px] [..px]; |
Aussenrand oben Aussenrand rechts Aussenrand unten Aussenrand links Aussenrand einheitlich mit nur einer Angabe individuell in der Reiehnfolge oben, rechts, unten, links |
Innen-Abstand |
padding-top: [..px]; padding-bottom: [..px]; padding-left: [..px]; padding-right: [..px]; padding: [..px]; padding: [..px] [..px] [..px] [..px]; |
Innenrand oben Innenrand unten Innenrand links Innenrand rechts Innenrand einheitlich individuell in der Reiehnfolge oben, rechts, unten, links |
Rahmen |
border[-top, -left, -right, -bottom]-width: [thin/medium/thick/..px]; border[-top, -left, -right, -bottom]-style: [none/hidden/dotted/dashed/ solid/double/groove/ridge/inset/outset]; border[-top, -left, -right, -bottom]-color: [#XXXXXX/Farbname]; border: 2px dotted #ff0877; |
Rahmendicke Rahmentyp Rahmenfarbe Kurzschreibweise: Rahmenbreite Rahmenart und Rahmenfarbe |
Box-Ausrichtung |
float:[left/right]; clear: [left/rigth/both]; |
links oder rechts schwebend inkl. entsprechendem Texumfluss. Aufhebung des Textumflusses link, rechts oder beidseits. |
Hintergrund |
background-color: [#XXXXXX/Farbname]; background-image: url(Dateiname); background-repeat: [repeat/repeat-x/repeat-y/no-repeat]; background-attachment: [scroll/fixed]; background-position: [top/center//middle/bottom/left/right]; |
Hintergrundfarbe Hintergrundbild Wiederholungs-Effekt Wasserzeichen-Effekt Hintergrundposition |
Listen |
list-style-type: [decimal/lower-roman/upper-roman/lower-alpha/upper-alpha/disc/circle/square/none]; list-style-position: [inside/outside]; list-style-image: url(Dateiname); |
Darstellungstyp Listeneinrückung eigene Bullet-Grafik |
Anzeigemodus | display: [none/block/inline/list-item]; |
none: Element wird nicht angezeigt block: Element wird wie ein Block angezeigt. inline: Element wird wie ein Inline-Element angezeigt. list-item: Element wird wird ein Listenelement behandelt. |
Tabellen |
caption-side: [top/bottom/left/right]; table-layout: [fixed/auto]; border-collapse: [separate/collapse]; border-spacing: [..px]; empty-cells: [show/collapse]; speak-header: [always/once]; |
Ausrichtung Überschrift fixe/variable Breiten Rahmen: separat ja/nein Rahmenabstand Anzeige leere Zellen ja/nein Sprachausgabe Kopfzellen |
Pseudoformate |
a:link: ... a:visited: ... a:hover: ... a:active: ... a:focus: ... p:first-line: ... p:first-letter: ... p:first-child: ... |
Verweise zu noch nicht besuchten Seiten Verweise zu bereits besuchten Seiten Verweise, bei Mouseover gerade angeklickte Verweise Verweise, die den Fokus erhalten erste Textzeile erster Buchstabe erstes Kindelement |