Anzeige
Tutorialbeschreibung

Professionelle Websites: Basiswissen HTML und CSS Teil 4 Wiederverwendbares CSS

Professionelle Websites: Basiswissen HTML und CSS Teil 4 Wiederverwendbares CSS

Dieses Kapitel soll die beiden grundsätzlichen Sprachen vermitteln, mit denen moderne Webseiten erstellt werden: HTML und CSS. In HTML strukturieren Sie Inhalte durch Elemente für Überschriften, Absätze, Listen, Tabellen und andere. Mithilfe von CSS bestimmen Sie, wie diese Elemente z.B. im Browser-Fenster angeordnet und formatiert werden. Beide Sprachen sind computerlesbar, aber auch für Menschen genießbar. Sie bestehen aus englischsprachigen Begriffen oder Abkürzungen davon sowie aus einfachen Steuerzeichen, die auf jeder Tastatur zu finden sind.


Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education .

7 Wiederverwendbare Formate mit CSS

Wenn Sie für Tabellen mit Hunderten oder Tausenden von Zellen einen Zellinnenabstand zwischen Gitternetzlinie und Zellinhalt definieren wollen, müssten Sie, wenn CSS in HTML nur über das style-Attribut eingebunden werden könnte, die padding-Angaben in jeder einzelnen Tabellenzelle wiederholen. Glücklicherweise ist das nicht nötig. Denn es besteht die Möglichkeit, CSS-Angaben zentral zu definieren und auf selektierbare Elemente anzuwenden.

In Abschnitt 4.6 haben wir bewusst nur mit dem style-Attribut gearbeitet, weil dies die unmittelbarste und zunächst intuitivste Methode ist, HTML-Elemente mit CSS zu gestalten. Gedacht ist diese Methode jedoch eigentlich nur für Fälle, in denen bestimmte Elemente individuell formatiert werden sollen. In allen Fällen dagegen, wo die gleichen CSSDefinitionen auf mehr als ein Element anwendbar sind, sollten Sie auf jeden Fall auf zentrale Formatdefinitionen zurückgreifen, wie sie in diesem Abschnitt beschrieben werden.
Zentral definierte, wiederverwendbare Formate erhöhen die Einheitlichkeit der Formate und tragen damit entscheidend zu einem professionellen Look bei.

7.1 Dokumentglobale und dokumentübergreifende Formate

CSS bietet zwei Varianten an, um Formate zentral zu definieren: im Dateikopf einzelner HTML- Seiten oder in einer separaten Datei, die dann in beliebig vielen HTML-Seiten eingebunden werden kann. Die erste Variante ist sinnvoller, wenn Sie die Formate nur für ein einzelnes Dokument definieren. Letztere Variante ist dagegen vorzuziehen, wenn Sie einheitliche Formate für eine komplette Site, bestehend aus mehreren bis etlichen HTMLDateien, oder für dynamisch generierte HTML-Seiten (etwa mit PHP) definieren wollen. Die Syntax der zentralen Formatdefinitionen ist in beiden Fällen die gleiche.

Dokumentglobale CSS-Definitionen im style-Bereich des Dateikopfs
Im HTML-Kopfbereich, also zwischen <head> und </head>, können Sie einen Bereich für
CSS-Formatdefinitionen notieren.

Dazu ein erstes Beispiel:

Bilder

Der Definitionsbereich wird in <style>...</style> eingeschlossen. Das einleitende <style>-Tag erhält das Attribut type="text/css". Die Wertzuweisung ist der Mime-Type für CSS. Der Browser weiß dadurch, dass er den Inhalt des Elements mit seinem CSS-Parser auslesen muss.
Einige Autoren schließen den Inhalt des style-Bereichs zusätzlich in einen HTML-Kommentar (<!-- ... -->) ein, um ältere Browser davor zu bewahren, den Inhalt als Text anzuzeigen. Das Verhalten eines Browsers, der ein HTML-Element nicht kennt, sollte nämlich darin bestehen, das Markup des unbekannten Elements einfach zu ignorieren und darin enthaltenen Textinhalt einfach anzuzeigen. Doch solche Browser gibt es praktisch nicht mehr. Auch textbasierte Browser wie Lynx haben längst ausgereifte HTML-Parser, die auch Elemente wie style kennen und wissen, dass dessen Inhalt nicht angezeigt werden soll.
Auf die Definitionen innerhalb des style-Bereichs gehen wir später ein.

