CSS & DOM

Adressierung von DOM-Elementen für CSS

Diese Seite demonstriert einige Möglichkeiten zur Adressierung (Auswahl) von Elementen, auf welche eine CSS-Regel angewendet werden soll. Dazu stehen verschiedene Methoden einzeln und in Kombinationen zur Verfügung. Ihre Anwendung erfordert ein gewisses Verständnis des Document Object Models (DOM).
Cascading Stylesheets CSS Cascading Stylesheets
CSS & DOM CSS im Document Object Model
Standard-Klassen CSS-Klassen für Standard HTML-Elemente
Eigene CSS-Klassen Definition und Anwendung eigener CSS-Klassen
id-Attribute Anwendung auf einzelne id-entifizierte DOM-Elemente
Verkettung Verkettung von Adressierungs-Regeln

Document Object Model (DOM)
Für das Verständnis einiger Begriffe sind Grundkenntnisse des Document Object Model (DOM) notwendig.
In diesem Modell sind alle Elemente eines Dokuments (z.B. Webseite) in einem streng hierarchischen Baum (tree) angeordnet.
Es gibt mehrere Möglichkeiten, einzelne Elemente oder bestimmte Gruppen von Elementen auszuwählen - Hier zur Anwendung von CSS-Regeln.

● Position im Objektbaum

Ein Element (z.B. Text, Bild, Button, Tabelle ...) wird durch Angabe des dorthin führenden Pfades festgelegt.
Beispiel: Ausgehend von der Wurzel das zweite von 5 Elementen (Knoten), von diesem der erste von 3 Child-Knoten, usw. (kompliziert, selten verwendet).

● Element

Alternativ kann man die Elemente nach Type (Text, Bild, Tabelle ...) zusammenfassen. Das macht es leicht, CSS-Regeln auf alle Elements eines Typs anzuwenden, z.B. auf alle <img>-Elemente (Bilder).
Alternativ kann man die Elemente einzeln angeben, z.B. 'das vierte Bild'

● id-Attribut

Jedem Element kann man ein eindeutiges id-Attribut zuweisen. Damit kann man es identifizieren und eine CSS-Regel anwenden. (zur individuellen Auswahl am besten geeignet)

● Kombination

Alle Varianten können kombiniert werden, um ein oder mehrere Elemente eines Dokuments zu adressieren. Jeder Gruppe adressierter Elemente können eigene CSS-Regeln zugewiesen werden.
♦ Details zum Document Object Model (DOM)  

CSS für Standard-Klassen
Jedes Mitglied der → XML-Familie (XML, XHTML, SVG, ...) und auch das klassische HTML verfügt über eine Reihe von Standard-Elementen. In HTML sind das z.B. <div>, <form>, <p>, <pre>, <table> usw. in SVG sind das z.B. <circle>, <rect>, <text> usw.

Browser (und andere Programme) wenden auf alle Elemente eine vor-eingestellte Formatierung an. 		► Durch Angabe eigener CSS-Regeln wird die Standard-Formatierung für die betroffenen Elemente geändert. Die Änderung gilt für jedes vorkommende Element im gesamten Gültigkeits-Bereich.

► Die selbst erstellte Regel ändert nur genau die angegebene Eigenschaft. Alle anderen Formatierungs-Regeln werden 'vererbt', d.h. unverändert übernommen.

► Jedes einzelne betroffene Element kann darüber hinaus indiviell formatiert werden.
● Im Beispiel rechts wird für das HTML <body> Element die Schrift-Größe eingestellt.
• Das hat große Reichweite, denn die meisten Eigenschaften von <body> werden auf die anderen Elemente der Webseite vererbt.
• Auf jeder Webseite kommt zwar nur 1 <body> Element vor, diese CSS-Regel kann jedoch auf alle Seiten eines Webs angewendet werden. Damit kann man das Grund-Layout (Schrift, Farbe, Hintergrund, Abstände, ...) für ein ganzes Web zentral festlegen. 		Beispiel: Eigene CSS-Regel für das <body> Element - und für alle seine child-Elemente !
<style type="text/css" media="screen">
body{font-size:10pt;}
</style>
● Die Standard-Formatierung setzt HTML <img>-Elemente (Bilder) in einen dicken blauen Rahmen, wenn sie als HyperLink verwendet werden. Die rechts gezeigte CSS-Regel löscht die Rahmen aller vorkommenden Bilder.
Unabhängig davon ist es möglich, nachträglich einzelne Bilder mit beliebigen Rahmen zu versehen.
 Beispiel: Entfernung der Rahmen von allen <img> Bildern
<style type="text/css" media="screen">
img{border:0px;}
</style>
Bild als Link mit Standard-Formatierung
Bild mit Rand
Bild als Link mit den gezeigten Regeln
Bild ohne Rand 		Bild mit Link:
<a href="javascript:imgtest()">
<img src="apache.png" /></a>
Der HTML-Quellcode ist in beiden Fällen gleich, bei Anwendung der gezeigten CSS-Regeln wird jedoch kein Rand angezeigt.
● Die Standard-Formatierung legt meist eine vertikale Zentrierung für <tr> Tabellen-Reihen. Die gezeigte CSS-Regel ändert das für alle Reihen aller Tabellen auf vertikale Ausrichtung (Text beginnt oben, nicht in der Mitte). Beispiel: Vertikale Ausrichtung von <tr> Tabellen-Zeilen
<style type="text/css" media="screen">
tr{vertical-align:top;}
</style>
Vorteil dieser Methode:
So kann man an einer einzigen zentralen Stelle die Standard-Formatierung für viele oder alle Seiten eines Webs festlegen bzw. bei Bedarf rasch ändern.
Dazu werden die CSS-Regeln in einer externen Stylesheet-Datei definiert, die mit einem HTML <link>-Element in jede Webseite eingebunden wird.

