Sie sind hier: edv-beratung-thomas.de / CSS-Regeln: Zuweisungen, Selektoren


das gesamte Layout einer Website mit CSS-Attributen festlegen

CSS-Regeln: Eigenschaften zuweisen und Selektoren richtig nutzen:

Die Eigenschaften von HTML-Elementen über CSS-Regeln zuzuweisen, bietet (gegenüber der Festlegung über HTML-Attribute) mehrere Vorteile, vor allem, wenn die Eigenschaften in einer zentralen CSS-Stylesheets-Datei hinterlegt sind: 1.) Räumliche Trennung der Seiteninhalte und der Darstellungs-Eigenschaften. 2.) Einfachere Wartung der gesamten Website, weil Stile und Layout projektweit zentral über die eine CSS-Vorlagen-Datei geändert werden können. 3.) Kürzere Ladezeiten und somit schnellere Anzeige, weil die HTML-Seiten vom Formatierungs-Ballast befreit sind, und weil die CSS-Stylesheets-Datei nach erstmaligem Aufruf schon im Browser-Cache liegt und somit von allen weiteren aufgerufenen Seiten genutzt werden kann.

CSS-Regeln bestehen aus Selektoren (Elementtypen, Klassen, ID und Attribute) und ihnen zugewiesenen Eigenschaften.

Eigenschaften im CSS-Format an HTML-Elemente zuweisen:

Tabelle 1 beschreibt verschiedene Möglichkeiten, CSS-Eigenschaften an HTML-Elemente zuzuweisen, sowie den Vorrang bei Mehrfach-Zuweisungen (vereinfachte Darstellung):

Nr.   Art der Zuweisung Beispiel
1 Inline-Eintrag
(= explizite Zuweisung)
<div style="margin-top:2.4em; border-width:2px; border-style:dotted; border-color:navy;">...</div>
Diese explizite Zuweisung setzt für dieses Vorkommen des Elements (im Kopf der HTML-Datei oder in einer CSS-Vorlagen-Datei) hinterlegte CSS-Formatangaben hinsichtlich margin-top, border-width, border-style und border-color außer Kraft.
2 * implizite Zuweisung,
das Element selbst ist der Selektor
<h1>...</h1>
3 * über eine Klasse (Selektor),
Selektoren: nächste Tabelle
<h1 class="xyz">...</h1>
4 * über eine ID (Selektor),
Selektoren: nächste Tabelle
<div id="absolut">...</div>
* Für die Möglichkeiten 2, 3 und 4 gilt: Die CSS-Angaben müssen im Kopf der jeweiligen HTML-Datei oder in einer CSS-Vorlagen-Datei hinterlegt sein.
Wenn für ein Element CSS-Formatangaben mehrfach zugewiesen sein, so gelten folgende Regeln:
a)
Eine explizite Zuweisung setzt für dieses Element CSS-Formatangaben außer Kraft, die im Kopf der HTML-Datei oder in einer CSS-Vorlagen-Datei hinterlegt sind.
b)
Eine Zuweisung von CSS-Formatangaben im Kopf der HTML-Datei setzt für diese Datei CSS-Angaben außer Kraft, die in einer CSS-Vorlagen-Datei hinterlegt sind.

CSS-Selektoren: Elementtypen, Klassen, ID und Attribute:

Tabelle 2 beschreibt den Geltungsbereich einiger einfacher und einiger verschachtelter Selektoren: Elementtypen, Klassen, ID und Attribute (beispielhafte, vereinfachte Darstellung):

Bsp. Selektor CSS-Angaben {...} gelten für ...
1 h1 {...} Elemente <h1>...</h1> ohne zugewiesene Klasse oder ID (implizite CSS-Zuweisung)
2 .xyz {...} Elemente der class="xyz"
3 #nav a.xyz {...} Element <a class="xyz" ...>...</a> in Element der id="nav"
4 #nav a:link.xyz {...} Element <a class="xyz" ...>...</a> der Pseudoklasse "link" in Element der id="nav"
5 li a {...} Element <a ...>...</a> in Element <li>...</li>
6 #nav li a {...} Element <a ...>...</a> in Element <li>...</li> in Element der id="nav"
7 h1.xyz {...} Element <h1 class="xyz">...</h1>
8 .aa .bb .cc {...} Elemente der class="cc" innerhalb der class="bb" innerhalb der class="aa" (verschachtelte Klassen: aa höchste, cc niedrigste Klasse)
9 .xyz h3 a {...} Element <a ...>...</a> in Element <h3>...</h3> in Element der class="xyz"
10 .xyz h3 a:visited {...} Element <a ...>...</a> der Pseudoklasse "visited" in Element <h3>...</h3> in Element der class="xyz"
11 ul#nav a {...} Element <a ...>...</a> in Element <ul>...</ul> der id="nav"

