|
Inhaltsverzeichnis
|
Bei Inline-Styles, also bei CSS-Formatdefinitionen im style-Attribut eines HTML-Tags, ist der Bezugsrahmen der Definitionen stets das Element. Bei zentralen Stylesheets oder externen, eingebundenen Stylesheets fehlt ein derartiger Bezug. Deshalb haben Formatdefinitionen innerhalb eines style-Elements oder einer separaten CSS-Datei folgenden typischen Aufbau:
Selektor { Eigenschaft-1: Wert; Eigenschaft-2: Wert; /* usw. */ }
Dabei bestimmt der Selektor, für welche HTML-Elemente die Formatdefinitionen gelten, die innerhalb des Blocks notiert werden, der durch { und } markiert wird. Der Selektor kann der Name eines HTML-Elements sein. Dann gelten die Formatdefinitionen im Block für alle Elemente mit diesem Namen. Es gibt aber auch komplexere Selektoren, beispielsweise, um nur Elemente in einer bestimmten Verschachtelungssituation zu bestimmen, oder Elemente mit bestimmten Klassennamen oder anderen Eigenschaften. Auch das Adressieren einzelner Elemente, die ein id-Attribut haben, ist möglich.
In einem style-Bereich oder in einer externen CSS-Datei können Sie für alle HTML-Elemente eines bestimmten Namens, zum Beispiel für alle h1-Überschriften, alle td-Tabellenzellen oder alle ul-Listen, CSS-Formate definieren.
body { background-color:#FFFFCC; margin-left:100px; } * { color:blue; } h1 { font-size:300%; color:#FF0000; font-style:italic; border-bottom:solid thin black; } p, li { font-size:110%; line-height:140%; font-family:Helvetica,Arial,sans-serif; letter-spacing:0.1em; word-spacing:0.3em; }
Um ein zentrales Format für alle HTML-Elemente eines bestimmten Typs zu definieren, notieren Sie als Selektor den Namen des HTML-Elementtyps, und zwar ohne spitze Klammern. Im obigen Beispiel werden body (Dokument), h1 (Überschriften 1. Ordnung), p (Textabsätze) und li (Listeneinträge) auf diese Weise notiert. Über den Universalselektor * haben Sie die Möglichkeit, Eigenschaften für alle Elemente zu definieren, wobei jedem Element nur die jeweils zulässigen Eigenschaften zugewiesen werden.
Wenn Sie ein Format für mehrere HTML-Elementtypen definieren wollen, geben Sie alle gewünschten Elementtypen an und trennen Sie diese durch Kommata, so wie im obigen Beispiel p, li.
Es bedeutet also das gleiche, wenn Sie notieren:
h1 { font-family:Helvetica,sans-serif; } h2 { font-family:Helvetica,sans-serif; }
Oder wenn Sie notieren:
h1, h2 { font-family:Helvetica,sans-serif; }
Dahinter folgen die gewünschten Definitionen. Im obigen Beispiel wird dem body-Element eine hellgelbe Hintergrundfarbe (background-color: #FFFFCC;) und ein linker Randabstand von 100 Pixeln (margin-left:100px;) zugewiesen. Über den Universalselektor wird für alle Elemente zunächst blaue Schriftfarbe (color: blue;) definiert. Überschriften 1. Ordnung (h1) erhalten eine Schriftgröße von 300 Prozent (font-size:300%;), die abweichende Schriftfarbe rot (color: #FF0000;) und den Schriftstil kursiv (font-style:italic;). Textabsätze (p) und Listenpunkte (li) sollen in 110 Prozent Schriftgröße (font-size: 110%;) mit einer Zeilenhöhe von 140 Prozent (line-height: 140%;) in Schriftart Helvetica, oder wenn nicht verfügbar, dann in Arial, und wenn ebenfalls nicht verfügbar, in irgendeiner Sans-Serif-Schrift dargestellt werden (font-family: Helvetica, Arial, sans-serif;). Außerdem werden auch noch Angaben zum Zeichenabstand (letter-spacing), Wortabstand (word-spacing) und zur Textfarbe gemacht.
Wenn Sie nichts anderes angeben, übernimmt ein HTML-Element, das innerhalb eines anderen HTML-Elements vorkommt, dessen Eigenschaften und fügt seine eigenen Eigenschaften nur hinzu. Wenn Sie beispielsweise für Überschriften 1. Ordnung die Schriftart Times und die Farbe rot definieren, erscheint Text, der innerhalb einer solchen Überschrift mit <em>…</em> formatiert wird, ebenfalls rot und in Times, aber zusätzlich kursiv.
Mit Hilfe von CSS können Sie jedoch bestimmen, dass ein HTML-Element bestimmte Eigenschaften nur dann hat, wenn es innerhalb eines bestimmten anderen HTML-Elements vorkommt. So können Sie etwa bestimmen, dass <em>…</em> innerhalb von Überschriften nicht kursiv, stattdessen aber in blauer Farbe dargestellt wird, während das gleiche Element innerhalb anderer HTML-Tags nach wie vor nichts anderes als eine kursive Darstellung bewirkt.
h1 i { color:blue; font-style:normal; } div * b { color:violet; } div > p { color:blue; } div + p { margin-top:5em; }
Zunächst wird festgelegt, dass Textabschnitte, die mit <i> … </i> ausgezeichnet sind, nicht wie sonst üblich kursiv, sondern normal (font-style: normal;), stattdessen aber mit blauer Farbe (color: blue;) dargestellt werden. Aber nicht immer, sondern nur dann, wenn das i-Element innerhalb einer Überschrift 1. Ordnung (h1) vorkommt. Dazu notieren Sie zuerst den Namen des übergeordneten Elementtyps, im Beispiel h1, und dahinter, durch Leerraum getrennt, den Namen des inneren Elementtyps, im Beispiel i.
Man spricht bei diesen allgemeinen Verschachtelungsangaben von Nachfahren-Selektoren. Daneben gibt es noch weitere, genauere Möglichkeiten für Selektoren-Angaben zu verschachtelten Elementen. Denn die einfache Verschachtelungsregel berücksichtigt nicht die Verschachtelungstiefe. So wird das i-Element auch dann rot formatiert, wenn es z.B. in dieser Form vorkommt: <h1><span><i>…</i></span></h1>. Das nachfolgende Beispiel berücksichtigt dagegen die Verschachtelungssituation genauer:
div * b { color: violet; }
Der Universalselektor * wird hier als Platzhalter für ein beliebiges Element und damit für eine weitere Verschachtelungsebene verwendet. Im Beispiel wird festgelegt, dass b-Elemente, die innerhalb eines div-Bereichs vorkommen, nur dann violette Textfarbe (color: violet;) erhalten, wenn das b-Element in dieser oder einer vergleichbaren Form vorkommt: <div><p><b></b></p></div>, also mindestens zwei Ebenen unterhalb des div-Elements.
Dazu etwas HTML-Code:
<div> Text in einem div-Bereich mit <b>nur fettem Text</b> und <i>kursivem und <b>dazu fettem</b> Text</i>. <p>Textabsatz in einem div-Bereich mit <b>nur fettem Text</b> und <i>kursivem und <b>dazu fettem</b> Text</i>.</p> <table> <tr> <td><p>Textabsatz in einer Tabellenzelle.</p></td> </tr> </table> </div> <p>Textabsatz außerhalb eines div-Bereichs mit <b>nur fettem Text</b> und <i>kursivem und <b>dazu fettem</b> Text</i>.</p> <p>Noch ein Textabsatz.</p>
Im HTML-Ausschnitt sind verschiedene Textstellen an verschiedenen Stellen mit <b>…</b> ausgezeichnet. Das erste b-Element in dem Text, der zuerst und direkt innerhalb des div-Bereichs notiert ist, erhält noch keine violette Farbe, wohl aber das nächste b-Element im gleichen Satz, da dieses Element bereits zwei Ebenen unterhalb des div-Elements liegt (das i-Element liegt dazwischen).
Eine weitere Möglichkeit besteht darin, die Vererbung von Eigenschaften nach unten hin zu beschneiden.
div > p { color:blue; }
Mit dem Zeichen > wird in diesem Selektor festgelegt, dass p-Elemente, sofern sie innerhalb eines div-Bereichs vorkommen, nur dann blaue Textfarbe erhalten, wenn das p-Element in dieser Form vorkommt: <div><p></p></div>, also in der Ebene direkt unterhalb des div-Elements. Im obigen Beispiel ist innerhalb des div-Bereichs unter anderem auch eine Tabelle notiert, in der noch mal ein p-Element vorkommt. Dort greift die Formatierung der blauen Farbe nicht, weil das p-Element mehr als eine Verschachtelungsebene unterhalb des div-Elements liegt (die Tabellenelemente sind dazwischen).
Auch für Elemente, die auf gleicher Ebene hintereinander notiert werden, gibt es Selektoren:
div + p { margin-top: 40px; }
Mit dem Zeichen + wird in diesem Selektor festgelegt, dass p-Elemente, die unmittelbar auf ein div-Element hin folgen, einen Abstand von 40 Pixeln nach oben hin erhalten (margin-top: 40px;). Im HTML-Code weiter oben ist das beim vorletzten p-Element der Fall. Dieses folgt unmittelbar hinter dem div-Bereich auf gleicher Hierarchie-Ebene.
Mit Hilfe attributbedingter Formate können Sie in Selektoren angeben, dass Formatdefinitionen nur für Elemente mit bestimmten Attributen oder sogar nur für Elemente mit bestimmten Wertzuweisungen an Attribute gelten sollen.
input[src] { margin: 5px; } input[type=password] { color: blue; } td[abbr~=Berlin] { background-color:#FFFF00 } } *[lang|=en] { background-color: #FF0000; color: #FFFFFF; }
In dem Beispiel ist zunächst eine Formatdefinition für alle input-Elemente notiert, die ein Attribut src im einleitenden Tag haben (grafische Submit-Schaltflächen des Typs <input type="image" src="…">). Solche Elemente erhalten einen Randabstand von 5 Pixeln zu allen Seiten hin.
Mit dem Attribut-Selektor input[type=password] werden alle input-Elemente erfasst, die ein type-Attribut mit dem Wert password haben (Passworteingabefelder — <input type="password">).
Mit td[abbr~=Berlin] werden alle Tabellenzellen des Typs td erfasst, die ein Attribut abbr besitzen und bei denen in der Wertzuweisung an dieses Attribut das Wort Berlin vorkommt. Diese Syntax findet eines von mehreren, durch Leerzeichen getrennten Wörtern in Wertzuweisungen an Attribute.
Mit *[lang|=en] schließlich werden alle Elemente erfasst, die ein globales Attribut lang mit einem Wert, der mit en beginnt, aufweisen, und danach eventuell einen Bindestrich enthalten (wie en oder en-US).
Sie können Formate für Klassen definieren. Anwenden können Sie solche Klassen in HTML mit dem globalen Attribut class.
img.left { float: left; margin-right: 25px; margin-bottom: 12px; } img.right { float: right; margin-left: 25px; margin-bottom: 12px; } .lichtblau { color: rgb(210, 225, 250); } .fett { font-weight: bold; }
Im Beispiel werden zwei Klassen für das img-Element von HTML definiert, sowie zwei allgemeine Klassen. In allen Fällen müssen die Elemente entsprechende class-Attribute haben, damit die Formate angewendet werden. Selektoren für Klassen sind am charakteristischen Punkt erkennbar. Sie können eine Kombination von Elementnamen und Klassennamen erzwingen, wie bei img.left oder img.right, oder allgemeine, in jedem Element mögliche Klassennamen, wie im Beispiel bei .lichtblau und .fett. Im letzteren Fall beginnt der Selektor einfach mit einem Punkt (die Schreibweise *.lichtblau ist aber auch korrekt).
Angewendet werden die beiden ersten Beispielformate also auf Elemente mit Tags wie <img src="spd-logo.png" class="left"> oder <img src="cdu-logo.png" class="right">. Bilder mit class="left" erzeugen laut Formatdefinition einen Textumfluss, und zwar so, dass die Bilder links angeordnet werden und rechts von nachfolgendem Inhalt umflossen werden (float: left;). Zusätzlich werden Abstände zum umfließenden Text rechts und unten (margin-right und margin-bottom) definiert. Die Formatdefinitionen für den Selektor img.right bewirken den umgekehrten Fall. Das Bild wird rechts ausgerichtet und links vom nachfolgenden Inhalt umflossen. Dafür werden Abstände links und unten definiert.
Die Beispiel-Selektoren .lichtblau und .fett treffen auf Tags wie <h1 class="lichtblau"> oder <time class="fett"> zu. Beide Beispielselektoren definieren im obigen Beispiel nur jeweils eine Formateigenschaft. Es können natürlich auch mehrere sein. Doch gerade bei allgemeinen Klassen, die auf beliebige HTML-Elemente anwendbar sind, ist es oft sinnvoll, viele Einzeleigenschaften mit nur jeweils einer Formatdefinition zur Verfügung zu haben. Da es möglich ist, beim class-Attribut in HTML mehrere Klassennamen anzugeben, kann man auf diese Weise sehr schön kombinieren. Mit <blockquote class="lichtblau fett"> erreichen Sie also, dass der Elementinhalt des so ausgezeichneten blockquote-Elements die Formateigenschaften von .lichtblau und .fett erhält.
So wie Sie Formate für Klassen definieren können, die in HTML ein globales Attribut class haben, können Sie auch Formate für Elemente definieren, die ein id-Attribut haben. Da id-Namen dokumentweit eindeutig sein müssen, ist ein bestimmtes Element auf diese Weise ohne Umwege direkt für Selektoren adressierbar.
#roterBereich { position:absolute; top:130px; left:30px; width:320px; padding:10px; margin:0px; border:4px solid #EE0000; } div#blauerBereich { position:absolute; top:130px; left:400px; width:320px; padding:10px; margin:0px; border:4px solid #0000EE; }
In dem Beispiel werden zwei Formate für Elemente mit id-Attributen definiert, nämlich für HTML-Elemente mit id="roterBereich" und id="blauerBereich". Charakteristisch ist in diesem Fall beim Selektor das Gatterzeichen #, unmittelbar gefolgt vom id-Namen. Ebenso wie bei Elementen für Klassen können Sie dabei einen bestimmten Elementnamen erzwingen, wie im Beispiel div#blauerBereich, oder den Elementtyp offen lassen, wie im Beispiel #roterBereich. Der Unterschied ist, dass das Format mit dem Selektor div#blauerBereich nur auf <div id="blauerBereich"> angewendet wird, nicht aber auf <h1 id="blauerBereich">. Das Format des Selektors #roterBereich ist dagegen sowohl auf <section id="roterBereich"> als auch auf <tbody id="roterBereich"> anwendbar.
Unter Pseudo-Elementen werden hier HTML-Elemente verstanden, die im HTML-Quelltext keinen eigenen Niederschlag finden, aber durchaus einen wichtigen, wahrnehmbaren Zustand eines Elementinhalts bedeuten. Bestes Beispiel sind Links zu bereits besuchten Inhalten und Links zu noch nicht besuchten Inhalten. Beide werden in HTML mit <a href="…">…</a> markiert. Doch Browser stellen Links, sofern nichts anderes für sie angegeben ist, in unterschiedlichen Farben dar — abhängig davon, ob sich das Linkziel schon in der Browser-History befindet oder nicht. In CSS können Sie solche „nicht tatsächlich vorhandenen“ Elemente mit Hilfe von Selektoren ansprechen. Auch für unmarkierte Textstellen wie „erstes Zeichen eines Absatzes“ oder „erste Zeile eines Absatzes“ gibt es Selektoren.
a { font-weight:bold; } a:link { color: #EE0000; text-decoration: none; } a:visited { color: #EEAAAA; text-decoration: none; } a:hover { color: #EE0000; text-decoration: underline; } a:active { color: #0000EE; text-decoration: underline; }
Notieren Sie zuerst das betroffene HTML-Element, im Beispiel das a-Element für Hyperlinks. Dahinter folgt ein Doppelpunkt und dahinter eine erlaubte Angabe, im Beispiel etwa link (für noch nicht besuchte Verweisziele), visited (für bereits besuchte Verweisziele), hover (für Verweise, während der Anwender mit der Maus darüber fährt) und active (für angeklickte Verweise). Beachten Sie, dass dies keine frei wählbaren Namen sind, sondern feste Schlüsselwörter, und dass auch die Reihenfolge von Bedeutung ist, da später notierte Angaben die zuvor notierten überschreiben.
Das obige Beispiel zeigt auch, wie Sie CSS-Formate sinnvoll aufteilen können. Im Beispiel soll die Eigenschaft „fett dargestellt“ (font-weight: bold) für alle Links gelten. Deshalb wird sie in einem Format für das Element a notiert. Diejenigen Eigenschaften, die sich in den einzelnen Zuständen unterscheiden sollen — im Beispiel die Linkfarbe (color) und die Linkunterstreichung (text-decoration: none = nicht unterstrichen, text-decoration: unterline = unterstrichen) — werden dagegen in den Selektoren für Pseudo-Elemente notiert.
Regeln (Rules) < | > Formate
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.