Grundlagen
Das Boxen-Modell
externe Zuweisungen





Grundlagen


Style Sheets entsprechen in etwa Formatforlagen. Hiermit ist es moeglich, weitere Formatierungen an einen Tag zu binden, oder bestehende Formatierungen eines Tags zu veraendern. Diese Vorgehensweise spart Arbeitszeit und Dateivolumen. So kann dateiweit fuer ein HTML-Dokument z.B.: das <i>-Tag fuer Kursiv weitere Formatierungsanweisungen bereitstellen. Einmal im Dateikopf definiert werden dann diese zusaetzlichen Formatierungen bei Einsatz des betreffenden Tags angewendet.
Style-Anweisungen koennen:

lokal im Dateikopf zwischen den Tags <style> und </style> definiert werden.

in einer seperaten ASCII-Datei mit Endung CSS definiert werden.

lokale und zentrale CSS-Definitionen koennen kombiniert werden, wobei im Konfliktfall immer die lokale Definition Vorrang hat. Beide sind im Dateikopf der HTML-Datei zu plazieren.

Aufbau Style-Definitionsbereich im Dateikopflokale Definition :
im <head>-Bereich
<style type="text/css">
<!--
tag { Formatzuweisung1; Formatzuweisung2;... }
tag1 tag2 { Formatzuweisung1; Formatzuweisung2;... }
//-->
</style>

Referenzierung der seperaten CSS-Datei fuer dieses Dokument.zentrale Definition :
im <head>-Bereich

<link rel=stylesheet type="text/css" href="datei.css">



Es ist moeglich, verschiedene Formatierungen fuer einen Tag bereitzustellen. Hierzu muessen Unterklassen des Tags definiert werden. Jeder Unterklasse wird dann ein seperates Format zugewiesen. Tag und Unterklasse werden durch Punkt getrennt. Um im HTML-Body dann die jeweilige Klasse an das Tag zu binden wird das Attribut class= benoetigt.

Aufbau Style-Definitionsbereich im DateikopfDefinition :
im <head>-Bereich

tag.class1 { Formatzuweisung;... }
tag.class2 { Formatzuweisung;... }

Aufbau Style-Definitionsbereich im DateikopfAnwendung :
im <body>-Bereich
< h1 class= "class1">Ueberschrift </h1>
< h1 class= "class2">Ueberschrift </h1>



Neben der Moeglichkeit, einem Tag explizit weitere Formatierungen zuzuweisen, besteht die Moeglichkeit, unabhaengige Formate zu bestimmen. Unabhaengige Formatierungen konnen auch lokal oder zentral definiert werden. Um die unabhaengige Formatierung im HTML-Dokument dann an ein Tag zu binden, benoetigt das betreffende Tag das Attribut id.

Aufbau Style-Definitionsbereich im DateikopfDefinition :
im <head>-Bereich

#name { Formatzuweisung1; Formatzuweisung2;... }

Aufbau Style-Definitionsbereich im DateikopfAnwendung :
im <body>-Bereich

< h1 id= "name">Ueberschrift </h1>
< big id= "name">text </big>



Style-Anweisungen lassen sich auch direkt an einen Tag im <body>-Bereich binden, ohne die Style-Anweisung zuvor im Dateikopf zu definieren. Um beliebige Bereiche im HTML-Dokument mit Style-Anweisungen zu versehen, ohne auf die HTML-Formatierungstags angeweiesen zu sein, verwenden Sie die Tags < span > und </span >.

Style-Definition an Tag binden.Anwendung :
im <body>-Bereich
< h1 style= "font-size=1.8cm; color: blue">Ueberschrift </h1>
< span style= "font-size=12 pt ">text </span>



Style Sheets ermoeglichen, die Formatierung des HTML-Textes abhaengig vom Ausgabemedium zu gestalten. Auch diese Formatierung kann lokal oder zentral definiert werden. Hierfuer ist das Attribut media zustaendig- Mit vorangestelltem @ definiert es den in der lokalen Formatierung den Bereich fuer das jeweilige Ausgabemedium innerhalb des <style>-Bereichs. In das <link>-Tag aufgenommen definiert es, welche seperate CSS-Datei fuer welches Ausgabemedium bestimmt ist.
Moegliche Werte des Attributs media sind: [ all | aural | braille | handheld | print | projection | screen | tv ]

Aufbau Style-Definitionsbereich im Dateikopflokale Definition :
im <head>-Bereich

<style type="text/css">
<!--
@media screen;
tag { Formatzuweisung;... }
@media handheld;
tag { Formatzuweisung;... }
//-->
</style>

Referenzierung der seperaten CSS-Datei fuer dieses Dokument.zentrale Definition :
im <head>-Bereich

<link media="screen" rel=stylesheet type="text/css" src="screen.css">
<link media="print" rel=stylesheet type="text/css" src="print.css">



Im < style >-Definitionsbereich koennen Kommentare stehen. Diese Kommentare duerfen sich nur ueber eine Zeile erstrecken.

Style-Definition an Tag binden.Kommentar :
im <style>-Bereich

/* Kommentar */





Das CSS-Boxenmodell


Das CSS-Boxen-Modell kennt einen Bereich, in dem Text etc. dargestellt wird. Dieser Bereich wird Content-Box genannt. Die Groesze der Content-Box wird wird ueber die Attribute width und height geregelt. Die Content-Box kann genau in dem Browserfenster positioniert werden.



Style-Zuweisungen extern


dateiweite ZuweisungenBody
Hintergrundbild { background: [ url(xy.jpg) repeat fixed ] }
Hintergrundfarbe { background-color: [ #XXXXXX | "Farbname" ] }
Font allgemeiner Text { font-family: [ "Fontname" ] }
Schiftgroesze allgemeiner Text { font-size: [ cm | mm | px | pc ] }

Hyperlink-FarbeA:link
Farbe benutzer HyperlinksA:visited
Farbe des aktiven HyperlinksA:active
Farbe von Hyperlinks { color: [ #XXXXXX | "Farbname" ] }

Bildattributeimg
Rahmendicke von Bildern { border: [ cm | mm | px ] }

Tabellenattributetable
Rahmendicke von Tabellen { border: [ cm | mm | px ] }
Rahmenfarbe von Tabellen { border-color: [ #XXXXXX | "Farbname" ] }
Hintergrundfarbe von Tabellen { background: [ #XXXXXX | "Farbname" ] }
Text innerhalb Tabellen { font-size: [ cm | mm | px | pc ] }
Text innerhalb Tabellen { font-family: [ ] }

Listenattributeul
Bild als Aufzaehlungssymol bei Listen. { list-style-image: url(liste.gif) }
Breite Listenfeld { width: [ cm | mm | px ] }
Hoehe Listenfeld { height: [ cm | mm | px ] }
Breite des Listenfelds { font-size: [ cm | mm | px | pc ] }
Breite des Listenfelds { margin: [ cm | mm | px ] }
Breite des Listenfelds { background-color: [ #XXXXXX | "Farbname" ] }