nämlich geeignete HTML-Elemente. In einem davon getrennten Vorgang können Sie, mittels CSS, Style-Eigenschaften auf die vorhandene Markup-Struktur anwenden. Das, wofür Sie jeweils ein Set von Style-Eigenschaften definieren möchten, kann ein bestimmtes HTML-Element sein. Es kann sich aber auch um komplexere Bedingungen handeln. Zu diesem Zweck gibt es die zuvor beschriebenen Selektoren. Formate sind dagegen das jeweilige Set von CSS-Eigenschaften und ihren Wertzuweisungen.
Beispiel
h1 {
color: maroon;
background-color: #FDE8D2;
font-size: 3em;
border: 3px solid maroon;
border-radius: 9px;
}
Erläuterung
Als »Format« wird hier der Block bezeichnet, der von einem Selektor abhängig ist und durch die geschweiften Klammern
{
und
}
markiert wird. Das Original-Vokabular des W3-Konsortiums spricht von einem Deklarationsblock . Es handelt sich um eine odermehrere, beliebig viele Deklarationen (einzelne Formateigenschaftsdefinitionen). Jede Deklaration hat wiederum einen bestimmten Aufbau. Zunächst wird der Name einer CSS-Eigenschaft notiert. Dahinter folgen ein Doppelpunkt und dahinter der Wert, den Sie der CSS-Eigenschaft zuweisen. Abgeschlossen wird eine Deklaration üblicherweise durch ein Semikolon (
;
). Nur bei der letzten Deklaration vor der schließenden geschweiften Klammer darf der Strichpunkt auch entfallen. Um Fehler zu vermeiden, ist es jedoch besser, das Abschluss-Semikolon grundsätzlich zu notieren.
Im obigen Beispiel betrifft der Selektor alle
h1
-Überschriften. Der zugehörige Deklarationsblock besteht im Beispiel aus fünf Deklarationen: Mit
color: maroon;
erhalten die Überschriften 1. Ordnung eine dunkelrote Textfarbe, mit
background-color: #FDE8D2;
einen hellgelben Hintergrund, mit
font-size: 3em;
eine Schriftgröße 3 mal größer als normal, mit
border: 3px solid maroon;
einen 3 Pixel dicken dunkelroten Rahmen, und mit
border-radius: 9px;
werden die Ecken dieses Rahmen sanft abgerundet.
Weitere Hinweise
Die eigentlichen Style-Eigenschaften werden im Buchkapitel 14 CSS-Eigenschaften behandelt. Im vorliegenden Buch werden die Begriffe »Deklaration« und »Deklarationsblock« ansonsten nicht verwendet. Stattdessen ist von »Formaten« und »Formatdefinitionen« die Rede.
13.2.15 Kaskadierung und Vererbung
Wird ein HTML-Dokument, das kein Stylesheet referenziert und auch selbst keinerlei CSS-Formatierungen enthält, im Browser aufgerufen, so wird es dennoch mit einem Basis-Layout dargestellt. Überschriften weisen in grafischen Browsern beispielsweise einen größeren Schriftgrad auf, werden fett dargestellt und erzeugen einen neuen Absatz. Der Grund dafür ist das sogenannte Browser-Stylesheet , das grundlegende Informationen über darzustellende Elemente für die Anzeige im Browser enthält.
Browser-Stylesheet
Für HTML 4.0 ist beim W3-Konsortium ein Stylesheet hinterlegt, das Browser-Entwicklern empfiehlt, wie die Elemente von HTML 4.0 dargestellt werden sollen.
Browser-Stylesheet für HTML 4.0
http://www.w3.org/TR/REC-CSS2/sample.html
Wenn Sie CSS-Stylesheets in HTML einbinden, ergänzen oder überschreiben Sie damit das Browser-Stylesheet. Solche autorenseitig definierten Stylesheets werden als Autoren-Stylesheets bezeichnet.
Darüber hinaus bieten einige Browser oder Browser-Erweiterungen ihren Benutzern die Möglichkeit an, sogenannte Benutzer-Stylesheets einzubinden. Auch darin sind CSS-Formate definiert – nämlich solche, die für den jeweiligen Benutzer optimal sind.
Durch diese unterschiedlichen Arten von Stylesheets – aber auch schon durch Angaben innerhalb von einzelnen Stylesheets – entstehen häufig widersprüchliche Format-Definitionen.
Beispiel
Zuerst der HTML-Quelltext:
Und hier die CSS-Definitionen dazu:
a:link { color: blue; }
.xy { color: yellow; }
#nav a.xy { color: green; }
li a { color: magenta; }
#nav li a { color: black; }
Erläuterung
Die Selektoren des Beispiels wirken alle auf das im HTML-Quelltext notierte
a
-Element. Wenn Sie möchten, können Sie gerne versuchen herauszufinden, in welcher Farbe der Hyperlink letztlich dargestellt wird. Darüber hinaus enthält bereits das Browser-Stylesheet Format-Definitionen für das
a
-Element. Ein etwaiges Benutzer-Stylesheet kann zusätzliche Format-Definitionen enthalten.
Um herauszufinden, wie Elemente letztendlich darzustellen sind, folgen Browser den nachfolgend beschriebenen
Kostenlos Online Lesen 
