CSS - Cascading Style Sheets
In älteren HTML-Dateien findet oft eine Mischung von Formatierung und Inhalt statt. Das sieht dann z. B. so aus:
<font face="BeachWide"><font color="#FFFF99"><font size="+1">Meine Hobbies</font></font></font>
Durch die Trennung von Formatierung und Inhalt ergeben sich viele Vorteile: Die HTML-Dateien werden insgesamt kleiner, globale Formatänderungen sind mit minimalem Aufwand möglich, die Inhaltsseiten und damit die ganze Homepage sind viel einfacher zu warten. Die Formatangaben werden in einer eigenen CSS-Datei gespeichert. Im <head>-Element informiert man den Browser über das <link>-Element, dass er die Formatvorlagen aus der CSS-Datei (im Beispiel formate. css) benutzen soll:
<link rel=”stylesheet” type="text/css" href="formate.css">
Style Sheets (engl., Formatvorlagen)
Eine einzelne Formatvorlage wird wie folgt definiert:
h1 { color: red; }
Damit wird festgelegt, dass Überschriften 1. Ordnung in rot angezeigt werden. So eine Formatvorlage besteht aus zwei Hauptteilen, dem Selektor h1 und in geschweiften Klammern der Deklaration color: red; Der Selektor h1 ist die Verbindung zwischen HTML und der Formatvorlage her. Die Deklaration besteht ebenfalls aus zwei Teilen, dem Attribut color und dem Attributwert red. Das Attribut color ist nur ein Attribut von vielen, mit denen man das Aussehen von HTML-Elementen beeinflussen kann.
Innerhalb einer Formatvorlage können auch mehrere Attribute für mehrere Selektoren definiert werden, z. B.
body { margin-left: 10%; margin-right: 10%; } h1 { margin-left: -8%; } h2, h3 { font-weight: bold; font-size: 12px; line-height: 14px; font-family: helvetica; }
Die Syntax eines Style sheet wird also durch dieses Syntaxdiagramm beschrieben:
Das class-Attribut als Selektor für Formatvorlagen
Manchmal ist es wünschenswert verschiedene Varianten von Formatvorlagen zu benutzen. Die Auswahl der gewünschten Variante erfolgt über das class-Attribut im HTML-Element: <p class=„normal“>Textabsatz mit normaler Schriftgröße in Schwarz</p> <p class=„gross“>Textabsatz mit größerer Schrift in Schwarz </p> <p class=„klein“>Textabsatz mit kleinerer Schrift in Schwarz </p> <h1 class=„rot“>rote Überschrift</h1> Die Definition der Varianten erfolgt in der CSS-Datei.
.normal { font-size:100%; color:black; } .gross { font-size:120%; color:black; } .klein { font-size:80%; color:black; } .rot { color:red; }
Die relativen Größenangaben mittels Prozentwerten sind günstiger als absolute Schriftgrößen, weil der Anwender dann die gewünschte Schriftgröße im Browser einstellen kann.
Formatvorlagen für Verweise
Verweise werden mit dem <a>-Element definiert. Browser zeigen normalerweise besuchte Verweise anders als noch nicht besuchte Verweise an. Hierfür gibt es spezielle Selektoren:
a:link { color: red } /* noch nicht besuchte Verweise */ a:visited { color: blue } /* besuchte Verweise */ a:hover { color: yellow } /* Maus auf dem Verweis */
Der HTML-Editor unterstützt das Schreiben von Formatvorlagen über die Schaltfläche Neues Style Element auf der Registerkarte CSS. Tipps: http://w3c.org/MarkUp/Guide/Style und http://www.css4you.de