Css/kurs - kronn.de

CSS: erweiterte Hintergründe und wieder Text

Die Hintergründigkeiten nehmen vorerst kein Ende, aber auch für die Darstellung von Text möchte ich noch ein paar Kleinigkeiten vorstellen.

Vorbereitung

In der diesmaligen Vorbereitung möchte ich nochmal auf die Einbindung von Stylesheets in eure HTML-Datei eingehen. Es gibt im wesentlichen drei verschiedene Möglichkeiten dazu:

ein <style>-Bereich in der HTML-Datei,
eine externe Stylesheet-Datei,
die direkte Formatierung von Elementen.

Die erste Variante müsste bekannt sein, da ich sie bereits im dritten Teil erwähnt habe. Die zweite Möglichkeit ist auf lange Sicht die beste, da in einer Datei die Formate für mehrere HTML-Dateien definiert sind. Änderungen am Layout können dann wirklich zentral vorgenommen werden.

Dazu speichert man alle CSS-Defintionen (ohne irgendeine <style>-Angabe) in einer extra Textdatei, die man dann z.B. unter style.css speichern sollte. Die Dateiendung .css ist zwingend, der eigentliche Dateiname kann natürlich frei gewählt werden. Wichtig ist nur, in den betreffenden HTML-Dateien, auf die dieses Layout angewendet werden soll, den richtigen Namen anzugeben. Die Stylesheets werden im <head>-Bereich angeben mit <link href="../styles/style.css" type="text/css" rel="stylesheet" />

Die (hier relative) Pfadangabe kann natürlich genauso frei gewählt werden wie der Dateiname. Jedenfalls solange, wie unter der Adresse auch das Stylesheet zu finden ist. ;-)

Die dritte Variante besteht darin, die CSS-Definitionen direkt zu den HTML-Tags zu schreiben. Dafür gibt es das style=""-Attribut innerhalb dessen Anführungsstrichen man wie gewohnt die Eigenschaften und Werte angeben kann. Obwohl diese Möglichkeit prinzipiell erlaubt ist, ist sie eigentlich nicht besser, als <font>-Tags zu verwenden. Der HTML wird nur aufgebläht und der große Vorteil, die zentrale Verwaltung des Aussehens der Seite, wird nicht genutzt.

Also: Für Testzwecke und Entwicklung ist die erste Variante die beste, da Inhalt und Aussehen in einer Datei stehen und so einfach anzupassen sind. Sobald aber mehrere Dateien auf das gleiche Layout zurückgreifen sollen, ist die zweite Möglichkeit, das .css-File auszulagern und zu verlinken die beste.

Hintergründige Textdekoration II

Wie jedesmal behaupte ich auch diesmal, dass CSS wesentlich mehr kann als nur HTML. Einen kleinen, vorsichtigen Schritt in diese Welt haben wir letztes mal gemacht. Heute wird es Zeit, den anderen Fuß hinterzusetzen und etwas weiter zu gehen.

Das Hintergrundbild

Normalerweise werden Hintergrundbilder der gesamten HTML-Seite zugewiesen. Genaugenommen erlaubt bereits der HTML-Standard, dem <body>-Tag ein Hintergrundbild zuzuweisen. CSS geht noch einen Schritt weiter: Jedem Element kann eine Hintergrundgrafik verpasst werden.

Aber fangen wir einfach und übersichtlich an. Jede HTML-Seite hat mindestens eine Überschrift. Diese erste Überschrift, <h1>, können und wollen wir mit einem schicken Farbverlauf etwas verzieren. Also:h1 { background-image:url(../bilder/verlauf.gif); }

Wie ihr sicherlich erraten habt, ist in der runden Klammer der relative Pfad angegeben. Anzumerken ist, dass diese Pfadangabe auf das Stylesheet bezogen ist. Deshalb ist es durchaus sinnvoll, das Stylesheet wie oben beschrieben auszulagern, damit man den Pfad nur an einer Stelle angeben muss. Aber zurück zu unserer Überschrift und vor allem der Grafik. Zur Verdeutlichung: Ich stelle mir hier einen Farbverlauf von weiß (links) nach schwarz (rechts) in waagerechter Richtung vor, als Hintergrundfarbe für die Überschrift ist (auch wenn ich es nicht extra erwähne) weiß vorgesehen.

Positionierung des Hintergrunds

