====== CSS - Cascading Style Sheets ======
In älteren HTML-Dateien findet oft eine Mischung von Formatierung und Inhalt statt. Das sieht dann z.
B. so aus:
Meine Hobbies
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
====== 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:
{{ :e1:csspng.png?direct&600 |}}
====== 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:
Textabsatz mit normaler Schriftgröße in Schwarz
Textabsatz mit größerer Schrift in Schwarz
Textabsatz mit kleinerer Schrift in Schwarz
.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 -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