Styling für Webseiten

Transkript

1 Seite 1 Dies ist die deutsche Übersetzung des Tutorials zu CSS "Adding a touch of style" vom 8. April 2002 von Dave Raggett. Dave Raggett arbeitet für das World Wide Web Consortium (W3C) und ist einer der führenden Entwickler von HTML. Die englischsprachige Originalversion dieses Dokumentes finden Sie auf den Seiten des W3C unter Diese Übersetzung steht auf zur Verfügung. Ich habe mich bemüht, das Original sinnbewahrend wiederzugeben, dennoch kann diese Übersetzung Fehler enthalten. In diesem Falle oder auch für ein allgemeines Feedback bitte ich um Mitteilung an feedback@siteform.de. Dieses Dokument ist urheberrechtlich geschützt. Copyright W3C (MIT, INRIA, Keio), alle Rechte vorbehalten. Die Rechte an dieser Übersetzung liegen beim Übersetzer: Copyright 2-2 René von Bulmerincq und Siteform. Styling für Webseiten Dave Raggett, 8. April Dies ist eine kurze Einführung, wie Sie Ihre Webseiten optisch aufwerten können. Sie wird Ihnen zeigen, welche Möglichkeiten hierfür die Cascading Style Sheets Sprache (CSS) des W3C, aber auch HTML selbst bieten. Unser Weg wird uns dabei um die allermeisten Stolpersteine herumführen, die immer wieder von den verschiedenen Browsern und ihren unterschiedlichen Versionen gelegt werden. Damit Style Sheets (Formatvorlagen) funktionieren, ist es äußerst wichtig, fehlerfreies HTML zu schreiben. Ein bequemes Werkzeug, um HTML automatisch von Fehlern zu bereinigen, ist HTML Tidy. Dieses Tool räumt außerdem den Code so auf, daß er anschließend wesentlich leichter zu lesen und editieren sein dürfte. Ich empfehle Ihnen, Tidy regelmäßig über jede HTML-Seite laufen zu lassen, nachdem sie bearbeitet wurde. Zudem erzeugen einige HTML-Editoren ziemlich schlampiges Markup, was Tidy sehr effektiv säubern kann. Im folgenden lernen Sie, wie Sie: Start das Style-Element verwenden auf externe Style Sheets verweisen Seitenränder setzen linke, rechte und Erstzeilen-Einzüge setzen beliebigen Leeraum oberhalb und unterhalb erzeugen Schriftart, Schriftstil und Schriftgröße beeinflussen Rahmen und Hintergründe hinzufügen Farben mit Namen oder numerischen Werten angeben Formatierungen für Browser erzeugen, die CSS nicht verstehen Wir beginnen damit, Text und Hintergrund etwas Farbe zu geben. Dies erreichen Sie durch Verwendung des STYLE-Elementes, mit dem Sie die Formatierung für jedes Tag des Dokumentes festlegen können: <style type="text/css"> body { color: black; background: white; } </style> Zwischen <style> und </style> steht in einer festgelegten Syntax die sogenannte Style Rule (Stilregel). Jede Style Rule beginnt mit einem Tag-Namen, gefolgt von einer in { und } eingeklammerten Auflistung von Stil-Eigenschaften. Im obigen Beispiel erhält das Tag body eine bestimmte Stil-Eigenschaft. Wie Sie sehen werden, bestimmt das body-tag die Grundlage für das Aussehen Ihrer Webseite.

