CSS: Deko durch und mit Hintergrund
Im Wesentlichen haben wir das <font>-Tag seit der letzten Ausgabe ersetzen können. Als nächsten logischen Schritt nach der Textfarbe geht es mir heute um die Hintergrundfarbgebung. Außerdem möchte ich verschiedene Möglichkeiten zeigen, wie man Text etwas... nun ja: dekorieren kann.
Vorbereitung
Doch bevor wir uns mit der Praxis beschäftigen wieder etwas Theorie. Die allgemeine Schreibweise der CSS-Definitionen kennen wir ja schon: Element { Eigenschaft:Wert; } oder etwas praxisnäher: p { font-size:1em; }
Soweit ist das alles noch recht einfach und wahrscheinlich auch bekannt. Wenn wir einem Element, also zum Beispiel unserem Absatz zu mehreren Eigenschaften Werte mitgeben möchten, dann listen wir diese einfach innerhalb der {}-Klammern durch Semikolon getrennt auf. p { font-size:2em; color:#ff00ff; } ergibt demzufolge eine Absatzschrift, die 2em (also zwei Zeichengrößen = doppelt so groß) ist und in einem wunderbar-scheußlichen lila-pink dargestellt wird. Wenn wir die gleichen Angaben mehreren Elementen zuordnen wollen, also z.B. allen Überschriften die gleiche Schriftart zuordnen wollen, dann ist listen wir, durch Komma getrennt, die gewünschten HTML-Tags davor auf. h1,h2,h3,p { font-family:Times,serif; }
Weitere praktische Anwendungsbeispiele habe ich im letzten Teil bereits genannt. Leerzeichen sind innerhalb dieser Definitionen eigentlich beliebig zu setzen, solange dadurch weder die Eigenschaft, der Wert oder das Element auseinandergerissen wird. Nach dem : kann also genauso wie nach dem ; eine beliebige Anzahl von Leerzeichen oder Tabulatoren folgen. Letztlich ist das eine Frage des persönlichen Stils.
Hintergründige Textdekoration
CSS kann, dass betone ich immer wieder gerne, wesentlich mehr als nur HTML. Das <font>-Tag hat seinen Weg in die ewigen Jagdgründe ja bereits angetreten, es wird also Zeit für uns, einen Schritt in der Welt der Lebenden, in der Welt von CSS zu machen.
Hintergrundfarben
Nachdem Textfarben so einfach waren, können entsprechende Hintergrundfarben nicht mehr sonderlich kompliziert sein, oder? Richtig, über die CSS- Eigenschaft background-color können wir sie genauso einfach definieren. p { background-color:#ffffff; }
erzeugt dabei einen genauso weißen Hintergrund wie p { background-color:white; }
Allerdings sind die Farbnamen ja in anderer Hinsicht problematisch und werden deshalb in Zukunft von mir nicht mehr verwendet. Analog zu den bisherigen Methoden kann auch hier wieder lustig kombiniert werden, was das Zeug hält. body { background-color:#ffffff; }
h1,h2,h3 { background-color:#0000ff; }
Zusammen mit der Text-Farbgebung lassen sich hier schöne Effekte erzielen.
Dekorative Extras
Andere, ebenfalls bemerkenswerte Effekte kann man mit der Eigenschaft text-decoration hervorrufen. So ist es möglich, das <blink>-Tag ebenso wie die <u>nterstreichung nur mit CSS zu bewirken.
Die Unterstreichung kann man über den Wert underline, eine überstreichung :-) mit dem Wert overline erzeugen. Durchgestrichenen Text kann man mit dem Wert line-through definieren. Probier einfach mal folgendes aus: h1 {text-decoration:underline; }
h2 {text-decoration:overline; }
h3 {text-decoration:line-through; }
Die Idee zu overline dürfte nach dem ersten Kasten Bier entstanden sein, oder fällt euch eine bessere Erklärung ein? "Ich finde, wir sollten Text nicht nur unter- und durch- sondern auch überstreichbar machen können. Das ist sicherlich cool!" So oder so ähnlich stelle ich mir die Konferenz vor...
Wenn man z. B. unter- und überstrichen mit durchgestrichen kombinieren will, kann man die Werte unsortiert aufzählen: h1 {text-decoration:underline overline line-through; }
Ob das Ergebnis wirklich so gewollt ist, muss jeder mit sich selbst ausmachen. Technisch machbar ist es auf jeden Fall. Aber es gibt noch eine weitere text-decoration, die unser spezielles Augenmerk verdient.
Netscape führte bereits in der Version 1.1, also ziemlich frühzeitig die Möglichkeit ein, Text blinken zu lassen. Da dieses zugegeben nette Extra aber niemals HTML-Standard wurde, unterstützen es nur Netscape-Browser. Moderne standardkonforme Browser verstehen aber auch CSS und damit auch die Eigenschaft text-decoration.
h1 {text-decoration:blink; } führt also in guten Browsern zu blinkendem Text. Der Internet Explorer 6 unter Windows versteht das leider noch nicht, aber da es jetzt zum CSS-Standard gehört, wird auch dieses Feature irgendwann für alle Browser möglich sein. Ganz sicher ist natürlich die Doppelvariante, im HTML-Quellcode <blink> zu verwenden und im CSS-File blink {text-decoration:blink; } anzugeben.
Sofern in der HTML-Datei das blink-Tag vorkommt, wird dieses dazu verwendet, auch in andernen Browser Text blinken zu lassen. Leider ist dieses Vorgehen nicht Standardkonform, da <blink> kein gültiges HTML-Element ist. Wer es aber bisher verwendet hat, sollte das entsprechende CSS verwenden, damit der Nutzerkreis erweitert wird, ohne dass ältere Browser das Nachsehen haben. Außerdem ist es eine verhältnismäßig kleine Änderung.
Klassenkämpfe
Für neue Seiten schlage ich vor, das <span>-Tag zu verwenden. Dieses Element hat keine spezielle Funktion und eignet sich daher speziell für folgende Vorgehensweise. CSS bietet die Möglichkeit Klassen zu definieren. Dieser Klasse können dann, wie auch einem HTML-Element wieder CSS-Definitionen übergeben werden. In der Praxis sieht dass dann so aus:
HTML:
<p>blabla Text <span class="blinkend">blinkender Text</span> blabla und hier wieder normal.</p>
CSS:
.blinkend {text-decoration:blink; }
Die Klasse wird also in HTML über das Attribut class="" angegeben und in CSS durch einen vorangehenden Punkt und den Klassennamen mit style-Informationen versorgt. Wenn man zum Beispiel eine Klasse "wichtig" hat, kann man diese an mehrere HTML-Elemente vergeben:
HTML:
<h1 class="wichtig">Achtung! Achtung!</h1>
<p>Dieser Text enthält eine <span class="wichtig">Warnung</span> und dann wieder normalen Text</p>
In der CSS-Definition können wir nun festlegen, ob die Klasse nur in Zusammenhang mit einem bestimmten Element oder immer gelten soll.
CSS, Variante 1
h1.wichtig {text-decoration:blink; }führt zu anderen Ergebnissen als
span.wichtig {color:#ff0000; }
CSS, Variante 2
.wichtig {color:#ff0000; text-decoration:blink; }
Wer das nicht glaubt, muss es ausprobieren. Ich selbst staune immer wieder, was man mit dieser eigentlich recht einfachen Regel erreichen kann.
Klassendefinitionen erweitern die Möglichkeiten wieder einmal enorm. Nun kann man Unterschiede zwischen Absätzen machen indem man jedem Absatz eine Klasse zuteilt. Einleitungen sind vielleicht in blauer Schrift, während der restliche Text schwarz auf weiß ist. Alles, was wichtig ist, soll außerdem unterstrichen sein.
p {color:#000000; background:#ffffff; }
p.einleitung {color:#0000cc; }
.wichtig {text-decoration:underline; }
Interessant und angenehm wird das vor allem, wenn man sich nach zwei Monaten (und mehreren HTML-Seiten) überlegt, dass die Einleitung gar nicht blau, sondern grün sein soll. Eine kleine Änderung, schon ist alles fertig.
Ausblick
Mittlerweile sind eigentlich schon beinahe die wichtigsten Spielzeuge verteilt. Aber CSS bietet noch weitaus mehr Möglichkeiten, was Hintergründe betrifft und beherrscht natürlich auch Fettdruck. Doch das alles jetzt hier auch noch zu erzählen würde den Rahmen doch arg strapazieren, wenn nicht sogar sprengen.