CSS-Syntax

Die Grammatik von Cascading StyleSheets

Diese Webseite soll einen kurzen Überblick über die Regeln von CSS verschaffen. Sie ist jedoch kein Ersatz für ein CSS-Handbuch !
CSS CSS Cascading StyleSheets
HTML Einige HTML-(DOM)-Definitionen
CSS-Begriffe style, Regel, Klasse, ...
style= " " Formatierung einzelner Knoten mit dem style-Attribut
<style></style> Formatierung von Knoten einzelner Webseiten mit dem <style>-Block
Stylesheet Formatierung ganzer Webs mit Stylesheet-Dateien
CSS-Klassen Namen für ganze Regel-Sammlungen: HTML-, eigene, id-Klassen, ...
Zahlen Numerische Angaben in CSS
style-Objekt Javascript verwendet das style-Objekt und seine Eigenschaften
Links CSS-Links Links zu CSS-References, Tutorials, ...

Begriffe zum Thema   HTML & DOM
Webseite:
► Ein Objekt, das nach den Regeln des "Document Object Model" (→ DOM) in Form eines hierarchischen Baums in Unter-Objekte gegliedert ist.
► Eine HTML-Webseite enthält normalerweise genau diese beiden Unter-Objekte (Tochter-Knoten, childNodes ): <head> und <body>
<html>
<head> ... </head>
<body> ... </body>
</html>
Knoten-Element   (node)
► Der Inhalt einer HTML-Webseite wird aus untergeordneten Objekten (Elementen, Knoten, nodes) aufgebaut.
HTML Knoten-Elemente sind im Quelltext (source) durch symmetrische "tags" wie z.B. <body>...</body> begrenzt.
► Zwischen dem Anfangs-tag und dem End-tag eines Elements können untergeordnete Elemente (childNodes) eingefügt sein. Diese können aus Text bestehen (Text-Knoten), oder aus beliebigen anderen HTML-Elementen.
► Jeder childNode kann selbst eigene untergeordnete Elemente enthalten.
► Lediglich Text-Knoten können keine childNodes enthalten, sie stellen daher die Endpunkte der Zweige des Objekt-Baums dar. 		Das <span>-Element dieses Beispiels enthält genau einen childNode (einen Text-Knoten):
<span>Das ist ein Textknoten</span>

Das <div>-Element des folgenden Beispiels enthält zwei childNodes (<span>-Elemente). Jeder der childNodes enthält selbst einen weiteren childNode (Text-Knoten):
<div>
<span>ein Textknoten</span>
<span>ein anderer Textknoten</span>
</div>
Attribute:
Um die Objekte näher zu beschreiben, kann das Start-tag jedes Elements Attribute enthalten.
► Attribute werden als Text in der Form Name="Wert" eingetragen. Sie werden voneinander durch Leerzeichen getrennt.
Die Reichweite jedes Attributs erstreckt sich bis zum Abschluss-tag des Knotens.
► Die beiden Attribute class und style dienen zur Anwendung von CSS-Regeln auf HTML-Elemente.
<div style="color:blue;">
Anwendung eines style-Attributs
</div>
Kommentare
HTML erlaubt beliebig lange Kommentare, die bei der Verarbeitung ignoriert werden.
CSS erlaubt ebenfalls Kommentare. Diese sind jedoch nur innerhalb von CSS-Code zulässig.
<!--   HTML-Kommentar   -->
<style type="text/css">
/*   CSS-Kommentar   */
</style>
XHTML
Die strengeren Regeln von → XHTML schreiben u.a. vor:
● Die Namen von Elementen und Attributen dürfen nur in Kleinbuchstaben gesetzt werden. <BODY> oder <Body> ist durch <body> zu ersetzen.
● Die Werte von Attributen müssen immer in "" gesetzt werden. Attribute in der Form Name=Wert sind unzulässig.
♣ Tipp: Es ist sehr empfehlenswert, bei jeder Änderung oder neuen Entwicklung von Webseiten nach Möglichkeit die strengen → XHTML-Regeln zu beachten.
In diesem Fall können sie bei Bedarf jederzeit auf XHTML umsteigen. Andernfalls wird der Umstieg langwierig und teuer.