2 Seite 2 Jede Stil-Eigenschaft beginnt mit dem Namen der Eigenschaft, gefolgt von einem Doppelpunkt und anschließend einem Wert für diese Eigenschaft. Bei mehr als einer Stil-Eigenschaft für einen Tag werden die einzelnen Stil-Eigenschaften mit einem Semikolon getrennt. In unserem Beispiel erhält body zwei Eigenschaften: "color" für die allgemeine Textfarbe und "background" für die Farbe des Seitenhintergrundes. Ich empfehle, das Semikolon immer zu setzen, auch nach der letzten Eigenschaft. Farben können mit Namen oder numerischen Werten angegeben werden, z.b. rgb (255, 204, 204)für ein fleischiges Rosa. Die 3 Zahlen stehen für Rot, Grün und Blau und beschreiben die jeweilige Farbstärke zwischen 0 und 255. Genausogut können Sie aber auch eine Hexadezimale Angabe verwenden und den selben Farbton mit # erreichen. Weitere Details zu Farben folgen in einem späteren Abschnitt. Achten Sie darauf, das Style-Element ausschließlich im head des Dokumentes zu platzieren, dort wo sich auch das title-element befindet. Es sollte keinesfalls im body stehen. Auf ein externes Style Sheet verweisen Immer wenn Sie die gleiche Formatvorlage für verschiedene Seiten Ihres Webs verwenden möchten, empfiehlt es sich, ein einziges separates Style Sheet anzulegen, auf das von jeder Seite aus mit einem Link verwiesen wird. Dies erreichen Sie folgendermaßen: <link type="text/css" rel="stylesheet" href="style.css"> Das LINK-Tag gehört in den head des Dokumentes. Dasrel-Attribut muß den Wert "stylesheet" erhalten, damit der Browser weiß, daß das href-attribut auf ein Style Sheet verweist. Seitenränder setzen Webseiten sehen i.a. besser aus, wenn sie größere Seitenränder erhalten. Sie können den linken und rechten Rand mit den Stil-Eigenschaften "margin-left" und "marginright" bestimmen, z.b. <style type="text/css"> body { margin-left: 10%; margin-right: 10%; } </style> Hier werden beide Seitenränder immer auf 10% der Fensterbreite gesetzt, unabhängig davon, ob Sie Ihr Browserfenster vergrößern oder verkleinern. Linke und rechte Einzüge Um Überschriften noch mehr hervorzuheben, können Sie sie in den Randbereich des bodys einrücken, z.b. <style type="text/css"> body { margin-left: 10%; margin-right: 10%; } h1 { margin-left: -8%;} h2,h3,h4,h5,h6 { margin-left: -4%; } </style> Dieses Beispiel hat drei Style Rules: eine für den body, eine für h1 (die oberste Überschrift) und eine für die übrigen Überschriften (h2, h3, h4, h5 und h6). Die Ränder der Überschriften sind zum body-rand hinzuzufügen, wobei hier die Überschriften wegen negativer Werte links vom definierten body-rand beginnen. In den folgenden Abschnitten stehen die Beispiele der einzelnen Style Rules entweder innerhalb des style-elementes im head der Seite (falls vorhanden) oder in einem verlinkten externen Style Sheet. Oberen und unteren Leerraum kontrollieren In Bezug auf den Leerraum ober- und unterhalb von Überschriften, Absätzen usw. machen die Browser ihren Job ziemlich gut. Zwei Gründe, dies doch selbst kontrollieren zu wollen, sind: Sie möchten einen größeren Abstand vor einer besonderen Überschrift oder einem wichtigen Absatz, oder Sie wollen generell eine genaue Kontrolle für die Abstände.