Dokumentübergreifende CSS-Definitionen in separaten CSS-Dateien
Der gleiche Inhalt, der innerhalb eines style-Elements im HTML-Kopfbereich stehen kann, kann auch – ohne jede umgebende HTML-Auszeichnung – in einer separaten Textdatei stehen. Die Datei könnte also beispielsweise folgenden Inhalt haben:

h1 { font-size:18px;
  font-family:Tahoma,Arial,sans-serif;
  color:blue;
  border-bottom:solid blue 18px;
  padding-bottom:10px;
}
  p,li {
  font-family:Tahoma,Arial,sans-serif;
}

Als Dateinamenerweiterung sollte die Datei .css erhalten. Eine solche Datei können Sie in HTML referenzieren, um so die darin definierten CSS-Formate für das HTML-Dokument zu übernehmen.
Es gibt zwei Möglichkeiten, die CSS-Datei zu referenzieren. Die am häufigsten verwendete ist die über das link-Element in HTML.

Dazu ein Beispiel:
<link rel="stylesheet" type="text/css" href="formate.css">

Das link-Element wird, wie wir bereits wissen, im Kopfbereich notiert, also zwischen <head> und </head>. Dem rel-Attribut wird in diesem Fall der Wert stylesheet zugewiesen. Als Mime-Type der verlinkten Ressource wird wie für CSS üblich text/css angegeben. Im href-Attribut schließlich wird die CSS-Datei referenziert. Der Wert kann ein beliebiger URI sein, also eine beliebige Internetadresse oder eine lokal referenzierte Quelle. Im obigen Beispiel liegt die Datei formate.css einfach im gleichen Verzeichnis wie die HTML-Datei, in der das link-Element notiert ist.

Daneben existiert die Möglichkeit, eine externe CSS-Datei innerhalb eines style-Bereichs zu referenzieren, und zwar mit einer CSS-internen Syntax. Diese Möglichkeit ist besonders dann zu empfehlen, wenn Sie sowohl externe CSS-Formate als auch dokumentspezifische Formate verwenden möchten.

Ein Beispiel:
<style type="text/css">
  @import url(formate.css) all;
  p,li {
  font-size:12px;
  }
</style>

In style-Bereichen können so genannte rules (zu Deutsch: Regeln) definiert werden, an dem führenden @-Zeichen zu erkennen. Eine dieser Regeln ist die @import-Regel. Über diese Regel lassen sich externe Stylesheet-Dateien in den style-Bereich einbinden. Die Syntax ist dabei ähnlich wie etwa bei der CSS-Eigenschaft background-image. Das Schema lautet auch hier url(URI), wobei URI eine beliebige Internetadresse sein kann oder auch eine lokal referenzierte Quelle. Im Beispiel liegt die Datei formate.css im gleichen Verzeichnis wie die referenzierende HTML-Datei.
Hinter der Adressierung der Stylesheet-Datei folgt noch eine Angabe zum Medientyp. Wenn Sie nichts Genaueres spezifizieren möchten, geben Sie dort am besten all an – damit sind alle Medientypen gemeint. Auf medienspezifisches CSS gehen wir in Kapitel 6 noch näher ein.

Verhalten bei widersprüchlichen oder ergänzenden Definitionen
Wir haben nun drei »Orte« kennen gelernt, an denen CSS-Formate definiert werden
können:
- Formatdefinitionen in einer externen CSS-Datei: geeignet für Formate, die für mehrere bis alle Seiten eines Projekts, einer Site gültig sein sollen.
- Formatdefinitionen im style-Element innerhalb der HTML-Kopfdaten: geeignet für Formate, die innerhalb des Dokuments mehrfach benötigt werden und nicht in einer separaten CSS-Datei definiert sind.
- Formatdefinitionen im style-Attribut eines HTML-Elements: geeignet für individuelle, von den Standarddefinitionen abweichende Formatierung und Gestaltung.

