CSS Styles
LIN 8080
Mit Style Sheets geht einiges anders. Was, liegt am Kenntnisstand des Coders. Der soll hier mal ein bischen, nun ja, je nachdem. Für manchen ist das ja ein alter Hut, der kann ja dann weiterklicken. Für den anderen ist das ein spanisches Dorf, der findet hier ein paar wichtige Infos.
Für die ersten Schritte muss mal gesagt werden: Es geht so ziemlich alles. Ein paar Fehler kommen immer mal vor. Man kann das alles ja mal testen.
Für nähere Betrachtungen gibt es zunächst drei Fallunterscheidungen. Style Angaben können:
1. Direkt hinter einer HTML-Angabe stehen. Das sind Inline-Skripte. Sie beziehen sich nur auf einen einzigen Befehl (zum Beispiel <A HREF="..." STYLE="width:173; height:23; visibility:hidden">)
2. Angaben im Header einer HTML-Seite. Das ist eigentlich der Normalfall. Solche Angaben gelten für diese eine Seite. Sie überschreiben alle anderen Angaben des Body-Teiles.
3. Die Style-Angaben stehen in einer extra .CSS Datei. Dann müssen sie vor der Seite, für die sie gelten sollen, aber auch aufgerufen werden.
Befassen wir uns also mit dem Normalfall. Da es ein leichtes ist, diese Angaben in eine extra Datei mit einer Endung css zu verpacken.
Das Grundgerüst zu CSS sieht etwa so aus:
<html> <head> <style> <!-- Hier stehen die Angaben... --> </style> </head> <body> Hier steht der Seiteninhalt... </body> </html>
Man erkennt nichts ungewöhnliches. Als Angabe schreibt man ein gültiges HTML Schlüsselwort und dahinter legt man die Angaben fest. Man muss nicht alle Sachen ausdrücklich angeben. Die meisten Layout-Elemente haben einen Default-Wert, der verwendet wird, wenn keine weiteren Angaben gefunden werden. Aber, wenn irgend welche anderen Angaben gefunden werden, werden diese Default-Werte damit überschrieben.
Es folgen hier einfach mal ein paar Beispiele, die veranschaulichen sollen, wie sowas aussieht.
Beispiel 1:
body {
margin-left: 8em;
font-family: arial;
font-size: 12pt;
color: 000000;
}
Beispiel 2:
h1 {
color: 006699;
font-size: 36pt;
font-weight: regular;
font-family: "Script MT Bold", "Comic Sans MS", "Arial";
}
Wie zu sehen, ist manches zunächst etwas gewöhnungsbedürftig, aber nicht eigentlich unbekannt. Es ist die Schreibweise, die meist für Fehler sorgt. Das Zeichen ";" muss gesetzt werden, wenn eine Angabe fertig ist. Das "=" wurde durch einen ":" ersetzt, und es gibt den Bindestrich, der Style-Angaben verknüpft.