Sie sind auf Seite 1von 4

CSS-Referenz für den schnellen Einstieg in CSS

1 Color Eigenschaften

Generelle Eigenschaften, die auf alle Elemente angewendet werden können.

Eigenschaft Beschreibung Beispiele für Werte


color legt die Textfarbe fest red, green
#00FF00
rgb(45, 142, 200)
opacity legt die Transparenz fest Wert von 0 – 1

2 Background und Border Eigenschaften

Diese Eigenschaften lassen sich gut auf alle Container-Elemente (table, body, div, section,
nav) anwenden.

Eigenschaft Beschreibung Beispiele für Werte


background ändert den Hintergrund color image position/size
repeat attachment
background- legt fest ob ein Hintergrundbild fest fixed
attachment oder mitscrollt scroll
background- legt die Hintergrundfarbe fest red, green
color #00FF00
rgb(45, 142, 200)
background- legt ein Hintergrundbild fest url("path/to/file.png")
image
background- legt die Hintergrundposition fest top, left, right, bottom,
position center
background- legt fest wie oft das Bild wiederholt repeat, repeat-x, repeat-y
repeat wird
border ändert die Dicke, Art und Farbe des Breite Art Farbe
Rahmens eines Objekts Für Art kann:
solid, double, dashed,
dotted
border- ändert die abgerundeten Ecken Wert in px, em
radius

Schülerpraktikum Fiducia & GAD IT AG


CSS Referenz vom 10.08.2016 Seite 1 von 4
3 Box-Modell Eigenschaften

Eigenschaft Beschreibung Beispiele für Werte


bottom Abstand von unten Wert in px
clear entfernt das von float gesetzte left, right, both
Verhalten
display die Darstellungsart eines Elements block, inline, inline-
block, none
float mit float fliegt ein Element nach left, right
links oder rechts (bezogen auf an-
dere Elemente)
height Höhe eines Elements Wert in px
left Abstand von links Wert in px
margin Abstand zwischen Rahmen und an- 4 Werte für oben rechts unten links
derem Element Wert in px
max-height maximale Höhe eines Elements Wert in px
max-width maximale Weite eines Elements Wert in px
min-height minimale Höhe eines Elements Wert in px
min-width minimale Weite eines Elements Wert in px
padding Abstand zwischen Inhalt und Rah- 4 Werte für oben rechts unten links
men eines Elements Wert in px
position legt die Art der Positionierung eines static, relative, absolute,
Elements fest fixed
right Abstand von rechts Wert in px
top Abstand von oben Wert in px
visibility bestimmt ob eine Element sichtbar hidden, visible
ist oder nicht
width Weite eines Elements Wert in px
z-index legt den Index auf der z-Achse fest Zahl
Je größer die Zahl desto höher das
Element, nur bei position rela-
tive, absolute oder fixed

Schülerpraktikum Fiducia & GAD IT AG


CSS Referenz vom 10.08.2016 Seite 2 von 4
4 Text Eigenschaften

Eigenschaft Beschreibung Beispiele für Werte


letter- legt den Abstand zwischen Buchsta- Wert in px
spacing ben eines Textes fest
line-height legt die Zeilenhöhe fest (standartmä- Wert in px
ßig so groß wie die eingestellte
Schriftgröße)
text-align legt die Ausrichtung des Textes fest left, right, center,
justify
text-indent legt die Einrückung eines Textes in Wert in px
der ersten Zeile fest
text- kontrolliert die Groß- und Klein- none, capitalize,
transform schreibung uppercase, lowercase
text- bestimmt eine spezielle Textdekora- none, underline, overline,
decoration tion line-through
text-shadow legt einen Textschatten fest mit Ver- h-shadow v-shadow blur-
schiebung des Schattens (h-sha- radius color
dow, v-shadow) sowie die Stärke Werte in px
der Verwischung (blur-radius)
und die Farbe

5 Schrifteigenschaften

Eigenschaft Beschreibung Beispiel für Werte


font legt Schrift fest
font-family legt die Schriftart fest. Werte können Werte sind serif und sans-serif
definierte Schriftarten sein serif
und sans-serif für Serifen- oder
serifenlose Schrift oder eine Schrift-
art (diese muss dann aber unter die-
sem Namen auf dem Zielrechner in-
stalliert sein)
font-size legt die Schriftgröße fest Wert in px
font-style legt den Schriftstil fest Werte sind italic oder oblique
font-variant ob die Schriftart mit Kapitälchen ge- Werte sind normal oder small-
zeigt werden soll caps
font-weight legt das Gewicht der Schrift fest (o- mögliche Werte sind bold,
der wie fett die Schrift dargestellt bolder, light, normal, 100
wird) – 900 in Hundertschritten

Schülerpraktikum Fiducia & GAD IT AG


CSS Referenz vom 10.08.2016 Seite 3 von 4
6 Tabelleneigenschaften

Eigenschaft Beschreibung Beispiele für Werte


border- entscheidet ob der Abstand zwi- Wert sind separate oder
collapse schen Zellen berücksichtigt wird collapse
(separate) oder nicht (collapse)
border- legt den Abstand zwischen zwei Zel- Wert in px
spacing len fest
table-layout legt fest ob die Größe der Zellen sta- Wert sind fixed und auto
tisch festgelegt ist (fixed) oder au-
tomatisch berechnet wird (auto)

7 Listeneigenschaften

Eigenschaft Beschreibung Beispiele für Werte


list-style legt den Stil einer Aufzählung fest
list-style- legt ein Bild als Listenpunkt fest url("path/to/file.png")
image
list-style- legt fest ob der Listenpunkt außer- Werte sind inside oder outside
position halb des enthaltenden Elements liegt
oder nicht
list-style- legt den Listentyp fest (welche Art Wert sind disc, circle, none oder
type von Listenzeichen verwendet werden square
soll)

8 Transition-Eigenschaften

Eigenschaft Beschreibung Beispiele für Werte


transition legt ein Übergang einer CSS Eigen-
schaft fest
transition- legt fest auf welche CSS Eigenschaft Name der CSS Eigenschaft oder
property der Übergang sich bezieht oder alle all
transition- legt die Dauer des Effekts fest Zeit in s oder ms
duration
transition- legt die Verzögerung fest Zeit in s oder ms
delay

9 Marquee Eigenschaften

Eigenschaft Beschreibung Beispiele für Werte


marquee- legt die Richtung der Bewegung fest
direction
marquee- legt fest wie oft die Animation wie- Zahl; bei -1 wird die Animation
play-count derholt wird unendlich wiederholt
marquee- legt die Geschwindigkeit fest mit der Werte sind slow, normal oder
speed der Text scrollt fast
marquee- legt den Stil der Bewegung fest Werte sind scroll, slide oder
style alternate

Schülerpraktikum Fiducia & GAD IT AG


CSS Referenz vom 10.08.2016 Seite 4 von 4