Es ist problemlos möglich, alle drei Orte von Formatdefinitionen zu mischen. Wichtig ist
dabei aber, die folgenden Regeln zu kennen:
- Formatdefinitionen im style-Bereich in den HTML-Kopfdaten haben Vorrang vor Formatdefinitionen aus referenzierten externen CSS-Dateien.
- Formatdefinitionen in style-Attributen einzelner HTML-Elemente haben Vorrang vor Formatdefinitionen aus dem style-Bereich.

Je »näher« sich eine Formatdefinition am konkreten Zielelement befindet, desto mehr Vorrang hat sie also. Ein Beispiel soll dies demonstrieren. Eine separate CSS-Datei namens formate.css hat folgenden Inhalt:

h1 {
  color:red
}

Eine HTML-Datei hat unter anderem folgende Kopfdaten:

<link rel="stylesheet" type="text/css" href="formate.css">
  <style type="text/css">
  h1 {
  color:green;
  }
</style>

Und im Dateikörper der HTML-Datei ist schließlich Folgendes notiert:

<h1 style="color:blue">Welche Farbe habe ich?</h1>

Bilder

Abbildung 4.55: Das Ergebnis konkurrierender CSS-Formatdefinitionen

Die Antwort lautet Blau (blue). Würde das style-Attribut im h1-Element fehlen, so wäre die Antwort Grün (green), wegen der Definition im style-Bereich. Würde diese Definition ebenfalls fehlen, so wäre die Antwort Rot (red), wegen der Definition in der externen CSS-Datei.
Formateigenschaften aus entfernteren Definitionsorten können also durch solche an näheren Definitionsorten überschrieben werden. Sie können sich aber auch – und das dürfte wohl der häufigere Fall sein, einfach nur vererben und ergänzen. So lautet beispielsweise eine Anforderung, dass die Hintergrundfarbe einer Navigationsleiste verschieden sein kann, weil die Site in verschiedene Kategorien gegliedert ist, und eine Kategorie an der Farbe erkennbar sein soll. In einem solchen Fall bietet es sich an, die Angaben zur Positionierung der Navigationsleiste in einer separaten CSS-Datei zu notieren, da die Position immer gleich bleibt. Die Hintergrundfarbe kann dann innerhalb der einzelnen Dokumente definiert werden. Positionierung und Hintergrundfarbe ergänzen sich, oder CSS-gerechter ausgedrückt: die Angaben zur Positionierung werden geerbt und die zur Hintergrundfarbe werden hinzugefügt.

7.2 Selektoren

Die Formatdefinitionen an sich haben an allen drei Definitionsorten das gleiche Syntaxschema:
CSS-Eigenschaft:Wertzuweisung. Mehrere Formatdefinitionen werden durch Semikola voneinander getrennt.
Bei Formatdefinitionen innerhalb eines HTML-Elements, genauer, innerhalb von dessen style-Attribut, ist die Zuordnung zum Element eindeutig. Bei zentralen Definitionen im style-Bereich oder in einer externen CSS-Datei dagegen müssen Sie eine solche Zuordnung erst herstellen. Für jedes definierte Set von Formatdefinitionen müssen Sie deshalb einen Selektor notieren. Ein Selektor grenzt ein, welche Elemente von den zugehörigen Formatdefinitionen betroffen sein sollen.
Die Gesamtsyntax ist dabei Folgende: Selektor { CSS-Eigenschaft:Wert; CSS-Eigenschaft:Wert; ... }
Das Set an Formatdefinitionen wird in geschweifte Klammern eingeschlossen. Vor der öffnenden geschweiften Klammer wird der Selektor notiert. Leerraumzeichen sind überall erlaubt. Bei umfangreicheren CSS-Formatdefinitionen ist eine Notation wie die folgende am übersichtlichsten:

h1 {
font-family:inherit;
font-size:20px;
font-weight:normal;
color:rgb(195,35,35);
letter-spacing:1px;
margin-top:0px;
margin-bottom:30px;
padding-bottom:10px;
border-bottom:rgb(145,35,35) 4px double
}