Einige CSS-Begriffe:
CSS-Regel   (rule):
■ Jede Regel besteht aus einem Text der Form
 name:wert;
■ Der Name bezeichnet eine CSS-Eigenschaft, d.h. eine der Eigenschaften des style-Objekts. Eine Liste der CSS-Eigenschaften und ihrer möglichen Werte finden sie in der Definition der aktuellen CSS-Version.
■ Name und Wert sind durch : (colon) voneinander getrennt.
Einzelne CSS-Regel in der Form name:wert;
color:red;
Die Regel dieses Beispiels setzt die (Vordergrund)-Farbe eines Objekts auf den Wert red, d.h. auf die Farbe 'Rot'.
CSS-Klasse   (class):
■ Beliebig viele CSS-Regeln können zu einer CSS-Klasse zusammengefasst werden.
■ Die Definition beginnt mit dem Klassen-Namen, gefolgt von der Liste der Regeln in {}
Die einzelnen Regeln werden durch ; Strichpunkte getrennt. Im Text enthaltene Leerzeichen, Tabulatoren oder Zeilen-Umbrüche werden ignoriert.
■ Wenn der Name einer CSS-Klasse jenem eines HTML-Elements entspricht, dann werden alle betreffenden HTML-Elemente nach den hier festgelegten Regeln formatiert. 		Beispiel einer CSS-Klasse aus 2 Regeln:
p {color:blue; font-weight:bold;}
Diese Regel wird auf alle nachfolgenden Absätze (HTML-Elemente <p>...</p>) angewendet.

Analog lassen sich CSS-Klassen für alle HTML-Elemente angeben, z.B. für <body>
body {font-size:10pt; margin:2cm;}
Mit CSS lassen sich auch eigene (allgemeine) Klassen erstellen.
Das Beispiel rechts definiert eine CSS-Klasse mit dem selbst definierten Namen bi
Beachten sie den obligatorischen Punkt vor dem Klassen-Namen !
Die weiteren Kapitel demonstrieren die Anwendung eigener CSS-Klassen.

♣ Tipp: Definieren sie keine leeren CSS-Klassen (d.h. Klassen ohne Regeln - Das macht bei manchen Browsern Probleme). 		Beispiel einer allgemeinen CSS-Klasse:
.bi{font-weight:bold; font-style:italic;}
Diese Klasse kann mit Hilfe eines class-Atributs auf jedes beliebige HTML-Element angewendet werden.
CSS StyleSheet:
■ Beliebig viele CSS-Klassen können zu einem Stylesheet zusammengefasst werden. Ein Stylesheet ist ein Block von Text, der nach CSS-Syntax zusammengestellt ist.
■ Ein Dokument (z.B: HTML-Webseite) kann beliebig viele Stylesheets enthalten. Später eingetragene Regeln überschreiben dabei frühere.
■ Stylesheets können in Webseiten als <style>..</style>-Elemente enthalten sein.
■ Alternativ kann der CSS-Code von Stylesheets in externe Dateien *.css ausgelagert werden.
In diesem Fall werden die (externen) Stylesheets mit <link>-Elementen in die Webseite eingebunden. Beide Varianten wirken ohne Unterschied.
■ Das Beispiel rechts enthält 2 Stylesheets, je eines als <style>-Element und als <link>-Element.

♣ Der Begriff 'Stylesheet' wird in der Literatur und im Internet leider uneinheitlich und missverständlich verwendet. Zur besseren Unterscheidung werden in diesem Web die Begriffe 'externe Stylesheet-Datei' und 'style-Element' bevorzugt.

