CSS-Referenz
Diese Seite gibt einen Überblick über die wichtigsten CSS-Attribute und mögliche Werte. Es handelt sich bewusst um eine Auswahl der grundlegendsten Attribute und Werte und nicht um eine vollständige Auflistung.
Weiterführende Dokumente:
- Eine Einführung in CSS (setzt HTML voraus): kurzadresse.ch/css-theorie
- Eine ausführliche CSS-Referenz (Englisch): kurzadresse.ch/css-referenz
- Eine deutsche CSS-Referenz: www.css4you.de
Boxmodell:
CSS betrachtet die HTML-Elemente als kleine Boxen. Dieses Boxmodell ist für viele CSS-Attribute (besonders für margin, padding, height, width und border) von zentraler Bedeutung.
Zum Verständnis des Boxmodells soll die Grafik rechts beitragen.
Codesyntax
CSS-Eigenschaften sehen folgendermassen aus:
selector {
Attribut:Wert;
}
Reihenfolge
Ein Style-Sheet wird vom Browser immer von oben nach unten gelesen. Soll zum Beispiel bei jedem Absatz (p-Tag) jeder Rahmen blau sein ausser der untere, kann dies mit folgendem Code erreicht werden:
p {
border:blue;
border-bottom: red;
}
Zuerst wird der ganze Rahmen blau gefärbt und schliesslich der Wert für den unteren Rahmen überschrieben, damit dieser rot wird.
Boxes |
||
| Attribut | Wert | Bemerkung |
| margin padding |
0 X% Xpx |
Die Angaben für margin und padding erfolgen entweder als Pixel- oder als %-Angabe. Da 0 immer nichts ist, wird bei diesem Wert keine Angabe von Pixel (px) oder Prozent (%). Margin bezeichnet den Aussenabstand nach dem Rahmen, Padding den Innenabstand (vgl. Abbildung "Boxmodell" oben). |
| width height |
0 X% Xpx |
Wie margin und padding können auch width (Breite) und height (Höhe) entweder proportional (zum Übergeordneten Element) oder absolut definiert werden. |
| top left bottom right |
0 X% Xpx |
Abstände von oben, links, unten bzw. rechts |
| display | none block inline table table-row table-cell |
Versteckt Block-Element (geht vom linken bis zum rechten Rand) Im Fliesstext einbetten Verhält sich wie eine Tabelle Verhält sich wie eine Tabellenzeile Verhält sich wie eine Tabellenzelle |
| position | absolute relative fixed |
Absolute Position innerhalb des übergeordneten Elements Relative Position bezogen auf das vorhergehende Element Fixe Position (so kann z.B. ein Scrollen verhindert werden) |
| border-color | Hex-Wert Farbname |
Bsp: #FF0000 Bsp: red |
| border-width | thin medium thik Pixelwert |
Dünn Mittel Dick Bsp: 5px --> Dies würde zu einem 5 Pixel dicken Rahmen führen. |
| border-style | none dotted dashed solid double |
kein Rahmen gepunktete Rahmenlinie gestrichelte Rahmenlinie durchgezogene Rahmenlinie Doppelte Rahmenlinie |
| border | alle von: - border-color - border-width - border-style |
Das Attribut border vereint die Attribute boder-color, border-width und border-style. So kann zum Beispiel ein 1px dicker, durchgezogener schwarzer Rahmen folgendermassen definiert werden: border:1px solid black; |
| border-bottom border-right border-top border-left |
alle von: - border-color - border-width - border-style |
Soll ein HTML-Element keinen rundherumgehenden Rahmen erhalten, kann mit border-bottom (unterer Rahmen), border-right (rechter Rahmen), border-top (oberer Rahmen) und border-left (linker Rahmen) jede Seite separat definiert werden. |
Schrift |
||
| font-family | serif sans-serif monospace Schriftart |
Serifenschrift (Schrift mit "Füsschen", z.B. Times New Roman) Serifenlose Schrift (Schrift ohne "Füsschen", z.B. Arial) Schrift mit fester Buchstabenbreite (z.B. Courier New) Eine beliebige Schriftart (z.B. Arial, Times). Hat die Schriftart Leerschläge im Namen, muss dieser in Anführungszeichen gesetzt werden. Achtung: Es werden nur Schriftarten angezeigt, welche auf dem Computer des Benutzers installiert sind. Es können auch mehere Schriften (mit Komma getrennt) angegeben werden. In dem Fall wählt der Browser, die erste, die er findet. Bsp: font-family: "Segoe UI", Arial, Helvetica, sans-serif; |
| font-size | smaller small medium larger large Pixelwert Relativwert |
Es gibt noch viele weitere Möglichkeiten, für eine komplette Auflistung sei auf www.css4you.de verwiesen. Interessant ist der Relativwert. Er bezieht sich auf den Standardwert. Ist z.B. der Standard "small" (wie auf dieser Seite) und ich möchte einen Textblock 1.5x so gross schreiben, so wird das mit font-size:1.5em; gemacht. |
| font-weight | lighter normal bold bolder |
Gibt an, wie fett die Schrift erscheinen soll. |
| color | Hex-Wert Farbname |
Bsp: #FF0000 Bsp: red Color gibt die Schriftfarbe an. |