In diesem Beispiel ist h1 der Selektor. Das bedeutet, dass die Formatdefinitionen auf alle h1-Elemente im HTML-Quelltext, also Überschriften 1. Ordnung, angewendet werden.
Bei der letzten Formatdefinition vor einer schließenden geschweiften Klammer kann das Semikolon entfallen.
Selektoren sind ein mächtiges Werkzeug, wie wir in den nachfolgenden Abschnitten sehen werden. Nicht nur »alle HTML-Elemente mit diesem Namen« können selektiert werden, sondern auch nur bestimmte Elemente, abhängig von verschiedenen Bedingungen.

7.3 Formatdefinitionen für Elemente

Den einfachsten Fall haben wir bereits kennen gelernt. Ein HTML-Element wie h1, p, strong, code, div oder body ist dabei der Selektor. Der nächste Fall besteht darin, HTMLElemente mit gleichartigen Formatdefinitionen zu gruppieren.

Ein Beispiel:
body, h1, h2, h3, h4, div, p, blockquote, th, td, li {
  font-family:Arial,sans-serif;
  color:black;
  background-color:white;
}
h1, h2, h3, h4 {
  color:rgb(195,35,35);
}
h1, h2 {
  letter-spacing:1px;
}
h1 {
  font-size:20px;
  font-weight:normal;
  margin-top:0px;
  margin-bottom:30px;
  padding-bottom:10px;
  border-bottom:rgb(195,35,35) 4px double
}

Bei einem Set von Formatdefinitionen, das für mehrere Elemente gelten soll, besteht der Selektor darin, die gewünschten Elemente durch Kommata zu trennen.
In der Praxis ist es sinnvoll, logisch so vorzugehen wie im obigen Code-Beispiel gezeigt:
Zunächst werden wenige allgemeine Formatdefinitionen auf zahlreiche Elemente angewendet und am Ende werden zahlreiche spezielle Formatdefinitionen auf einzelne Elemente angewendet. Das Vererbungsprinzip von CSS sorgt dafür, dass die Formatdefinitionen sich ergänzen. Wenn Widersprüche auftauchen, wie im obigen Beispiel die Definitionen für color im ersten und im zweiten Set, dann überschreibt die später interpretierte Definition die frühere. Solche Widersprüche sind oft gar nicht als Widersprüche konzipiert. Es wird einfach zuerst ein Allgemeinfall definiert (im Beispiel: schwarze Textfarbe) und dann wird ein abweichender Fall für eine kleinere Selektion von Elementen definiert (im Beispiel: rote Textfarbe für Überschriften 1. bis 4. Ordnung).

Berücksichtigung der Elementumgebung
Ein Set von Formatdefinitionen ist also auf mehrere Elemente anwendbar, was die Anzahl der Anwendungsfälle erhöht. Oft ist aber auch der umgekehrte Fall erwünscht, nämlich eine kontrollierte Reduzierung der Anwendungsfälle. Eine Möglichkeit dazu sind Selektoren, die HTML-Elementverschachtelungen berücksichtigen.

Dazu ein relevanter Beispielausschnitt aus einem HTML-Dokument:
<style type="text/css">
h1 {
  color:rgb(195,35,35);
  font-family:Arial,sans-serif;
}
h1 code {
  color:rgb(35,35,195);
  font-family:Arial,sans-serif;
}
  </style>
  <title>Formatdefinitionen</title>
</head>
<body>
  <h1>Die CSS-Eigenschaft <code>font-family</code></h1>
  <p>Die Eigenschaft <code>font-family</code> dient zur
  Bestimmung der Schriftart.</p>
</body>

In den zentralen Formatdefinitionen wird zunächst für h1-Elemente eine Schriftfarbe und eine Schriftart definiert. Anschließend wird für code-Elemente, die innerhalb von h1- Überschriften vorkommen, ebenfalls eine Schriftfarbe und eine Schriftart festgelegt.

Bilder

Abbildung 4.56: Formatdefinition für Elementverschachtelung

