Um den Style einer Webseite zu beschreiben, wird CSS verwendet.
CSS-Anweisungen können direkt im Kopf der Webseite eingegeben werden
<style type="text/css">
...
</style>
oder besser in eine externe Datei.css ausgelagelagert werden:
<link type="text/css" rel="stylsheet" href="Datei.css" />
Eine CSS-Anweisung ist immer wie flolgt aufgebaut:
Selector { Eigenschaft : Wert; }
Beispiel:
p
{
backround-colour: red;
border: 1px solid gray;
}
Es können auch mehrere Selektoren mit Komma getrennt angegeben werden, für die die selben Eigenschaften gesetzt werden sollen. Allgemeine Styles werden gruppiert und durch spezifische ergänzt! Dabei wird der Styl automatisch auf alle Elemente innerhalb des gewählten Elementes angewendet (vererbt). Wird für ein Unterelement eine spezifische Regel angegeben, so gilt diese für dieses Element.
Um ein Kommentar einzufügen wird dieser in /* und */ eingeschlossen.
Sollen Eigenschaften auf mehrere, aber eben nicht auf alle Elemente des gleichen Typs angewendet werden,
so müssen diese einer Klasse zugeordnet werden:
<p class="klassenname"> ... </p>
Sollen Eigenschaften nur auf ein bestimmtes Element des gleichen Typs angewendet werden,
so müssen diese eine id bekommen:
<p id="eins"> ... </p>
Id-Namen müssen mit einem Buchstaben beginnen auf den nur weitere Buchstaben oder Zahlen folgen dürfen.
Es sind keine Leerzeichen und Sonderzeichen zulässig.
Als Selektor kann nun
oder auch einfach
gewählt werden.
Alle XHTML-Elemente haben im CSS folgende verschieden scalierbare Bereiche:
Es ist durchaus interessant einen Link einen Effekt zu geben, der beim Überfahren des Links mit der Maus angezeigt ist. So kann mann leicht den aktiven Link erkennen. Das habe ich auch in dieser Webseite genutzt.
a:hover //*text-transform: uppercase;*/ font-weight:bold; color:blue; background-color:yellow; }
Dies kann man auch für die Tastaturbedienung adaptieren, bei der ein Link den Fokus erhalten kann. Dies sollte man allerdings stehts vor der Pseudoklasse hover einfügen, da dann auch ein aktivierter Link die Formatierung beim Überfahren mit der Maus erhält.
a:focus{
/*text-transform: uppercase;*/
font-weight:bold;
color:white;
background-color:green;
}
Auf dieser Seite habe ich ein Inhaltsverzeichnis links oben schwebend angebracht. Das funktioniert folgendermaßen:
Im Quelltext werden zwei div-Bereiche definiert.
<div id="Navi"> <div id="Inhalt">
#Navi {
/*position: absolute;
/*top: 1.8em; left: 1em;*/
position: fixed;
width: 250px;
border-style: dotted;
border-color: teal;
font-size:14px;
}
#Navi h3 { text-align: center;
color: Maroon;
text-decoration: underline;}
#Navi ul {
padding: 15px;
}
#Navi li{
width: 200px;
/*padding: 2px;
margin: 2px;*/
list-style-position: outside;
}
#Inhalt {
margin-left: 300px;
}
Quelltexte werden auf dieser Seite immer mit < pre > Quelltext < /pre > eingebettet, damit der Text mit allen Einrückungen genau so angezeigt werden kann, wie ich Ihn eingegeben habe. Da ein Listing allerdings auch etwas länger werden kann, bietet es sich an, dieses in eine Box zu sperren in der mann durch das Listing scrollen kann. Dies erreicht man im CSS durch folgenden Code:
pre {
Display: block;
background-color:Teal;
color:black;
font-style: italic;
width:550px;
max-height: 30em;
position : absolut;
overflow : auto;
}