3 Seite 3 Die Stil-Eigenschaft "margin-top" beschreibt einen Abstand nach oben und "marginbottom" einen Abstand nach unten. Um soetwas für alle h2-überschriften festzulegen, können sie folgendes schreiben: h2 { margin-top: 8em; margin-bottom: 3em; } Die Einheit em ist besonders geeignet, da sie zusammen mit der Größe der Schrift skaliert. Ein em ist dabei genau die Höhe der Schrift. Wenn Sie em benutzen, bewahren Sie das generelle Erscheinungsbild der Webseite - unabhängig von der Schriftgröße. Das ist um einiges sicherer als die Verwendung von Pixel oder Point, da diese Alternativen immer Probleme für Anwender bereiten, die große Schriften zum Lesen Ihres Textes benötigen. Points spielen gewöhnlich in Textverarbeitungs-Anwendungen eine Rolle, z.b. 10pt Text. Unglücklicherweise werden gleiche Point-Angaben von den verschiedenen Browsern unterschiedlich wiedergegeben. Was auf einem Browser noch wunderbar aussieht, kann auf einem anderen Browser unlesbar werden! Bei Verwendung von em vermeiden Sie solche Probleme. Um den Abstand für eine ganz bestimmte Überschrift zu definieren, müssen Sie diese Überschrift gesondert benennen. Sie erreichen dies mit einemclass-attribut im Markup, z.b. <h2 class="unterrubrik">start</h2> Die Style Rule hierzu sieht dann folgendermaßen aus: h2.unterrubrik { margin-top: 8em; margin-bottom: 3em; } Die Regel setzt sich zusammen aus dem Tag-Namen, einem Punkt und dem Wert des class-attributes. Passen Sie dabei auf, kein Leerzeichen vor oder nach dem Punkt zu setzen: die Style Rule wird dann nicht funktionieren. Es gibt noch andere Möglichkeiten, die Stileigenschaften für ein Element an einer ganz bestimmten Stelle im Dokument zu bestimmen, allerdings ist das class-attribut sehr flexibel. Wenn einer Überschrift ein Absatz folgt, wird der Wert für margin-bottom von der Überschrift nicht dem Wert für margin-top des Absatzes hinzugefügt. Es wird lediglich der größere der beiden Werte für den Abstand zwischen Überschrift und Absatz berücksichtigt. Diese Besonderheit betrifft margin-top und margin-bottom ungeachtet der Tags, die hierfür benutzt werden. Erstzeilen-Einzug Vielleicht möchten Sie einmal die erste Zeile eines jeden Absatzes einrücken. Folgende Style Rule ahmt nach, wie Absätze traditionell in Romanen beginnen: p { text-indent: 2em; margin-top: 0; margin-bottom: 0; } Sie rückt die erste Zeile eines jeden Absatzes um 2 em ein und unterdrückt gleichzeitig den sonst üblichen Abstand zwischen den einzelnen Absätzen. Schrift einstellen Dieser Abschnitt erklärt, wie Schrifttyp und -größe eingestellt werden und wie Sie kursiv, fett und andere Stileigenschaften hinzufügen können. Schriftstil Sehr häufige Stilarten sind die kursive und fette Textdarstellung. Die meisten Browser geben dasem-tag in kursiv und dasstrong-tag in fett wieder. Nehmen wir einmal an, Sie möchten em in fett-kursiv und strong in fetten Großbuchstaben haben: em { font-style: italic; font-weight: bold; } strong { text-transform: uppercase; font-weight: bold; } Falls Sie die Neigung verspüren, können Sie auch wie folgt Ihre Überschriften in Kleinbuchstaben wiedergeben: h2 { text-transform: lowercase; }