Im HTML-Quelltext des Beispiels kommt das code-Element zweimal vor: in der h1-Überschrift und im nachfolgenden Textabsatz. Durch den Selektor h1 code wird erreicht, dass Textinhalte des code-Elements blau und in Arial oder einer anderen serifenlosen Schrift dargestellt werden, wenn (und nur wenn) das code-Element innerhalb einer h1-Überschrift vorkommt. Kommt das code-Element dagegen innerhalb eines anderen Elements vor, ist seine Darstellung abhängig von den Eigenschaften des anderen Elternelements und von den Browser-Voreinstellungen zur Darstellung des code-Elements an sich. Üblicherweise zeigen z.B. grafische Browser das code-Element in einer dicktengleichen Schrift an, wie auch in der Abbildung beim Wort »font-family« innerhalb des Textabsatzes zu sehen. Vererbt werden dem code-Element sowohl in der Überschrift als auch im Textabsatz Eigenschaften wie etwa die Schriftgröße. Durch den Selektor h1 code werden jedoch Schriftart und Farbe bei Vorkommen in einer h1-Überschrift explizit definiert.

Selektoren für einfache Elementverschachtelungen haben also folgendes Schema:
Element_1 Element_2 { Formatdefinitionen }

Dabei ist Element_1 das Elternelement und Element_2 das Element, für das die Formatdefinitionen gelten, wenn es innerhalb von Element_1 vorkommt. Element_1 und Element_2 werden einfach durch ein oder mehrere Whitespace-Zeichen (z.B. ein Leerzeichen) voneinander getrennt.
Das Aufzählen mehrerer Elemente, getrennt durch Kommata, ist mit Verschachtelungsangaben beliebig kombinierbar. Eine Notation wie h1,h2 code bedeutet: Folgende Formatdefinitionen gelten für code-Elemente, die innerhalb von einer h1- oder einer h2-Überschrift vorkommen. Eine Notation wie h1 code,kbd bedeutet: Folgende Formatdefinitionen gelten für code- oder kbd- lemente, die innerhalb einer h1-Überschrift vorkommen. Und eine Notation wie h1,h2 code,kbd bedeutet: Folgende Formatdefinitionen gelten für code- oder kbd-Elemente, wenn sie innerhalb von h1- oder h2-Überschriften vorkommen.
Neben der einfachen Verschachtelung besteht seit CSS 2.0 die Möglichkeit, auch komplexere Verschachtelungsregeln zu definieren. Die nachfolgende Tabelle listet alle Möglichkeiten der Verschachtelung auf.

Bilder

Tabelle 4.13: Syntax bei Verschachtelungsangaben im Selektor

Die beiden Varianten mit den Zeichen > und * sind also dazu gedacht, um die Verschachtelungsregel genauer zu definieren. Die letztgenannte Möglichkeit mit dem Zeichen + ist genau genommen keine Verschachtelungsregel mehr. Diese Syntax ist jedoch sehr praktisch für alle Fälle, in denen aufeinander folgende Elemente sich in bestimmter Weise verhalten sollen. So lässt sich beispielsweise durch h1 + p { margin-top:30px } erreichen, dass ein Textabsatz einen Abstand von 30 Pixel oben erhält, aber nur, wenn er unmittelbar hinter einer Überschrift 1. Ordnung notiert ist.

7.4 Formatdefinitionen für Klassen und Einzelelemente

Die im Abschnitt zuvor behandelten Möglichkeiten, HTML-Elemente mit Selektoren zentral
zu formatieren, gehen von Elementen aus, die keine weiteren identifizierenden Angaben
enthalten als ihren HTML-Elementnamen. Es gibt jedoch zwei HTML-Attribute, die in
allen Elementen erlaubt sind und es ermöglichen, ein Element entweder zu klassifizieren
oder eindeutig zu identifizieren:

- Das class-Attribut erlaubt es, Elemente einem Klassennamen zuzuordnen.
- Das id-Attribut erlaubt es, einem Element einen dokumentweit eindeutigen Namen zu geben.

Anhand eines Komplettbeispiels, also des Quelltextes einer vollständigen HTML-Datei sollen diese Attribute und ihr Zusammenspiel mit CSS-Selektoren erläutert werden:

Listing 4.8: HTML mit class- und id-Attributen und entsprechende CSS-Selektoren

 

Bilder

Das Beispiel enthält eine mit CSS formatierte Tabelle, die am Ende folgendermaßen aussieht:

Bilder

Abbildung 4.57: Mit Selektoren für class- und id-Attribute formatierte HTML-Tabelle

