CSS Cascading Style Sheets

Nun mag ich dir, nachdem du nun schon deine eigene HTML-Seiten basteln kannst noch einen Trick verraten, auf den Unki erst vor kurzer Zeit gekommen ist. Vielleicht ist dir bei dem Kapitel über Links aufgefallen, daß diese Links blau waren aber hier alle eher grau. Sofern du den Internetexplorer (oder Opera) hast, siehst du an der Seite auch noch eine grüne Scrolleiste.

Nun dieses alles ist durch CSS [Cascading Style Sheets] möglich. Vielleicht wirst du dich fragen, was eigentlich HTML nun mit CSS zu tun haben mag? Nunja, diese Frage stellte sich Unki auch recht oft. Bis er eine sehr gute Erklärung dafür gefunden hat. Aber erst verrate ich dir einmal wie man CSS in eine Seite einbindet. Nehmen wir dazu mal wieder ein HTML-Dokument.


<html>
<head>
<title>Titel der Seite</title>
<link rel=stylesheet type="text/css" href="name.css">
</head>


<body>
<p>
Hier kommt dein Text hin
</p>
</body>


</html>

Siehst du unter den Titel der Zeile die Anweisung
<link rel=stylesheet type="text/css" href="name.css"> ???
Damit weiß ich, dass ich für css in die Datei namens name.css schauen soll und diese auch für dieses Dokument verwenden soll. Hier ist der Name der Datei, wie könnte es auch anders sein htmling.css. Einen kleinen Auszug dieser Datei mag ich dir nun gerne zeigen.


body {
font-family:
Comic Sans MS,Verdana,Helvetica;
background-color:white;
font-size:12pt;;
color:black;
text-align:left;
scrollbar-base-color:#00CC00;
scrollbar-highlight-color:#00CC00;
scrollbar-shadow-color:#00CC00;
scrollbar-track-color:#00CC00;
scrollbar-arrow-color:white;
scrollbar-shadow-color:white;
}


table,td {
font-family:
Comic Sans MS,Verdana,Helvetica;
font-size:12pt;
}


A:alink {color:#9F9F9F;
text-decoration:underline;
font-family:Comic Sans MS,Verdana,Helvetica;
font-size:12pt;
}


A:link {color:#5B5B5B;
text-decoration:underline;
font-family:Comic Sans MS,Verdana,Helvetica;
font-size:12pt;
}


A:visited {color:#4F4F4F;
text-decoration:underline;
font-family:Comic Sans MS,Verdana,Helvetica;
font-size:12pt;
}


A:hover {color:#9F9F9F;
text-decoration:underline;
font-family:Comic Sans MS,Verdana,Helvetica;
font-size:12pt;
}