4 Seite 4 Schriftgröße einstellen Die meisten Browser verwenden für wichtigere Überschriften eine größere Schrift. Wenn Sie die Standardeinstellung der Schriftgröße überschreiben, laufen Sie Gefahr, daß Ihr Text zu klein zum Lesen wird - insbesondere bei der Verwendung von Point. Ich empfehle Ihnen deshalb, Schriften immer in relativen Größen anzugeben. Das folgende Beispiel gibt die Überschriften-Größe in Prozent an, und zwar relativ zur Schriftgröße von normalem Text: h1 { font-size: 200%; } h2 { font-size: 150%; } h3 { font-size: 100%; } Schriftart einstellen Höchstwahrscheinlich ist die von Ihnen favorisierte Schriftart nicht auf allen Browsern installiert. Als Ausweg können Sie verschiedene Schriften in der von Ihnen bevorzugten Reihenfolge aufführen. Weiterhin gibt es einige generische Schriftnamen, die garantiert zur Verfügung stehen, weshalb Sie am Ende Ihrer Auflistung immer eine dieser Schriftfamilien angeben sollten: serif, sans-serif, cursive, fantasy oder monospace. Zum Beispiel: body { font-family: Verdana, sans-serif; } h1,h2 { font-family: Garamond, "Times New Roman", serif; } Bei diesem Beispiel sollen die wichtigsten Überschriften vorzugsweise in Garamond angezeigt werden, falls dies nicht geht, in Times New Roman, und wenn auch das nicht möglich ist, letztendlich in der Standard-Serifenschrift des Browsers. Text in normalen Absätzen soll in Verdana, und falls dies nicht möglich ist, in der standardmäßigen serifenlosen Schrift des Browsers angezeigt werden. Die Lesbarkeit verschiedener Schriften hängt im allgemeinen eher von der Höhe der Kleinbuchstaben als von der Schriftgröße selbst ab. Schriftarten wie Verdana sind viel besser zu lesen als Schriftarten wie z.b. "Times New Roman" und sollten deshalb für normalen Absatz-Text bevorzugt verwendet werden. Vermeiden Sie Probleme mit Schriften und Rändern Meine erste Regel ist es, innerhalb der body-ebene Text zu vermeiden, der nicht in ein Block Level Element (Blockebene-Element) wie p eingeschlossen ist. Zum Beispiel: <h2>frühling in Wiltshire</h2> Blüte auf den Bäumen, Vogelgesang und das Gemecker der Lämmer auf den Feldern. Der Text nach der Überschrift riskiert, von einigen Browsern mit ungewollter Schrift und falschem Rand wiedergegeben zu werden. Sie sollten deshalb daran denken, solchen Text immer in einen Absatz einzuschließen, z.b. <h2>frühling in Wiltshire</h2> <p>blüte auf den Bäumen, Vogelgesang und das Gemecker der Lämmer auf den Feldern.</p> Meine zweite Regel lautet, die Schriftfamilie für pre -Elemente anzugeben, da einige Browser es vergessen, eine Festbreitenschrift zu verwenden, sobald Sie eine Schriftgröße oder andere Eigenschaften für pre definiert haben. pre { font-family: monospace; } Meine dritte Regel lautet, die Schriftfamilie für Überschriften-, p- und ul-elemente anzugeben, falls Sie beabsichtigen, Rahmen oder Hintergrund für Elemente wie div festzulegen. Dieser Work-Around ist für einen Bug, bei dem die Browser vergessen, auch hier die vererbte (inherited) Schriftfamilie zu verwenden und stattdessen zu der in den Browsereinstellungen definierten Standardschrift wechseln. h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; } Rahmen und Hintergrund hinzufügen

5 Seite 5 Sie können sehr einfach einen Rahmen um eine Überschrift, eine Liste, einen Absatz oder auch um die ganze Gruppe legen, wenn Sie diese Elemente mit einem div - Element umschließen. Zum Beispiel: div.kasten { border: solid; border-width: thin; width: 100% } Beachten Sie, daß einige Browser bei fehlender "width"-eigenschaft den rechten Rand zu weit nach rechts stellen. Das ganze kann im Markup dann wie folgt angegeben werden: <div class="kasten"> Der Inhalt innerhalb dieses DIV-Elementes ist eingeschlossen in einen Kasten mit einer dünnen Linie drumherum. </div> Es gibt eine begrenzte Auswahl an Rahmenarten: dotted (gepunktet), dashed (gestrichelt), solid (durchgezogen), double (doppelt), groove (3 D-Hohlkehle), ridge (3 D-Wulst), inset (3 D-Vertiefung), outset (3 D-Erhebung) und none (ohne). Die Eigenschaft border-width bestimmt die Rahmenbreite. Gültige Werte hierfür sind thin, medium und thick, aber auch eine bestimmte angegebene Breite wie z.b. 0.1em. Mit der Eigenschaft border-color geben Sie eine Rahmenfarbe an. Ein hübscher Effekt ist es, den Hintergrund eines Kastens mit einer durchgehenden Farbe oder einem gekachelten Bild zu versehen. Dies erreichen Sie mit der Eigenschaft background. Den mit div eingeschlossenen Kasten können Sie dann wie folgt füllen: div.color { background: rgb(204,204,255); padding: 0.5em; border: none; } Ohne eine explizite Angabe für die Eigenschaft border werden einige Browser lediglich den Hintergrund der gegebenen Zeichen einfärben. Die Eigenschaft padding erzeugt einen Abstand zwischen der Außenkante des eingefärbten Bereiches und dem in ihm enthaltenen Text. Sie können padding-werte für links, oben, rechts und unten angeben mit den Eigenschaften padding-left, padding-top, padding-right und padding-bottom, z.b. padding-left: 1em. Angenommen Sie wollen nur auf einigen Seiten einen Rahmen. Dann können Sie die Rahmen-Eigenschaften für jede einzelne Seite mit den Eigenschaften-Familien borderleft, border-top, border-right und border-bottom unabhängig definieren - jeweils in Verbindung mit dem passenden Suffix: style, width oder color, z.b. p.hinweis { padding-left: 0.2em; border-left: solid; border-right: none; border-top: none; border-bottom: none; border-left-width: thin; border-color: red; } womit ein roter Rahmen auf der linken Seite von jedem Absatz erzeugt wird, der im Markup die Klasse "hinweis" enthält. Farben zuweisen Einige Beispiele für das Definieren von Farben wurden weiter oben bereits behandelt. Hier nochmal eine kurze Auffrischung: body { color: black; background: white; } strong { color: red } Schwarzer Text auf weißem Hintergrund wird als Standard gesetzt, mit strong hervorgehobene Elemente werden hingegen rot dargestellt. Es gibt 16 Standard- Farbnamen, die ich weiter unten erkläre. Sie können auch dezimale Zahlenwerte für