In einleitenden HTML-Tags sind die Attribute class= zum Zuweisen eines Klassennamens und id= zum Zuweisen eines dokumentweit eindeutigen Namens zulässig. Für die korrekte Anwendung müssen Sie als HTML-Autor selbst sorgen. Der einem id-Attribut zugewiesene Wert darf im gesamten Dokument wirklich nur einmal vorkommen. Wertzuweisungen an das class-Attribut sind dagegen eher sinnvoll, wenn sie mehrfach im Dokument vorkommen. Dabei ist es jedoch wichtig, dass der Klassenname in allen Fällen exakt gleich geschrieben ist (Groß-/Kleinschreibung berücksichtigen).

Halten Sie sich bei id- und Klassennamen an folgende Regeln:
- Das erste Zeichen muss ein Buchstabe A–Z bzw. a–z sein.
- Weitere Zeichen dürfen Buchstaben A–Z, a–z, Ziffern 0–9 sowie die Zeichen für Unterstrich (_), Bindestrich/Minuszeichen (-), Doppelpunkt (:) und Punkt (.) sein. Von der Verwendung von Bindestrich/Minuszeichen, Doppelpunkt und Punkt ist in der Praxis jedoch abzuraten, da die Namen dann bei Verwendung in Scriptsprachen wie Java- Script zu Fehlern führen können.
- Leerzeichen in Namen sind nicht erlaubt.

