Schnellübersicht. Die praktische Referenz STEPHANIE HÖLZL

Transkript

1 Schnellübersicht Die praktische Referenz STEPHANIE HÖLZL

2 3 Selektoren und Kaskadierung Selektoren sind ein grundlegendes Element einer jeden CSS-Anweisung. Mithilfe eines Selektors werden die HTML-Elemente in einem Dokument ausgewählt, auf die eine CSS-Anweisung angewendet werden soll. Somit sind Selektoren die Verbindung zwischen den Elementen einer Webseite und dem Stylesheet. CSS hat eine ganze Reihe verschiedener Selektoren für verschiedene Aufgaben definiert. Diese lassen sich auch miteinander kombinieren, um komplexe Auswahlverfahren für Elemente festzulegen. In diesem Kapitel werden zuerst die so genannten einfachen Selektoren beschrieben, gefolgt von den Pseudoformaten, die nur einen Teil eines Elements, wie die erste Zeile eines Absatzes, auswählen. Treffen mehrere Formate für ein Element zu, legt die am Ende des Kapitels besprochene Kaskadierung fest, welches Format letztendlich Verwendung findet. 3.1 Einfache Selektoren Mithilfe von einfachen Selektoren werden ein oder mehrere Elemente aus der Dokumentstruktur ausgewählt. Das definierte Format wird dann für alle ausgewählten Elemente angewendet. 3.1 Einfache Selektoren Typ-Selektoren Der einfachste und am häufigsten verwendete Selektor ist der Typ- Selektor, der manchmal auch als Element-Selektor bezeichnet wird. Dieser besteht aus dem Namen eines Elements, und es werden alle Elemente in dem Dokument ausgewählt, auf die der Typ-Selektor zutrifft. Das folgende Beispiel wählt alle Überschriften h1 im gesamten Dokument aus und stellt diese in der Farbe Rot dar. h1 { color: red; } Schnellübersicht CSS 59

3 3.1 Einfache Selektoren Der Universal-Selektor Der Universal-Selektor wurde mit CSS Version 2 eingeführt und dient dazu, alle Elemente eines Dokuments gleichzeitig auszuwählen und zu formatieren. Dazu wird ein Stern * als Selektor verwendet. Das nachfolgende Beispiel stellt alle Elemente in der Farbe Blau dar. * { color: blue; } Fast alle Browser können mit dem Universal-Selektor etwas anfangen. Nur Internet Explorer 4 und Netscape Navigator 4 ignorieren den Selektor und somit findet auch keine Formatierung statt Klassen-Selektoren Häufig ist bei HTML-Dokumenten die Anzahl der zur Verfügung stehenden Elemente zur Definition einer Struktur nicht ausreichend. Es ist zum Beispiel nicht möglich, zwischen internen und externen Hyperlinks zu unterscheiden, da HTML nur ein Element für Hyperlinks zur Verfügung stellt. Mit CSS gibt es die Möglichkeit, Klassen zu definieren. Weist man einem Element eine Klasse zu, wird die Formatierung der Klasse auf das Element angewendet. Klassen-Selektoren definieren Um eine Klasse auf ein Element anwenden zu können, muss diese als Erstes definiert werden. Als Selektor wird ein Punkt gefolgt von einem frei wählbaren Klassennamen angegeben. Der Punkt ist das so genannte Kennzeichnungssymbol und gibt dem Browser den Hinweis, dass es sich um die Definition einer Klasse handelt. Der Name eines Klassen-Selektors kann frei gewählt werden, es sollten jedoch keine Sonderzeichen bis auf den Unterstrich verwendet werden..intern { color: blue; }.extern { color: red; } Klassen-Selektoren anwenden Jedes Element in HTML besitzt ein Attribut class. Um die definierte Klasse einem Element zuzuweisen, wird dem class-attribut der Name des Klassen-Selektors zugewiesen. 60 Schnellübersicht CSS