Der vorangestellte Elementtyp wird von älteren Versionen als Internet Explorer 5 und Netscape 6 nicht erkannt.
12 a[href ^="http://"],
a[href ^="https://"] {...}
Elemente <a ...>...</a>, aber nur dann, wenn sie am Anfang ihres href-Attributs die Zeichenketten http:// oder https:// enthalten (attribut-bedingte CSS-Zuweisung)
a[href $=".pdf"] {...} Elemente <a ...>...</a>, aber nur dann, wenn sie am Ende ihres href-Attributs die Zeichenkette .pdf enthalten (attribut-bedingte CSS-Zuweisung)
Über solche attribut-bedingte CSS-Zuweisungen können zum Beispiel Hintergrundbilder automatisch eingesteuert werden. Die IE-Versionen 6 und älter erkennen bedingte CSS-Zuweisungen nicht.
Auf jeder Seite darf nur ein Element mit der gleichen ID gekennzeichnet sein. Bei mehreren Elementen mit gleichen Eigenschaften kann die Zuweisung über Klassen erfolgen.
Einem Element können auch mehrere Klassen zugewiesen werden; Trennzeichen zwischen den Klassen ist das Leerzeichen (ohne Komma). Beispiel: <p class="einruecken ausrichten">...</p>
Weitere Möglichkeiten ergeben sich durch Kombination der hier dargestellten Beispiele.
Kommentare in CSS-Bereichen werden wie in PL/1 gekennzeichnet:
/* Dies ist ein Kommentar */

Allgemeine Hinweise und weiterführende Links:

Ich habe diese beiden Tabellen (CSS-Zuweisungen und CSS-Selektoren) vor über 10 Jahren für mich persönlich als schnelle Spickzettel erstellt. Als Spickzettel mögen sie auch Ihnen nützlich sein. Das Thema wird damit aber nur beispielhaft und stark vereinfacht dargestellt, ohne die Eigenschaften selbst und die Vererbungsregeln zu beschreiben.

Bei CSS4You und SelfHTML finden Sie zwei vollständige Einführungen und systematische Referenzen zu Cascading Style Sheets (CSS Version 2) einschließlich der Angaben zur Vererbung von Eigenschaften. Stefan Münz bietet einen Überblick über die neuen Module in CSS Version 3. Der Standard CSS 3 ist noch nicht endgültig vom W3C verabschiedet, die zusätzlichen Eigenschaften werden von den Browsern zum Teil aber schon unterstützt. Besonders interessant für Webseiten mit viel Text ist das CSS-Mehrspalten-Layout in Verbindung mit der sprachabhängigen Silbentrennung.

Internet-Auftritte barrierefrei und suchmaschinen-freundlich gestalten:

Wer seinen Internet-Auftritt barrierefrei und besonders suchmaschinen-freundlich gestalten will, sollte sein Augenmerk auf Webdesign mit CSS richten. Denn mit CSS-Angaben lassen sich nicht nur einzelne HTML-Elemente formatieren, vielmehr kann das gesamte Layout einer Website mit CSS-Attributen festgelegt werden.

Zwei der wichtigsten Voraussetzungen für Barrierefreiheit sind tabellenfreie Gestaltung sowie skalierbare Schrift (Einstellung der Schriftgröße über das "Ansicht"-Menü des Browsers). Suchmaschinen-freundliches und barrierefreies Webdesign sind keine Widersprüche, sondern gehen Hand in Hand: Seiten, die für "Screen Reader" (Programme, die Sehbehinderten den Text einer Website vorlesen) gut lesbar sind, sind auch für Suchmaschinen-robots leicht verständlich.

Besonders suchmaschinen-freundlich wird eine Seite einmal dadurch, daß es durch absolute oder fixierte Positionierung der Navigation möglich wird, den hierfür erforderlichen Quellcode am Ende des body-Bereichs zu gruppieren, so daß Kopfzeile und Inhalts-Bereich mit den wichtigen Suchbegriffen im Quellcode ganz vorne stehen. Zum Zweiten werden durch die Formatierung über CSS-Selektoren (Elemente, Klassen und IDs) Inhalte und Attribute einer Seite räumlich getrennt und dadurch die Seite von unnötigem Formatierungs-Ballast befreit.

Die zentrale Hinterlegung der Formatierungs-Angaben einer Website in einer CSS-Vorlagen-Datei bietet darüber hinaus zwei weitere Vorteile: Die Ladezeiten sind kürzer, weil die Formatierungs-Angaben nicht mit jeder weiteren Unterseite eines Projektes erneut geladen werden müssen, sondern über die CSS-Vorlagen-Datei nur ein einziges Mal geladen werden. Außerdem können Änderungen des Layout projektweit über diese eine CSS-Vorlagen-Datei durchgeführt werden.

Ausführliche Informationen und Beispiele zum Thema Webdesign mit CSS finden Sie hier:

CSS Muster-Vorlage für ein barrierefreies Formular mit skalierbarer Schrift, ohne Tabelle:

Beispiele für ein Formular ohne Tabellen-Layout gibt es im Netz kaum. Deshalb zeige ich hier eine CSS Muster-Vorlage für ein barrierefreies Formular mit skalierbarer Schrift, ohne Tabelle.

Javascript-Prüfungen für die Eingabefelder sind mit dabei und der Einfachheit halber im head vermerkt. Diese Prüfungen sollten Sie ebenso wie die im head notierten CSS-Attribute jeweils in eine externe Datei auslagern. Welche Aktion das Formular ausführen soll, müßten Sie natürlich noch nachtragen. Links ist Platz für Ihre Navigation freigehalten.

Die Formular-Vorlage können Sie hier runterladen Vorlage-Formular.zip (2 KB) und kostenlos für Ihr eigenes Formular verwenden. Eine anderweitige Nutzung der Formular-Vorlage ist nicht zulässig.

Zur Startseite
Stand: 15.08.2015 nach oben ©2007-2018 Gösta Thomas