|
|
|
|
CSS Cascading Style Sheets
Nun mag ich euch, nachdem ihr nun schon eure eigene HTML-Seiten basteln könnt noch einen Trick verraten, auf den Unki erst vor kurzer Zeit gekommen ist. Vielleicht ist euch bei dem Kapitel über Links aufgefallen, daß diese Links weiß waren und nicht standardmäßig blau. Sofern ihr den Internetexplorer (oder Opera) habt, seht ihr an der Seite auch noch eine blaue Scrolleiste.
|
|
Nun dieses alles ist durch CSS [Cascading Style Sheets] möglich. Vielleicht werdet ihr euch 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 euch 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>
|
Seht ihr unter dem 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 euch 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 erkennt ihr manche dieser Befehle bei CSS wieder. Im Grunde weist CSS Standardbefehlen eine besondere Eigenschaft zu. So beginnt dieses CSS oben mit dem BODY, ihr erinnert euch vielleicht daran, dass 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 die 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, dass 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, dass 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 - also der Teil, den man verschiebt. Vielleicht ist euch der helle Rand bei dem 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 ihr dem Bereich unter dem Scrollbalken eine eigene Farbe geben könnt.
Das kann dann zum Beispiel die Farbe deines Seitenhintergrundes sein.
Unki hat die Scrolleiste in einen Blauton gesetzt und ich hoffe mal, dass es euch gefällt. Mit scrollbar-arrow-color: mag mir Unki sagen, dass 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 Tipps von Cloud und ihrem Schattenbaum hat Unki jetzt auch noch für table und td extra Eigenschaften festgelegt, so dass auch der Tabelleninhalt in Comic Sans MS und der Schriftgröße 12 dargestellt wird.
Nun wundert ihr euch 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. Erinnert ihr euch, dass wir bei den Links immer eine blaue Farbe hatten? Nun mit diesen A:-Beschreibungen weiß ich, dass Unki vollkommen andere Farben verwenden möchte. Ich erkläre euch einmal, was die einzelnen Felder bewirken.
| A:alink |
sollte die Eigenschaften des Links beschreiben, wenn man draufklickt, |
| A:link | gibt die Eigenschaften für einen normalen Link an, |
| A:visited | gibt die Eigenschaften eines bereits besuchten Links an |
| und A:hover | sagt 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.
Wenn ihr euch etwas mehr mit CSS beschäftigen möchtet, dann kann ich euch nur einen sehr gut befreundeten Baum von mir empfehlen. Dieser Baum hatte in seinen Wipfeln sehr viel Wissen über CSS gesammelt aber mittlerweile ist selbst das Thema CSS so umfangreich geworden, dass wir euch hier ebenfalls eher SELFHTML empfehlen.
Weitere Informationen zu CSS findet ihr auch da links im Menü unter CSS.
HTMLING.net: CSS
|
 |
|
|