♦ Details zur Programmierung des Style-Objekts mit Javascript 		Beispiel für eine HTML-Webseite mit 2 Stylesheets:
<head>
. . .
<link rel=stylesheet type="text/css" href="extern.css" />
<style type="text/css">
body {background-color:#CCC;}
.mytitel {font-size:14pt;}
</style>
. . .
</head>
Kommentare:
CSS erlaubt beliebig lange Kommentare der rechts gezeigten Form.
Kommentare werden ignoriert.
  /* ... CSS-Kommentar ... */

CSS-Formatierung einzelner HTML-Elemente mit dem style-Attribut
● (Fast) jedes HTML-Element kann einzeln mit einem style-Attribut formatiert werden. Als Wert des Attributs wird eine Liste von CSS-Regeln eingetragen.
● Die Reichweite der CSS-Regeln erstreckt sich bis zum Ende des betreffenden HTML-Elements.
● Vererbung: Die festgelegten CSS-Eigenschaften werden auf alle Tochter.Knoten (childNodes) vererbt. Das trifft (nur) dann nicht zu, wenn an irgendeiner Stelle andere CSS-Regeln für ein childNode-Element festgelegt wurden.
<div style="color:blue; font-weight:bold">
So wirkt ein style-Attribut
</div>
Verwenden sie diese Methode (nur) zur individuellen Formatierung einzelner HTML-Elemente.
Ersetzen sie damit alle auslaufenden HTML-Elemente wie z.B. <b>,<i>,<center>,<font> usw. sowie alle auslaufenden HTML-Attribute wie width, height, align, usw.

Diese Variante der CSS-Anwendung erlaubt wesentlich mehr Möglichkeiten zur Gestaltung als die auslaufenden HTML-Elemente, bringt jedoch noch keine Steigerung der Effizienz. 		Wenn sie in style-Attributen Wiederholungen von CSS-Regeln bemerken, dann sollten sie die Formatierung mit anderen - effizienteren - Methoden (CSS-Klassen, Stylesheets) durchführen (nächste Kapitel).

<style>-Elemente zur CSS-Formatierung einzelner Webseiten
► In einem <style>-Element werden beliebig viele CSS-Klassen zusammengefasst. Eine Webseite kann mehrere <style>-Elemente enthalten.
► Alle CSS-Regeln werden in der Reihenfolge ihres Auftretens (im Quelltext) interpretiert. Später angeordnete Regeln überschreiben frühere.
► Alle <style>-Elemente werden normalerweise im <head> einer Webseite untergebracht.
► Die Reichweite der enthaltenen Regeln erstreckt sich über die gesamte Webseite. 		Ein <style>-Element im <head> einer Webseite:
<head>
...
<style type="text/css">
body {color:blue;}
.b {font-weight:bold;}
<style>
</head>
Das Element (Stylesheet) enthält 2 CSS-Regeln (Klassen):
• Die erste Klasse formatiert alle <body>-Elemente (davon gibt es nur eines) der Webseite ohne weitere Angaben.
• Die zweite Zeile definiert eine allgemeine Klasse b, die mit einem class-Attribut auf jedes Element der Webseite angewendet werden kann.
Anwendung der im <style>-Element definierten CSS-Klassen auf HTML-Elemente:
► CSS-Klassen für HTML-Elemente werden automatisch auf alle Elemente dieser Art angewendet und auf deren childNodes vererbt.
► Allgemeine CSS-Klassen können auf jedes HTML-Element der Webseite angewendet werden. Dazu wird das betreffende Element mit einem class-Attribut versehen.
► Um eine allgemeine Klasse auf einen beliebigen Text anzuwenden, wird zusätzlich ein <span>-Element (einzelne Zeichen, Worte) oder ein <div>-Element (Zeile) mit dem betreffenden Attribut eingeführt. 		Anwendung der beiden im <style>-Element definierten CSS-Klassen:
<body>
Normaler und <span class="b">fett</span> gesetzter Text.
<div class="b">Text-Zeile</div>
</body>
• Die Klasse body (Regel: blau) wird automatisch auf jedes <body>-Element angewendet und auf seine childNodes vererbt.
• Die allgemeine Klasse b (Regel: fett) wird mit einem class-Attribut auf 2 verschiedene Elemente angewendet.
Verwenden sie diese Methode, um mehrere Elemente auf einzelnen Webseiten gleichartig zu formatieren.
• Bei geschickter Anwendung lässt sich damit viel Arbeit bei der Formatierung der Elemente sparen.
• Der größte Vorteil zeigt sich, wenn die Formatierung geändert werden soll. Eine kleine Änderung einer Regel im zentralen <style>-Element witkt sich sofort auf alle betroffenen Elemente aus. 		Wenn sie bemerken, dass in mehreren Webseiten die gleichen CSS-Klassen definiert werden, dann sollten sie die Definition dieser Klassen in eine externe Stylesheet-Datei auslagern.
Das spart noch mehr Formatierungs-Arbeit und ermöglicht die zentrale Verwaltung der CSS-Regeln für viele oder alle Webseiten.

Externe Stylesheet-Dateien zur CSS-Formatierung ganzer Webs
► In einer externen Stylesheet-Datei (*.css) werden beliebig viele CSS-Klassen zusammengefasst.
► Eine Webseite wird mit einem <link>-Element mit einer Stylesheet-Datei verknüpft. Das <link>-Element ist im <head> angeordnet - Sinnvoll ist die Verknüpfung einer Stylesheet-Datei mit möglichst vielen oder allen Seiten eines Webs.
► <link>-Elemente zur Verknüpfung mit externen Stylesheet-Dateien sollten immer vor den <style>-Elementen angeordnet sein. So können die allgemeinen Regeln der Stylesheet-Datei durch spezielle Regeln für bestimmte Webseiten ergänzt oder ersetzt werden.
/* Muster für eine CSS-Datei demo.css */
body {color:blue;}
.b {font-weight:bold;}

Einbindung der externen Stylesheet-Datei in eine Webseite:
<head>
...
<link rel="stylesheet" href="demo.css" />
<style>...</style>
</head>
► Die Dateinamen von StyleSheet-Dateien sollten die Endung css enthalten. Verwenden sie in den Namen nur Kleinbuchstaben, keine Umlaute oder Sonderzeichen. Damit vermeiden sie Probleme beim upload auf unbekannte Webserver. ► Jede Webseite kann mit mehreren Stylesheet-Dateien verknüpft werden. Beachten sie die Reihenfolge:
Allgemeine Regeln werden immer vor speziellen Regeln geladen.
► Stylesheets müssen nicht im eigenen Web vorliegen, sie können auch via Internet aus anderen Webs bezogen werden.
Die Anwendung der definierten Klassen ist unabhängig von der Art der Definition, d.h. genau gleich wie bei einem <style>-Element.
Die <span class="t2">Klasse</span> t2.
Verwenden sie diese mächtige Methode, um HTML-Elemente auf mehreren Webseiten gleichartig zu formatieren.
Damit können sie die Gestalt einer großen Zahl von Webseiten in kürzester Zeit ändern.
Mit Server-seitigen Programmiersprachen (PHP, Perl, ...) können sie StyleSheets auch dynamisch (Live, nach Bedarf) programmieren ! 		Verwenden sie andere Methoden (s.o.), um individuelle styles einzelner HTML-Elemente zu definieren, oder um CSS-Klassen für einzelne Webseiten festzulegen.

CSS-Klassen
■ Jede Definition einer CSS-Klasse besteht aus dem Klassen-Namen und beliebig vielen CSS-Regeln in {}
■ In der Definition enthaltene Leerzeichen, Tabs oder Returns werden ignoriert.
■ CSS-Klassen können nur in styleSheets definiert werden, das sind entweder <style>- oder <link>-Elemente.
■ Jede CSS-Klasse erzeugt entspricht einem → style-Objekt.
/* Definition der Klasse "rotschrift"   */
.rotschrift {color:red;}
HTML-Klassen:
■ Jedem HTML-Element ist eine CSS-Klasse gleichen Namens zugeordnet, deren (Standard)-Regeln dem Browser bekannt sind.
■ Sie können diese Standard-Regeln selbst ändern oder ergänzen.

Beispiel: Hier wird die CSS-Klasse p geändert.
Damit werden alle Absätze <p>..</p> der Webseite so formatiert:
Falls sie diese CSS-Definition in einer styleSheet-Datei verwenden, so wirkt sie sich auf alle Absätze aller betroffen Webseiten aus.
/* Formatierung der HTML-Klasse "p" */
p {background-color:#F0F0F0;}

<!--   HTML-Anwendung   -->
<p>Ein Absatz</p>
<div>Keine Änderung</div>
<p>Ein anderer Absatz</p>

Diese Methode eignet sich besonders gut für eine zentrale Definition des <body>-Elements.
Eigene CSS-Klassen:
■ Die Namen beginnen mit einem Punkt (period). In diesem Fall werden all jene HTML-Elemente danach formatiert, welche als class-Attribut den Namen der Klasse (ohne Punkt) tragen.

Beispiel: Damit werden alle Elemente mit dem Attribut class="t1" formatiert.

In diesem Web werden z.B. folgende eigene Klassen verwendet:
Inhaltsangabe-Tabelle, Überschrift, Untertitel, Quelltext allgemein oder HTML oder CSS ..
/* Formatierung der User-Klasse "t1" */
.t1{color:#FF0000;}

<div class="t1">Testbereich</div>
Das <span class="t1">ist ein</span> Muster.

Machen sie ausgiebig Gebrauch von dieser Möglichkeit ! Definieren sie z.B., wie ihre Überschriften oder Tabellen aussehen, oder noch besser: legen sie verschiedene CSS-Klassen für 3 verschiedene Arten von Tabellen an...
An das id-Attribut gebundene Klassen:
Die Namen der CSS-Klassen beginnen mit einem #-Zeichen. Die Definition wird auf das Element mit dem gleichnamigen id-Attribut angewendet.
Beachten sie, dass id-Attribute stets eindeutig sein sollen, d.h. sie können mit solchen Klassen immer nur genau ein HTML-Element pro Webseite formatieren.
/* Formatierung der User-Klasse "t1" */
#t3 {color:#0000FF;}

Bindung <span id="t3"> an das </span> id-Attribut.

Numerische Angaben in CSS
Die Definition einiger Parameter (Größe, Abstand, ...) erfordert Zahlenwerte. Diese können in CSS in verschiedenen Einheiten absolut oder relativ festgelegt werden. Einige davon werden hier erwähnt.
Absolute Zahlen:
pt (Punkt, point) .. Schriftgröße ( 1 pt = 1/72 inch = 25,4 / 72 mm )
mm (Millimeter )
cm (Zentimeter)
px (Pixel) ... Bildpunkte am Ausgabe-Medium
Demonstration: → Live-Eichung der CSS-Längeneinheiten am Monitor
font-size:12pt;
margin:15mm;
width:10cm;
border-width:3px;
Relative Zahlen:
% (Prozent) ... Relative Angabe. Je nach CSS-Eigenschaft relativ zum eigenen Element, zum Eltern-(parent)-Element oder zum jeweiligen Kontext.
width:80%;
Farben hexadezimal:
#RRGGBB ... Nach dem #-Zeichen 3 Hexadezimalzahlen, je 00..FF für Rot, Grün und Blau.
Demonstration: → Additive Mischung von Farben
color:#FFFFFF; /* white */
border-color:#000000; /* black */
background-color:#FF0000; /* red */
Farben dezimal:
rgb(rd,gd,bd) ... In ( ) 3 Dezimalzahlen, je 0..255 für Rot, Grün und Blau
background-color:rgb(255,0,0); /* red */
Farben relativ:
rgb(r%,g%,b%) ... In ( ) 3 Prozentzahlen, je 0..100% für Rot, Grün und Blau
color:rgb(50%,50%,50%); /* grey 50% */
Farben nach Namen
Demonstration: → Namen von Farben
border-color:fuchsia;

Das style-Objekt und seine Eigenschaften
Das style-Attribut ist ein komplexer Text und daher für den Zugriff mit Standard → DOM-Methoden nicht gut geeignet. An seiner Stelle verwenden sie die Objekte styleSheet und style und deren zahlreiche Eigenschaften.
Jeder DOM-Knoten enthält das style-Objekt als Unterobjekt.
♦ Details zum Zugriff auf CSS-Eigenschaften mit Javascript in den Kapiteln styleSheet und style
Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   CSS   >   Syntax