Klassen- und ID-Namen haben unterschiedliche Namensräume. Im obigen Beispiel gibt es beispielsweise ein <table>-Tag mit ID-Namen Bundesliga, gleichzeitig aber auch Kopfzellen <th> mit dem gleichen Klassennamen. Das führt zu keinen Konflikten.
Bei CSS-Selektoren werden Klassennamen durch einen Punkt (.) referenziert und id- Namen durch ein Gatterzeichen (#). Dabei sind folgende Notationen erlaubt:
- Mit .Klassenname referenzieren Sie alle HTML-Elemente, in deren einleitendem Tag class="Klassenname" notiert ist.
- Mit Elementname.Klassenname referenzieren Sie alle HTML-Elemente des Typs Elementname, in denen class="Klassenname" notiert ist, also z.B. mit th.Bundesliga alle Elemente <th class="Bundesliga">, nicht aber Elemente wie <td class="Bundesliga">.
- Mit #IDName referenzieren Sie ein bestimmtes Element mit eben diesem id-Namen.
- Mit Elementname#IDName referenzieren Sie ein bestimmtes Element mit eben diesem id-Namen, jedoch nur dann, wenn es ein Element des Typs Elementname ist, also z.B. mit h1#Kopf das Element <h1 id="Kopf">, nicht aber ein Element <div id="Kopf">. Zwar dürfen in einem Dokument ohnehin nicht beide Elemente mit dem gleichen id-Namen vorkommen, doch bei Formatdefinitionen in separaten CSS-Dateien, die in zahlreichen unterschiedlichen Dokumenten referenziert werden, kann es durchaus vorkommen, dass verschiedene Elemente in verschiedenen Dokumenten den gleichen id-Namen haben.

In unserem Beispiel wird für ein table-Element mit dem id-Namen Bundesliga bestimmt, dass Rahmen von Gitternetzlinien und Außenrahmen zusammenfallen sollen. Für alle Kopf- und Datenzellen innerhalb dieses table-Elements (#Bundesliga th,td) werden eine einheitliche Schriftgröße und Zellinnenabstände definiert. Wie an diesem Beispiel erkennbar, gelten für Klassen- und ID-Selektoren die gleichen Möglichkeiten zur Verschachtelung wie bei Selektoren von Elementen. Kopfzellen mit der Klasse Bundesliga (th.Bundesliga) werden linksbündig ausgerichtet, erhalten eine hellgraue Hintergrundfarbe und als Textfarbe wird Schwarz festgelegt. Es folgen vier reine Klassendefinitionen, nämlich für die Klassen gelb, orange, rechts und fett. Solche Klassen, die meist nur ein oder zwei Formateigenschaften beschreiben, sind in der Praxis häufig zu finden und sehr nützlich.

7.5 Attributbedingte Formatdefinitionen

Eine weitere Möglichkeit, mit einem Selektor nicht »alle Elemente« mit bestimmtem Elementnamen anzusprechen, sondern nur bestimmte, besteht darin, in den Elementen enthaltene Attribute und sogar Wertzuweisungen bei der Selektion zu berücksichtigen. Dazu müssen die Elemente natürlich mit entsprechenden Attributen ausgestattet sein. Ein weiteres vollständiges Listing eines HTML-Dokuments mit zentralen CSS-Definitionen soll diese Einsatzmöglichkeit demonstrieren:

Listing 4.9: CSS-Formatdefinitionen mit attributbedingten Selektoren
 

Bilder

Der HTML-Teil zwischen <body> und </body> im Beispiel besteht aus lauter Textabsätzen, die einen Dialog zwischen Melanie und Ute darstellen. Melanie ist angelsächsischer Herkunft, während Ute aus dem deutschsprachigen Raum stammt. Das, was beide jeweilssagen, ist durch cite-Elemente markiert. Dabei sind die englischen Passagen durch das dafür vorgesehene lang-Attribut, das ebenfalls in allen HTML-Elementen mit Textinhalt notiert werden kann, mit lang="en" gekennzeichnet. Alle deutschsprachigen Zitatfetzen sind mit lang="de" ausgezeichnet. Außerdem gibt es zwei Klassen, Melanie und Ute, die den Absätzen zugeordnet werden, in denen nur der Personenname steht.

Im style-Bereich werden zunächst Formatdefinitionen für Textabsätze allgemein und dann – einschränkend – für solche mit den Klassennamen Melanie und Ute notiert. Es folgen drei attributbedingte Selektoren: cite[lang], cite[lang=en] und cite[lang=de]. cite[lang] betrifft alle HTML-Konstrukte <cite lang="...">...</cite>, cite[lang=en] alle Konstrukte <cite lang="en">...</cite> und cite[lang=de] alle <cite lang="de">...</cite>.
Wird in den eckigen Klammern nur der Attributname notiert, sind also alle Elemente mit diesem Attribut betroffen – unabhängig von dem Wert, der dem Attribut jeweils zugewiesen wird. Soll die Auswahl nur auf Elemente mit dem Attribut und einer bestimmten Wertzuweisung eingeschränkt werden, wird in den eckigen Klammern das Attribut, ein =- Zeichen und der gewünschte Wert notiert.

Bilder

Abbildung 4.58: Attributbedingte CSS-Formatdefinitionen im Einsatz

In unserem Beispiel werden alle englischen Zitatpassagen ebenso wie der Name der englischsprachigen Melanie in Blau dargestellt und alle deutschsprachigen Zitatpassagen ebenso wie der Name der deutschsprachigen Ute in Rot.
So nützlich attributbedingte CSS-Selektoren sind – für die Praxis haben sie einen entscheidenden Nachteil: Der MS Internet Explorer interpretiert diese Syntax bis Version 6.0 noch nicht. Wenn Sie mit solchen Selektoren arbeiten, sollte das also nur unkritische Formate betreffen, bei denen es nicht tragisch ist, wenn sie nicht angezeigt werden können.

7.6 Formatdefinitionen für Pseudoelemente

Bisher haben wir Selektoren kennen gelernt, die sich auf konkrete HTML-Konstrukte beziehen. Pseudoelemente tun das nicht. Es handelt sich dabei vielmehr um Bestandteile, die zwar aus logischer oder typografischer Sicht dingfest zu machen sind, aber keine konkrete Entsprechung innerhalb von HTML haben.
Der bekannteste Vertreter für Pseudoelemente ist die Unterscheidung nach Hyperlinks zu bereits besuchten Zielen, zu noch nicht besuchten Zielen (abhängig von der aktuell gespeicherten History des Browsers), zu Links, deren Verweistext gerade mit der Maus überfahren wird, und zu angeklickten Links. Dieses Thema werden wir jedoch in Zusammenhang mit der Gestaltung von Hyperlinks in Abschnitt 4.8.9 behandeln.
Ein anderer Fall sind aus dem Buch- und Zeitungssatz bekannte Hervorhebungen des ersten Buchstabens oder der ersten Zeile eines Absatzes oder einer Überschrift.

Dazu ein Beispiel: p.first:first-letter { font-size:300% }

In dieser style-Definition lautet der Selektor p.first:first-letter. Dabei stellt der Teil p.first einen Bezug zu p-Elementen mit dem Attribut class="first" her. Der folgende Doppelpunkt markiert, dass nun ein Pseudoelement folgt. CSS bietet eine Reihe solcher Pseudoelemente an. Eines davon ist first-letter. Es bedeutet das erste Zeichen eines Elements.
Oben notierter Selektor trifft in HTML also auf eine Notation wie diese zu:

<p class="first">Träumend lag ich wach.</p>

Bilder

Abbildung 4.59: Hervorhebung des ersten Buchstabens mit Pseudoelement :first-letter

Weitere Pseudoelemente aus diesem Bereich, die CSS zur Verfügung stellt, sind :first-line (erste Zeile eines Fließtexts) und :first-child (erstes Kindelement eines Elements).

Bilder

Abbildung 4.60: Vom Text umflossener Anfangsbuchstabe, über :first-letter definiert

Soll der erste Buchstabe übrigens so erscheinen, dass der von ihm eingeleitete Fließtextabsatz um ihn herumfließt, ist dies über zusätzliche Formatdefinitionen lösbar, vor allem zu float.

Ein Beispiel:
p.first:first-letter {
font-size:300%;
float:left;
margin-right:2px;
margin-bottom:2px;
margin-bottom:0px;
}

Ein weiterer Typ von Pseudoelementen in CSS ist für »generierten Inhalt« zuständig. Ein generierter Inhalt ist Text oder anderer Inhalt, der im Browser erscheint, aber in HTML nicht explizit notiert wird, so wie etwa die Bullet-Zeichen oder Nummern bei der Notation von <li>...</li>. CSS erlaubt es, für beliebige selektierbare Elemente davor oder dahinter automatisch bestimmbaren Inhalt einzufügen.

Ein einfaches Beispiel:
span.Preis:before { content:"_ " }

Dieser Selektor bestimmt für span-Elemente mit dem Attribut class="Preis", dass dem Inhalt des Elements der Wert »_ « vorangestellt wird.

Der entsprechende HTML-Code könnte so aussehen:
<p><span class="Preis">39,90</span></p>

Bilder

Abbildung 4.61: Über Pseudoelement generiertes Eurozeichen

Zur Verfügung stehen :before für »Inhalt davor« und :after für »Inhalt danach«. Innerhalb der geschweiften Klammern können Sie, eingeleitet durch content:, den gewünschten Inhalt bestimmen. Soll der Inhalt einfach aus Text bestehen, wird dieser in Anführungszeichen hinter content: notiert. Anstelle von Text können Sie aber auch z.B. eine Grafik angeben. Das Schema dazu lautet content:url(URI), wobei URI eine Internetadresse oder eine lokal referenzierte Adresse einer Grafik ist.

Das Pseudoelement für »generierten Inhalt« bietet darüber hinaus noch eine Funktion an, die das automatische Nummerieren von Inhalten wie Überschriften erlaubt. Darauf gehen wir in Abschnitt 6.2 genauer ein

Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

 


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MaoMao
  • 09.01.2013 - 17:05

Gute Tutorial leicht erklärt.

Portrait von williamo
  • 21.08.2009 - 14:44

sehr gute serie ...............

Portrait von vrt-vampir
  • 16.04.2008 - 10:45

Echt geniales Tutorial

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 20.03.2008 - 15:03

nice nice!.....................

Portrait von bethge
  • 18.03.2008 - 09:09

sehr schönes tut hat mir wieder sehr weiter geholfen :)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.03.2008 - 09:08

Sehr schönes Tutorial, danke!

Portrait von Erazer81
  • 16.03.2008 - 15:28

Teil 4 wunderbar - weiß jmd ob es nur Ausschnitte aus dem buch bleiben oder ob nach und nach das ganze buch kommt - ich finde es nämlich echt gut

Portrait von skyflight1981
  • 16.03.2008 - 10:52

Super Tutorial! Auch Teil 4 knüpft an die hohe Qualität an.

x
×
×