Wenn wir nur das obige angeben, dürften wir uns ziemlich wundern. Die Grafik wird über die gesamte Fläche der Überschrift wiederholt, beginnend oben links. Das ist kein Fehler, sondern eine gewünschter Nebeneffekt. (It's a feature, not a bug!) Der Browser nimmt für nicht definierte Eigenschaften schlicht und ergreifend Standardwerte an. In unserem Fall werden zwei Standardwerte aktiv:background-position: top left; background-repeat: repeat;

Die Standardwerte sind natürlich im CSS-Standard selbst definiert, den das W3C herausgegeben hat. In Falle der Hintergründe ist der Abschnitt 14.2.1 Background properties maßgeblich.

Dadurch ist der Hintergrund, also unser schöner Farbverlauf, oben links positioniert und wird wiederholt. Anstatt von "top" und "left" können auch Zahlenwerte angegeben werden wobei der erste Wert von der oberen Seite zählt, der zweite von der linken Seite. Mit h1 { background-image:url(../bilder/verlauf.gif); background-position: top right; } wird die Grafik nicht nur hinter die Überschrift gelegt (was wir von einer Hintergrundgrafik ja auch erwarten), sondern wird auch noch oben rechts platziert. Andere Werte (neben Zahlenwerte) für background-position sind:

top = vertikal obenbündig.
middle = vertikal mittig.
bottom = vertikal untenbündig.

left = horizontal linksbündig.
center = horizontal zentriert.
right = horizontal rechtsbündig.

Wiederholte Grafik

Damit wir aber wirklich das erhalten, was wir erreichen wollen, müssen wir definieren, ob und wie die Grafik wiederholt werden soll. Dafür gibt es die bereits oben erwähnte Eigenschaft background-repeat. Für diese Eigenschaft gibt es vier verschiedene Werte:

repeat = horizontal und vertikal wiederholen (Voreinstellung),
repeat-x = nur horizontal wiederholen, also nur eine waagerechte Reihe,
repeat-y = nur vertikal wiederholen, also nur eine (senkrechte) Spalte,
no-repeat = gar nicht wiederholen, der Hintergrund wird nur als Einzelbild angezeigt.

Im Beispiel unserer <h1> ist es sinnvoll, das Hintergrundbild vertikal zu wiederholen, da es sich um einen waagerechten Farbverlauf handelt. Keine Angst, das hört sich nur komisch an. :-) Unser CSS sieht also folgendermaßen aus: h1 { background-image:url(../bilder/verlauf.gif); background-position: top right; background-repeat: repeat-y; }

Probiert es einfach mal aus: Erstellt (notfalls in Paint) eine kleine Grafik und kombiniert sie mit einer Überschrift. Wer sich nicht sofort an eine eigene Grafik machen will, kann natürlich jedes beliebige Bild verwenden.

Text-Besonderheiten

Wer schon jemals irgendwann einmal eine Textverarbeitung à la StarWriter, Word oder ähnliches verwendet hat, kennt Fettdruck (bold) und kursiven Text (italics). Vielleicht ist auch schonmal der Begriff Kapitälchen aufgetaucht. All das kann CSS (natürlich) auch.

Fett und Kursiv

Für den Fettdruck gibt es folgende Definition: b { font-weight:bold; }

Mögliche Werte dieser Eigenschaft sind:

normal = normale "Zeichendicke" (oder im Fachjargon: Schriftgewicht)
bold = fett
bolder = sehr fett
lighter = dünner
100,200,300,400,500,600,700,800,900 = extra-dünn (100) bis extra-fett (900).

Zu den Zahlenwerten muss man leider dazusagen, dass es in der Praxis kaum eine Schriftfamilie gibt, die wirklich alle Abstufungen unterstützt. Ich verlasse mich diesbezüglich vorrangig auf die Schlüsselwörter bold, normal und lighter. Wenn die gewählte Schrift ein Schriftgewicht nicht bietet, sucht sich der Browser einen naheliegenden Wert aus.

Kursive Zeichen werden über die Eigenschaft font-style definiert. Wenn wir also eine kursive dritte Überschrift haben wollen, schreiben wir h3 { font-style:italic; } in unser stylesheet.

Weitere Werte von font-style sind oblique, welcher genauso kursive Schrift wie italic bewirkt, und normal, was selbsterklärend sein dürfte und natürlich nicht mehr kursiv ist. :-)

kleine Großbuchstaben

Letztlich und endlich sind Kapitälchen möglich, also Kleinbuchstaben in der Form von Großbuchstaben (eben nur etwas kleiner), mithilfe der Angabe: h1,h2,h3 { font-variant:small-caps; }

Durch den Wert normal bekommt man wieder, naja, eben wieder normale Kleinbuchstaben.

Ausblick

In der nächsten Ausgabe möchte ich ein wenig auf Rahmen eingehen und verschiedene Abstände näher betrachten.