Sicherlich erkennst du manche dieser Befehle bei CSS wieder. Im Grunde weist CSS Standardbefehlen eine besondere Eigenschaft zu. So beginnt dieses CSS oben mit dem BODY, du erinnerst dich vielleicht daran, daß in diesem alles drin steht, was auf der Seite dann angezeigt wird. (Im obigen Beispiel bei "Hier kommt der Text hin.") Nun fangen wir einmal an. Als erstes kommt das Element, das geändert werden soll body gefolgt von einer geschwungenen Klammer { mit der mir dann genau gesagt wird, was ich bei body eigentlich machen soll.
font-family: sagt mir welche Schriftart ich nehmen soll. In diesen Beispiel ist es die Schriftart Comic Sans MS und falls jene nicht vorhanden ist noch zwei Alternativen dazu. Danach gibt mir dieses CSS noch an, dass ich den background-color: auf white setzen soll. Also setze ich, da ich ja ein gut erzogener HTMLing bin, den Hintergrund auf weiß. Durch font-size: erfahre ich, daß Unki die Schrift gerne 12 Punkt groß haben möchte und dank color: ist mir auch bewusst, dass diese Schrift die Farbe schwarz haben soll. Ferner ist mir durch text-align: bekannt, daß ich immer links mit dem Schreiben beginnen soll.

Mit den scrollbar Befehlen gebe ich der Scrolleiste bei Opera und IE eine eigene Farbe. So gibt mir scrollbar-base-color: die Farbe, die die Scrolleiste hat - als der Teil, den man verschiebt. Vielleicht ist dir der helle Rand bei den verschiebbaren Teil aufgefallen, auch diesen kann man mit Farbe versehen. Dieses Farbwunder gelingt durch scrollbar-highlight-color: für die hellere Farbe links und oben und scrollbar-shadow-color: ist die Farbe für die dunkle Farbe rechts und unten, wobei diese nicht immer dunkel sein muß. Ebenfalls interessant ist scrollbar-track-color:, womit du dem Bereich unter dem Scrollbalken eine eigene Farbe geben kannst. Dieses kann zum Beispiel dann die Farbe deines Seitenhintergrundes sein.

Unki hat die Scrolleiste in einen Grünton gesetzt und ich hoffe mal, daß es euch gefällt. Mit scrollbar-arrow-color: mag mir Unki sagen, daß ich die kleinen Scrollpfeile white setzen soll.

So mehr ist Unki zum Body nicht eingefallen, deswegen beendet er die Eigenschaften wieder mit der geschwungenen Klammer }.

Aufgrund eines sehr guten Tips von Cloud und ihrem Schattenbaum hat Unki jetzt auch noch für table und td extra Eigenschaften festgelegt, so daß auch der Tabelleninhalt in Comic Sans MS und der Schriftgröße 12 dargestellt wird.

Nun wunderst du dich aber sicherlich über die ganz unterschiedlichen A: Angaben. Nun dieses ist auch wieder ein Effekt für IE und Opera. Aber auch in Netscape zeigen sich die Auswirkungen davon. Erinnerst du dich, daß wir bei den Links immer eine blaue Farbe hatten? Nun mit diesen A:-Beschreibungen weiß ich, daß Unki vollkommen andere Farben verwenden möchte. Ich erkläre dir einmal, was die einzelnen Felder bewirken.


A:alink sollte die Eigenschaften des Links beschreiben, wenn man draufklickt,
A:linkgibt die Eigenschaften für einen normalen Link an,
A:visitedgibt die Eigenschaften eines bereits besuchten Links an
und A:hoversagt mir (bei IE und Opera) was ich machen soll,

wenn jemand mit der Maus über den Link fährt.


Neben den Zuweisungen bei festen HTML-Begriffen, kann ich jedoch auch noch Klassen anlegen. Wenn ich beispielsweise in der CSS sage:

.klassenname {
Eigenschaften, wie Farbe, Schrift, Größe etc.
}

Dann kann ich bei Befehlen wie <td>Tabellenzelleinhalt</td> noch durch
<td class="klassenname">Tabellenzelleninhalt</td>
dahingehend noch genauere Informationen angeben. Nebenbei so hat Unki auch die Klasse gruen definiert in der die beiden Ränder auf jeder Seite sind.

Wenn du dich etwas mehr mit CSS beschäftigen möchtest, dann kann ich dir nur einen sehr gut befreundeten Baum von mir empfehlen. Dieser Baum hat in seinen Wipfeln sehr viel Wissen über CSS gesammelt und du wirst dort sicherlich fündig.

Wenn ihr zu diesen magischen Baum gehen wollt, dann klickt einfach mal auf diesem Baum


Der Schattenbaum



» Zurück «.



HTMLing ein Projekt von cloud und unki
© 2001 unki.de / htmling.net
Dieses ist eine OfflineVersion des Angebotes www.htmling.net
Die Weitergabe und Vervielfältigung der Dateien ist für nicht kommerzielle Zwecke gestattet, jedoch dürfen die Dateien nicht verändert und die Copyright-Hinweise nicht entfernt werden. Ebenso ist die Veröffentlichung auf anderen Internetseiten nicht gestattet.