schliessen X   
Sitemap   

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:

Seruga GmbH Berner OberlandBoxmodell:

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.

 

 

Quelle: StefanKernen.ch (www.stefan-kernen.ch)
CMS by: Seruga GmbH Berner Oberland