6 Seite 6 rot, grün und blau verwenden, bei denen jeder Wert einen Bereich von 0 bis 255 einnimmt, z.b. ist rgb(255, 0, 0) das gleiche wie red. Ebenfalls dürfen Sie hexadezimale Farbwerte angeben, die mit einer Raute '#' eingeleitet werden, gefolgt von sechs hexadezimalen Ziffern. Ein Umrechner zwischen RGB- und Hex-Farbwerten steht weiter unten zur Verfügung. Linkfarben setzen Mit CSS können Sie unterschiedliche Farben für Ihre Hyperlinks definieren, z.b. eine Farbe für Links, denen Sie noch nicht gefolgt sind, eine andere Farbe für bereits besuchte Links, und eine aktive Farbe für den gerade angeklickten Link. Sogar für den Augenblick, wenn der Mauszeiger sich über dem Link befindet, können Sie eine Farbe bestimmen. :link { color: rgb(0, 0, 153) } /* für unbesuchte Links */ :visited { color: rgb(153, 0, 153) } /* für besuchte Links */ :hover { color: rgb(0, 96, 255) } /* wenn die Maus über dem Link ist */ :active { color: rgb(255, 0, 102) } /* wenn der Link angeklickt ist */ Vielleicht wollen Sie auch einmal Ihre Hyperlinks ohne Unterstrich darstellen. Dazu müssen Sie die Eigenschaft text-decoration auf none setzen, zum Beispiel: a.einfach { text-decoration: none } was den Unterstrich für Links wie den folgenden unterdrücken würde: Dies ist <a class="einfach" href="irgendwas.html">nicht unterstrichen</a> Die meisten Leute erwarten auf einer Webseite einen Hyperlink, wenn sie unterstrichenen Text sehen. Sie tun also gut daran, Hyperlinks unterstrichen zu lassen. Ähnlich sieht es für die Linkfarben aus: die meisten Leute halten unterstrichenen blauen Text für Hyperlinks. Es ist also auch ratsam, die Linkfarben unangetastet zu lassen, es sei denn, die Hintergrundfarbe würde den Text in solch einem Fall schwer lesbar machen. Farbblindheit Wenn Sie Farben verwenden, denken Sie daran, daß 5 bis10% der Menschheit in irgendeiner Form von Farbblindheit betroffen sind. Dies kann für solche Personen Schwierigkeiten verursachen, zwischen Rot und Grün oder Gelb und Blau zu unterscheiden. In seltenen Fällen besteht auch die Unfähigkeit, irgendeine Farbe zu erkennen. Sie sollten es daher unbedingt vermeiden, Farbkombinationen für Vorderund Hintergrund zu wählen, die es für Menschen mit Farbblindheit schwer machen, Ihren Text zu lesen. Farbnamen Der Standardsatz an Farbnamen ist: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, und Yellow. Diese 16 Farben sind in HTML 3.2 und 4.01 definiert und entsprechen den VGA-Grundfarben auf PCs. Die meisten Browser akzeptieren zwar auch einen erweiterten Farbnamenssatz, von dessen Gebrauch ist aber abzuraten. Farbnamen und srgb-werte black = "#" green = "#008" silver = "#C0C0C0" lime = "#000" gray = "#808080" olive = "#808" white = "#" yellow = "#" maroon = "#800" navy = "#080" red = "#" blue = "#" purple = "#880" teal = "#008080" fuchsia = "#" aqua = "#" Wie Sie sehen, ist der Farbwert "#880" das gleiche wie "purple".

