Aufbau der CSS-Befehle. | |
---|---|
Kontakt | |
Integration in die HTML-Datei entweder durch Bereich im Kopf. | |
<!DOCTYPE html> <head> <style type="text/css"> <!--HIER KOMMEN NUN DIE CSS-DEFINITONEN--> </style> </head> <body> |
|
Oder als externe Datei, für alle Seiten. | |
<!DOCTYPE html> <head> <link href="style.css" type="text/css" rel="stylesheet" /> </head> <body> |
|
Auflistung CSS und ihrer Attribute. | |
font-size: | Mögliche Werte: pt, px, em |
font-family: | Schriftart, wichtig ist als letzte Angabe entweder sans-serif (Schrift ohne Serifen)
oder serif (Schrift mit Serifen) Beispiel:font-family: Arial, Helvetica, sans-serif; |
font-weight: | normal|bold|bolder|lighter |
font-style: | italic = kursiv (physikalische Auszeichnung)
oblique = schräggestellt (logische Auszeichnung) normal = normal |
line-height: | Zeilenhöhe bestimmen, wenn der Text
mehrzeilig angezeigt wird. |
font-variant: | Textgestaltung: underline, overline, line-through. |
Farbe (CSS) | |
background-color: | Farbe für den Hintergrundbereich |
Rahmen (CSS) | |
border-color: | Rahmenfarbe - wenn nur ein Teil des Rahmens
gefärbt werden, dann: border-top-color, border-right-color, border-bottomcolor und border-left-color |
border-width: | Rahmenstärke in Pixel. |
border-style: | Rahmenart bestimmen:
solid = durchgezogen double = doppelt none = kein Rahmen (unsichtbar) hidden = kein Rahmen (unsichtbar) dotted = gepunktet dashed = gestrichelt groove = 3D-Effekt ridge = 3D-Effekt inset = 3D-Effekt outset = 3D-Effekt |
Ausrichtung von Elementen (CSS) | |
text-align: | Horizontale Ausrichtung, möglich Werte: left|center|right|justify |
vertical-align: | Vertikale Ausrichtung mögliche Werte:
top = oben bündig middle = mittig bottom = unten bündig sub = tieferstellen super = höherstellen text-top = am oberen Schriftrand text-bottom = am unteren Schriftrand |
Abstände (CSS) | |
margin: | Abstand zum nächsten Element:
kann auch für jede Seite einzeln angegeben werden: margin-left, margin-right, margin-bottom, margin-top |
padding: | Abstand zum Rand:
kann auch für jede Seite einzeln angeben werden: padding-left, padding-right, padding-bottom, padding-top |
Weiten, Höhen-Angaben (CSS) | |
width: | Breite in: px, em, Prozent, auto |
height: | Höhe in: px, em, Prozent, auto |
Grafik und Bilder (CSS) | |
background-image: url("dein bild.jpg"); | |
Hintergrundbild:
Pfad und den Namen des Bildes angeben. |
|
background-repeat: | |
Verhaltensweise des Bilds. Mögliche Werte: repeat = wiederholen (Standard) repeat-y = nur in Y-Richtung, senkrecht wiederholen repeat-x = nur in X-Richtung, waagerecht wiederholen no-repeat = nicht wiederholen |
|
background-position: | |
1-Wert für horizontale
2-Wert für Vertikale 1-Wert: left center right 2-Wert: top center bottom Der erste Wert bestimmt die horizontale und der zweite Wert die vertikale Position. Pixel oder Prozent Angaben. |
|
background-attachment: | |
fixed Hintergrundbild fixieren. Die Bilder bleiben dann an Ort und Stellen, wenn gescrollt wird. Standard ist die Angabe „scroll“ |
Hier ein paar Anleitungen zum Homepagebau für HTML
CSS Flash Java und Co.