4 <a class="intern">interner Hyperlink </a> <a class="extern">externer Hyperlink </a> Dem Attribut class kann man auch mehrere Klassen zuordnen. Die einzelnen Werte werden durch ein Leerzeichen voneinander getrennt. Somit können einem Element verschiedene Formatierungen gleichzeitig zugewiesen werden. Der folgende Hyperlink verwendet also die Formatierungen der Klassen wichtig und intern. <a class="wichtig intern">wichtiger interner Hyperlink</a> Identifier-Selektoren Es gibt Fälle, in denen auf einer Webseite ein einzelnes Element in der Dokumentstruktur abweichend formatiert werden soll. So könnte jede Webseite in einem Projekt ein Firmenlogo besitzen, das abweichend von allen anderen Grafiken formatiert werden soll. In HTML und XHTML gibt es ein Universal-Attribut id, das für alle Elemente verwendet werden kann. Auch andere mit XML definierten Auszeichnungssprachen können ein Attribut vom Typ ID enthalten, das in der DTD für die Auszeichnungssprache festgelegt wird. In anderen Auszeichnungssprachen kann der Name des Attributs jedoch abweichen. Für alle Auszeichnungssprachen gilt, dass keine zwei Attribute id im selben Dokument den gleichen Wert haben dürfen und somit eindeutig sind. Um ein Element anhand seiner id zu formatieren, gibt es in CSS die so genannten Identifier-Selektoren, kurz ID-Selektoren genannt. Einfache Selektoren Identifier-Selektoren definieren Das Definieren eines ID-Selektors funktioniert ähnlich wie die Definition eines Klassen-Selektors. Als Kennzeichnungssymbol wird allerdings ein Doppelkreuz (#) statt eines Punkts verwendet, gefolgt von einem frei gewählten Namen ohne Sonderzeichen. #seitentitel {color: blue;} Identifier-Selektoren anwenden Jedem Element kann ein Attribut id hinzugefügt werden. Um die Formatierung von einem ID-Selektor auf ein Element in der Webseite Schnellübersicht CSS 61

5 anzuwenden, wird dem Attribut id der Name des Identifier-Selektors zugewiesen. <h1 id="seitentitel">inhalt</h1> 3.1 Einfache Selektoren Attribut-Selektoren Mit CSS Version 2 wurden Attribut-Selektoren eingeführt, um Formate festlegen, die nur für Elemente mit bestimmten Attributen oder mit bestimmten Attributwerten ausgeführt werden. Die Attribut- Selektoren funktionieren zwar auch mit HTML-Dokumenten, sind aber hauptsächlich für den Einsatz mit XML-Dokumenten entwickelt worden. Da bisher keine Version des Internet Explorer Attribut- Selektoren interpretieren kann, sind diese für den Einsatz in einer normalen HTML-Seite eher ungeeignet. Element[Attribut] Wird nach einem Typ-Selektor, also nach dem Namen eines Elements, der Name eines Attributs in eckigen Klammern angegeben, werden damit alle Elemente erfasst, bei denen das genannte Attribut verwendet wird. Der Wert des Attributs spielt dabei keine Rolle. Im Beispiel werden alle Hyperlinks formatiert, die ein Attribut target verwenden. a[target] { color: red; } Element[Attribut=Wert] Sollen nur Elemente formatiert werden, bei denen ein Attribut einen bestimmten Wert hat, wird der Wert nach dem Attribut und einem Gleichheitszeichen angegeben. So werden im Beispiel alle Hyperlinks a erfasst, die ein Attribut target="rechts" haben. a[target=rechts] { color: blue; } Element[Attribut~=Wert] In manchen Fällen kommt es vor, dass ein Attributwert mehrere durch Leerzeichen voneinander getrennte Wörter enthält, wie das bei dem Attribut class in HTML möglich ist. Mit Attribut~=Wert werden alle Elemente erfasst, bei denen der gesuchte Wert als Wort 62 Schnellübersicht CSS

6 innerhalb des Attributwerts vorkommt. Im Beispiel werden alle Tabellenzellen des Typs td erfasst, die ein Attribut abbr besitzen und bei denen in der Wertzuweisung an dieses Attribut das Wort wichtig vorkommt. td[abbr~=wichtig] { color: red; } Element[Attribut =Wert] Es gibt Attribute, deren Werte aus Teilzeichenfolgen bestehen, die durch Bindestriche getrennt sind. So kann jedes Element in HTML das Universal-Attribut lang verwenden, dem ein Sprachcode in Kombination mit einem Ländercode übergeben wird. So bedeutet lang="en-us" die Sprache Englisch mit dem Land USA. Der Selektor Element[Attribut =Wert] erfasst alle Elemente, deren Attributwert vor dem ersten Bindestrich mit dem angegebenen Wert übereinstimmt. Diese Syntax wird hauptsächlich eingesetzt, um bei zusammengesetzten Sprachkürzeln die ersten beiden Buchstaben, also die Sprache, zu ermitteln. Im Beispiel werden alle Elemente erfasst, deren Universal-Attribut lang mit dem Wert en beginnt. *[lang =en] { color: blue; } 3.2 Pseudoformate 3.2 Pseudoformate Normalerweise wählen Selektoren ein oder mehrere Elemente aus dem Dokument aus, um diese zu formatieren. Mit Pseudoformaten können Sie einzelne Bestandteile eines Elements auswählen, die nicht Bestandteil der Baumstruktur sind. Das kann zum Beispiel ein noch nicht besuchter Hyperlink oder der erste Buchstabe eines Absatzes sein. Alle Pseudoformate beginnen mit einem einfachen Selektor und wählen zuerst ein oder mehrere Elemente aus. Nach einem Doppelpunkt folgt das Pseudoformat, das einen Teil oder einen bestimmten Zustand von diesen Elementen auswählt. Der Doppelpunkt als Kennzeichnungssymbol weist darauf hin, dass es sich bei dem Selektor um ein Pseudoformat handelt. Die Namen sind nicht frei wählbar, sondern feste Schlüsselwörter. Schnellübersicht CSS 63

7 3.2 Pseudoformate Pseudoklassen Mithilfe von Pseudoklassen können Sie für verschiedene Zustände eines Dokuments oder Elements verschiedene Formate definieren. So können Sie verschiedene Zustände von Hyperlinks getrennt formatieren oder dynamisch das Format ändern, wenn ein Element den Fokus erhält. Die Pseudoklassen :link und :visited für Hyperlinks Mit der Pseudoklasse :link wird ein Hyperlink zu noch nicht besuchten Seiten gekennzeichnet und die Pseudoklasse :visited ist für bereits besuchte Hyperlinks zuständig. Nach einer längeren Zeitspanne setzt übrigens der Browser den Status»visited«für einen Link automatisch zurück und behandelt diesen als noch nicht besuchten Hyperlink. Die Pseudoklassen :link und :visited sind nur für Hyperlinks a mit einem Attribut href verfügbar, andere Elemente können mit diesen Pseudoklassen nichts anfangen. Im folgenden Beispiel erhalten alle noch nicht besuchten Hyperlinks die Farbe Blau, während bereits besuchte Hyperlinks Rot dargestellt werden. a:link { color: blue; } a:visited { color: red; } Normalerweise muss vor einem Pseudoformat ein Element notiert werden. Da die Pseudoklassen :link und:visited aber nur mit einem Hyperlink funktionieren, kann die Angabe des Elements auch entfallen. Folgende Anweisungen sind also identisch: a:link { color: red; } :link { color: red; } Das ist deshalb korrekt, weil der Univeral-Selektor * entfallen kann, wenn er am Anfang des Selektors steht. :link ist also gleichbedeutend mit *:link. Allerdings sollte der Selektor a immer davor angegeben werden, da sonst der Stil von Browsern nicht korrekt angewendet wird, die den Universal-Selektor nicht unterstützen. 64 Schnellübersicht CSS

8 Die Pseudoklassen :hover, :active und :focus Mit den Pseudoklassen :hover, :active und :focus werden verschiedene dynamische Zustände eines Elements angesprochen. So wird die Pseudoklasse :hover ausgeführt, wenn der Benutzer mit dem Mauszeiger über das Element fährt, ohne das Element anzuklicken. Die Pseudoklasse :active wird angewendet, wenn ein Element von dem Benutzer aktiviert wird, also zum Beispiel ein Hyperlink oder eine Schaltfläche angeklickt werden. :active ist so lange aktiv, bis der Benutzer die Maustaste wieder loslässt. Die Pseudoklasse :focus wendet die Formatierung für ein Element an, solange es den Fokus hat. Meistens wird :focus für Hyperlinks oder Formularelemente verwendet. Da ein Element mehrere Zustände gleichzeitig haben kann, wird die letzte der zutreffenden Formatierungen angewendet. Deshalb sollte eine bestimmte Reihenfolge eingehalten werden, um eine korrekte Darstellung der Pseudoklassen zu erreichen. Ein Hyperlink kann sowohl bereits besucht als auch gerade aktiv sein. Damit auch ein bereits besuchter Hyperlink bei der Aktivierung das passende Format erhält, muss die Pseudoklasse :active also nach :visited angegeben werden. Bei Hyperlinks und auch bei anderen Elementen sollte deshalb immer die folgenden Reihenfolge verwendet werden. Listing 3.1: Korrekte Reihenfolge der Pseudoklassen für die Hyperlink-Formatierung a:link {color: red;} a:visited {color: blue;} a:hover {color: yellow;} a:active {color: lime;} Während die Pseudoklasse :active in CSS Version 1 übrigens nur für Hyperlinks verwendet werden darf, kann :active seit CSS Version 2 auch für andere Elemente angewendet werden. Leider kennt der Internet Explorer aber diese Pseudoklassen bisher nur für Hyperlinks. Andere Browser sind da schon weiter. 3.2 Pseudoformate Schnellübersicht CSS 65

9 3.2 Pseudoformate Die Pseudoklasse :first-child Mit CSS Version 2 wurde die Pseudoklasse :first-child eingeführt. Diese bezieht sich, wie der Name bereits verrät, auf das erste Kindelement bezogen auf das Element, das durch den Selektor vor der Pseudoklasse bestimmt wird. So erhält im folgenden Beispiel das erste Kindelement eines Absatzes p die Farbe Rot. p:first-child {color: red;} Die Pseudoklasse :lang Mit der Pseudoklasse :lang, die in CSS Version 2 definiert worden ist, können Sie Elemente abhängig von der Sprache formatieren. Dabei werden das Attribut lang, das HTML-Element meta und eventuell Informationen des Protokolls im HTTP-Header zur Ermittlung der Sprache herangezogen. Die Sprache wird nach :lang in einfachen Klammern durch das entsprechende Sprachkürzel festgelegt. Das folgende Beispiel stellt alle englischsprachigen Texte in Rot und alle deutschsprachigen Absätze in Blau dar. p:lang(en) {color: red;} p:lang(de) {color: blue;} Den gleichen Effekt erreichen Sie auch mit Attribut-Selektoren, wenn die Sprache mit dem Attribut lang festgelegt worden ist. Dann haben die beiden folgenden Anweisungen die gleiche Auswirkung. p:lang(de) {color: blue;} p[lang =de] { color: blue; } Pseudoelemente Während sich Pseudoklassen immer auf ein ganzes Element beziehen und in den meisten Fällen einen bestimmten Zustand eines Elements auswählen, beziehen sich Pseudoelemente auf einen Teil eines Elements. 66 Schnellübersicht CSS

10 Die Pseudoelemente :first-line und :first-letter Das Pseudoelement :first-line formatiert die erste Zeile eines Elements, und mit :first-letter kann der erste Buchstabe eines Elements abweichend formatiert werden, um bestimmte typografische Effekte zu erzielen. p:first-line { font-variant: small-caps; } p:first-letter { font-size: 200%; } Die beiden Pseudoelemente :first-letter und :first-line können nur auf Blockelemente angewendet werden, die einen eigenen Absatz bilden, wie in Abschnitt auf Seite 85 noch genau erklärt wird. Die für :first-line festgelegten Eigenschaften werden an das Pseudoelement :first-letter weitervererbt. Besitzen :firstline und :first-letter CSS-Eigenschaften mit unterschiedlichen Werten, hat die Angabe von :first-letter Vorrang. So erhält im folgenden Beispiel der erste Buchstabe die Farbe Rot und der Rest der ersten Zeile wird in der Farbe Blau dargestellt. p:first-line { color: blue; } p:first-letter { color: red; } Beide Pseudoelemente lassen sich auch in folgender Kombination verwenden, um einen typografischen Effekt zu erzielen, wie das bei hochwertigen Drucken der Fall ist. Listing 3.2: Absatzformatierung mit :first-letter und :first-line <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>:first-letter und :first-line</title> <style type="text/css"> p:first-letter { font-size: 200%; float: left; } p:first-line { font-variant: small-caps; } </style> </head> 3.2 Pseudoformate Schnellübersicht CSS 67

11 3.2 Pseudoformate <body> <p>das ist ein längeres Textbeispiel, mit dem ein etwas größerer Absatz formatiert wird, der sich über mehrere Zeilen erstreckt und mit den Pseudoelementen :first-letter und :first-line versehen ist. </p> </body> </html> Allerdings liefern nicht alle Browser das exakt gleiche Ergebnis bei der Ausgabe auf dem Bildschirm. Während beim Internet Explorer die Textoberkante des ersten Buchstabens höher ist als der Rest der Zeile, wird dieser in Firefox niedriger als die restliche erste Zeile dargestellt. Abbildung 3.1: Darstellung im Internet Explorer Abbildung 3.2: Darstellung in Firefox 68 Schnellübersicht CSS

12 Befindet sich vor dem ersten Buchstaben ein Anführungszeichen, sollte das automatisch mit einbezogen und vom Browser gemeinsam mit dem folgenden Buchstaben und den Anweisungen von :firstletter formatiert werden. Die folgende Grafik zeigt das gleiche Beispiel wie in Bild 3.2. Allerdings wurde der gesamte Absatz in Anführungszeichen gesetzt. 3.2 Pseudoformate Abbildung 3.3: first-letter mit führendem Anführungszeichen Die Pseudoelemente :before und :after Speziell für das Generieren von automatischem Inhalt vor oder nach einem Element wurden in CSS Version 2 die Pseudoelemente :before und :after eingeführt. Diese werden in Abschnitt auf Seite 209 näher beschrieben. Schnellübersicht CSS 69

13 3.3 Kombinierte Selektoren 3.3 Kombinierte Selektoren Die verschiedenen Arten von Selektoren lassen sich auf unterschiedliche Art und Weise miteinander kombinieren. Dadurch entstehen komplexe Auswahlkriterien für Elemente, die sich durch einfache Selektoren nicht darstellen lassen Selektoren für Nachfahren Mithilfe von Selektoren für Nachfahren, die in CSS 1 auch als kontextuelle Selektoren bezeichnet wurden, werden Formate definiert, die nur dann ausgeführt werden, wenn sich ein Element in der Baumstruktur unterhalb eines anderen Elements befindet. Dazu werden zwei oder mehr einfache Selektoren durch Leerzeichen voneinander getrennt. Der definierte Stil wird dann auf das letzte Element in der Liste angewendet. Im folgenden Beispiel werden alle Elemente em, die sich in der Baumstruktur unterhalb von einem Absatz mit dem Element p befinden, in der Farbe Rot dargestellt. Im ersten Absatz befindet sich das Element em direkt unterhalb von p. Im zweiten Absatz existiert unterhalb von p zuerst ein Bereich mit span, in dem sich das Element em befindet. Listing 3.3: Selektor für Nachfahren <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>selektoren für Nachfahren</title> <style type="text/css"><!-- p em {color : red;} --></style> </head> <body> <p>das ist ein Absatz mit einem <em>stark betonten Abschnitt.</em> Der betonte Abschnitt wird in der Farbe Rot dargestellt.</p> <p>ein weiterer Absatz mit einem <span><em>stark betonten Abschnitt.</em></span> Der betonte Abschnitt wird in der Farbe Rot dargestellt.</p> </body> </html> 70 Schnellübersicht CSS

14 3.3 Abbildung 3.4: Selektor für Nachfahren Die Selektoren für Nachfahren können auch dazu verwendet werden, verschachtelte Elemente vom gleichen Typ unterschiedlich zu formatieren. In dem folgenden Beispiel werden verschiedene Formate für verschachtelte Listen definiert. Eine normale Aufzählung in der obersten Ebene wird in der Standardschriftfarbe Schwarz dargestellt. Wenn eine solche Aufzählung aber eine weitere, untergeordnete Aufzählung beinhaltet, wird diese in der Schriftfarbe Grau und eine noch weiter verschachtelte Aufzählung in der Farbe Hellgrau ausgegeben. Listing 3.4: Verschachtelte Liste mit verschiedenen Formaten <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>selektoren für Nachfahren</title> <style type="text/css"><!-- ul ul {color : gray;} ul ul ul {color : silver;} --></style> </head> <body> <ul> <li>listenpunkt in schwarzer Farbe</li> Kombinierte Selektoren Schnellübersicht CSS 71

15 3.3 Kombinierte Selektoren <li>listenpunkt in schwarzer Farbe</li> <ul> <li>listenpunkt in grauer Farbe</li> <li>listenpunkt in grauer Farbe</li> <ul> <li>listenpunkt in hellgrauer Farbe</li> <li>listenpunkt in hellgrauer Farbe</li> </ul> <li>listenpunkt in grauer Farbe</li> </ul> <li>listenpunkt in schwarzer Farbe</li> </ul> </body> </html> Abbildung 3.5: Verschachtelte Liste mit verschiedenen Formaten Selektoren für Kindelemente Ähnlich den Selektoren für Nachfahren beziehen sich die mit CSS 2 eingeführten Selektoren für Kindelemente, auch Kindelement-Selektoren oder Kind-Selektoren genannt, auf in der Baumstruktur untergeordnete Elemente. Im Gegensatz zu den Selektoren für Nachfahren werden mit den Selektoren für Kindelemente allerdings nur direkt untergeordnete Elemente angesprochen. Dazu wird zwischen dem übergeordneten und dem untergeordneten Element eine abschließende spitze Klammer (Größer-als-Zeichen) eingefügt. 72 Schnellübersicht CSS

16 Das lässt sich gut an dem Listing 3.3 nachvollziehen. Es muss lediglich der Stylesheet-Bereich durch die folgende Anweisung ersetzt werden. p > em {color : red;} Das Ergebnis wird im folgenden Screenshot verdeutlicht. Im ersten Absatz befindet sich em in der Baumstruktur direkt unterhalb von p und wird deshalb in Rot dargestellt. Im zweiten Absatz befindet sich zwischen p und em noch ein Element span. Somit ist em nicht mehr direkt unterhalb von p und wird auch nicht in Rot dargestellt. Auch Selektoren für Kindelemente sind in der Praxis nur begrenzt einsatzfähig, da der Internet Explorer bis Version 6 diese leider nicht kennt. 3.3 Kombinierte Selektoren Abbildung 3.6: Selektor für Kindelemente Selektoren für benachbarte Elemente Mit den Selektoren für benachbarte Elemente können Elemente ausgewählt werden, die direkt nach einem anderen Element notiert sind. Beide Elemente sind dabei in der Baumstruktur auf gleicher Ebene und haben das gleiche Elternelement, sind also Geschwisterelemente. Daher wird dieser Selektor auch als Geschwister-Selektor bezeichnet. Um die Geschwister auszuwählen, wird ein Pluszeichen zwischen zwei einfache Selektoren gesetzt. Im Beispiel wird der Abstand zwischen einer Überschrift h1 und einer Überschrift h2 um 5 Pixel verkleinert, wenn h2 direkt nach h1 notiert worden ist. h1 + h2 { margin-top: -5px; } Schnellübersicht CSS 73

17 Leider kann der Internet Explorer auch mit Selektoren für benachbarte Elemente nichts anfangen und ignoriert die Anweisung einfach. 3.3 Kombinierte Selektoren Beliebig verkettete Selektoren Alle Arten von Selektoren lassen sich beliebig untereinander kombinieren. Als Erstes steht immer ein Typ-Selektor oder der Universal- Selektor, um eine Menge von Elementen auszuwählen. Direkt im Anschluss können Attribut-Selektoren, Klassen-Selektoren, ID- Selektoren und Pseudoformate angefügt werden. Jede Verkettung schränkt dabei die Menge der Elemente ein, auf die eine CSS-Anweisung angewendet werden soll. Dabei muss die folgende Reihenfolge eingehalten werden. 1. Ein Typ-Selektor oder Universal-Selektor steht am Anfang. 2. Dann können Attribut-Selektoren, Klassen-Selektoren und ID-Selektoren aufgeführt werden. 3. Pseudoformate stehen immer am Schluss von verketteten Selektoren. Es darf allerdings nur ein Pseudoelement verwendet werden. Das folgende Beispiel wählt alle Hyperlinks aus, denen die Klasse extern zugewiesen wurde und die bereits besucht worden sind. Treffen alle Kriterien zu, wird der Hyperlink in der Farbe Blau angezeigt. a.extern:visited { color: blue; } Kommen direkt nach einem Universal-Selektor noch weitere Selektoren, kann der Universal-Selektor auch entfallen. *[lang=en] { color: red; } ist also identisch mit [lang=en] { color: red; } Um mehrere Klassen-Selektoren miteinander zu kombinieren, werden die einzelnen Klassennamen einfach hintereinander aufgelistet. Die Reihenfolge ist dabei irrelevant. Die folgende Anweisung wählt alle Elemente p aus, bei denen das Attribut class mindestens die zwei Klassennamen wichtig und neu enthält. p.neu.wichtig { color: green; } 74 Schnellübersicht CSS

18 3.3.5 Beispiele für kombinierte und verkettete Selektoren Nachfahren-Selektoren, Kind-Selektoren und Geschwister-Selektoren können mit verketteten Selektoren beliebig kombiniert werden. Der letzte einfache oder verkettete Selektor gibt die zu formatierenden Elemente an. Zum einfacheren Verständnis folgen einige Beispiele. Alle Elemente em mit der Klasse test werden ausgewählt, die sich in der Baumstruktur an einer beliebigen Stelle unterhalb von einem Element div befinden. div em.test {color: blue;} Im nächsten Beispiel werden alle Elemente em mit der Klasse test ausgewählt, die sich in der Baumstruktur unterhalb des Elements div befinden. Dabei werden aber keine direkten Kindelemente angesprochen, sondern nur Elemente, die mindestens zwei Ebenen unterhalb des Elements div zu finden sind. Man kann den Selektor auch anders lesen. Es werden zuerst alle Elemente div ausgewählt. Die nächste Ergebnismenge bilden alle untergeordneten Elemente von div. Der letzte hier verkettete Selektor wählt alle Nachfahrenelemente em dieser Menge aus, denen die Klasse test zugewiesen worden ist. div * em.test {color: green;} Jetzt werden kontextuelle und Kind-Selektoren miteinander kombiniert. Es werden alle Elemente p ausgewählt, die Nachfahren eines li- Elements sind. Das li-element wiederum muss ein direktes Kindelement von einem ol-element sein, das sich in der Baumstruktur unterhalb eines div-elements befindet. Nur die erste Zeile der ausgewählten Absätze wird dann in der Farbe Rot dargestellt. div ol>li p:first-line {color: red;} Als abschließendes Beispiel werden alle Elemente ausgewählt, die ein Attribut href und ein Attribut name besitzen und sich in der Baumstruktur an beliebiger Stelle unterhalb eines Elements p befinden. Das Element p wiederum muss direkt einem div-element untergeordnet sein. div > p *[href][name] 3.3 Kombinierte Selektoren Schnellübersicht CSS 75

19 3.4 Kaskadierung 3.4 Ein Dokument kann verschiedene Formatierungen aus unterschiedlichen Quellen für ein und dasselbe Element enthalten. Mit Kaskadierung wird ein Satz von Regeln bezeichnet, die festlegen, welche Formatierung für welches Element angewendet wird. Dabei spielen Herkunft, Reihenfolge und die so genannte Spezifität eine Rolle. Die Spezifität legt fest, welche CSS-Anweisung bei gleicher Herkunft die Priorität erhält und angewendet wird. Kaskadierung Herkunft von CSS-Anweisungen Stylesheets können vom Browser, vom Benutzer oder vom Designer stammen. Bei einer nicht formatierten Webseite verwendet jeder Browser ein integriertes Stylesheet, in dem die Darstellung aller HTML-Elemente vordefiniert ist. Solange keine Formatierung vom Benutzer oder Designer angegeben worden ist, verwendet der Browser dieses Default-Stylesheet. Das Stylesheet des Designers hat die höchste Priorität und überschreibt die Formatangaben des Browsers und auch des Benutzers. Dabei wird für jedes Element getrennt nach einer Formatierung gesucht. Gibt es keine Deklarationen für ein Element, werden die vererbten Werte angewendet. Ist eine Eigenschaft nicht vererbbar, wird der Standardwert beziehungsweise das Default-Stylesheet angewendet. Stylesheets des Designers können aus unterschiedlichen Quellen stammen. Die speziellere Formatierung hat dann immer Vorrang. So besitzt die Schnellformatierung einzelner Elemente mit dem Attribut style die höchste Priorität und das Default-Stylesheet des Browsers die niedrigste. Die Auflistung zeigt eine Übersicht über die Priorität der Formatvorlagen aus verschiedenen Quellen. 76 Schnellübersicht CSS

20 1. Stylesheet des Designers a. Schnellformatierung einzelner Elemente b. Formatanweisungen im head-bereich sowie mit Regel oder dem link-element eingebundene externe Stylesheets c. Vererbter Wert 2. Stylesheet des Benutzers 3. Default-Stylesheet des Browsers 3.4 Stylesheet des Benutzers Der Benutzer einer Webseite hat die Möglichkeit, eine eigene Formatierung für die Webseite festzulegen. Bei den meisten Browsern kann mithilfe von Optionen zumindest die Schriftgröße verändert werden. Beim Testen einer Webseite ist es sinnvoll, verschiedene Benutzereinstellungen zu testen. So kann geprüft werden, ob der Inhalt noch lesbar ist, auch wenn das Layout nicht mehr den gewünschten Effekt hat. Beim Internet Explorer kann der Benutzer den Schriftgrad, also die Schriftgröße, über das Menü ANSICHT/SCHRIFTGRAD verändern. Kaskadierung Abbildung 3.7: Formatierung des Benutzers im Internet Explorer Schnellübersicht CSS 77

21 Über den Menüpunkt EXTRAS/INTERNETOPTIONEN kann mit der Schaltfläche EINGABEHILFEN ein Dialogfeld geöffnet werden, in dem der Benutzer sein eigenes Stylesheet angibt. 3.4 Kaskadierung Abbildung 3.8: Das Dialogfeld Eingabehilfen In Mozilla kann neben dem Schriftgrad auch die gesamte Formatierung des Designers ausgeschaltet werden. Ein eigenes Benutzer-Stylesheet zu integrieren gestaltet sich allerdings etwas umständlich. Zuerst muss nach einer Datei mit dem Namen usercontentexample.css gesucht werden. Das Benutzer-Stylesheet muss den Namen usercontent.css erhalten und dann im gleichen Ordner wie die Datei usercontent-example.css gespeichert werden. Abbildung 3.9: Formatierung des Benutzers in Mozilla Firefox Die für den Benutzer meisten Möglichkeiten zur Einstellung bietet der Opera-Browser. Dieser unterscheidet zwischen Autoren- und 78 Schnellübersicht CSS

22 Benutzermodus. Außerdem steht eine Reihe von vordefinierten Einstellungen zur Verfügung, um das Layout anzupassen. Dabei kann der Benutzer unter anderem die reine Textdarstellung einer Webseite erzwingen oder Bilder ohne Grafiken ausblenden. 3.4 Abbildung 3.10: Formatierung des Benutzers im Opera-Browser Eine weitere Besonderheit des Opera-Browsers ist das einfache Definieren von eigenen Benutzer-Stylesheets. Dazu wird über das Menü EXTRAS das Dialogfeld EINSTELLUNGEN geöffnet und auf der Registerkarte ERWEITERT die Schaltfläche DARSTELLUNGS-OPTIONEN angeklickt. Daraufhin erscheint ein Dialogfeld, in dem der Benutzer einen Pfad zu seinem Stylesheet festlegen und angeben kann, auf welche Elemente in dem Dokument das eigene Stylesheet angewendet werden soll. Kaskadierung Abbildung 3.11: Weitere Einstellungsmöglichkeiten im Opera-Browser Schnellübersicht CSS 79

23 3.4 Kaskadierung Spezifität von Selektoren Haben mehrere Formatanweisungen für ein Element die gleiche Herkunft, kann mit den im vorigen Abschnitt besprochenen Regeln ein möglicher Konflikt nicht gelöst werden. Es sind also weitere Regeln erforderlich, die festlegen, welche Formatanweisung in diesem Fall die höchste Priorität erhält. Allgemein formuliert, kann man sagen, dass immer die speziellere Formatierung Vorrang vor einer allgemeiner definierten Formatierung hat. So hat der ID-Selektor Vorrang vor einem Klassen-Selektor, da sich der ID-Selektor nur auf ein einzelnes Element bezieht, während der Klassen-Selektor für mehrere Elemente angewendet werden kann. Der Universal-Selektor bezieht sich auf alle Elemente und hat somit immer die niedrigste Priorität. 1. ID-Selektoren 2. Klassen-Selektoren, Attribut-Selektoren und Pseudoklassen 3. Typ-Selektoren 4. Universal-Selektor Gibt es zwei gleichwertige CSS-Anweisungen für ein Element, siegt die zuletzt definierte Anweisung. Im folgenden Beispiel wird der Hyperlink in der Farbe Grün dargestellt, da Klassen-Selektoren und Attribut-Selektoren in ihrer Priorität gleichwertig sind und somit die letzte Anweisung ausgeführt wird. Vertauscht man die beiden Anweisungen im head-bereich, dann wird der Hyperlink in der Farbe Blau dargestellt. Listing 3.5: Gleiche Spezifität von Selektoren <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>gleiche Spezifität von Selektoren</title> <style type="text/css"><!-- a.intern { color: blue; } a[href] { color: green; } --></style> </head> 80 Schnellübersicht CSS

24 <body> <a class="intern" href="test2.html" > interner Link</a> </body> </html> Berechnung der Spezifität Im Normalfall sind die gerade genannten Regeln ausreichend. Bei der Verwendung komplexer Selektoren kann die Anweisung mit der höchsten Priorität aber nicht so einfach ermittelt werden. Deshalb gibt es die Möglichkeit, die Spezifität zu berechnen. Das Ergebnis der Berechnung für einen Selektor ist eine Zahl. Die höchste Zahl hat die höchste Priorität und die zugehörige Anweisung wird ausgeführt. Die errechnete Zahl für die Spezifität besteht aus drei Ziffern. Diese werden aus den Ergebnissen von a, b und c zusammengefügt. a. Anzahl der ID-Selektoren b. Anzahl der Klassen-Selektoren, Attribut-Selektoren und Pseudoklassen c. Anzahl der Typ-Selektoren Pseudoelemente werden bei der Berechnung der Spezifität ignoriert. Der Universal-Selektor allein hat immer die Spezifität 0 und somit die niedrigste Priorität. In der folgenden Tabelle wird für einige Selektoren deren Spezifität berechnet. 3.4 Kaskadierung Beispiel a b c Spezifität p {...} p em {...} div p > em {...} div ol>li p:first-line {...} a[href] {...} a.intern{...} div em.test {...} a.intern.wichtig {...} h1#seitentitel {...} Tabelle 3.1: Beispiele für die Berechnung der Spezifität Schnellübersicht CSS 81

25 3.4 Kaskadierung Höchste Spezifität mit!important Der gesamte Mechanismus der Kaskadierung kann mit der!important-regel außer Kraft gesetzt werden. Jede Deklaration, die hinter der Wertangabe und vor dem Semikolon ein!important besitzt, hat Vorrang vor allen normalen Deklarationen. Ohne den Zusatz!important würde bei den folgenden zwei Anweisungen die letzte gewinnen, da bei gleicher Spezifität die letzte Anweisung ausgeführt wird. Durch!important werden die Überschriften h1 aber in Rot dargestellt. h1 { color : red!important; } h1 { color: blue; } Auch der Anwender hat die Möglichkeit, ein eigenes Stylesheet mit der zusätzlichen Angabe von!important bei allen Deklarationen festzulegen. Diese Formatierungen setzen alle anderen Formatierungen außer Kraft. Der Benutzer hat somit das letzte Wort darüber, welche Formatierung angewendet werden soll. Dabei gilt die folgende Rangordnung. 1. Formatierung des Benutzers mit!important 2. Formatierung des Designers mit!important 3. Formatierung des Designers 4. Formatierung des Benutzers 5. Default-Stylesheet des Browsers 82 Schnellübersicht CSS