7 Seite 7 Hexadezimale Farbwerte Werte wie "#" stellen Farben als hexadezimale Zahlen für Rot, Grün und Blau dar. Die ersten beiden Zeichen nach der Raute # geben die Zahl für Rot wieder, die nächsten beiden für Grün und die letzten beiden für Blau. Diese Zahlen bewegen sich immer im Dezimalbereich 0 bis 255. Wenn Sie die dezimalen Werte wissen, können Sie sie ganz einfach in eine hexadezimale Zahl konvertieren, indem Sie z.b. einen Taschenrechner verwenden, wie er auch Bestandteil von Microsoft Windows ist. Browsersichere Farben Neue Computer unterstützen zwar Tausende oder gar Millionen von Farben, viele ältere Farbsysteme können allerdings nur bis zu 256 Farben gleichzeitig anzeigen. Um damit zurechtzukommen, behelfen sich die Browser auf solchen Systemen mit einer festen Farbpalette. Das Ergebnis ist oft ein gesprenkeltes Bild, da der Browser versucht, für jeden Punkt im Bild eine Annäherung an die tatsächliche Farbe zu erreichen. Dieses Problem wird allmählich verschwinden, wenn die älteren Computer durch neue Modelle ersetzt wurden. Die meisten Browser unterstützen die gleiche sogenannte "browsersichere" Farbpalette. Diese Palette verwendet 6 gleichmäßig aufgeteilte Abstufungen für Rot, Grün und Blau und deren Kombinationen. Wenn Sie nur Farben von dieser Palette auswählen, können Sie diesen Sprenkel-Effekt vermeiden. Für den Hintergrund von Bildern ist dies besonders nützlich. Wenn der Browser die browsersichere Palette verwendet, erscheint der Seitenhintergrund in der ähnlichsten Farbe aus der Palette. Sofern Sie den Seitenhintergrund mit einer Farbe eingestellt haben, die nicht aus der browsersicheren Palette stammt, riskieren Sie für den Hintergrund unterschiedliche Farben, abhängig davon, ob der Computer indizierte oder True-Color-Farben benutzt. Die browsersichere Palette setzt sich aus den Farben zusammen, bei denen Rot, Grün und Blau auf folgende Werte beschränkt sind: RGB Hex CC FF Folgende Tabelle zeigt Ihnen die browsersicheren Farben mit den entsprechenden Hex-Werten. Mein Dank an Bob Stein für diese Zusammenstellung. Farbmuster mit der browsersicheren Palette sind bei für viele populäre Grafikpakete frei erhältlich.

