1. Seite 1 von 9
Kurzreferenz Cascading Stylesheets (CSS)
Einbindung einer ausgelagerten CSS-Datei:
<html>
<head>
<title>HTML-Datei verbunden mit ausgelagerter CSS-Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
</head>
<body
Einbindung einer ausgelagerten CSS-Datei mit der Zeile: <link rel="stylesheet" type="text/css" href="formate.css">
Der Befehl <link> ist ein Standalone-Tag und hat keinen Endtag.
Der Befehl <link> muß im Kopfbereich (zwischen <head> und </head>) der HTML-Datei stehen.
Mit der Eigenschaft href="…" wird der Name und gegebenenfalls der Pfad der CSS-Datei angegeben.
</body>
</html>
Die Datei "formate.css" kann so aussehen (kein HTML-Grundgerüst; die Datei muss mit der Endung *.css gespeichert werden):
body {
background-color: #FF0000;
}
p {
color: #CCCCCC;
}
Tagweises Formatieren:
p {
background-color: #FF0000;
color: #FFFFFF;
}
Das Beispiel enthält eine Formatdefinition für p-Elemente, also für alle Absätze.
Solche Formatdefinitionen haben immer den gleichen Aufbau und bestehen aus folgenden Teilen:
1.) Selektor:
Als Selektor wird das bezeichnet, was vor den geschweiften Klammern steht. Der Selektor wählt aus, wofür die folgenden
Definitionen gelten sollen. Im obigen Beispiel gelten die Formate für alle Absätze (p-Elemente).
2.) Definitionen:
Die eigentlichen Definitionen zum Format stehen stets in geschweiften Klammern { und }. Sie bestehen darin, dass eine oder
mehrere CSS-Eigenschaften notiert werden und einen Wert erhalten.
Im oberen Beispiel werden etwa die CSS-Eigenschaften background-color (Hintergrundfarbe) und color (Schriftfarbe)
verwendet. Der Eigenschaft background-color wird der Wert #FF0000 zugewiesen, und der Eigenschaft color der Wert
#FFFFFF. Zwischen Eigenschaft und Wertzuweisung muss stets ein Doppelpunkt stehen. Abgeschlossen wird jede Definition
immer mit einem Strichpunkt (;).
p, h1, td {
background-color: #FF0000;
color: #FFFFFF;
}
Sollen mehrere verschiedene HTML-Elemente die gleiche Formatierung erhalten, so werden diese mit Kommata getrennt vor
der geschweiften Klammer genannt.
Das Beispiel obere enthält eine Formatdefinition für alle Absätze (p), für alle Überschriften erster Ordnung (h1) und für alle
Zellen (td).
2. Klassenweises Formatieren:
*.rot {
background-color: #FF0000;
}
.grau {
background-color: #CCCCCC;
}
Sie bestimmen eine Formatdefinition für eine Klasse, indem Sie im Selektor einen Stern und einen Punkt notieren und
unmittelbar dahinter einen Namen für die Klasse angeben. Der Stern kann auch weggelassen werden.
Der Klassenname darf keine Leerzeichen, Sonderzeichen und Umlaute enthalten. Als Klassennamen sollten Sie auch nicht die
Namen von HTML-Elementen verwenden:
*.body oder *.table sind also nicht so günstige Klassennamen und sorgen für Verwirrung, da es sich bei body und table um
HTML-Elemente handelt. Geeigneter wären zum Beispiel Klassennamen wie diese: *.rot, *.gruen, *.hinterlegt, *.fliesstext.
Im HTML-Dokument müssen Sie die Klassen allerdings auf die entsprechenden HTML-Elemente anwenden mit der Eigenschaft
class="…". Ein und dieselbe Klasse kann mehrmals und auf verschiedene HTML-Elemente verteilt werden.
Im unteren Beispiel (Ausschnitt einer HTML-Datei) wurden die Klassen *.rot und *.grau auf verschiedene HTML-Elemente
(h1 und p) verteilt.
<h1 class="rot">Diese Überschrift erster Ordnung ist rot hinterlegt.</h1>
<p class="grau">Dieser Absatz ist hellgrau hinterlegt.</p>
<p class="rot">Dieser Absatz ist rot hinterlegt.</p>
1. Anmerkung:
Während Sie beim klassenweisen Formatieren die Klassen auf die entsprechenden HTML-Elemente verteilen müssen, entfällt
diese Arbeit beim tagweisen Formatieren, weil dort alle HTML-Elemente derselben Sorte (zum Beispiel alle p = alle Absätze)
automatisch ihr Aussehen ändern.
2. Anmerkung:
Das klassenweise Formatieren ergänzt und überschreibt gegebenenfalls das tagweise Formatieren.
Hierzu ein kleines Beispiel:
Quelltext CSS-Datei:
p {
background-color: #0000FF;
color: #FFFFFF;
}
*.rot {
background-color: #FF0000;
}
Seite 2 von 9
Quelltext HTML-Datei (Ausschnitt):
<p>Dieser Absatz ist blau hinterlegt, die Schriftfarbe ist weiß.</p>
<p class="rot">Dieser Absatz ist rot hinterlegt, die Schriftfarbe ist weiß.</p>
Kommentare:
/* Kommentar */
Zwischen /* und */ kann in der CSS-Datei ein Kommentar stehen, der nicht als CSS-Angabe interpretiert wird.
Anmerkung:
Der Kommentar in einer CSS-Datei funktioniert wie der Kommentar in einer HTML-Datei: er dient eigenen Randnotizen,
Bemerkungen und Erklärungen und wird nicht angezeigt oder interpretiert. In der HTML-Datei steht der Kommentar zwischen
<!-- und -->, in der CSS-Datei zwischen /* und */.
3. Schriftformatierung:
p {
font-family: Verdana, Arial, sans-serif;
font-style: italic;
font-variant: small-caps;
font-size: 16px;
font-weight: bold;
letter-spacing: 2px;
line-height: 22px;
text-decoration: underline;
color: #0000FF;
}
font-family: Schriftart
Ist die erste angegebene Schriftart verfügbar, wird diese verwendet, falls nicht, wird die zweite Schriftart verwendet, u.s.w.
Folgende generische Schriftfamilien sind fest vordefiniert - diese Angaben können Sie also neben Schriftartnamen benutzen:
serif = eine Schriftart mit Serifen
sans-serif = eine Schriftart ohne Serifen
monospace = eine Schriftart mit dicktengleichen Zeichen
font-style: Schriftstil
Mit font-style können Sie den Schriftstil bestimmen.
italic = Schriftstil kursiv
normal = normaler Schriftstil
font-variant: Schriftvariante
Mit font-variant können Sie die Schriftvariante bestimmen.
small-caps = Kapitälchen
normal = normale Schriftvariante
font-size: Schriftgröße
Mit font-size können Sie die Schriftgröße bestimmen.
Erlaubt ist eine numerische Angabe. Erfolgt die Größenangabe in Pixel, muß nach der Zahl die Einheit px notiert werden, zum
Beispiel: font-size: 14px;.
font-weight: Schriftgewicht
Mit font-weight können Sie das Schriftgewicht bestimmen.
bold = fett
bolder = extra-fett
lighter = dünner
normal = normales Schriftgewicht
Nicht jede Schriftart unterstützt die Angaben bolder und lighter.
letter-spacing: Zeichenabstand
Mit letter-spacing können Sie den Abstand zwischen den Buchstaben bzw. Zeichen im Text bestimmen.
Erlaubt ist eine numerische Angabe. Wird der Zeichenabstand in Pixel angegeben, muß nach der Zahl die Einheit px notiert
werden, zum Beispiel: letter-spacing: 1px;.
line-height: Zeilenhöhe
Mit line-height können Sie die Zeilenhöhe bestimmen.
Erlaubt ist eine numerische Angabe. Wird die Zeilenhöhe in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden,
zum Beispiel: line-height: 22px;.
text-decoration: Textdekoration
Mit dieser Eigenschaft können Sie zusätzliche Textformatierungen wie unterstrichenen oder durchgestrichenen Text erzwingen.
Folgende Angaben sind möglich:
underline = unterstrichen
overline = überstrichen
line-through = durchgestrichen
none = normal (keine Text-Dekoration)
color: Textfarbe
Mit color können Sie die Textfarbe bestimmen.
Erlaubt sind u. a. hexadezimale Farbangaben, zum Beispiel: color: #FF0000;.
Seite 3 von 9
4. Seite 4 von 9
Vertikale und horizontale Ausrichtung:
td {
text-align:right;
vertical-align: top;
}
text-align: horizontale Ausrichtung
Mit text-align wird die horizontale Ausrichtung bestimmt.
left = linksbündig ausrichten
center = zentriert ausrichten
right = rechtsbündig ausrichten
vertical-align: vertikale Ausrichtung
Mit vertical-align wird die vertikale Ausrichtung bestimmt (wird nicht überall und von allen Browsern unterstützt).
top = obenbündig ausrichten
middle = mittig ausrichten
bottom = untenbündig ausrichten
Außen- und Innenabstände:
p {
margin: 20px;
padding: 10px;
}
margin: Außenabstand
Außenabstand oder Abstand nach außen bedeutet: erzwungener Leerraum zwischen dem aktuellen Element zu seinem
Elternelement oder Nachbarelement.
Wird die Außenabstand in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden, zum Beispiel: margin: 20px;.
margin: Außenabstand von allen vier Seiten
margin-top: Außenabstand von oben
margin-right: Außenabstand von rechts
margin-bottom: Außenabstand von unten
margin-left: Außenabstand von links
In besonderen Fällen ist es auch möglich, einen negativen Wert für den Außenabstand zu notieren, zum Beispiel:
margin-left: -30px;.
padding: Innenabstand
Innenabstand bedeutet: erzwungener Leerraum zwischen dem Inhalt eines Elements zu seinem eigenen Elementrand, also
zum Beispiel zwischen dem Text eines Elements und dem Rand dieses Elements.
Wird die Innenabstand in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden, zum Beispiel: padding: 10px;.
padding: Innenabstand von allen vier Seiten
padding-top: Innenabstand von oben
padding-left: Innenabstand von links
padding-bottom: Innenabstand von unten
padding-right: Innenabstand von rechts
Breite und Höhe:
input {
width: 200px;
height: 22px;
}
width: Breite von Elementen
Wird die Breite in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden, zum Beispiel: width: 200px;
Es ist auch möglich, die Breite in Prozent anzugeben. Dann folgt nach der Zahl die Einheit %, zum Beispiel: width: 25%;.
height: Höhe von Elementen
Wird die Höhe in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden, zum Beispiel: height: 200px;
Es ist auch möglich, die Höhe in Prozent anzugeben. Dann folgt nach der Zahl die Einheit %, zum Beispiel: height: 25%;.
5. Seite 5 von 9
Rahmen:
td {
border-width: 1px;
border-style: otted;
border-color: #FF0000;
}
border-width: Rahmenstärke
Mit border-width können Sie Stärke des Rahmens um ein Element bestimmen.
Wird die Rahmenstärke in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden,
zum Beispiel: border-width: 1px;.
border-style: Rahmentyp
Mit border-style können Sie den Rahmentyp festlegen.
none = kein Rahmen (bzw. unsichtbarer Rahmen)
dotted = gepunktet
dashed = gestrichelt
solid = durchgezogen
border-color: Rahmenfarbe
Mit border-color können Sie Rahmenfarbe bestimmen. Erlaubt ist u. a. eine hexadezimale Farbangabe.
Hintergrundfarben und Hintergrundbilder:
body {
background-color: #FF0000;
background-image: url(bilder/hintergrundbild.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}
background-color: Hintergrundfarbe
Mit background-color können Sie eine Hintergrundfarbe bestimmen. Erlaubt ist u. a. eine hexadezimale Farbangabe.
background-image: Hintergrundbild
Mit background-image können Sie eine Hintergrundgrafik bestimmen (gegebenenfalls Pfad angeben).
Per Voreinstellung wird die Hintergrundgrafik als Wallpaper (Tapetenmuster) wiederholt.
Wird sowohl eine Hintergrundfarbe als auch ein Hintergrundbild notiert, so liegt das Hintergrundbild über der Hintergrundfarbe.
Bei gekacheltem Hintergrundbild würde die Hintergrundfarbe nicht zu sehen sein (wenn das Hintergrundbild geladen ist).
background-repeat: Wiederholungseffekt
Mit background-repeat können Sie das Wiederholungsverhalten einer Hintergrundgrafik, die Sie mit background-image
einbinden, kontrollieren.
repeat = wiederholen (Voreinstellung)
repeat-x = nur eine Zeile lang waagerecht wiederholen
repeat-y = nur eine Spalte lang senkrecht wiederholen
no-repeat = nicht wiederholen, nur als Einzelbild anzeigen
background-attachment: Wasserzeichen-Effekt
Bei längeren Elementen wandert ein Hintergrundbild beim Scrollen im Text optisch mit. Sie können jedoch erzwingen, daß das
Hintergrund stehen bleibt (Wasserzeichen-Effekt).
scroll = mitscrollen (Voreinstellung)
fixed = Hintergrundbild bleibt stehen
6. Pseudoformate für Verweise:
a:link {
color:#00FF00;
text-decoration:none;
}
a:visited {
color:#00FF00;
text-decoration:none;
}
a:hover {
color:#FF00FF;
text-decoration:none;
}
a:active {
color:#CCCCCC;
text-decoration:none;
}
Bei Pseudoformaten wird zunächst das betroffene HTML-Element notiert, im diesem Fall das HTML-Element für Verweise (a).
Dahinter folgt ein Doppelpunkt und dahinter eine erlaubte Angabe, im Beispiel etwa link (für noch nicht besuchte Verweise),
visited (für bereits besuchte Verweise), hover (für Verweise, während der Anwender mit der Maus darüber fährt), active (für
angeklickte Verweise).
a:link: noch nicht besuchte Verweise
a:visited: bereits besuchte Verweise
a:hover: Verweise, während der Anwender mit der Maus darüber fährt
a:active: angeklickte Verweise
Es empfiehlt sich, die selben Eigenschaften für a:link und a:visited zu vergeben, da manche Browser nicht oder nur
unzureichend zwischen noch nicht besuchten und bereits besuchten Verweisen unterscheiden.
Ebenen (allgemein):
div-Element
Das div-Element im HTML beschreibt eine Ebene und dient ausschließlich dazu, mit Stylesheets formatiert und positioniert zu
werden. Zwischen <div> und </div> können weitere Elemente wie Absätze, Tabellen, Listen, Formulare, Bilder etc. stehen.
Im unteren Beispiel (Ausschnitt einer HTML-Datei) wurde eine Ebene mit der Klasse *.ebene1 notiert:
<div class="ebene1">Inhalte, welche in der Ebene stehen</div>
Seite 6 von 9
Diese Ebene könnte in einer ausgelagerten CSS-Datei wie folgt formatiert werden:
*.ebene1 {
width: 150px;
height: 150px;
background-color: #FF0000;
}
Diese Ebene erhält also eine Breite und Höhe von je 150 Pixel und eine rote Hintergrundfarbe.
Man unterscheidet absolut positionierte Ebenen und relativ positionierte Ebenen (s. u.).
7. Ebenen ohne spezielle Positionierung:
*.ebene2 {
width: 150px;
height: 150px;
}
*.ebene3 {
width: 150px;
height: 150px;
}
Ebenen ohne spezielle Positionierung folgen dem normalen Elementfluss:
wenn mehrere Ebenen ohne spezielle Positionierung notiert werden, so liegen diese alle untereinander.
In dem oberen Beispiel würde zunächst die Ebene mit der Klasse *.ebene2 angezeigt werden und gleich darunter die Ebene
mit der Klasse *.ebene3.
*.ebene4 {
width: 150px;
height: 150px;
float: left;
}
*.ebene5 {
width: 150px;
height: 150px;
float: left;
}
*.ebene6 {
width: 300px;
height: 150px;
clear: both;
}
float: Textumfluss
Mit float können Sie bestimmen, daß nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfließen.
left = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen.
right = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen.
none = kein Umfluss (Normaleinstellung).
clear: Fortsetzung bei Textumfluss
Mit clear können Sie einen Umfluss abbrechen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs
erzwingen.
left = Erzwingt bei float: left die Fortsetzung unterhalb.
right = Erzwingt bei float: right die Fortsetzung unterhalb.
both = Erzwingt in jedem Fall die Fortsetzung unterhalb.
none = Erzwingt keine Fortsetzung unterhalb. (Normaleinstellung).
Im oberen Beispiel liegen die Ebenen mit den Klassen *.ebene4 und *.ebene5 nebeneinander und die Ebene mit der Klasse
*.ebene6 darunter.
Seite 7 von 9
8. Absolut positionierte Ebenen:
*.ebene7 {
position: absolute;
left: 100px;
top: 50px;
width: 150px;
height: 150px;
z-index:1;
}
position: absolute
Mit position: absolute wird die Ebene absolut positioniert.
Die Position der Ebene wird gemessen vom Rand des Elternelements.
top/left: Startposition des Elements von oben und links
Eine absolut positionierte Ebene kann mit top und left positioniert werden. Mit diesen Angaben können Sie bestimmen, wo die
Ebene von links und oben (ausgehend vom Elternelement) beginnt.
Wird die Startposition in Pixel angegeben, muß nach der Zahl die Einheit px notiert werden, zum Beispiel: top: 50px;.
z-index: Schichtposition bei Überlappung
Sie können die Reihenfolge überlappender div-Bereiche definieren: Elemente mit höherer Nummer überdecken Elemente mit
niedrigerer Nummer.
Ebenen mit übergroßem Inhalt:
*.ebene8 {
width: 150px;
height: 150px;
overflow: hidden;
}
overflow: Verhalten bei übergroßem Inhalt
Mit overflow können Sie bestimmen, wie übergroße innere Elemente behandelt werden.
Beispiel:
Wenn in einer Ebene mit einer Breite und Höhe von je 150 Pixel ein Bild liegt, welches 300x300 Pixel groß ist, so kann mit der
Eigenschaft overflow geregelt werden, wie dieses übergroße Bild angezeigt wird.
visible = Element wird so weit ausgedehnt, dass sein Inhalt auf jeden Fall komplett sichtbar ist.
hidden = Element wird abgeschnitten, wenn es die Grenzen überschreitet.
scroll = Element wird abgeschnitten, wenn es die Grenzen überschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten
anbieten, ähnlich wie in einem eingebetteten Framefenster.
auto = Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten
soll dabei erlaubt sein.
Seite 8 von 9
9. Seite 9 von 9
Inhalt:
Einbindung einer ausgelagerten CSS-Datei Seite 1
Tagweises Formatieren Seite 1
Klassenweises Formatieren Seite 2
Kommentare Seite 2
Schriftformatierung Seite 3
Vertikale und horizontale Ausrichtung Seite 4
Außen- und Innenabstände Seite 4
Breite und Höhe Seite 4
Rahmen Seite 5
Hintergrundfarben und Hintergrundbilder Seite 5
Pseudoformate für Verweise Seite 6
Ebenen (allgemein) Seite 6
Ebenen ohne spezielle Positionierung Seite 7
Absolut positionierte Ebenen Seite 8
Ebenen mit übergroßem Inhalt Seite 8