Eigene CSS-Klassen
So werden die Regeln für eigene CSS-Klassen festgelegt.
Jede CSS-Klasse kann beliebig oft und mit (fast) jedem Element verwendet werden.
Diese Methode funktioniert unabhängig davon, ob die CSS-Klasse in einem <style>-Element (im gleichen Dokument), oder in einer externen StyleSheet-Datei definiert wurde ! 		Regeln für die eigenen CSS-Klassen s1 und s2
<style type="text/css" media="screen">
.s1 {color:blue;}
.s2 {color:red; font-weight:bold;}
</style>
Der Punkt vor dem Namen bedeutet, dass diese Klassen auf jedes Standard-Element angewendet werden können.
Im HTML-Quellcode genügt es, die betreffenden Elemente mit einem class-Attribut zu bezeichnen. Damit werden alle für diese Klasse angegebenen CSS-Regeln angewendet, alle übrigen Regeln werden 'vererbt', d.h. unverändert übernommen.
<div class="s1">
Die Anwendung von
<span class="s2">CSS</span>
auf verschiedene
<span class="s2">DOM</span>-Elemente
</div>
Das gezeigte Beispiel ist typisch für einfache Anwendungen. So sieht das aus:
Die Anwendung von CSS auf verschiedene DOM-Elemente
● Vorteil:
Die Klassen lassen sich beliebig oft auf unterschiedliche Elemente anwenden. Eigene Klassen sind gut geeignet, um oft wiederkehrende Regeln unter einem kurzen Namen zusammenzufassen.
Da die Regeln einmalig zentral angelegt sind, lassen sie sich problemlos ändern. Die Änderung wirkt sich ohne weitere Maßnahme auf jede neu geladene Webseite aus.

Selektion nach id-Attributen
Dieses Beispiel zeigt, wie man mit einer CSS-Regel gezielt einzelne Elemente formatiert, die mit Hilfe eindeutiger id-Attribute selektiert werden.

Diese Art der CSS-Formatierung lässt sich auch auf mehrere Elemente anwenden, deren id-Namen mit Beistrich getrennt werden.
♣ Diese Methode funktioniert normalerweise nur in einem <style>-Element, nicht jedoch, wenn die gleiche Definition in einer externen StyleSheet-Datei steht !
<style type="text/css" media="screen">
/* <![CDATA[ */
#t1 {color:blue;}
#t2,#t3 {color:red;}
/* ]]> */
</style>
Im HTML-Quellcode genügt es, die betreffenden Elemente mit einem eindeutigen (!) id-Attribut zu bezeichnen.
<div id="t1">
Die Anwendung von
<span id="t2">CSS</span>
auf verschiedene
<span id="t3">DOM</span>-Elemente
</div>
Das gezeigte Beispiel ist eigentlich zu einfach - In einem derartigen Fall wäre es besser, benannte CSS-Klassen zu erstellen und diese auf die gleichen Elemente anzuwenden. So sieht das aus:
Die Anwendung von CSS auf verschiedene DOM-Elemente
● Vor- und Nachteile:

id-Adressierung bietet nur dann Vorteile, wenn man - ausgehend von den adressierten Elementen - auf andere DOM-Elemente zugreifen will. 		id-Adressierung kann nur in einem HTML <style>-Element erfolgen. Die Verwendung in externen StyleSheet-Dateien ist nicht möglich.
id-Attribute müssen eindeutig sein. Wenn ein CSS-Style auf mehrere DOM-Elemente angewendet werden soll, dann muss jedes einzelne in der CSS-Definition der Eigenschaften angeführt werden.

CSS Verkettungs-Operatoren
CSS kennt Operatoren, welche die Verkettung von Selektoren bezeichnen. Als Selektor kann der Name eines HTML-Elements oder eines id-Attributs dienen.

Man benötigt diese Technik, um - ausgehend von einem adressierten DOM-Element - zu einem oder mehreren seiner Unter-Elemente zu gelangen.

Das eignet sich zur Formatierung von Strukturen, die entweder selbst wiederholt werden, oder die mehrere Unter-Strukturen wiederholen.
OperatorBedeutung
s1 s2alle s2 unterhalb von s1
s2:first-childalle s2, welche firstChild sind
s1 > s2alle s2 genau eine Ebene unterhalb s1
s1 * s2alle s2 mehr als eine Ebene unterhalb s1
s1 + s2ein in der gleichen Ebene auf s1 direkt folgendes s2
 
#t4 {background-color:#CCFFFF;}
#t4 div:first-child{}
#t4 div:first-child span{}
#t4 div:first-child + div{}
Beachten sie, dass nur ein Element mit Hilfe seines id-Attributs identifiziert wird. Alle anderen Elemente werden ausgehend vom identifizierten DOM-Element adressiert.
<div id="t4" >
<div>
<span>(4)</span>
Kapitel 4
</div>
<div>Beschreibung</div>
<div>Beschreibung</div>
</div>
Die für das Beispiel gewählten Farben sind für ein normales Layout unzumutbar.
Hier wurden ausnahmsweise grelle Farben verwendet, um die Details einer komplizierten CSS-Formatierung sichtbar zu machen. 		So sieht das aus:
(4) Kapitel 4:
Zwischentext
Beschreibung von Kapitel 4
Zwischentext
Inhalt von Kapitel 4

(5) Kapitel 5:
Zwischentext
Beschreibung von Kapitel 5
Zwischentext
Inhalt von Kapitel 5

(6) Kapitel 6:
Zwischentext
Beschreibung von Kapitel 6
Zwischentext
Inhalt von Kapitel 6

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   CSS   |   DOM