HTML und CSS, Javascript, CGI/Perl, SSI, PHP.

HTML I

HTML II

Trennlinien , Listen | Hintergrundbilder | Frames | Formulare | Meta - Tags

CSS

Einführung | Style Sheets definieren | einzelne Angaben

PLUS

Hilfreiches / Tabellen | Software / Tools | Upload der Homepage | Hyperlinks

FAQ / Goodies | Java | CGI / Perl | SSI

CSS : Style Sheets definieren || direkte Einbindung im <body> ... </body> - Teil • Definition von Tags und Klassen im <head> ... </head> - Teil • Definition von Tags und Klassen in einer separaten Datei

HTML - Angaben können auf eine Art eingebunden werden , Style Sheet - Angaben auf drei* :

(* etwas vereinfacht)

1 . ) direkte Einbindung im <body> ... </body> - Teil

Beispiel :

<table style="border-width:10px;border-color:#339966;border-style:solid;padding:20px"><tr><td>
Ein Satz . Und wieder ein Satz . Und wieder ein Satz . Und wieder ein Satz .<br> <p style="margin-left:100px">
Ein Satz . <br>
Und wieder ein Satz .</p> </td></tr></table> <p style="background-color:#FFFFFF;cursor:crosshair;font-family:Westminster;font-size:40px" align="center">
Bla Bla Bla Bla Bla Blu Bla Bli Blo</p>

ergibt :

Ein Satz . Und wieder ein Satz . Und wieder ein Satz . Und wieder ein Satz .

Ein Satz .
Und wieder ein Satz .

Bla Bla Bla Bla Bla Blu Bla Bli Blo

Anmerkungen :

Die Einbindung erfolgt im jeweiligen Tag durch das Attribut style= "[Angaben/Werte]" . Zwischen Angabe und Wert muss ein Doppelpunkt gesetzt werden . Mehrere Angaben werden jeweils mit einem Semikolon ( ; ) voneinander getrennt .
Schriftart ( font-family ) : Bei Namen mit Leerzeichen wie 'Zurich BT' müssen Gänsefüsschen gesetzt werden ( font-family:"Zurich BT" ) .
Auf eine direkte Einbindung sollte weitmöglichst verzichtet werden . Einer der Grundgedanken von CSS ist ja schliesslich die Trennung von Inhalt von Layout ...

2 . ) Definition von Tags und Klassen im <head> ... </head> - Teil

Beispiel :

<head> <style type="text/css">  </style> </head> <body> <h4 class="brdx">Überschrift in Bordeaux</h4> <p class="gross">Dies ist ein etwas grösserer Abschnitt . </p> <p>Und dies ist jetzt ein normaler Absatz .</p> <p class="brdx">Ein Absatz in Bordeaux .</p> <p class="brdx2">Ein Absatz in Bordeaux mit Hintergrundfarbe .</p> <ul> <li>Eine Liste ...</li> <li>... Genau .</li> <li>... 'lower-alpha' .</li> </ul> <a href="javascript.back()">Ein Link , fett und rot .</a> </body>

ergibt :

Anmerkungen :

Style Sheet - Angaben müssen innerhalb des <style> ... </style> - Tags definiert werden . Das zusätzliche Attribut type="text/css" erleichtert dem Browser die Aufgabe ( MIME - Angabe ) . Die Angaben werden zusätzlich in einen Kommentar (  ) gesetzt , damit sie von alten Browsern , die keine CSS verstehen , nicht irrtümlich ausgelesen werden . Alles zusammen kommt in den <head> ... </head> - Tag .
Entweder werden direkt Tags formatiert . Oder es werden Klassen definiert , die anschliessend beliebig auf Tags anwendbar sind . Die Klasse wird dann im betreffenden Tag mit dem Attribut class="[name]" eingebunden . Eine Klasse erkennt ihr am vorangestellten Punkt . Eine Klasse mit einem vorangestellten Tag ist nur auf dieses anwendbar ( Bsp. oben : p.gross {font-size:120%} ) .
Die Angaben zu den einzelnen Tags oder Klassen kommen innerhalb geschweifter Klammern ( { } ). Zwischen Angabe und Wert muss ein Doppelpunkt gesetzt werden . Mehrere Angaben werden jeweils mit einem Semikolon ( ; ) voneinander getrennt .
Tags und Klassen können zusammengefasst werden , sie werden dann durch Kommas voneinander getrennt ( Bsp. oben : p,ul,a {font:12px Verdana} , drei Tags zusammengefasst ) .

3 . ) Definition von Tags und Klassen in einer separaten Datei

Ein Beispiel für die Anwendung externer Style Sheets ist von der vorherigen Seite bekannt.

Anmerkungen:

*.css - Dateien sind ganz normale, 'reine' Textdokumente , nur dass sie statt mit Endung .txt mit Endung .css abgespeichert werden.
Die Einbindung des Style Sheets in das Dokument erfolgt jeweils im <head> - Teil mit dem Tag <link rel=stylesheet type="text/css" href="[name].css">.
Die Definition von Tags oder Klassen funktioniert genauso wie beim Einbinden in den <head> ... </head>- Tag .
Kommentare in einer css - Datei (oder auch innerhalb einer <style type="text/css">  </style> -Definition im <head>... </head>-Teil) werden innerhalb von /* und */ notiert. Kommentare dienen nur zur [persönlichen] Orientierung.

Zusätzliche Anmerkungen:

Es gibt noch eine zweite Möglichkeit, ein externes Stylesheet einzubinden, und zwar mit

@import url(url_des_styles.css);
- Diese Angabe kann entweder in einem anderen externen Stylesheet oder im Dokument selber (innerhalb des style- Tags) notiert werden!
- Wichtig: das Semikolon ; am Schluss.
- Diese Angabe wird vom Netscape 4.x nicht interpretiert, eignet sich also hervorragend dazu, bestimmte CSS-Angaben, welche bei diesem zu Problemen führen (z.B. Border-Attribute bei Bildern oder Formularelementen, etc. etc.), nur für CSS-kompatible Browser zu notieren.

Die drei Arten zur Einbindung von CSS können natürlich miteinander kombiniert werden.
Manchmal möchte man vielleicht einen bestimmten Bereic - z.B. eine Textpassage in einem Absatz, also innerhalb eines Tags, oder z.B. einen Bereich, der mehrere Elemente umfasst, mit bestimmten Eigenschaften versehen. Dieses Problem wurde durch die Einführung der beiden neuen Tags <div> (umschliesst mehrere Tags) und <span> (innerhalb eines Tags) gelöst. Theoretisch zumindest.

\| Weiter zum nächsten Kapitel : CSS - Angaben \|
::: © 2000/01 Martin Fux ::: URL dieses Dokuments: http://www.flexdax.org/htmlkurs/css-definieren.html

1 . ) direkte Einbindung im `<body> ... </body>` - Teil

Beispiel :

ergibt :

2 . ) Definition von Tags und Klassen im `<head> ... </head>` - Teil

Beispiel :

ergibt :

3 . ) Definition von Tags und Klassen in einer separaten Datei

Zusätzliche Anmerkungen:

1 . ) direkte Einbindung im <body> ... </body> - Teil

Beispiel :

ergibt :

2 . ) Definition von Tags und Klassen im <head> ... </head> - Teil

Beispiel :

ergibt :

3 . ) Definition von Tags und Klassen in einer separaten Datei

Zusätzliche Anmerkungen:

1 . ) direkte Einbindung im `<body> ... </body>` - Teil

2 . ) Definition von Tags und Klassen im `<head> ... </head>` - Teil