8 Seite 8 Was ist mit Browsern, die CSS nicht unterstützen? Ältere Browser vor Netscape 4.0 und Internet Explorer 4.0 unterstützen CSS entweder überhaupt nicht oder sehr inkonsequent. Für diese Browser können Sie das Aussehen Ihrer Webseite auch mit HTML selbst beeinflussen. Farbe und Hintergrund festlegen Die generelle Farbeinstellung können Sie im BODY-Tag vornehmen. Das folgende Beispiel setzt die Hintergrundfarbe auf weiß und die Textfarbe auf schwarz. <body bgcolor="white" text="black"> Das Element BODY steht noch vor dem sichtbaren Inhalt der Webseite, also auch vor der ersten Überschrift. Ebenso können Sie hier die Farbe Ihrer Hyperlinks festlegen. Dafür gibt es drei Attribute: link für unbesuchte Links vlink für besuchte Links alink für die Farbe, wenn Sie auf den Link klicken Bei diesem Beispiel werden alle drei Linkfarben gesetzt: <body bgcolor="white" text="black" link="navy" vlink="maroon" alink="red"> Weiterhin können Sie den Browser dazu bringen, den Seitenhintergrund mit einem Bild zu kacheln, indem Sie das background-attribut mit der Netzadresse des Bildes verwenden, z.b. <body bgcolor="white" background="hintergrund.jpeg" text="black" link="navy" vlink="maroon" alink="red"> Es ist immer eine gute Idee, mit dem bgcolor-attribut zusätzlich eine Hintergrundfarbe anzugeben, falls der Browser einmal das Bild nicht anzeigen kann. Sie sollten dabei aufpassen, daß die von Ihnen gewählte Farbe keine Leseschwierigkeiten verursacht. Ein Extremfall kann folgendes sein: <body bgcolor="black"> Die meisten Browser zeigen Text standardmäßig schwarz an. Das Resultat in diesem Falle wäre schwarzer Text auf schwarzem Hintergrund! Viele Menschen leiden auch unter der einen oder anderen Form von Farbblindheit, und so kann zum Beispiel ein Olivgrün für manche Leute braun erscheinen. Ein anderes Problem tritt auf, wenn Sie versuchen, solch eine Webseite auszudrucken. Viele Browser ignorieren hierbei die Hintergrundfarbe und berücksichtigen nur die Textfarbe. Wenn der Text jetzt auch noch auf weiß gesetzt wurde, ist ein leeres Blatt beim Ausdruck das Endresultat. Deshalb ist folgendes nicht zu empfehlen: <body bgcolor="black" text="white"> Das bgcolor-attribut können Sie auch für Tabellen-Zellen verwenden, z.b. <table border="0" cellpadding="5"> <tr> <td bgcolor="yellow">farbige Tabellen-Zelle</td> </tr> </table> Tabellen sind für zahlreiche Layout-Effekte gut und werden auch ausreichend dahingehend mißbraucht. Künftig wird diese Rolle den Style Sheets zufallen, die ein präzises Layout mit weitaus weniger Aufwand erreichen. Schriftart, -größe und -farbe bestimmen Mit dem FONT-Tag können Sie eine Schriftart auswählen sowie deren Größe und Farbe vorschlagen. Das folgende Beispiel wählt die Farbe aus: Dieser Satz hat ein <font color="yellow">wort</font> in gelb.

9 Seite 9 Dasface-Attribut wählt die Schriftart, üblicherweise mit einer Auflistung von Schriftarten in bevorzugter Reihenfolge, z.b. <font face="garamond, Times New Roman">irgendein Text...</font> Dassize-Attribut kann dazu verwendet werden, eine Schriftgröße mit einer Zahl zwischen 1 und 7 auszuwählen. Wenn Sie ein - oder + Zeichen vor diese Zahl setzen, wird das als relativer Wert interpretiert. Nehmen Sie size="+1" für den nächstgrößeren Schriftgrad und size="-1" für den nächstkleineren Schriftgrad, z.b. <font size="+1" color="maroon" face="garamond, Times New Roman">irgendein Text...</font> Es gibt ein paar Dinge, die Sie unbedingt vermeiden sollten: Wählen Sie keine Farbkombinationen, die es farbenblinden Menschen unmöglich machen, Ihren Text zu lesen. Verwenden Sie niemals das font-tag, um normalen Text wie eine Überschrift erscheinen zu lassen. Überschriften sollten immer mit den Tags h1 bis h6 gekennzeichnet werden, passend zu der entsprechenden Wichtigkeit. Wo bekomme ich weitere Informationen? Um weitere Informationen zu CSS und unterstützende Werkzeuge zu erhalten, sollten Sie zur W3C Homepage für CSS gehen. Dort finden Sie auch Buchtipps zu HTML und CSS, zum Beispiel "Raggett on HTML 4", erschienen 1998 bei Addison Wesley. Schauen Sie sich auch"beginning XHTML" an, erschienen 2 bei Wrox Press. Für eine detailliertere Ausführung zu CSS empfehle ich "Cascading Style Sheets" von Håkon Wium Lie und Bert Bos, erschienen 1 bei Addison Wesley, wo Sie einen tiefen Einblick in CSS von den Entwicklern der Sprache selbst erhalten. Ich habe vor, diese Einführung mit weiteren Seiten zu CSS-Positionierung, -Druck und Aural Style Sheets (Style Sheets für Sprachausgabe) auszubauen. Viel Glück und beginnen Sie jetzt mit CSS! Copyright W3C (MIT, INRIA, Keio ), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.