This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
David Sawyer McFarland Deutsche Übersetzung von Jorgen W. Lang
css
MISSING MANUAL
David Sawyer McFarland Deutsche Übersetzung von J0rgen W. Lang
POGUE PRESS'
O'REILLY·
Beijing· Cambridge· Famham . Köln · Sebastopol· Taipei· Tokyo
Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag. Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung fiir eventuell verbliebene Fehler und deren Folgen. AUe Waren namen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen. Der Verlag richtet sich im Wesentlichen nach den Schreibweisen der Hersteller. Das Werk cinsch1ießl.ich aller seiner Teile ist urheberrechtlieh geschützt. Alle Rechte vorbehalten einsch1ießlich der Vervielfältigung. Übersetzung, Mikro verfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
Kommentare und Fragen können Sie gerne an uns richten: O'Reilly Verlag Balthasarstr. 81 50670 Köln E-Mail: [email protected]
Copyright der deutschen Ausgabe: by O'Reilly Verlag GmbH & Co. KG I. Auflage 2009
02009
Die Originalausgabe erschien 2006 unter dem ntel CSS: The Missing Manual bei Pogue PresslO'Reilly Media, lnc. Der Name .Missing Manual«, das korrespondierende Logo sowie die Bezeichnung .Das fehlende Hand buch zu Ihrer Software« sind eingetragene Warenzeichen von Pogue PresslO'Reilly Media.
Bibliografische Information Der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.tkabrufbar. Deutsche Übersetzung und Aktualisierung: '0rgen W. Lang, Oberlauterbach Lektorat: lnken Kiupel, Köln Korrektomt: Sibylle Feldmann, Düsseldorf Satz: lU-satz, Husby, www.drei-satz.de Produktion: Andrea Miß, Köln Belichtung. Druck und buchbinderische Verarbeitung: Druckerei Kösel, KrugzeU; www.koeselbuch.de
ISBN
978-3-89721-890-1
Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt
116 Zeilen einrücken und unerwünschte Ränder entfernen........................ 117 Oen ersten Buchstaben oder die erste Zeile eines Absatzes formatieren. . . . . . . . . .
Über den Autor David Sawyer McFariand ist Präsident der Sawyer McFariand Media, Ine., einer Firma für Website-Entwicklung und -Training in Portland, Oregon. David entwirft seit 1995 Websites, sein ers tes Werk war ein Onlinemagazin für Profis aus der Kommunika tionsbranche. Er arbeitete als Webmaster für die University of California in Berkeley und das Berkeley Multimedia Research Center. Außerdem leitete er das komplett CSS-basierte Redesign von Macworld.com. Neben dem Webdesign arbeitet David als Autor, Trainer und Dozent. Er unterrich tete unter anderem an der UC Berkeley Graduate School of Journalism, dem Cen ter for Electronic Art, dem Academy of Art College. dem Ex'Pressions Center for New Media und der Portland State University. Artikel von David fmden Sie bei spielsweise in den Magazinen Practical
Web Design, MX Developer's Journal, Mac
world magazine und CreativePro.com. Rückmeldungen zu diesem Buch sind willkommen. Bitte benutzen Sie hierfür die Adresse
Über das kreative Team Nan Barber (Lektorin) ist seit den Anfangen mit der Missing Manual-Reihe betraut. Das sind inzwischen so viele Jahre, dass sie sich noch daran erinnert, wie sie ihren Computer mit einer Floppy-Disk gestartet hat. Peter Meyers (Lektor) arbeitet bei O'Reilly Media als Lektor für die Missing Manual-Reihe. Er lebt mit seiner Frau in New York City.
Die fehlenden Danksagungen
XI
Die fehlenden Danksagungen Mark Levitt (Fachgutachter) ist Senior Web Producer für die Online Publishing Group von O'Reilly Media. Ursprünglich von der Informatik kommend, liegen seine beruflichen Schwerpunkte auf interaktiven Medien. Lernmedien sowie auf Webentwicklung. Er ist bekannt dafür, zu allen Tageszeiten Müsli zu essen.
Justin Watt (Fachgutachter) arbeitet momentan als Author Services Engineer für Federated Media Publishing, einer Firma für Werbung in Blogs aus Sausalito. Kali fornien. Sein Blog fmden Sie unter justinsomnia.org, wo Sie sich über seine Aben teuer in Nordkalifornien informieren können.
Jergen W. Lang (Übersetzer) lebt als freier Übersetzer, Webdesigner. Programmie rer. Dozent und Musiker im Elsass. Als er sich 1996 seinen ersten Mac zulegte, ahnte er noch nicht, dass er einmal über 14 Bücher für den O'Reilly-Verlag überset zen würde. Eines davon halten Sie gerade in den Händen. Zu erreichen ist J0rgen unter der E-Mail-Adressejwl@worldmusic de. .
Danksagungen Vielen Dank an alle. die an diesem Buch mitgearbeitet haben, inklusive meiner Stu denten, die mir immer wieder helfen, technische Themen mit den Augen eines
Anfcingers zu sehen. Danke an meine technischen Sachverständigen Mark Levitt und Justin Watt. die mich vor so manch peinlichem Fehler bewahrt haben. Danke auch an Zoe Gillenwater für ihre wertvollen Ratschläge und all die großzügigen Seelen auf der CSS-Discuss-Mailingliste, die ihr reichhaltiges Wissen über CSS mit mir geteilt haben. Außerdem sind wir den vielen Webdesignern zu Dank verpflich tet. die neues Terrain für die kreative Nutzung von CSS erschlossen haben und ihre Entdeckungen mit der Webdesign-Gemeinschaft teilen. Danke natürlich auch an David Pogue. dessen unermüdliche Begeisterung und Ausdauer eine große Inspiration sind. Danke ebenfalls an Nan Barber für die Ver feinerung meiner Texte, Peter Meyers für das Aufpolieren meiner Formulierungen und dafür. mich "auf der Spur" zu halten. Danke an meine Frau Scholle für die Motivation, dieses Projekt zu Ende zu bringen. und an meinen Sohn Graham, der keine Ahnung hat und dem es auch egal ist, was ich beruflich mache.
Die Missing Manual-Reihe Missing Manuals sind clevere, verständlich geschriebene Handbücher zu Software und Gadgets, Anwendungen und Sprachen, die ohne gedruckte Handbücher daherkommen (also praktisch alle). Jedes Buch hat einen handverlesenen Index und konkrete Querverweise zu bestimmten Seiten (nicht nur zu Kapiteln). Auf deutsch liegen folgende Missing Manuals vor:
XII
•
JavaScript: Missing Manual von David Sawyer MeFarland
•
Websites: Missing Manual von Matthew MacDonald (in Vorbereitung)
•
Mac OS X: Missing Manual Tiger-Ausgabe von David Pogue
CSS: Missing Manual
Die fehlenden Danksagungen • •
Mac OS X Leopard: Missing Manual von David Pogue David Pogues Digitale Fotografie: Missing Manual von reitung)
David Pogue (in Vorbe-
•
iPhone: Missing Manual von David Pogue & Christian Hieber
•
iPod: Missing Manual von J.D. Biersdorfer
•
Dein Gehirn: Das fehlende Handbuch von Matthew MacDonald
Die fehlenden Danksagungen
XIII
Einleitung
Cascading Style Sheets. kurz CSS. geben Ihnen die vollständige kreative Kontrolle über das Layout und die Gestaltung Ihrer Webseiten. Mithilfe von CSS können Sie Texte mit Überschriften. Initialen (schmückende Anfangsbuchstaben) und Rah men versehen, die ins Auge springen und die Sie sonst nur aus Hochglanzmagazi nen kennen. Sie können Bilder mit großer Genauigkeit im Dokument platzieren, mehrspaltige Layouts verwenden und Ihre Textlinks mit dynamischen Rollover Effekten hervorheben. Aber das muss doch ganz schön schwierig sein, oder? Ganz und gar nicht! Schließ lich wurde CSS entwickelt. um die Gestaltung von Webseiten zu vereinfachen. Auf den folgenden Seiten werden Sie die Grundlagen von CSS kennenlernen. Schon in Kapitel 1 werden Sie Ihre erste CSS-basierte Webseite anlegen.
Wie C55 funktioniert Wenn Sie in Textverarbeitungsprogrammen wie Microsoft Word oder Layoutpro grammen wie Adobe InDesign bereits mit Stilvorgaben gearbeitet haben, wird Ihnen CSS bekannt vorkommen. Ein Stil bzw. eine Stildefinition ist einfach eine Regel, die beschreibt, wie ein bestimmter Teil einer Webseite formatiert werden soll. Und ein
Stylesheet ist dann eine Sammlung mehrerer Stildefmitionen.
CSS ist nicht das Gleiche wie HTML. Mit HTML strukturieren Sie ein Dokument, indem Sie es in Überschriften, Absätze, Aufzählungslisten und so weiter aufteilen. CSS ist eine vollkommen andere Sprache. Aber sie arbeitet Hand in Hand mit Ihrem Webbrowser, damit die Informationen im HTML-Dokument gut aussehen. So verwenden Sie beispielsweise HTML, um einen bestimmten Satz als Überschrift ersten Grades «h 1 » zu kennzeichnen, die den Inhalt der übrigen Seite einleitet.
Einleitung
xv
Die Vorteile von (55
Mit CSS sorgen Sie dafür, dass diese Überschrift beispielsweise in großen, roten, fett gedruckten Buchstaben dargestellt wird und 50 Pixel vom linken Rand des Ansichtsbereichs beginnt. In CSS geht es also darum, dass Erscheinungsbild von HTML-Dokumenten zu steuern (und bestenfalls zu verbessern). Sie können auch Stilvorgaben entwickeln, die spezielle Stile für die Gestaltung von Bildern definieren. So könnte eine Stildeftnition beispielsweise dafür sorgen, dass ein Bild am rechten Rand einer Webseite angezeigt wird. Außerdem wird es mit einem farbigen Rand umgeben und durch einen 50 Pixel breiten Außenabstand vom umgebenden Text getrennt. Sobald Sie einen Stil angelegt haben, können Sie diesen auf Texte, Bilder, Über schriften und andere Seitenelemente anwenden. So können Sie beispielsweise eine bestimmte Schriftart sowie -farbe und -größe festlegen, die sofort die Darstellung verändern. Sie können aber auch bestimmte HTML-Elemente mit eigenen Stilvor gaben versehen, sodass z.B. alle Überschriften ersten Grades «hl>-Tags) auf der gesamten Website im gleichen Stil dargestellt werden, egal an welcher Stelle sie stehen.
Die Vorteile von C55 Bevor es CSS gab, waren Webdesigner auf die in HTML selbst vorhandenen Mög lichkeiten für Layout und Gestaltung beschränkt. Wenn Sie sich eine Webseite aus dem Jahr 1995 ansehen, wissen Sie, was hier mit beschränkt gemeint ist. Wie Sie später in dieser Einleitung sehen werden, bildet HTML zwar immer noch die Grundlage der meisten Seiten im World Wide Web, aber es ist einfach kein Design werkzeug. Sicher bietet HTML auch weiterhin einfache Formatierungsoptionen für Texte, Bilder, Tabellen und andere Elemente, und Webdesigner mit genügend Geduld und Akribie können Seiten auch mit reinem HTML-Code gut aussehen lassen. Die resultierenden Dokumente sind aber meistens überladen mit Code und dazu behäbig in der Darstellung, die oftmals kaum vorhersehbar ist. Im Gegensatz
XVI
dazu hat CSS folgende Vorteile:
•
Stylesheets bieten wesentlich mehr Formatierungsoptionen als HTML. Mit CSS können Sie Absätze so formatieren wie in Büchern und Zeitungen (z.B. indem Sie die erste Zeile einrücken und ohne Zwischenräume zwischen den Absätzen darstellen). Sie können den sogar den Durchschuss (also den Zeilenabstand) anpassen, wenn Ihnen danach ist.
•
Binden Sie Ihr Hintergrundbild per CSS in eine Seite ein, können Sie entschei den, wie (und ob) das Bild gekachelt (vertikal und horizontal wiederholt) wer den soll. Diese Möglichkeiten fehlen in HTML komplett.
•
Der Platzbedarf für CSS-basierte Stildefinitionen ist wesentlich geringer als die HTML-eigenen Formatierungsoptionen, wie beispielsweise das vielgehasste -Tag. Mit CSS können Sie eine textüberladene Webseite um viele Kilo{byte) leichter machen. Das Ergebnis sieht nicht nur besser aus, sondern wird auch schneller geladen.
CSS: Missing Manual
HTML:
•
Das Grundgerüst
Außerdem erleichtern Stylesheets die Aktualisierung Ihrer Site. Sie können sämtliche Stildefinitionen in einem externen Stylesheet speichern, das alle Sei ten Ihrer Site gemeinsam nutzen. W enn Sie einen Stil ändern, wirkt sich diese Änderung sofort auf
sämtliche
Teile Ihrer Site aus, in denen diese Definition
verwendet wird. Sie können das Aussehen Ihrer Seiten also komplett umkrem peln, indem Sie lediglich ein einziges Stylesheet verändern. _: HTMl i� mittlerweile so betagt, dass das World Wid€ Web Consortium I!NJQ, die für Defini
tion der Standards im Web zuständige Organisation, viele HTMl-Tags als deprecated (nicht mehr offiziell unterstützt veraltet) bezeichnet Hierzu gehören besonders Tags, die für die Darstellung verwendet wurden (wie beispielsweise das uns-Tag).
Was Sie wissen müssen Wir gehen in diesem Buch davon aus, dass Sie bereits über HTML-Grundwissen (und vielleicht auch schon über ein wenig Erfahrung mit CSS) verfügen, dass Sie vielleicht schon die eine oder andere Website gebaut haben (oder zumindest mal eine Webseite) und dass Sie sich mit den Tags «html>.
, ,
usw.) auskennen, aus denen die Hypertext Markup Language besteht. Ohne HTML ist CSS quasi wertlos. Wenn Sie also weiterkommen wollen, müssen Sie zumindest wissen. wie Sie mit einfachen HTML-Mitteln eine Webseite erstellen können. Haben Sie bereits Webseiten mit HTML erstellt. werden aber das Gefühl nicht los, dass Ihr Wissen ein wenig angestaubt ist, geben wir Ihnen auf den folgenden Seiten einen kleinen mentalen Staubwedel an die Hand.
1IhIweIs: Damit Sie beim lernen von HTMl keine nassen Füße bekommen, gibt es eine Reihe von kos tenlosen Onlineanleitungen. Die umfassendste deutschsprachige Seite ist wohl http./lde.selfhtml.orglvon
Stefan Münz. Für leute, die des Englischen mächtig sind, gibt es außerdem HTMl Dog (www.html dog.comjguidesjhtmfbeginnerf) und W3Schools (www.w3schoofs.comjhrmff). Wenn Sie gedruckte Setten bevorzugen, empfehlen wir Ihnen Websites erstellen: Missing Manual oder HTML mit C55 & XHTML von Kopf bis Fuß (beide O'Reilly Verlag).
HTML: Das Grundgerüst HTML (Hypertext Markup Language) verwendet eine Reihe einfacher Anweisun gen.
Tags genannt, um die verschiedenen Teile einer Webseite zu strukturieren. Der
folgende HTML-Code erzeugt eine (sehr) einfache Webseite:
. •
Alle Tags (auch die leeren) müssen geschlossen werden. Um in XHTML einen Absatz zu markieren, müssen Sie mit
beginnen und mit
aufhören. Das Problem ist nur, dass manche Tags lieber allein unterwegs sind, also keine Paare
bilden. Diese werden als
leere Tags
bezeichnet, weil ihnen das schließende
Gegenstück fehlt. Ein Beispiel ist der Tag für den Zeilenumbruch. Einen leeren Tag schließen Sie, indem Sie vor die schließende spitze Klammer einen Schräg strich stellen, Z.B. .
Die Auswirkungen der Dokumenttyp-Deklaration Im XHTML-Beispielcode ist alles unterhalb des -Teils
genau so
wie im
zuvor gezeigten HTML-Beispiel. Dafür unterscheiden sich die Informationen
am
Anfang der Seite besonders stark. Jede XHTML-Seite beginnt mit ein paar Zeilen, die beschreiben, um welche Art von Dokument es sich handelt und nach welchem Standard sie sich richtet. Diese
Dokumenttyp-Definitionen
(oder kurz
DTD)
ver
weisen auf Dateien im Internet, die im Einzelnen regeln, wie dieser Dateityp zu behandeln ist. In unserem Fall besagt die DTD nur, dass es sich um ein XML-Dokument handelt,
genauer gesagt um ein XHTML-Dokument. Der Dokumenttyp spielt eine entschei dende Rolle dabei, wie der Browser die CSS-Anweisungen umsetzt. Ein falscher Dokumenttyp kann leicht dafür sorgen, dass bestimmte Versionen des Internet Explorer die Darstellung einer Seite, die viel CSS verwendet, komplett durcheinan derWÜTfelt. Mehr zu Dokumenttypen und deren Bedeutung für CSS fmden Sie in Kapitel I.
Einleitung
XXI
Software für (SS
Hillwels: Das scheint für den Anfang eine Menge Stoff zu sein, wenn Sie noch nicht so viel Erfahrung mrt dem Erstellen von Webserten haben. Stimmt. In Kaprtel l werden Sie aber auch ein Werkzeug kennenler nen, mrt dem Sie sicherstellen können, dass Ihr XHTML-Code korrekt ist: den
W3C Vofidotor. Er überprüft
Ihre Seite und teilt Ihnen mit, ob alles in Ordnung ist Noch wichtiger ist es allerdings, dass Sie auch noch lernen, CSS-freundlichen XHTML-Code zu schreiben.
Software für CSS Um (X)HTML- und CSS-basierte Webseiten zu erstellen, brauchen Sie nicht viel mehr als einen einfachen Texteditor wie Notepad (Wmdows) oder TextEdit (Mac). Nachdem Sie Ihre ersten paar hundert Zeilen HTML und CSS eingegeben haben, werden Sie sich aber ein Programm wünschen, das die Arbeit mit Webseiten etwas leichter macht. Im folgenden Abschnitt fmden Sie einige häufig verwendete Pro gramme; manche gibt es kostenlos, andere müssen Sie kaufen. Hillwels: Es gibt Hunderte verschiedener Werkzeuge, die Ihnen beim Erstellen von Webseiten helfen können. Daher ist die folgende Liste auch nicht vollständig. sondern eher so eine Art .Greatest Hits« der Programme, die CSS-Fans heutzutage am liebsten benutzen.
Kostenlose Programme Für das Erstellen und Bearbeiten von Webseiten und Stylesheets gibt es reichlich kostenlose Programme. Wenn Sie immer noch mit Notepad oder TextEdit herum basteln, probieren Sie es doch einmal mit einem der folgenden Programme:
www.chami.com/htmI-kit/). Dieser mächtige (X)HTML Editor besitzt eine Reihe nützlicher Fähigkeiten, z.B. die Möglichkeit einer Websei tenvorschau direkt im Programm (damit Sie nicht ständig zwischen Editor und Browser wechseln müssen), außerdem Abkürzungen für HTML-Tags und vieles mehr. HTML-Kit (Windows,
TextWrangler (Mac,
www.barebones.com/products/textwrangler/). Dieses kosten
lose Programm ist im Prinzip eine abgespeckte Version von BBedit, einem hoch entwickelten und wohlbekannten Textbearbeitungsprogramm für den Mac. Text Wrangler besitzt zwar nicht alle Fähigkeiten von BBEdit, verfügt aber immerhin über Syntax-Highlighting (d.h.• (X)HTML-Tags und CSS-Eigenschaften werden in unterschiedlichen Farben hervorgehoben, wodurch Sie die einzelnen Teile einer Seite leichter unterscheiden können), FTP-Unterstützung (damit Sie die Dateien direkt aus dem Programm heraus auf einen Webserver hochladen können) und vieles andere.
Kommerzielle Software Programme für die Webentwicklung reichen von kostengünstigen Texteditoren bis hin zu kompletten Website-Konstruktionswerkzeugen mit allem Drum und Dran:
XXII
CSS: Missing Manual
Über die§e§ Buch
•
EditPlus (Windows. www.editplus.com) ist ein preiswerter ($35) Texteditor. Er verfügt über Syntax-Highlighting, FTP-Funktionen. automatische Codevervoll ständigung und andere handgelenkschonende Eigenschaften.
•
skEdit (Mac, www.skti.org) ist ebenfalls ein günstiger ($34,95) Webseiten Texteditor. Seine Funktionen umfassen FTP-/SFTP-Unterstützung, Syntax HigWighting, automatische Codevervollständigung, eine Funktion zum »Auf räumen_ von HTML-Code und vieles mehr.
•
BBEdit (Mac, www.barebones.com/products/bbedit). Dieser viel geliebte Texte ditor für den Mac ($125. Studenten: $49) ist vollgepackt mit Werkzeugen zur Arbeit mit HTML, XHTML. CSS und diversen anderen Programmiersprachen. BBedit enthält eine Menge nützlicher Werkzeuge und Hilfestellungen zum Erstellen von Websites.
•
Dreamweaver (Mac und Windows, http://www.adobe.com/de/products/dream weaver/) ist ein visuelles Editorprogramm für Websites (570 €). Sie können die Seiten so bearbeiten. wie sie nachher im Webbrowser dargestellt werden. Das Programm verfügt außerdem über einen mächtigen Texteditor und ausgezeich nete Werkzeuge zum Erstellen und Verwalten von CSS. Eine vollständige Anlei tung zu diesem mächtigen Programm finden Sie beispielsweise im Buch Dreamweaver CS4: The Missing Manual.
•
Expression Web Designer (Windows, www.microsojt.com) ist Microsofts neues Webdesignprogramm. Es ersetzt FrontPage und enthält eine Menge professio neller Webdesignwerkzeuge. inklusive einer recht guten Unterstützung bei der CSS-Ersteilung_
•
Coda
(Mac. www.panic.com/coda) ist ein recht neues Webdesignwerkzeug für den Mac ($99). Es fasst alle Entwicklungsschritte in einem Fenster zusammen und enthält neben umfassenden XHTML-Fähigkeiten eine große Zahl nützli cher Werkzeuge rur die Arbeit mit CSS.
HlIIWeIs: Die verschiedenen in diesem Abschnitt besprochenen Programme sind Mehrzweckwerkzeuge, mit denen Sie sowhl (X)HTML als auch CSS bearbeiten können. Auf diese Weise brauchen Sie nur ein Pro gramm für die Webentwicklung zu lernen. Wenn Sie sich bereits auf ein Programm zum Schreiben von (X)HTML festgelegt haben, finden Sie in Anhang B eine Liste von speziellen CSS-Editoren.
Über dieses Buch Das World Wide Web ist so einfach zu benutzen. dass selbst eine Rentnerin aus Obereglfing oder ein Erstklässler aus Meuselwitz an der Schnauder damit klarkom men sollte. Leider sind die Regeln, nach denen das Web funktioniert, nicht so ein fach zu verstehen. Die Informatiker und Techniker, die die offizielle Dokumenta tion schreiben. haben wenig Interesse daran, ihre Konzepte normalsterblichen Webbenutzern zu erklären. Wenn Sie einen Blick auf die offizielle Spezifikation zu CSS (2) werfen. bekomen Sie einen guten Eindruck von dem technischen Kauder-
Einleitung
XXIII
Über dieses Bu(h
IM HÖCHSTEN GANG
Die verschiedenen C55-Versionen Wie Betriebssysteme und iPods wird auch CSS beständig weiter entwickelt. Das 1996 veröffentlichte (55 1 legte das Fundament zur Verwendung von (ascading Style Sheets. Die grundSätzliche Struktur einer Stildefinition, das Konzept der Selektoren (s. Kapitel 3) und die meisten in diesem Buch behandelten (55Eigenschaften waren bereits Teil von Version 1 . I n CSS 2 kamen neue Fähigkeiten hinzu, beispielsweise die Möglichkeit, (55 für bestimmte Ausgabegeräte (Drucker, Moni tore, Projektoren usw., s. Seite 391) separat zu definieren. Seit (55 2 ist es außerdem möglich, Elemente pixelgenau im Ansichtsbereich der Webseite zu positionieren. Dieses Buch basiert auf (55 2.1, dem gegenwärtigen Standard für (ascading Style Sheets. Dieser Standard enthält sämtliche Elemente von (55 1 sowie eine Vielzahl neuer Eigenschaften (Properties) und korngiert eine Reihe von Problemen mit (55 2. Dabei enthält CSS 2.1 gegenüber Version 2 keine radikalen Änderungen, und die meisten Webbrowser haben die neuen
Regeln mittlerweile ganz gut verinnerlicht. Vielen Dank! (Eine bemerkenswerte Ausnahme bildet der Internet Explorer 6 für Windows. Aus diesem Grund werden Sie in diesem Buch auch eine Reihe von Lösungen finden, mIt denen sich diese Pro bleme umgehen lassen. Zum Glück wurden die meisten teils haarsträubenden Fehler 1m Internet Explorer 7 behoben, und der Internet Explorer 8 hält sich sogar noch besser an die Stan dards.) (55 3 ist bereits in den Startlöchern. Obwohl das W3( den Stan dard noch absegnen muss, werden die neuen Richtlinien und Funktionen in einigen Browsern bereits umgesetzt. So kann Apples Browser Safan dank (55 3 bereits mehrere Hintergrund bilder für em Element verwenden. Sowohl Safan als auch Firefox unterstützen außerdem die neuen Eigenschaften zum Erzeugen von abgerundeten Ecken. Da (55 3 aber immer noch nicht fer tiggesteUt ist, ist m den meisten Browsern noch mcht viel davon zu sehen - und so auch in diesem Buch.
welsch, das diese Leute sprechen (http://www.edition-w3c.de/TR/1998/REC-CSS219980512/ und das ist schon die deutsche Übersetzung!). -
Für Cascading Style Sheets gibt es kein offizielles Handbuch. Leute, die CSS lernen wollen, wissen oft nicht, wo sie anfangen sollen. Und die Feinheiten von CSS brin gen selbst gestandene Webprofis manchmal noch ins Stolpern. Dieses Buch soll Ihnen als Handbuch dienen, das CSS eigentlich mitgeliefert werden müsste. Hier finden Sie schrittweise Anleitungen, mit denen Sie lernen, wunderschöne Websei ten zu erstellen.
CSS: Missing Manual ist so angelegt, dass es Lesern aller technischen Wissenslevel als Hilfestellung dienen kann. Um das Optimale aus diesem Buch herausziehen zu können, sollten Sie ein gewisses Basiswissen zu HTML und vielleicht auch schon zu CSS besitzen. Wenn Sie noch nie zuvor eine Webseite erstellt haben, sehen Sie sich unsere Kurzanleitung auf Seite 25 an. Die meisten Erläuterungen in diesen Kapiteln sind für fortgeschrittene Anfcinger gedacht. Wenn Ihnen das Erstellen von Websei ten noch neu ist, finden Sie in den mit »Im höchsten Gang(( überschriebenen Käs ten die einführenden Informationen, die Sie für das Verständnis des jeweiligen Themas benötigen. Die Kästen mit der überschrift » Sprechstunde für Power-User« sind für erfahrene Webentwickler gedacht. Sie enthalten technische TIpps, Tricks und Schleichwege für diejenigen, die noch tiefer in die Materie eindringen wollen. Hillwels: Gelegentlich empfiehlt dieses Buch andere CSS-Bücher, die Themen behandeln, die viel zu speziell oder nicht so wichtig für dieses Handbuch sind. Manche TITel sind beim Missing Manual-Verlag O'Reilly erschienen, andere nicht Stammt ein großartiges Buch einmal nicht aus der O'Reilly-Familie, wer den wir darauf hinweisen.
XXIV
CSS: Missing Manual
Über die§e§ Buch
Wie dieses Buch aufgebaut ist CSS: Missing Manual besteht aus vier Teilen, die jeweils mehrere Kapitel umfassen. •
Teil ], CSS-Grundlageo, zeigt Ihnen, wie Sie Stylesheets erstellen können. und gibt Ihnen einen überblick über die wichtigsten CSS-Konzepte und Technolo gien. wie Vererbung, Selektoren und das Prinzip der Kaskade. Außerdem zeigen wir Ihnen, wie Sie (X)HTML-Code schreiben müssen, damit er optimal mit CSS funktioniert. Vier Übungen untermauern die wichtigsten Konzepte dieses Teils und geben Ihnen einen guten Vorgeschmack auf die Leistungsfahigkeit von CSS.
•
Teil 2, Angewandtes CSS. nimmt Sie mit in die wirkliche Welt des Webdesigns. Sie lernen die wichtigsten CSS-Eigenschaften kennen und deren Verwendung für die Textformatierung. das Anlegen nützlicher Navigationswerkzeuge und das Einbinden von GrafIken in Ihre Seiten. In diesem Teil gehen wir außerdem darauf ein, wie Sie das Aussehen von Webseiten beim Ausdrucken optimieren können. Zudem zeigen wir Ihnen, wie Sie Formulare und Tabellen ansprechend gestalten.
•
Teil 3, SeitenJayout mit CSS, hilft Ihnen bei einem der verwirrendsten, aber auch lohnendsten Aspekte von CSS: der Kontrolle über die Platzierung der Ele mente einer Seite. Wir zeigen Ihnen, wie Sie häufig verwendete Designs (wie zwei- oder dreispaltige Layouts) und Seitenleisten erstellen können. Außerdem geht es hier um Floats und Positionierung, zwei wichtige CSS-Techniken für die Kontrolle des Seitenlayouts.
•
Teil 4, Fortgeschrittenes CSS, zeigt Ihnen, wie eine Webseite auch ausgedruckt gut aussieht, und behandelt fortgeschrittene Techniken zur effektiveren und effizienteren Nutzung von CSS.
•
Teil 5, Anhänge, enthält zwei Arten von Ressourcen. Zunächst eine Referenz der CSS-Eigenschaften: Hier fInden Sie zu jeder CSS-Eigenschaft eine kurze Zusammenfassung. Diese kleinen, leicht verdaulichen Happen können Ihnen helfen, bereits vorhandenes Wissen etwas aufzumöbeln oder nachzuschlagen, wenn Ihnen die Einzelheiten zu einer Eigenschaft gerade nicht einfallen. Der zweite Anhang befasst sich mit Werkzeugen und Ressourcen, die Ihnen beim Erstellen und Verwenden von CSS helfen sollen, sowie listet hilfreiche Websites und Bücher zum Thema auf.
Der Beispielcode zum Buch Dieses Buch soll Ihnen dabei helfen, Ihre Arbeit im Web schneller und profeSSiO neller zu erledigen. Daher ist es nur natürlich, dass ergänzende Materialien im Web zu finden sind. Wahrend Sie dieses Buch lesen, stoßen Sie auf zahlreiche Schritt-für-Schritt-Übun gen, die Sie selbst mit Rohmaterialien (wie GrafIken und halbfertigen Webseiten) umsetzen können. Laden Sie sich dazu den Beispielcode zum Buch von der Ver-
Das reine Durchlesen dieser Schritt-für-Schritt-Anleitungen wird Ihnen allerdings nicht viel bringen. Sie sollten sich die Zeit nehmen, die Übungen am Rechner durchzuarbeiten, und Sie werden feststellen, dass Ihnen diese Anleitungen einen guten Einblick in die Arbeitsweise professioneller Webdesigner geben. Die herunterladbaren Übungen aus diesem Buch enthalten außerdem die fertigen Seiten, damit Sie Ihre Arbeit mit dem Endergebnis vergleichen können. Wir zeigen Ihnen also nicht nur, wie die Seiten aussehen sollten, sondern die tatsächlichen Sei ten im Internet.
Ü ber MissingManuals.com Auf der Missing Manuals-Website
www.missingmanuals.com
finden Sie englisch
sprachige Artikel, TIpps und Updates zu diesem Buch. Wir möchten Sie dazu ermuntern, uns Ihre Korrekturen und Aktualisierungen zur Verfügung zu stellen. Damit das Buch so aktuell und akkurat wie möglich ist, werden alle bestätigten Änderungen und Korrekturen bei Nachdrucken und Neuauflagen berücksichtigt. Auf der Website finden Sie außerdem eine Liste der Korrekturen für Ihr Buch. (Kli cken Sie auf den Namen des Buchs und dann auf den Errata-Link, um die Ände
rungen zu sehen.) Eine Liste mit deutschen Errata fmden Sie unter www.oreilly.de/
catalog/cssmmger. In der Zwischenzeit würden wir uns freuen, Ihre Vorschläge für neue Titel der Mis
sing Manuals-Buchreihe zu hören. Auch dafür gibt es einen Platz auf der Website. Dort haben Sie außerdem die Möglichkeit, unseren kostenlosen E-Mail-Newsletter zu abonnieren, der Sie über Neuerscheinungen informiert.
Die absoluten Basics Um dieses Buch zu verwenden, brauchen Sie einige Grundlagen. Dieses Buch geht davon aus, dass Sie mit folgenden Begriffen und Konzepten vertraut sind: •
Klicken. In diesem Buch können drei Arten von Anweisungen vorkommen, für die Sie die Maus oder das Trackpad Ihres Computers benutzen müssen.
Klicken
bedeutet, dass Sie den Mauszeiger (meistens ein Pfeilsymbol) an eine bestimmte Stelle auf dem Bildschirm bewegen und dann - ohne den Mauszeiger weiter zu bewegen - die (normalerweise linke) Maustaste (oder die entsprechende Taste an Ihrem Trackpad) drücken. Doppelklicken bedeutet, dass Sie diese Taste zwei mal in kurzer Folge drücken - auch dieses Mal, ohne dabei den Mauszeiger zu bewegen.
Ziehen mit der Maus bedeutet, den Mauszeiger bei gedrückter Maus
taste zu bewegen. Ein
Strg-Klick an einem PC bzw. ein 3€-Klick am Mac bedeutet, dass Sie beim
Klicken gleichzeitig die Strg- bzw. 3€-Taste drücken sollen. In vielen Fällen funktioniert anstelle eines •
Strg-Klicks auch ein Klick mit der rechten Maustaste.
Menüs. Menüs sind die Wörter, die Sie an der Oberkante eines Fensters (Win dows) oder Ihres Bildschirms (Mac) sehen: Sie heißen Ablage,
XXVI
CSS: Missing Manual
Bearbeiten, Dar-
Die ab50luten Ba5ic5
stellung und so weiter. Wenn Sie auf eines dieser Menüs klicken, erscheint eine Liste mit Befehlen, als wären sie auf eine gerade entrollte Schriftrolle geschrie ben. •
Betriebssystemgrundlagen. In diesem Buch gehen wir davon aus, dass Sie wissen,
wie man ein Programm öffnet, im Web surft und Dateien herunterlädt. Sie sollten
wissen, wie man das Startmenü (Windows) bzw. das Dock (Mac OS X) sowie die Systemsteuerung (Windows) bzw. die Systemeinstellungen (Mac OS X) bedient. Wenn Sie diese Informationen verinnerlicht haben, besitzen Sie genügend Hinter grundwissen, um an CSS; Missing Manual Spaß zu haben,
Ü ber --> diese --> pfeile In diesem Buch und in der gesamten Missing Manuals-Reihe fmde Sie Sätze wie diesen: »Öffnen Sie den Ordner System -t Library -t Fonts.(( Diese Schreibweise ist
eine Abkürzung für eine viel kompliziertere Anleitung, die Sie zum Öffnen von drei ineinander verschachtelten Ordnern bewegen soll, und zwar so: »Auf Ihrer
System. Öffnen Sie diesen. Im System ein weiterer Ordner namens Library. Doppelklicken Sie auf ihn
Festplatte finden Sie einen Ordner namens ordnerfenster ist
und öffnen Sie ihn dadurch. In diesem Ordner befindet sich wiederum ein Ordner namens Fonts. Doppelklicken Sie auch auf diesen Ordner und öffnen Sie ihn damit. Auf ähnliche Weise hilft Ihnen diese Kurzschreibweise, die Auswahl von Menü befehlen zu vereinfachen, wie in Abbildung E-l gezeigt.
AlIIIild0"l E-I:
In diesem Buch hilft Ihnen die pfeilschreibweise bei der Navi gation durch Ordner und Menüs.Ansicht ----t Zoom ----t Vergrößern ist einfach nur eine kompaktere Schreibweise für: »Wählen Sie aus dem Menü Ansicht den Eintrag Zoom. Aus dem nun angezeigten Unter menü wählen Sie nun den Ein trag Vergrößern.«
OOI'llrllTl)' nibh ecosmod bocidull1 ul AAlt,n u,,,
8
,"" I
,
saftige Sukkulenten li/r Ihr Schlel'llmmer
L",..m Ipscm do;j", sil a"",tLm""" pscm dDl", sit amel.. soo
AII.,1domg '-I: CSS-basiertes Webdesign erleichtert das Schreiben von HTML-Code. Die zwei hiergezeigten Designs sehen sich zwar sehr ähnlich, allerdingswurde die oben gezeigte Seite komplett mit CSS gestaltel während die untere aus· schließlich HTML verwendet Dazu beträgt die Größe der oberen Datei gerade mal 4 KByte, während die untere mit 14 KByte fast viermal so groß ist. Dasreinauf HTML basierende layout benötigt wesentlich mehr Code, um in etwa die gleichen visuel len Effekte zu erzielen: 213 Zeilen - im Gegensatz zu den 71 Zeilen Code der CSS-Version.
La,,", >P"'-'" ""'" so, "r�l
" o o; V/Qhru. !m.... r R ; 60.... . 1< Ioookhn I ,, ",", " .. n ' ;i r_ ,.
�,
AltikOll lasOln
HTML in der Vergangenheit: Hauptsache. es sieht gut aus
Als eine Handvoll Wissenschaftler das Web erfand, um technische Dokumentatio
nen leichter gemeinsam nutzen und nachverfolgen zu können, hat niemand die GrafIkdesigner nach ihrer Meinung gefragt. Die Wissenschaftler brauchten HTML nur,
um
Informationen zum leichteren Verständnis klar zu strukturieren. So steht
das Tag für eine wichtige überschrift (»ersten Grades((), während weni
ger Gewicht hat und meist als Untertitel für -Überschriften verwendet wird. Ein weiterer Favorit ist das geträumt haben). Das -Tag ermöglicht die Angabe einer bestimmten Schrift. einer Schriftgröße (in sieben möglichen Schritten) und einer Schriftfarbe. (Ver mutlich haben Sie schon gemerkt, dass das etwa 100 Schritte weniger sind, als bei spielsweise Microsoft Word anbietet.)
Wenn selbst der übelste Tag-Missbrauch nicht zum gewünschten Ergebnis führte. hatten die Webdesigner immer noch einen letzten Ausweg: die Verwendung von Grafiken. Um das automatische Wiederholen (»Kacheln�) von Hintergrundbil dern zu verhindern. wurden beispielsweise übergroße Graftken als Hintergrund verwendet; andersherum wurden große Grafiken gern in kleinere Einzelbilder zerschnitten (das berühmte »Slicing«) und mithilfe von Tabellen wieder zusam mengeschustert. Zwar geben die oben genannten Techniken - die kreative. aber nicht unbedingt zweckmäßige Verwendung von HTML-Tags und die ausufernde Verwendung von Graftken - Ihnen eine große Kontrolle über die Seitengestaltung. Gleichzeitig bedeutete dies aber auch wesentlich mehr HTML-Code (und mehr neue Stirnfal ten. die nicht einmal ein ganzes Leben in der Sonne hervorbringen kann). Lange Zeit waren diese Techniken die einzige Möglichkeit. ein »anständiges« Seitenlayout zu erreichen. Mit der Einführung von CSS hat sich diese Sichtweise jedoch radikal verändert.
HTML heute: Das Grundgerüst für (55 Es macht keinen Unterschied. ob eine Seite nun den Veranstaltungskalender Ihres Angelvereins. eine Anfahrtsbeschreibung zum nächsten IKEA oder die Bilder vom letzten Kindergeburtstag enthält. Am Ende entscheidet das Design darüber. ob die Seite einen professionellen Eindruck macht oder sich eher wie das Werk eines Hob-
Kapitel l: HTMl-<em)<strong>Landbau hinter "ver�c�lossenen Türen"? Lor�m ipsum �olor sit amet . . .
Urbane Agrikultur - Ein neuer Lifestyle
Landbau hinter "verschlossenen Türen I/?
Lorem ipsum dolor sil amet. oonscctctuer adipiscing elil, scd diam nonummy nibh euismod tineidunI UI !aorecl dolore magna aliquam etal volutpat. VI wisi enim ad
AlIIIild0"l 1-2: Alte oder neue Schule? Bevor es CSS gab, mussten Webdesigner den -Tag und andere HTML-Tags benutzen, um bestimmte visuelle Effekte zu erzielen (oben). Das gleiche (und meistens bes sere) Aussehen können Sie mit wesentlich weniger HTML-Code erreichen, wenn Sie für die Darstellung Ihrer Webseiten CSS verwenden. Auf diese Weise können Sie HTML für die reine Strukturierung Ihres Sei teninhalts einsetzen.
minim veniam, quis nosO\ld exerei talion ullamoorper suscipil lobortis nisl UI aliquip ex ca oommodo oonsequat. Duis autcm vel eum mure.
Urbane Agriku lt u r
- ein n e ue r
Lifestyle
landbau hinter " ;verschlossenen Türen" ?
lorern ip sur.'I dolor sit ar.'let . . . < /p >
Zwei neue HTML-Tags Trotz der Vielfalt an HTML-Tags wird es Situationen geben, in denen genau das Tag, das Ihren Inhalt exakt beschreibt, vermutlich fehlt. Sicher ist gut geeig-
Kapitel l: HTMl-Code für CSS optimieren
1
HTML für (55 schreiben
ZUCKERSTÜCKCHEN
Suchmaschinen mögen einfaches HTML Zu Beginn sollten Sie sich HTMl als Mittel zur inhaltlichen Struk turierung Ihres Dokuments vorstellen und CSS für die Darstel lung. Wenn Sie das verinnerlicht haben, werden Ihnen die zusätzlichen Vorteile beim Schreiben von schlichtem und über sichtlichem HTML-Code klar werden. Zum einen kann sich Ihre Positionierung in Suchmaschinen wie Google, MSN oder Yahoo! drastisch verbessern. Wenn Suchmaschinen sich durchs Web bewegen, müssen sie beim Indizieren sämtlichen HTML-Code einer Seite nach dem eigentlichen Inhalt durchforsten. Das alte, rein HTMl-basierte Design mit seinen -Tags und ver schachtelten Tabellen ist den Suchmaschinen dabei im Weg. Einige Suchmaschinen lesen sogar nur eine bestimmte Anzahl von Zeichen am Anfang einer Seite. Wenn Sie HTML hauptsäch lich zu Designzwecken einsetzen, verpasst die Suchmaschine womöglich die eigentlich wichtigen Teile Ihrer Seite. Schlimms tenfalls wlfd Ihre Seite überhaupt nicht aufgeführL Im Gegensatz dazu ist einfacher und strukturierter HTML-Code leicht für eine Suchmaschine zu lesen und zu indiZieren. Es ist net.
um
eine gute Idee, das -Tag zu benutzen, um das wichtigste Thema Ihrer Seite zu markieren (anstatt die Überschrift einfach nur groß und fett zu formatieren). Suchmaschinen bewerten den Text innerhalb von stärker als den übrigen Inhalt einer Seite. (Es haI übngens keinen Sinn, alles als zu markieren. Derartige Seiten werden meistens von den Suchmaschinen komplett Ignoriert.) Googles Richtlinien für Webmasler finden Sie hier: http.1/ W\o1IWgoogle.comjsupportjwebmostersjbinjonswer.py?ons wer=35769&toPIC=1526O&hl=de. Es gibt außerdem einen ausgezeichneten englischsprachigen Podcast mit einem Vortrag zum Thema SEC (Suchmaschinen optimierung) von der Web Visions-Konferenz 2005: http.1/ W\o1IWwebvisionsevent.comjpodcostsj WV05_AfonJnecht.mp3. Einen Artikel des Sprechers zum glei chen Thema finden Sie hier: http://www.digitof-web.com/orti desjseo_ondyour_web_slte/.
den Quellcode eines Computerprogramms zu kennzeichnen. aber die
meisten Anwender würden praktischer finden. Leider gibt es so eins nicht. Glücklicherweise besitzt HTML zwei Tags, mit denen Sie Ihren Inhalt besser beschreiben und im gleichen Schritt auch noch mit passenden CSS-Anweisungen verknüpfen können. Die Tags und <span> sind wie leere Gef aße. die Sie mit beliebigem Inhalt fül len können. Diese Elemente besitzen keine eigenen visuellen Eigenschaften. Sie können ihnen mit CSS ein beliebiges Aussehen geben. Das -Tag (für engl.
division,
Unterteilung) kennzeichnet einen eigenständigen Teil des Seiteninhalts.
ähnlich einem Absatz oder einer Überschrift. Sie können das -Tag aber auch verwenden, um beliebige andere Teile des Inhalts damit zu umgeben. z.B. eine Überschrift. mehrere Absätze oder eine Liste. Das -Tag eignet sich daher her vorragend.
um
eine Seite in mehrere logische Bereiche zu unterteilen. beispiels
weise für das Logo. den Navigationsbereich. den Haupttext, die Fußzeile. usw. Mit hilfe von CSS können Sie die so markierten Bereiche später positionieren und auf diese Weise anspruchsvolle Seitenlayouts zu erstellen (ein Thema, das wir in Kapi tel 3 dieses Buchs ausführlich behandeln werden). Das <span>-Tag wird für sogenannte Inline-Elemente verwendet. Das können ein zelne Wörter oder Sätze sein. die Teil eines längeren Absatzes oder einer Über schrift sind. Sie können <span> verwenden wie andere Inline-Tags auch. z.B. (für das Einfügen von Links) oder <strong> (zum Hervorheben eines Worts in einem Absatz). Das <span>-Tag kann beispielsweise benutzt werden.
um
einen Fir
mennamen zu markieren. Anschließend können Sie CSS verwenden,
8
CSS: Missing Manual
um
den
HTML lür CSS s(hreiben Namen mit einer eigenen Schrift. Farbe o.Ä. hervorzuheben. Hier ein Beispiel für diese Tags in Aktion. inklusive eines kleinen Ausblicks auf die Attribute
id und
dass. die häufig verwendet werden, um bestimmte Teile einer Seite mit Stildefmiti onen zu versehen:
Diese Tags werden Ihnen auch außerhalb dieser kurzen Einführung noch häufig begegnen. Besonders in CSS-lastigen Websites werden sie oft und gerne benutzt. Im weiteren Verlauf dieses Buchs werden Sie lernen. wie Sie diese Tags in Kombi nation mit CSS verwenden können. um die kreative Kontrolle über Ihre Website
voll auszunutzen (s. Seite 40)
HTML-Code, den Sie am besten vergessen CSS vereinfacht das Schreiben von HTML aus einem wichtigen Grund: Sie brau chen keine Berge von Tags und Attributen mehr. um Ihre Seiten besser aussehen zu
lassen. Das -Tag ist hierfür das strahlendste Beispiel. Sein einziger Zweck besteht darin. Farbe. Größe und Schrift eines Texts festzulegen. Zum Verständnis der Seitenstruktur trägt er jedoch überhaupt nicht bei. Hier eine Liste der Tags und Attribute. die Sie einfach durch CSS ersetzen können: •
Die Verwendung des -Tag
für die Darstellung von Text gehört auf den
Müll. CSS kann wesentlich besser (und vielfältiger) mit Text umgehen. (Techni ken zur Textformatierung finden Sie übrigens in Kapitel 6.) •
Hören Sie damit auf. und zu benutzen, um Text fett oder kursiv darzu stellen. Mit CSS können Sie jedes Tag fett oder kursiv darstellen. Diese format spezifischen Tags sind also nicht mehr nötig. Wenn Sie dagegen tatsächlich ein bestimmtes Wort oder einen Satz hervorheben wollen, verwenden Sie dafiir das <strong>-Tag (das von den meisten Browsern sowieso fett dargestellt wird). Sol
len Textteile nur leicht hervorgehoben werden. verwenden Sie <ern> (für eng!.
emphasis - Betonung). Die meisten Browser stellen Text innerhalb dieser Tags kursiv dar. HIo_ Soll der rrtel einer Publikation kurs� dargestem werde� schlägt das in HTML), um innerhalb von Absätzen Zeilen umbrüche herbeizuführen, haben wir etwas Besonderes für Sie. (Browser fügen automatisch und oftmals zum Ärger des Webdesigners einen gewissen Leer raum zwischen Absätzen, aber auch zwischen Absätzen und
-Tags ein. In der Vergangenheit haben Webdesigner ausgeklügelte Methoden entwickelt, um das Erzeugen dieser automatischen Zwischenräume zwischen den
-Tags zu umgehen. Sie benutzten mehrere -Tags hintereinander und drehten dann per die erste Zeile so sehr durch die Mangel, dass sie aussah wie eine überschrift.) CSS hält eine Reihe von Möglichkeiten bereit, Innen- wie Außen abstände genau einzustellen - und zwar nicht nur für Absätze, sondern auch für andere Block-Elemente wie beispielsweise Überschriften (s. Seite 139).
Allgemein gilt: Sämtliche Tag-Attribute für die Deftnition von Farben, Rahmen, Hintergrundbildern oder die Ausrichtung (das gilt auch für Tabellen) gelten kom plett als veraltet und sollten nicht mehr benutzt werden. Das Gleiche gilt für die Ausrichtung von Bildern (z.B. align=left) und das Zentrieren von Text innerhalb eines Absatzes (z.B. align=center oder noch schlimmer: dlpl.cl�g ollt, ••d
dlam ""nummy nl�h "ul.mo-d tincldUnl ul IlInreel dolore magM
AII.,ldu"l ''': Verwenden Sie die Überschriften-Tags « hl>, lIqUlOm .m' yolu'P't. Ut wl.1 c�lm .d mlnlm ,cn"m, ""I.
Stylesheet zu erstellen, reicht es aus, ein paar Stilregeln zwischen die <style> Tags zu schreiben, wie oben gezeigt. Interne Stylesheets lassen sich leicht in eine Webseite integrieren und sorgen dadurch für eine sofortige visuelle Bereicherung Ihres HTML-Codes. Wollen Sie dagegen eine komplette Website mit einer großen Zahl Einzelseiten erstellen, ist diese Methode nicht besonders effizient. So müssen Sie den Code in jede einzelne Seite erneut einfügen - eine zeitraubende Aufgabe, die außerdem unnötig Band breite verbraucht. Noch ärgerlicher wird die Arbeit mit internen Stylesheets, wenn Sie das Aussehen der gesamten Website aktualisieren wollen. Vielleicht sollen -überschriften, die ursprünglich in großer, grüner fetter Schrift dargestellt wurden, jetzt mit klei neren Buchstaben, dafür aber in Blau und in der Schrift Courier erscheinen. Bei der Verwendung von internen Stylesheets müssen Sie jetzt jede einzelne Seite ändern. Wer hat dafür schon Zeit? Glücklicherweise gibt es für dieses Dilemma eine einfache Lösung: externe Stylesheets. Hillwels: Es gibt außerdem noch die (allerdings nicht besonders empfehlenswerte) Möglichkeit Stilre
geln ohne Stylesheets direkt in einzelnen HTML-Tags zu verwenden. Die Übung auf Seite 25 zeigt Ihnen, wie Sie diese lnline-Stile verwenden können. IM HÖCHSTEN GANG
Validieren 5ie Ihren C55-Code Dass eine Uberprüfung Ihres HTMl-Codes mit dem HTMl·Vali dator des W3C selbstverständlich sein sollte (s. Kasten auf Seite 11), wissen Sie inzwischen. Das Gleiche gilt für Ihre CSS-Regeln. Auch für die Validierung von CSS·Code hält das W3C ein Onli newerkzeug bereit; http://jigsaw.w3.org/css·validator/. Es funk tioniert analog zum HTMl·Validator: Geben Sie eine URl ein, laden Sie eine CSS·Datei hoch oder kopieren Sie Ihren Code einfach in das Formular, um ihn überprüfen zu lassen. Beim Schreiben von CSS kann es schnell zu Tippfehlern kom men, und schon ein kleiner Fehler kann Ihr sorgfäll1g geplantes
Webdesign zunichte machen. Sieht Ihr CSS·baslertes Design nicht aus wie erwartet, kann ein einfacher Fehler in Ihrem Code die Ursache sein. Der W3C-CSS·Validator ist daher eine gute erste AnlaufsteIle, wenn es um die Fehlersuche in Ihren CSS· Regeln geht. Einen schnellen Test können Sie mit Firefox durchführen, indem Sie den Menüpunkt Extras --t Fehlerkonsole wählen. Kli cken Sie hier auf den Button Fehler, und Sie sehen eine Aufstel· lung des CSS·Codes, den Firefox nicht versteht.
Externe Stylesheets Ein externes Stylesheet ist im Prinzip einfach nur eine Textdatei, die Ihre CSS-Stil defmitionen enthält. HTML-Code ist hier nicht erlaubt. Der Code darfin externen Stylesheets also nicht mit <style>-Tags umgeben sein, und als Dateiendung muss .css verwendet werden. Der Dateiname selbst kann frei gewählt werden, sollte aber möglichst beschreibend für den Inhalt sein. Der Name allgemein.css eignet sich bei spielsweise gut für ein Stylesheet, das für alle Seiten einer Site benutzt werden soll, während formulare.css die Regeln für die Gestaltung von Webformularen enthalten könnte.
22
CSS: Missing Manual
Externe Stylesheets
TIpp: Um ein internes Stylesheet »auszulagern«, also in externes Stylesheet umwandeln zu wollen, brau chen Sie nur die folgenden Schritte durchzuführen: Schneiden Sie den Code zwischen den <style>-Tags aus (ohne die Tags), legen Sie eine neue leere Textdatei an und fügen Sie den ausgeschnittenen Code in die neue Datei ein. Sichern Sie die Datei mit der Endung .css, z.B. offgemein.css. Danach können Sie das neue externe Stylesheet mit einer der im Folgenden beschriebenen Te, oder Sie wählen die CSS-eigene @import-Direktive - einen speziellen Befehl, der im Prin zip das Gleiche tut wie das dink>-Tag. Alle modernen Webbrowser behandeln diese Techniken auf die gleiche Weise; mit beiden können Sie Stylesheets in HTML-Seiten einbinden. Welche Variante Sie verwenden, ist also (bis auf eine Aus nahme, wie im folgenden Kasten erklärt) eine Frage Ihrer Vorlieben. HlIIWfis:
Die @import-Direktive kann eine Sache, zu der das -Tag nicht fähig ist: externe Style sheets in externe Stylesheets einbinden. Diese fortgeschrittene Te Und hier ist der entsprechende XHTML-Code: dink rel="stylesheet" type="text/css" href="css/allgemein.css" I> Der einzige Unterschied besteht darin, wie das Tag beendet wird. Das -Tag ist ein »leeres(( Element. Es gibt also kein schließendes -Tag. In XHTML müssen allein stehende Tags mit einem Schrägstrich beendet werden (wie hier: I» . ln HTML ist das dagegen nicht nötig. Kapitel 2: Stildefinitionen und Stylesheets
23
Externe Stylesheets
Davon abgesehen ist der Name in HTML und XHTML gleich. Unabhängig von der Sprache werden, wie in den oben stehenden Beispielen gezeigt. drei Attribute benö tigt: •
rel gibt an. um welche Art von Link es sich handelt. in unserem Fall um einen Unk zu einem Stylesheet.
•
type sagt dem Browser. welche Art von Daten die eingebundene Datei enthält: eine Textdatei mit CSS-Code.
•
href gibt an. wo die externe CSS-Datei zu finden ist. Der Wert dieses Attributs ist eine URL, die auf die gleiche Weise funktioniert wie beispielsweise das src Attribut für Bilder oder hreffür das Anlegen von Links.
TIpp: Es ist möglich, mehrere verschiedene Stylesheets in eine Webseite einzubinden (z.B. allgemein.css und formulare.css), indem Sie mehr als ein -Tag verwenden. Dies ist eine heIVorragende Möglich kert, Ihre CSS-Stile zu ordnen. Ausführliche Informationen hierzu finden Sie in Kaprtel 14 (Serte 417).
5tylesheets mit (55 einbinden CSS bringt außerdem seine eigene Methode mit. externe Stylesheets einzubinden: die @import-Direktive. Diese steht im HTML-Code innerhalb der <style> . . . Tags. wie hier gezeigt: <style type="text/css"> @import url(css/allgemein.css);
Im Gegensatz zum -Tag ist @import nicht Teil von HTML. sondern von CSS
und hat als solches einige HTML-untypische Eigenheiten: •
Der Verweis auf die externe CSS-Datei wird nicht mit dem Attribut href, son dern mit dem Schlüsselwort url eingeleitet. Der Pfad (oder die URL) wird mit runden Klammern umgeben. In unserem Beispiel ist demnach css/allgemein.css der Pfad zum externen Stylesheet. Die Anführungszeichen sind optional; Sowohl url(css/allgemein.css) als auch url("css/allgemein.css'J sind gültig.
Neben der Tatsache, dass Ihre HTML-Datei immerhin um 2 Byte größer wird, wenn Sie den pfad mit Anführungszeichen umgeben, hat auch der Internet Explorer 5 für Macintosh Probleme bei deren Interpretation. Wir haben Sie gewarnt.
Hillwels:
•
Wie mit dem -Tag können Sie auch mit @import mehrere externe Style sheets einbinden: <style type="text/css"> @import url(css/allgemein.css); @import url(css/formulare.css);
24
CSS: Missing Manual
Übung: Ihre ersten eigenen Slildefinitionen •
Da sich die @import-Direktive innerhalb der <style>-Tags befindet, können Sie auch ganz normale CSS-Regeln nach der Direktive einbauen. Auf diese Weise können Sie die im externen Stylesheet definierten allgemeinen Stile um spezielle Regeln für eine bestimmte Seite ergänzen oder diese auch überschreiben.
lIIItrftls:
Später (um genau zu sein, auf Seite 87) werden Sie lernen, wie Sie Regeln erstellen, die andere Stildefinitionen überschreiben. Außerdem ist es möglich, eine externe Stylesheet-Datei anzulegen, die rKJr @import-Direktiven enthalt, die andere externe Stylesheets einbinden. Diese Technik wird häufig verwen det, um Ordnung in größere Mengen externer Stylesheets zu bringen (s. Seite 417). Hier ein Beispiel: <style type .. "textlcss"> @import url(css/allgemein.css); @import url(css/formulare .css); p { color: red; } •
Eigentlich sollten Sie die @import-Direktiven vor allen anderen CSS-Regeln platzieren, wie hier gezeigt. Allerdings ist es nicht so schlimm, wenn Sie das ein mal vergessen. Nonnalerweise sollten Browser Stylesheets ignorieren, die nach einer CSS-Regel importiert werden, allerdings wird diese Einschränkung von sämtlichen aktuellen Browsern ignoriert.
Übung: Ihre ersten eigenen Stildefinitionen Der Rest dieses Kapitels zeigt Ihnen die wichtigsten Schritte für die Verwendung von Inline-Stilen, das Schreiben eigener CSS-Regeln und das Anlegen interner und externer Stylesheets. Beim Durcharbeiten der übungen in diesem Buch helfen wir Ihnen bei der Erstellung einer eigenen fiktiven Website mit dem Namen Cosmo Farmer.com. Wir werden uns nach und nach mit den verschiedenen Designaspek ten der Site beschäftigen und am Ende komplette Seiten mit CSS gestalten. Hierfür benötigen Sie die übungsdateien, die Sie von der Verlagswebsite unter
examples.oreilly.de!german3xamples/cssmmger
herunterladen
können.
http:// Alle
Dateien sind in einem ZIP-Archiv gespeichert, das Sie entpacken müssen, bevor Sie loslegen können. Die übungsdateien sind in jeweils eigenen Verzeichnissen abge legt (kapiteC02,
kapiteC03 usw.).
Als Nächstes müssen Sie Ihr Programm zum Editieren von Webseiten starten, ent weder einen schlichten Textewtor wie Notepad oder TextEdit oder ein visuelles Programm wie Dreamweaver oder Microsoft Expression Web Designer. (lnforma lionen zur Auswahl eines passenden Programms finden Sie auf Seite XXII.)
Inline-Stile definieren Wenn Sie CSS-Regeln (wie die auf Seite 17) direkt in das Tag eines HTML-Ele ments einfügen, spricht man von einem Inline-Stil. InHne-Stiie besitzen die zeit-
Kapitel 2: Stildefinitionen und Stylesheets
25
Übung: Ihre ersten eigenen Stildefinitionen GEHEIME SCHLEICHWEGE
Gefangen im Cache Der lokale Zwischenspeicher eines Browsers (cache) bedeutet einen großen Geschwindigkeitsgewinn für Websurfer. Jedes Mal, wenn der Browser eine bereits heruntergeladene Datei z.B. eine CSS-Datel oder eine Bilddatei - aus dem cache ver wenden kann, werden kostbare Momente gewonnen. Anstatt die Datei erneut aus den unendlichen Weiten des Internets zu fischen, braucht der Browser nur die Wirklich neuen Dateien wie eine noch nicht betrachtete Seite oder eine Grafik zu laden. Was gut für Ihre Besucher ist, muss aber nicht zwangsläufig auch gut für Sie sein. Dass auch externe CSS-Dateien im cache zwischengespeichert werden, kann bei der Arbeit am Design einer Website leicht zum Stolperstein werden. Angenommen, Sie arbeiten an einer Seite, die ein externes Stylesheet verwen det, und Sie betrachten die Seite in einem Browser. Irgendetwas passt Ihnen nicht. Also wechseln Sie zu Ihrem Editorprogramm und passen die CSS-Datei an. Wenn Sie die Seite Jetzt neu in Ihrem Webbrowser laden, scheint die Änderung verschwunden zu sein. Daran ist der cache schuld. Um Zeit zu sparen und die ladezeit zu verkürzen, benutzen Browser auch beim erneuten laden einer Seite die alte Stylesheet-Version aus dem cache.
Für den Internet Exp!orer unter Windows funktioniert auch die Tastenkombination Strg-FS. Firefox verwendet das Kürzel Strg Shift-R (�-Shift-R). Um eine Seite und die abhängigen Dateien in Safari neu zu laden, halten Sie beim Klick auf den Neu Laden Button die Optionstaste (»alt«) gedrückt. Sie können den cache in vielen Fällen auch komplett abscha! ten. Im Internet Explorer wählen Sie hierfür Extras -t Internet optIonen -t Allgemein -t Temporäre InternetdateIen -t Em stellungen. Wählen Sie dann unter der Überschrift Neuere Versionen dergespeicherten Seite suchen die Option Beijedem Zugriff auf dIe Seite. Klicken Sie zweimal auf 01(, um die Inter netoptionen wieder zu schließen. In Firefox laden Sie sich am besten das Erweiterungsmodul »Web Developer« herunter (https.J!addons.mozlfla.orgjdejfirefoxjaddonj60). Dieses Add on ist ist für die CSS-Entwicklung sowieso ein unverzichtbarer Helfer. Nach der Installation besitzt Firefox eine zusätzliche Sym bolleiste (unterhalb der Adresszei!e). Wählen Sie hier den Menüpunkt Disable -t Disable Cache. Das Modul funktioniert mit allen Versionen von Firefox.
Um diesem Schlamassel zu entgehen, gibt es zwei Möglichkei ten: Entweder Sie deaktivleren den Cache, oder Sie zwingen den Browser, Wirklich alle Dateien neu zu laden.
In Safan 2 und 3 wählen Sie Safari -t Emsteffungen -t Erwei tert. Aktivieren Sie hier das Checkbox Menü 'Develop' m der Menüfeiste anzeigen. Aus diesem Menü können Sie nun den Eintrag Caches deaktlvJeren wählen.
In den meisten Browsern gibt es die Möglichkeit eine Seite und alle abhängIgen DateIen neu zu laden (»Force Reload«). Hier für halten Sie die Strg-Taste gedrückt und klicken gleichzeitig den Neu Laden-Button des Browsers an.
Das Deaktivieren des caches kann die ladezeiten beim norma len Surfen erheblich verlangsamen. Wenn Sie mit Ihrer Arbeit an den CSS-Dateien fertig sind, sollten Sie den cache daher auf jeden Fall wieder aktivieren.
und bandbreitensparenden Eigenschaften der Stylesheets nicht, deshalb benutzen Profis sie nur selten. Wenn es aber mal schnell gehen muss und Sie unbedingt die Darstellung eines einzelnen Elements auf einer einzelnen Seite ändern müssen. können Inline-Stile Ihnen vermutlich eine Hilfe sein. Jedoch sollten sie bei Ver wendung dann auch richtig funktionieren. Das Wichtigste hierbei ist. die Stilregel sorgfaltig in das zu formatierende Tag einzubauen. Hier ein Beispiel, das Ihnen genau zeigt. was zu tun ist:
1.
Öffnen Sie mit Ihrem Web-Editorprogramm die Datei einfach.html im Ordner kapiteL02. Diese einfache. aber elegante XHTML-Datei enthält eine Reihe unterschiedli cher Überschriften. einen Absatz. eine ungeordnete Liste und einen Copy right-Hinweis innerhalb von -Tags. Wir beginnen. indem wir einen Inline-Stil für das -Tag definieren.
26
CSS: Missing Manual
Übung: Ihre ersten eigenen Slildefinitionen 2.
KJicken Sie in das öffnende -Tag und geben Sie ein: style="color: red;". Das Tag sollte jetzt aussehen wie hier: Tags auch nicht mit kopiert werden. 5.
Sichern und schließen Sie die Datei allgemein.m.
Der folgende Schritt besteht darin, die alte Datei zu säubern und das neue Stylesheet einzubinden. 6.
Gehen Sie zurück zur Datei
einfac:h.html und löschen Sie und auch die Tags.
alles. was zwi
schen den <style>".-Tags steht,
Sie brauchen diese Stildefinitionen jetzt nicht mehr, weil sie jetzt in der exter nen Stylesheet-Datei gespeichert sind, die im nächsten Schritt eingebunden wird. 7.
In den Leeraum, der zuvor Ihre Stilregeln enthielt (zwischen dem schlie ßenden -Tag und dem schließenden -Tag), geben Sie nun Folgendes ein:
dink href="allgemein.cssM rel="stylesheet" type="text/css" /> Das -Tag ist eine von zwei Möglichkeiten, ein externes Stylesheet in eine Seite einzubinden. Die andere Variante besteht in der Verwendung der CSS eigenen @import-Direktive, die aufSeite 23 beschrieben wird. Das -Tag gibt an, unter welchem Pfad bzw. welcher URL die Stylesheet-Datei zu finden ist. (Weitere Informationen zu den Attributen rel und type fmden Sie ebenfalls auf Seite 23.) Hillwels:
In diesem Beispiel befindet sich die Stylesheet-Datei im selben Ordner wie die Webseite. Wäre die Datei woanders gespeichert, hätten Sie beim Einbinden der Datei einen Dateipfad relativ zum Doku ment oder zum Wurzelverzeichnis angeben müssen. Es gelten im Prinzip die gleichen Regeln wie beim Anlegen von Links zu anderen Webseiten. (Eine Übersicht über die verschiedenen Arten von Links finden Sie unter Mp.flde.selfhtml.orglhtmllverweiselindexhtm.) 8.
Sichern Sie die Datei und betrachten Sie sie in einem W ebbrowser.
Das Aussehen sollte das gleiche sein wie das in Schritt 9 auf Seite 30. Zusätzlich sollte am oberen Ende der Seite jetzt die schicke Grafik zu sehen sein (dank der zusätzlichen CSS-Regel aus Schritt 2). Ansonsten sind die CSS-Regeln im externen Stylesheet identisch mit denen, die wir zuvor im internen Stylesheet
32
CSS: Missing Manual
Übung: Ihre ersten eigenen Slildefinitionen
verwendet haben. sie befmden sich nur an einem anderen Ort. Um Ihnen zu zeigen. wie nützlich das sein kann. werden wir das externe Stylesheet gleich in eine weitere HTML-Datei einbinden. IIhIWf!Is: Fehlt bei Ihrer Webseite die Formatierung (wird l.B. die CosmoFarmer-Überschrift nicht in Rot
dargestellt), haben Sie vermutlich einen Tippfehler im Code aus Schritt 6. oder die Datei allgemein.css ist in einem anderen Ordner gespeichert als einfach.html. ln diesem Fall brauchen Sie die Datei nur in den rich tigen Ordner lU verschieben. 9.
Öffnen Sie nun die Datei verlinktcseite.html im Ordner kapiteC02. Diese Erweiterung von CosmoFarmer.com enthält teilweise die gleichen HTML-Tags. z.B. . .
usw. wie die Datei einjach.html. an der wir vorher gearbeitet haben.
10. Klicken Sie hinter das schließende -Tag und drucken Sie die Enter
Taste. Nun werden Sie das externe Stylesheet einbinden. 1 1 . Geben Sie
das gleiche lid ".,.u" .'ik da>.. So< ''''8'''''' �',�,"
,J., SeM,...';"'.'" d t"",",L�.l.aoto !pO.Iffi dolor �t 1Ifl>0... .:um ,�J .,.,,, iri.,. doko" in hIIr&Il '" i."" <Xlio dill'iO!im q.i bLnlC Pf""""- """"'= zzril dclcnit '"'111< du.. &oIon: '" fctIi1;;.l.lt. U ..,;� ..... > t""thg.l.aeto 'i"""' doIor gt >Il> tincidwl! u! laorcct doilore magnl aliquam ersl VOlutpal. Ut wi.i enim ad minim ""niam. lore magnl aliquam erst volutpal. Ut wi.i enim ad minim ""niam. kh�fen ·.,LCooIdU L c
•
...
Sel�k!oren-Grundl gen file" l /us�rsljwtIDocu men!" BlzIO·R'
..
..
K M CS$ r�� ,
.:.C.
ro<mul;or� .
� ..II.
Ö.�
Gf���n ·
•
Google
q
0
L
I"fo<m�"on, usw.) eine eigene Regel zu defmieren und die Eigenschaften und Werte jedes Mal zu kopieren, können Sie die einzelnen Tags auch in einem gemein samen Selektor zusammenfassen. 1.
Kehren Sie zu Ihrem Texteditor zurück und öffnen Sie erneut die Datei selektor...grundlagen.htrnl. Sie werden unterhalb der gerade erstellten CSS-Regel für das
-Tag eine neue Stildefinition einfügen.
2.
Klicken Sie hierfür hinter die schließende geschweifte Klammer, die diese Regel beendet, und drücken Sie die Enter-Taste, um eine neue Zeile anzule gen. Dann geben Sie ein: hl, h2, h3 {. Wie bereits in diesem Kapitel erklärt, reicht es, die Selektoren durch Kommata zu gruppieren. Die folgende Regel definiert für -, - und -Über schriften einer Seite das gleiche Format.
3.
Drücken Sie die Enter-Taste und geben Sie die folgenden CSS-Eigenschaf ten ein: color: #102536; font-fa�ily: Georgia, limes, serif; Wie in den vorigen Schritten, so legen wir auch diesmal ein paar einfache Optionen zur Textfonnatierung fest.
4.
Zum Abschluss drücken Sie erneut die Enter-Taste und geben die schlie ßende geschweifte Klammer ein, die diese CSS-Regel abschließt. Sie sollte nun aussehen wie hier: h1, h2, h3 { color: #102536; font-family: Georgia, limes, serifj )
5.
Speichern Sie die Datei und sehen Sie sie sich in einem Webbrowser an. Die -Oberschrift am Seitenanfang und die -Überschriften leiten die drei Abschnitte nun mit der gleichen Schriftart und -farbe ein.
Klassen-Selekloren anlegen und verwenden Typ-Selektoren sind schnell und effizient, bei der Gestaltung einer Seite allerdings nicht besonders wählerisch. Wenn Sie verschiedene
-Tags in der gleichen Seite unterschiedlich darstellen wollen, hilft möglicherweise die Verwendung von Klassen. 1.
Öffnen Sie in Ihrem Texteditor noch einmal die Datei selektor...,grund lagen.hlrnl. Fügen Sie unterhalb der gerade erstellten Regd fur eine Gruppe von Tags eine neue Stildefinition ein.
Kapitel 3: Selektoren-Grundlagen: Welcher Stil für wen?
59
Übung: Beispiele für Selektoren 2.
Klicken Sie hierfür hinter die schließende geschweifte Klammer der letz ten Regel, drücken Sie die Enter-Taste und geben Sie ein: .hinweis {. Der Name der Klasse hinweis erklärt bereits ihren Zweck: Absätze hervorzuhe ben, die zusätzliche Informationen für die Besucher Ihrer Website enthalten. Nachdem Sie die Regeln für die Klasse erstellt haben, können Sie sie an beliebi ger Stelle in Ihrem HTML-Code verwenden. In unserem Fall ist das der zweite Absatz der Seite.
3.
Drücken Sie die Enter-Taste und erweitern Sie das Stylesheet um die fol genden Eigenschaften und ihre Werte: font-size: .8sem; color: #294eS6; margin: 0 100px; padding: 10px; border: Ipx solid #73afb7; background-color: #fbef99;
4.
Schließen Sie auch diesmal die Erweiterung durch erneutes Drücken der Enter-Taste und die schließende geschweifte Klammer ab. Die vollständige Stildefinition für die Klasse soUte jetzt so aussehen: . hinweis { font-size: .8sem; color:#294eS6; margin: 0 100px; padding: 10px; border: Ipx solid #73afb7; background-color: #fbef99; } Wenn Sie sich die Seite im Browser ansehen, werden die Änderungen deutlich. Im Gegensatz zu Typ-Selektoren haben Klassen-Selektoren erst dann Einfluss auf eine Webseite, wenn Sie sie bestimmten HTML-Tags als Attribut hinzufü gen.
5.
Suchen Sie im HTML-Code der Seite das
-Tag, das mit <strong>hin weis: beginnt. Um einem Tag eine CSS-Klasse zuzuweisen, müssen Sie das Tag nur um das Attribut dass erweitern, gefolgt von einem Gleichheitszeichen und dem Namen der Klasse in Anführungszeichen, in diesem Fall hinweis.
6.
Klicken Sie direkt hinter das "p" im
-Tag und geben Sie dann ein Leer zeichen gefolgt von ein. Der HTML-Code soUte nun ausse hen wie folgt (Ihre Eingaben wurden hier fett hervorgehoben):
.
AbbUdung J-9: M�hilfe von Klassen·Selektoren können Sie die Darstellung einer Seite sehr prä zise anpassen. Hier gibt eine klassenba sierte Stilregel eine Formatierung vor, die sich von den übrigen Absätzen deutlich unterscheidet.
A
COSMOFARMER Die Onli,.,..Auresse fÜl IrIllo-Giir1n.,," or
Wie Sie die Erde ins 10. Stockwerk befördern, ohne dass der HausDleister etwas Dlerkt Sehen Sie vorher nach, ob der Fahrshlhl funktioniert Lcyem iplum dOOf:;i1 omeL coruecleluer odlplsctng el". sed dom nonummy . UI wisi
nis ul oliquip ex eo coml1"odo consequol. Duis oule." vel
..um iilXe dolor in
hendreril in vulp..Jlole velit esse molestie consequat. 'lei iIIum dolore eu feug 01 nlAla fad
HlNWEIS: Lorcm ip'um dolo< s t omot, con,oclotuor odipiscing olit, sed dom ""�ummy ntbh euhmocl tincidunt ut 100it
,.
", "
fCll!tiat nulla faciJi,i,
t ....
)!\ �
ng
sed d
s"hrltt 1: '\r""ilsmat�riallen Lorcm i�sum dole_
ru ""llHp&l. ., '",i
, .amco'1er
•. '"
:teine. adip
K.:>it
•
••
s"briU 2: Den Hoden ..wichl�n
'"' �
.
����� (��,..
liI"IIf'J""'''''I�..nt" IJZ. '.....-. -
"",n, " , � . -
.
.
�' ein.
Mit diesem öffnenden Tag teilen Sie dem Webbrowser mit. dass es sich im Fol genden um CSS-Anweisungen handelt. Sie müssen eine Regel erstellen. die für alle
-Tags gilt.
3.
Drücken Sie die Enter-Taste und geben Sie p { ein. Hiermit erstellen Sie eine Regel, die einen Typ-Selektor verwendet.
-Tags der Seite zu formatieren.
4.
um
alle
Drücken Sie erneut die Enter-Taste und geben Sie die folgende CSS-Eigen schaft und ihren Wert color: #5fJ794; ein. Wie Sie aus früheren Übungen wissen, legt die Eigenschaft color nicht die Hin tergrundfarbe fest. sondern die Textfarbe.
5.
Beenden Sie die Regel durch Drücken der Enter-Taste und die Eingabe einer schließenden geschweiften Klammer (}). Die fertige Stildefinition sollte nun aussehen wie folgt: p { color: #Sf9794; } Um das Stylesheet fertigzustellen, müssen Sie nur noch das schließende Tag hinzufügen.
72
CSS: Missing Manual
Übung: Vererbung
6. Drücken Sie die Enter-Taste, um eine neue Zeile anzulegen, und geben Sie dann ein.
Damit ist Ihr Stylesheet erst einmal fertig. 7. Öffnen Sie die Seite in einem Browser und betrachten Sie Ihr Werk. Die Schriftfarbe der sieben Absätze in der Seite hat sich von der Standardfarbe Schwarz nach Blaugrün verändert (s. Abbildung 4-3).
COSMOFARMER Die Online-Achsae flIr Indoor-Gärtner
Wie Sie die Erde ins 10. Stockwerk bef'ördern, ohne dass der Hausmeister etwas merkt
Alllld li u"lo-J: Vererbung in Aktion! Die Tags innerhalb eines Tags mit Stil regeln - hier die kursiven und fetten Textteile - ver wenden die gleiche Schrlft farbe wie das umgebende
-Tag.
Sehen Sie vorher naeh, ob der Fahrstuhl funktioniert _orem ipsum dolor sjt amet consectetuer cdlplsclng e/it. �ed diam nonL.mmy nich eulsmod IIneidunl ul laoreet dolore magna aliauom erat volutpat. Ut wisl en·m od
ex ea commooo consequot. DL.is eutem vel eum ;;ure door in hendrerit in
vulpulale velil esse rroIe�lie eonsequal. vel ;lIum doore eu feuglol nullo faei HINWEIS: lorem ipsum dolor sit amet consectetuer adipiscing el t sed diom
Ut vvisi cnim ad minim vcniam, quis nostrud cxcrd lalion ullomcorpcr susc;pit
laborti'> nist ul oliqup e)( ea commodo comequal. Ouis autem vel eum iriure dolor in nendrerir In vulpulale velil esse moleslle consequat. vel lilum dolore eu feuglal nula foel
Beachten Sie, wie die Änderungen an der Schriftfarbe der
-Tags auch die darin enthaltenen Tags beeinflussen. Der Text innerhalb der <em>- und <strong>-Tags ist ebenfalls blaugrün, wobei die kursive bzw. fette Darstellung für diese Elemente jedoch beibehalten wird. Dieses Verhalten ist äußerst sinnvoll. Schließlich ent spricht es den Erwartungen, dass sämtlicher Text eines Absatzes die Farbe wechselt - unabhängig von den enthaltenen Tags. Ohne die Vererbung der Schriftfarbe wäre der Arbeitsaufwand ungleich höher. In diesem Fall müssten Sie für <ern> und <strong> zusätzliche Regeln formulieren, um die Farbe anzupassen. Möglicherweise müssten Sie Selektoren für Nachfahren Elemente wie p em und p strong verwenden, um die Formatierung zu ändern.
Kapitel4: Zeit sparen durch Vererbung
73
Übung: Vererbung
Vererbung verwenden. um eine ganze Seite umzugestalten Die Vererbung funktioniert genauso gut mit klassenbasierten Stilen. Jedes Tag mit dem korrekten Wert für das Attribut dass gibt die Eigenschaftswerte an seine Nachfahren weiter. Mit diesem Wissen ist es nicht mehr schwer. schnelle und umfassende Änderungen an einer ganzen Seite vorzunehmen. 1.
Kehren Sie zu Ihrem Texteditor und der Datei vererbung.hbnl zurück. Unterhalb des Stils für das
-Tag wird nun eine weitere Regel angelegt.
2.
Klicken Sie direkt hinter die schließende geschweifte Klammer der Regel für das
-Tag. Drücken Sie die Enter-Taste und geben Sie .seitenstil { ein. Im Folgenden erstellen Sie eine neue CSS-Klasse. die auf das -Tag angewandt werden soll.
3.
Drücken Sie erneut die Enter-Taste und geben Sie die folgenden Eigen schaften und Werte für die Stilregel ein: font-farnily: Arial, Helvetica, sans-serif; font-size: lern; color: #fdd04l;
4.
Beenden Sie die Stilregel wie gewohnt durch Drücken der Enter-Taste und Eingabe der schließenden geschweiften Klammer. Das Ganze sollte nun so aussehen: . seitenstil { font-farnily: Arial, Helvetica, sans-serif; font-size: lern; color: #fdd04l; } Die fertige klassenbasierte CSS-Regel legt Schriftart, -größe und -farbe für das -Tag fest. Dank der Vererbung können nun alle Tags innerhalb des ... -Tag-Paars das gleiche Schriftformat verwenden.
5.
Erweitern Sie das öffnende -Tag um das Attribut . Das Tag sollte nun so aussehen: . Auf diese Weise wird die gerade definierte Klasse auf das -Tag angewendet.
6.
Sichern Sie Ihre Webseite und betrachten Sie sie in einem Webbrowser. Wie Sie in Abbildung 4-4 sehen können. sorgt diese einzelne Stildefinition für ein nahtloses. konsistentes Aussehen für den gesamten Text der Seite. Sowohl Überschriften als auch Absätze innerhalb der -Tags haben das neue Schriftformat angenommen.
74
CSS: Missing Manual
Übung: Vererbung
Alllldu li "l"': Wie Sie im Browser leicht erkennen können, werden die für das -Tag defi nierten Eigenschaftswerte automatisch an die enthalte nen Tags vererbt Auf diese Weise ist es einfach, globale Formatierungen an einer Seite vorzunehmen.
COSMOFARMER Die OnIine-Adresse für In In Holzkis1en lassen sich Dinge hervorragend verstecken T.ortm ;psum dolor f'it amcl.COlId minim vcniom., qw.. DOSlrUd eJlCrcl btlon �Uamc".,.... �_Tag. Es enlhiill Jtaf1( hervorgehabenen Text,
•
:e
,
Ti
AbbIld••, 5-2: Hier sehen Sie, wie ein Webbrowser ermittelt welche Stildefi nitionen bei Konflikten zwischen vererbten Eigenschaften ver wendet werden sollen: Das <em>-Tag im ersten Absatz (1) erbt den Wert für font-family sowohl von als auch von
. Da beiden Elementen unterschiedliche Schriftarten zugewiesen wurden, verwendet das <em>-Tag die Einstellun· gen seines nächsten Vorfahren, des
-Tags. Wird einem Tag dagegen direkt ein Wert für eine Eigenschaft zugewiesen hier font-family für das <strong>-Tag (2) -, hat diese auf jeden Fall Vorrang vor möglicherweise vererbten Werten für die gleiche Eigenschaft.
,
4
Direkt zugewiesene Stildefinitionen gewinnen Zieht man aus der » Nächster Vorfahr((-Regel den logischen Schluss, gibt es im CSS Stammbaum einen ständigen Hauptgewinner: einen Stil, der einem bestimmten Element direkt zugewiesen wurde. Stellen wir uns vor, es wurde für -,
und <strong>-Tags jeweils ein Wert für die Eigenschaft font-color definiert. Zwar ist der Stil für den Absatz spezifischer als der für , allerdings ist der direkt für das <strong>-Tag definierte Stil noch eindeutiger als die anderen beiden und erhält daher den Vorrang. Er wurde ausdrücklich und ausschließlich für <strong> Tags formuliert, wodurch die vererbten und miteinander konkurrierenden Eigen schaftswerte der Vorfahren-Elemente keine Geltung mehr haben (s. Abbildung 5-2, Nr. 2). Einfach gesagt: CSS-Eigenschaften, die einem HTML-Element ausdrücklich zugewiesen werden, haben vor vererbten Eigenschaften Vorrang. Diese Regel erklärt auch, warum manche Eigenschaftswerte scheinbar nicht vererbt werden, obwohl sie das eigentlich sollten. Ein Link innerhalb eines Absatzes mit rotem Text wird trotzdem im Standardblau des Browsers dargestellt, weil der Brow ser eigene, vordefinierte Stilregeln für das -Tag verwendet und so möglicher weise vererbte Werte überschreibt.
TIpp: Weitere Informationen zum Überschreiben von vordefinierten Tag-Stilen und das Ändern der Link farben finden Sie auf Seite 224.
Ein Tag, viele Stile Vererbung ist nur eine Möglichkeit, wie ein Tag von mehreren Stildefinitionen beeinflusst werden kann. Daneben ist es auch möglich, dass einem Tag mehrere konkurrierende Eigenschaftswerte direkt zugewiesen werden. Dies kann zum Bei-
82
CSS: Missing Manual
Wie Stile ka§kadiert werden
spiel passieren, wenn für
-Tags sowohl ein internes wie auch ein externes Style sheet unterschiedliche Werte für eine Eigenschaft festlegen. Um die Sache noch interessanter zu machen, wurde einem der
-Tags zusätzlich noch eine CSS Klasse mit weiteren Werten zugewiesen. Dieses Tag besitzt jetzt also drei konkur rierende Stile, die direkt zugewiesen wurden. Für welchen Stil bzw. welche Stile wird der Browser sich entscheiden? Die Antwort lautet: Das kommt darauf an. Je nachdem, um welche Art von Stildefi nition es sich handelt und aus welcher Quelle sie stammt, kann der Browser eine oder mehrere Regeln anwenden. Hier ein paar Situationen, in denen mehrere Stile fur das gleiche Tag zutreffen können: •
Das Tag wird von einem Typ-Selektor und von einem Klassenselektor ausge wählt. Nehmen wir beispielsweise einen Typ-Selektor für das -Tag. eine
Klasse namens .haupCueberschrift un d den folgenden HTML-Code: Entdecken Sie Ihre Zukunft!. Hier würden ohne weitere Stile beide Definitionen auf das -Tag angewendet. HilI": Wenn Sie sich fragen, was bei konkurrierenden Stilen passiert. haben Sie bitte noch etwas
Geduld. Die lösung i� berei15 in Sicht •
Ein Klassen- oder ID-Name wird im selben Stylesheet mehnnals verwendet.
Vielleicht wird eine CSS-Klasse .haupCueberschrift neben llirer Definition noch mal in einer Gruppe von Selelctoren verwendet, wie hier: .haupcueberschrift• .sekundaere_ueberschrift• . artikeLueberschrift. (Auf Seite 47 finden Sie eine Reihe von Gründen für dieses Vorgehen.) Beide Regeln enthalten Anweisungen für die Darstellung von Elementen, denen die Klasse .haupCueberschrift zugewiesen wurde. •
Einem Tag wurde sowohl ein klassenbasierter als auch ein ID-basierter Stil
#kopfteil, eine Klasse namens .news und folgenden HTML-Code: . In diesem Fall werden sowohl die für kopfteil als auch die für news definierten Stile verwendet. zugewiesen. Nehmen wir beispielsweise eine ID namens
•
Es gibt mehr als ein Stylesheet. das Stile mit dem gleichen Namen definiert.
Stildefinitionen mit dem gleichen Klassen- oder ID-Namen können gleichzeitig in externen wie internen Stylesheets definiert werden. •
Es gibt komplexe Selektoren. die auf das gleiche Tag zutreffen. Diese Situa
tion kann häufig auftreten. wenn Sie Selektoren für Nachfahren-Elemente (s. Seite 42) verwenden. Das kann beispielsweise der Fall sein. wenn Sie ein -Tag verwenden und sich darin ein Absatz mit einem class-Attribut befindet, Z.B.
. Die folgenden Selektoren können Stile für die sen Absatz definieren: •
#haupttei[ p
•
#hauptteil p.autor
Kapitel S: Mit mehreren Stilen umgehen: die Kaskade
83
Spezifität: Welcher Stil gewinnn •
p.autor
• .
autor
Werden mehrere Stile für das gleiche Element defmiert. kombiniert der Webbrow ser die einzelnen Anweisungen. sofern es keinen Konflikt gibt. Ein Beispiel soll die ses Konzept verdeutlichen. Stellen Sie sich vor. Ihre Webseite enthält einen Absatz mit dem Namen des Autors inklusive Link und E-Mail-Adresse. Der HTML-Code könnte in etwa so aussehen:
Geschrieben von Jean Graine de Pomme
Das Stylesheet enthält drei Regeln. die den Link formatieren: a { color: #6378df; } P a { font-weight : bold } .autor a { text·decoration: none; } Die erste Regel fcirbt alle -Tags hellblau (in der Webfarbe » powder blue«) ein, die zweite Regel legt fest, dass alle -Tags innerhalb von
-Tags fett dargestellt werden sollen. und die dritte Regel entfernt die standardmäßigen Unterstreichun gen für Links, die sich innerhalb von Tags mit der Klasse autor befinden. Alle drei Regeln gelten für das -Tag. Da in allen drei Regeln unterschiedliche CSS-Eigenschaften benutzt werden, gibt es in diesem Fall keine Konflikte. Ähnlich verhält es sich bei dem Vererbungsbeispiel auf Seite 80: Die einzelnen Regeln wer den zu einer gemeinsamen Über-Regel kombiniert, die alle drei Eigenschaften ent hält. Unser Link wird demnach hellblau. fett und ohne Unterstreichung dargestellt. Hillwels: Die richtigen Kopfschmerzen fangen erst an, wenn Sie feststellen, dass die Formatierung für
den Link auch noch von vererbten Eigenschaftswerten abhängen kann. So würde der Link etwa eine dem umgebenden Absatz zugew-iesene Schriftart übernehmen. Ein paar Werkzeuge können dabei helfen, das Innenleben der Kaskade besser zu analysieren (s. Kasten auf Seite 86).
Spezifität: Welcher Stil gewinnt? Das vorige Beispiel ist leicht zu verstehen. Was passiert aber. wenn die drei Regeln oben für die Eigenschaft fontfamily unterschiedliche Schriftarten definieren? Wel che der drei Schriften würde schließlich im Webbrowser angezeigt? Wenn Sie dieses Kapitel sorgfaItig gelesen haben. wissen Sie. dass die Kaskade eine Reihe von Vorschriften zur Verfügung stellt. die dem Webbrowser helfen, Konflikte zwischen CSS-Eigenschaften aufzulösen. In erster Linie heißt das: Regeln mit der höchsten Eindeutigkeit (Spezifität) haben Vorrang vor allgemeinen Regeln. Aber wie an den Beispielen auf Seite 84 zu sehen ist. ist manchmal nicht klar. welcher Stil am eindeutigsten ist. Glücklicherweise stellt CSS eine Formel bereit. nach der sich die Spezifität einer CSS-Regel bestimmen lässt. Hierbei werden den verschiedenen
84
CSS: Missing Manual
Spezifität: Welcher Stil gewinnn Selektor-Arten (wie Typ-Selektor, Klassen-Selektor, ID-Selektor usw.) unterschied lich hohe Werte zugeordnet. Das System funktioniert so: •
Typ-Selektor: 1 Punkt
•
Klassen-Selektor: 10 Punkte
•
ID-Selektor: 100 Punkte
•
Inline-Stildefinition (s. Seite 25): 1000 Punkte
Je höher die Zahl, desto höher die Spezifität. Hier ein paar Beispiele: •
ein Typ-Selektor für das -Tag (Spezifität = 1)
•
ein Klassen-Selektor mit dem Namen .hervorhebung (Spezifität = 10)
•
ein ID-Selektor namens #logo (Spezifität = 100)
Enthält Ihre Webseite den HTML-Code
src= "logo.gif' />
, !ic COO1QjOlal. ,"Cl i1Jum dolmc eu
feugial null. rac;
ßambus: keine gute Idee w",m ip,,,,n d/or ,iJ Gm". con>eat, Ut wioi ,."im .d rnlnim ..... ., qui.
"""hU "",!lud"""";taliom ullomeo -
.--, '
GOOQlt
Textausschrnückungen U D1 I:Gi t richl: ll! : [Text� :i [ d. l l: io; ; h lm i ll: iD l: ffiLill ky\:r wi:l: h :il: l l , UberstrichenerText muss auch einen Nutzen haben. Nur welchen?
Q.J
AlIIIildu"l ''': Die Eigenschaft text-decoration bei der Arbeit. Wenn das für die Erfinder von (55 wirklich als llde(Qration« gilt sollten Sie Ihre Wohnung vermutlich besser nicht von diesen Leuten einrichten lassen.
D lI rWt, e 6 t r i G A e O e r T ex twi Fdm a n l.l A m a lb e o ll ti!; t ,lI m.\ o G e n m ge oZ li m a r ki e r e n , Der Wert Mblink" ist einfach nur nervig. V a Gw e u " S j eVi 9 11 e B ,k Ö a B e BS i ee i B e rn&I e rn e B ta li Ma U eW e r t ea ll f e i B rn a lZ l:!' r e j 6 e ü ,
,
Tipp: Unter- und Überstreichungen können Sie auch mithilfe der Eigenschaft border erreichen (Seite 146). Der große Vorteil liegt darin, dass Sie die Platzierung. Größe und Farbe bestimmen können. So sind Über- und Unterstreichungen möglich, die Ihren Text nicht wie einen link aussehen lassen. Der Wert overline sorgt dafür, dass eine Linie oberhalb des Texts erzeugt wird, wäh rend line-through den Text tatsächlich durchstreicht. Manche Webdesigner ver wenden diesen Effekt, um anzuzeigen, dass bestimmter Text auf einer Seite entfernt wurde oder nicht mehr aktuell ist. Wenn Sie dies mit dem Selektor a;visited kombi nieren, können Sie einen coolen Effekt erzeugen, bei dem bereits besuchte Links durchgestrichen werden, wie die Artikel auf einem Einkaufszettel. Um sämtliche Textdekorationen zu deaktivieren, gibt es außerdem noch das Schlüsselwort none, das verwendet wird wie hier gezeigt: text-decoration: nonej
112
CSS: Missing Manual
Wörter und Buchstaben formatieren
Warum sollten Sie eine Textausschmückung verwenden, die die Dekorationen ent fernt? Am häufigsten kommt das vor, wenn die Unterstreichung unter einem Link entfernt werden soll. (Mehr dazu auf Seite 224.)
Buchstaben- und Wortabstände Eine weitere Möglichkeit, Text hervorzuheben, besteht in der Änderung der Abstände zwischen Buchstaben und Wörtern (s. Abbildung 6-5). Mithilfe der CSS Eigenschaft letter-spaäng können Sie Überschriften noch mehr Gewicht verleihen, indem Sie mehr Buchstaben in einer Zeile unterbringen. Erhöhen Sie den Abstand dagegen, erscheinen überschriften ruhiger und majestätischer. Negative Werte ver ringern den Buchstabenabstand: letter-spacing: -lPXj Ein positiver Wert schafft mehr Platz zwischen den Buchstaben: letter-spacing: 10PXj Analog dazu können Sie auch die Abstände zwischen ganzen Wortern vergrößern oder verringern. Hierfür ist die Eigenschaft word-spaäng zuständig. Sie wirkt sich nur auf den Leerraum zwischen den Wörtern aus, ohne dabei die Wörter selbst zu verändern: word-spacing: 2PXj
�'' J I.C4'5.'I.800
" ... N .... • /'I c_., .
'1P"
" 'R
•
..b,n· "nd wo.'ubIO .. Q C< , ein. Wie bereits im vorigen Kapitel gesagt, ist es prinzipiell eine gute Idee, auch gleich das schließende -Tag anzulegen, damit es später nicht zu Feh lern kommt.
4.
Drücken Sie erneut die Enter-Taste und geben Sie ein. Nachdem Sie die <style>-Tags erstellt haben, können Sie nun eine CSS-Regel anlegen, die ein paar allgemeine Eigenschaften für den gesamten Text dieser Seite festlegt.
5.
Klicken Sie auf die leere Zeile zwischen dem öffnenden und schließenden <style>-Tag und geben Sie body { ein. Dies ist ein einfacher Typ-Selektor, der das gesamte -Tag nebst Inhalt auswählt. Wie in Kapitel 4 besprochen, erben die enthaltenen Elemente die hier definierten Eigenschaftswerte. An dieser Stelle können Sie ein paar grund sätzliche Text-Eigenschaften wie Schriftart, -farbe und -größe festlegen, die als Startpunkt für weitere Definitionen dienen.
6.
Drücken Sie die Enter-Taste und geben Sie die folgenden drei Deldaratio nenein: color: #102536; font-family: Tahoma, "Lucida Grande", Arial, sans-serif; font-size: 62. 5%; Diese drei Anweisungen legen ein dunkles Blau als Textfarbe fest; als Schriftart wird Tahoma verwendet (oder eine der drei Alternativen, abhängig davon, welche Schriften auf dem Benutzerrechner installiert sind; s. Seite 101); die all gemeine Schriftgröße wird mit 62,S Prozent der Standardschriftgröße des Browsers festgelegt.
Warum sollte man die Schriftgröße auf 62,5 Prozent festlegen? Weil die Standardschriftgröße der meisten Browser (16 Pixel) multipliziert mIT 62.5em einen Wert von 10 Pixeln ergibt MIT dieser Größe
Hillwels:
CSS: Missing Manual
Ubung: Textforma· tierung in der Praxis ist es später leichter, andere Textgrößen zu berechnen. Der Wert !.sem entspricht jetzt beispielsweise einer
dieser interessanten Entde dung und we'eren Strategien für Sdlriftgrö8en finden �e unter hffp:/Idagnutcom/blog/348/ (en�isch).
tatsächlichen Größe von 1 5 Pixeln, 2ern sind 20 Pixel und
7.
so weiter.
Mehr zu
Beenden Sie die Regel, indem Sie die Enter-Taste drücken und eine schlie ßende geschweifte Klammer eingeben: Die fertige CSS-Regel sollte jetzt so aussehen wie hier: body ( color: #102536; font-family: Tahoma, "lucida Grande", Arial, sans-serif; font-size: 62.5%; ) Da Sie bereits zu Beginn das schließende -Tag eingegeben haben, kön nen Sie das jetzt nicht mehr vergessen, und Ihr Stylesheet ist vorerst fertig.
8.
Sichern Sie die Seite und betrachten Sie sie im Webbrowser Ihrer Wahl. Der Text auf der Seite wird nun mit einem anderen Schrifttyp und einer ande ren Schriftfarbe dargestellt.
Außerdem werden Sie feststellen, dass die überschriften im Verhältnis zum übri gen Text auf der Seite nicht viel kleiner geworden sind. (Die Kaskade, die Sie aus dem vorigen Kapitel fürchten gelernt haben, erhebt ihr grausames Haupt.) Es ist korrekt, dass auch die - und -Tags die flir definierte Schriftgröße von 62,5 Prozent erben. Das Problem ist, dass die meisten Browser für die Standard einstellungen ihr eigenes Stylesheet verwenden, das spezifische Einstellungen für Überschriften enthält, die mehr Gewicht haben als Ihre allgemeinen Regeln rur das -Tag (haben Sie den Stich gespürt?). Sie werden dieses Problem im nächs ten Schritt lösen.
Ü berschriften und Absätze formatieren Nachdem die grundsätzliche Textformatierung erledigt ist, geht es jetzt um die Details für Überschriften und Absätze. 1.
Kehren Sie nun zu Ihrem Texteditor und der Datei text.html zurück. Kli cken Sie direkt hinter die schließende geschweifte Klammer der gerade erstellten Regel und drücken Sie die Enter-Taste. Dann geben Sie ein: hl {. Diese Regel fonnatiert alle -Tags der Seite.
2.
Drücken Sie erneut die Enter-Taste und geben Sie die folgenden CSS Eigenschaften ein: font-size: 2.4em; color: #14556B; Damit haben Sie rur -Tags eine neue Schriftfarbe und die Größe mit 2,4 ern-Einheiten festgelegt, was in den meisten Browsern 24 Pixeln entsprechen
Kapitel 6: Textformatierung
'27
Übung: Textforma tierung in der Praxis
sollte (sofern der Benutzer nicht an den Schriftgrößeneinstellungen herumge spielt hat), 3.
Beenden Sie die Stildefinition durch erneutes Drücken der Enter-Taste und die Eingabe der schließenden geschweiften Klammer. Die komplette Regel für -Tags sollte nun so aussehen: hl { font-size: 2.4emj color: #14556Bj }
4.
Sichern Sie die Datei und betrachten Sie sie in einem Webbrowser. Als Nächstes werden wird die anderen Überschriften und Absätze ein wenig aufmotzen.
5.
Kehren Sie zu Ihrem Texteditor und der Datei text.html zurück. Klicken Sie direkt hinter die schließende geschweifte Klammer für die hJ-Regel und geben Sie die folgenden beiden Regeln ein: h2 { font-size: 1. 5emj color: #993j } p {
font-size: 1.2emj text -indent: 2emj line-height: 150%j }
Die p-Regel verwendet die Eigenschaft text-indent (s. Seite 117), mit der die erste Zeile eines Elements (meistens eines Absatzes) eingerückt werden kann, sowie die Eigenschaft line-height, mit der die Zeilenabstände verändert werden können. Ein Wert von 150 Prozent schafft etwas mehr Platz, als der sonst übli che Zwischenraum aufweist. Durch diesen zusätzlichen Leerraum wirkt der Text leichter, und die Sätze sind etwas einfacher zu lesen (aber nur, wenn Sie diese spezielle Form von Latein verstehen). Die Schriftgröße wird auf 1,2 em Einheiten, sprich: 12 Pixel, festgelegt. 6.
Sichern Sie die Seite und betrachten Sie Ihre Arbeit in einem Webbrowser. Langsam nimmt die Seite Form an. Allerdings stören die großen Abstände zwischen den Absätzen und überschriften. Sie werden hier ein wenig Ord nung schaffen.
7.
128
Wenden Sie sich wieder Ihrem Texteditor und der Datei text.html zu. Fin den Sie die zuvor erstellte Regel für das h2-Tag und erweitern Sie sie um die Deklaration für die Eigenschaft margin-bottom.
CSS: Missing Manual
Ubung: Textforma tierung in der Praxis Die Regel sollte nun so aussehen wie hier (die neue Deklaration haben wir her vorgehoben):
h2 { font-size: l . sem; color: #993; Illargin- bottOll : Spx; } Diese Erweiterung verringert den Zwischenraum zwischen einem -Tag und dem folgenden Element aufeine Höhe von 5 Pixeln. Da der Leerraum sich von Browser zu Browser unterscheiden kann, haben Sie auf diese Weise außer dem für zusätzliche Konsistenz gesorgt. Als Nächstes kümmern Sie sich um die Absätze.
8.
Passen Sie die Regel für
-Tags an, indem Sie die folgenden Eigenschaf ten hinzufügen: margin-top: 0; margin-bottom: spx; In diesem Fall verwenden wir die Eigenschaft
margin-top,
um den Leerraum
oberhalb der Absätze komplett zu entfernen. Mit der Eigenschaft margin-bottom sorgen wir dafür, dass zwischen den einzelnen Absätzen noch etwas Platz bleibt 9.
Sichern Sie die Seite und betrachten Sie Ihr Werk in einem Webbrowser: Die Seite sollte jetzt aussehen wie in Abbildung 6-11 gezeigt.
Listen formatieren Die Seite, an der Sie gerade arbeiten, enthält zwei Listen: eine ungeordnete Liste in
der linken Seitenleiste, die die einzelnen Bereiche der Website enthält, und eine ungeordnete Liste mit drei Einträgen im Hauptteil der Seite. Mithilfe von Selekto ren für Nachfahren-Elemente (s. Seite 42) können Sie für beide Listen eigene For mate festlegen.
1.
Kehren Sie zu Ihrem Texteditor und der Datei text.html zurück. Klicken Sie direkt hinter die schließende geschweifte Klammer für die p-Regel und drücken Sie die Enter-Taste. Danach geben Sie #inhalt ul { ein. Der Hauptinhalt der Seite befmdet sich innerhalb eines . . . -Tag Paars mit der ID inhalt. Sie erstellen als Nächstes eine Regel, die nur fiir unge
ordnete « ub) Listen zutrifft, die sich innerhalb des inhalt-Bereichs befmdet.
Durch die Verwendung des Selektors fiir Nachkommen-Elemente werden lis
ten außerhalb dieser -Tags (z.B. die der linken Seitenleiste) von dieser Regel nicht formatiert. 2.
Drücken Sie die Enter-Taste und geben Sie dann ein: font-size: 1 . 2ern; list-style-type: square;
Kapitel 6: Textformatierung
129
Übung: Textforma tierung in der Praxis
"00
• •
�
x
Tntform....rung
..
A I " IIIU ""/j'" /Dru .,.",./ IlIZ /01>.. iIV ! C'»/1.I
..
COSMOFARMEff- !.I -: Oie Online-Adres8e für
hdoor-Gä1ner �
t:
AIIblldung 6-n: langsam bekommt die Seite die gewünschte Form. Die Über schriften, Absätze und allgemei nen Texteinstellungen sind schon fertig.
" ,er-;
Hochhaus-Gärtnerei: Von Dauer oder Eintagsfliege? _.le.on G,,,,,,,, cIe Pontr<e Lor= P""" _ �, ....... OOfIO«tet,� ac;P;'iCI"Il "U, seI.OIl WI.1rm ....,-..c:>Ot. LI< wi>I ..,.,., od _ ""_, QlJis now<xl ""...,; tation ulamcorper suscipjt: k>bottis nisI '" aliquip ""ea c:ommodo <mSequat. Duis autem 'ilt. LI< WISj "",rn ao ..,,,,rn venibottis nisI '" aliQuip ""ea c:ommodo <mSequat. Duis autem 'o "Q�'" ....,"""",... LI< wisi ..,im od ..iim _10m, ::c.=4iIE::=}':'i.i
Die Online-Adresse fUr Indoor-G
��, EXPERTEN "" PROJUTl'
Hochhaus-Gärtnerei: Von Dauer oder Eintagsfliege?
VON JEAN GRAINE OE POM"'E lDrern ipsu" d<jor si! amet, c:ooseu>cij>jl �u. ni>I '" allqoip oom:rodo """"""1_. DU> au:em Id ""'" <X eil
00•.
•
Eu5mo _
kIbottlt:. 0U:5 3oY.em Id a.m .
_
134
CSS: Missing Manual
AbbIlduna '-1]: Schon m� ein paar CSS· Regeln können Sie schlich· ten Text m� einem starken Design versehen, das Ihre Leser bei der Navigation durch die Informationen auf Ihrer Site unterstützt
Ubung: Textforma· tierung in der Praxis Herzlichen Glückwunsch! In diesem Kapitel haben Sie eine große Zahl an CSS Eigenschaften zur Textformatierung kennengelernt und eine NullachtfünfZehn HTML-Seite mit einem ansprechenden Design versehen. Im nächsten Kapitel wer den Sie CSS-Eigenschaften zur Formatierung von Grafiken. Rahmen sowie von Innen- und Außenabständen kennenlernen. Außerdem zeigen wir Ihnen einige weitere Designoptionen von CSS.
Kapitel 6: Textformatierung
135
Kapitel
7 Rahmen, Innen- und Außenabslände
Jedes HTML-Tag ist von einer ganzen Welt aus CSS-Eigenschaften umgeben, die das Aussehen des Tags im Webbcowser bestimmen. Einige Eigenschaften. wie Rah men oder Hintergrundfarben. sind sofort mit bloßem Auge erkennbar. Andere scheinen dagegen unsichtbar, Z.B. Innen- und Außenabstände. Sie bestimmen, wie viel Leerraum um die einzelnen HTML-Elemente dargestellt wird. Wenn Sie die Funktionsweise dieser Eigenschaften begriffen haben. können Sie attraktive. spal tenbasierte Layouts und dekorative Seitenleisten erstellen und selbst bestimmen, wie groß der Abstand (bzw. Leerraum oder
white space)
zu den anderen HTML
Elementen sein soU. Mit wenigen CSS-Regeln erscheint Ihre Seite nicht mehr so überladen, sondern leichter und professioneller. Gemeinsam bilden die in diesem Kapitel besprochenen CSS�Eigenschaften eines der wichtigsten Konzepte von CSS: das Boxmodell.
Das Boxmodell verstehen Wenn Sie an Absätze oder überschriften denken, stellen Sie sich dabei vermutlich Buchstaben, Wörter und Sätze vor. Beim �Tag haben Sie Fotos, Logos und Bilder vor Augen. Ein Webbrowser behandelt diese (und auch alle anderen) Tags als kleine Kästen (eng!.
boxes), die die
Sätze, Bilder, Überschriften usw. enthalten,
wie in Abbildung 7� 1 gezeigt. Die den Inhalt umgebende Box besteht aus verschiedenen Teilen: •
Der
Innenabstand (padding)
ist der Leerraum zwischen dem Inhalt und dem
Rahmen. Der Innenabstand sorgt beispielsweise fur einen gewissen Abstand zwischen einem Foto und seinem Rahmen.
Kapitel 7: Rahmen. Innen- und Außenabstände
1]7
Das Boxmodell ver stehen •
Der Rahmen (border) steht in CSS für die visuelle Begrenzung (meistens eine durchgehende Linie, Details finden Sie im weiteren Verlauf dieses Kapitels), um das HTML-Element herum. Ein Rahmen muss so definiert werden, dass er das gesamte Element umgibt oder nur an bestimmten Seiten dargestellt wird (oder auch gar nicht).
•
Die Hintergrund/arbe (background-color) füllt den vom Rahmen begrenzten Raum innerhalb der Box (auch wenn der Rahmen nicht angezeigt wird).
•
Der Außenabstand (margin) bezeichnet den Leerraum, der einzelne Tags von einander trennt. Ein Beispiel für Außenabstände ist der Leerraum, den ein Browser standardmäßig zwischen dem Rand des Browserfensters und dem eigentlichen Inhalt Ihrer Seite darstellt.
oberer Außenabstand
oberer Rahmen
oberer Innenabstand r--------,
linker Außen abstand
linker Rahmen
linker Innenabstand
: , : :
'-."In, IO'''' ' bereich
: rechter , : Innen :, abstand
rechter Rahmen
rechter Außen abstand
, ---------
unterer Innenabstand unterer Rahmen unterer Außenabstand
AII.11dung 7-1: Das CSS-Boxmodell umgibt den Inhalt eines Tags (z.8. Text) von innen nach außen mit einem Innen abstand (padding), einem Rahmen (border) und einem Außenabstand (margin). Für den Bereich innerhalb des Rahmens (Inhalt plus Innenabstand) können Sie außerdem eigene Hintergrund-Eigen schaften (z.8. background-color) definieren. Die Hintergrundfarbe erstreckt sich bis zur Außenkante des Rahmens. Wenn Sie für den Rahmen also eine gestrichelte Linie definieren, »scheint« dazwischen die Hintergrundfarbe durch (s. Seite 150).
Lorem ipsum dolor sit �met, consectetuer �ipi!Cil1i eilt, sed diam oonummy nlbh eullmod lIncklun! ut laoreet dolore magna allquam erat volutpat, Ut wi�i enim ad minim veniam, qUI� nostrud exerd
o
tati n ullamcorper susdpit loborti! nisl ut �liquip mn5e!1uaL Dul� autem I u e_
vel eum tl r
Lorem ip9.Jm dolor sit amet, consectctuer
ex ea commodo
n '����;::L_L_ Inh0,,�be ;, reieh Rahme
eht, sed di;,m nonLJmmy nibh eui:smod tincidunt magna allquam etat o utpat. ut wisi enlm ad minim �enlam, uis nostrud exerci tation ullamcorper �u!dpit IOOOrti5 ni51 ut aliquip ex e� c m do con>equat, Dui.
laornet dolore om o
q
vl
autem vel eum !nur .
Innenabstand
FT-
- - - - -
Lorem ipsum dolor sit amet, conse .I""rn r.oot voloJtp�t. Ut wi.i g":m .d mll lm """,am, Q,rs n05trud exer-Tags umgeben ist. Weitere Beispiele für Inline-Elemente sind für das Einbinden von Bildern. (für Links) und die verschiedenen Tags zum Erzeugen von Formularfeldern. Dabei haben Inline- und Block-Elemente mehr Gemeinsamkeiten als Unter schiede. So können Sie Schriftarten, -farben und Hintergründe definieren und für beiden Arten Rahmen defmieren. Wenn es um Innen- und Außenabstände geht.
gibt es allerdings gewisse Unterschiede. So können Sie zwar den Leerraum links
und rechts von einem Inline-Element mit Innen- und Außenabständen verändern,
die Höhe eines Inline-Elements lässt sich dagegen mit oberen und unteren Innen und Außenabständen nicht verändern. Für den oberen Absatz in Abbildung 7-6 wurde das Inline-Element mit Rahmen
ground-color)
(border).
einer Hintergrundfarbe
(back
und einem Außenabstand von 20 Pixeln an allen Seiten versehen.
Der Browser fügt aber nur links und rechts vom Inline-Element den gewünschten Leerraum ein.
....... __ .. -.. - _ ... .... ..... fw." -....... _...... __ n.._.",_ .... '" ' , ....-;.. ... "'_ oo.-Tags. Mit dem Schlüssel wort seroll ist es möglich, auch große Mengen Text auf kleinem Raum unterzu bringen. Leider werden bei dieser Option die Scrollbalken immer angezeigt, selbst wenn der Inhalt dies eigentlich nicht erfordert. •
auto. Damit die Scrollbalken nur angezeigt werden, wenn sie wirklich gebraucht auto. Sie funktioniert genau wie der Wert seroIl, lediglich die Scrollbalken werden nur bei Bedarf angezeigt.
werden, verwenden Sie die Option
•
hidden. Diese Option sorgt dafür, dass Inhalt, der über die Box hinausgeht, ver steckt (nicht angezeigt) wird (Abbildung 7-10 unten). Diese Option ist ein wenig gef ahrlich, weil möglicherweise wichtiger Inhalt einfach von der Seite verschwindet. Allerdings kann dieser Wert beim Umgehen einiger Program mierfehler im Internet Explorer hilfreich sein (s. Seite 325).
Das defekte Boxmodell des Internet Explorer 5 reparieren Und hier ein paar schlechte Nachrichten: Internet Explorer 5.5 für Wmdows und frühere Versionen berechnen die Breite und Höhe nicht korrekt. Anstatt die Summe aus Innen- und Außenabständen, Rahmen und den Werten für width bzw.
height zu verwenden, benutzt IE 5.5. - und IE 6 im » Quirks« -Modus
(s. Seite 13)
nur den Außenabstand und die Breite/Höhe. Innenabstand und Rahmen werden
154
CSS: Missing Manual
Höhe und Breite festlegen
.on •
•
e x
•
' ''' h< , .,
Ub,,fl",,
�I1 ""Im ad m1r.1n\ \"On!;,m, ""i. no.<trud C'''; ",ion ullamc"'P"" ,"",ip" Ioborti. ni,1 u,
dtn Wert ·v181b1c" -Bfttötij:t d,.,. lnhaltll>thr I'btz, ...ird h .. h dieser W. Buc
I
AII.11dung 7-10: Die Eigenschaft overflow gibt Ihnen drei Möglichkeiten, mit Text der nicht in ein Element passt, umzugehen. Der Wert visible zeigt den Inhaltauf jeden Fall an (oben), auch wenn dieser aus dem EIement »herausläuft«. Die Werte scrall und auto erzeugen Scrallbalken (Mitte), während der Wert hidden (unten) den Inhalt einfach abschneidet
Die CosmoFarmer.com-Herbstmodenschau Ideen fijr bessere Wohn.zimmer-Agrikultur
AIIblldung 7-15: Die Webseite enthält bereits einige grundsätzliche Textformatierungen_ Mit ein paar Anpassungen am Boxmodell wird das Ganze aber noch besser aussehen.
• � SIe nid"lt. d.M _ woeder abzusU:llM. • GerOOe '" kleinen Appartements düngt ..... besRI" mir; Katreesatz als mit l-liiI"ner1do consequat. 0Uis autem vei ""rn
irlure.
Yves Saint Laurent Heckenscheren Lorem Ipsum cIokr sIt arnet. consectetuer ad:Plsdng eIit, sec! diam ,..,..,mmy nlbh � tinddunt ut Iaoreet doIofe
lT1il\Il\a aliquam trat voIutpat. Ut wisi enim ad mlnim veniam, Quis no&trud exerd t.Jtion Ullamcorper susciplt Iobortis nisI ut
lIIiQUip eI( eil commodo CI.If"ISoequat. Ouis autem \IeI eum lrilKe. L..Orem Ipsum doIor sit amet, consectetuef adipisdng eIit,
sec! dlam ,..,..,mmy nlbh euismod �ncldunt ut Iaoreet doIore magna aliQuam erat.olutpat. Ut �sI enim ad minim -m"IIam, QUi� nostrud exerd t.ltion ullamcorper suscipit lobortJs nlsl ut aliQulP elC ea COIIVTIOdO conseQUat. Oui!! autem VI!! eum e. iriur
• •
"
2.
Öffnen Sie die Datei seitenleiste.html aus dem Ordner kapiteL07 in Ihrem Texteditor. Zu Beginn erweitern Sie die Seite um ein internes Stylesheet.
3.
Klicken Sie direkt hinter das schließende -Tag (mit dem das externe Stylesheet eingebunden wurde), drücken Sie den Enter-Taste und geben Sie ein: <style type="textlcss">. Dieses Tag leitet das interne Stylesheet ein, Danach werden Sie eine CSS-Regel anlegen, mit der die Ränder der HTML-Seite angepasst werden und eine Hin tergrundfarbe festgelegt wird.
4. Drücken Sie die Enter-Taste und geben Sie dann die folgende Stildefini tion ein: body { margin-top: 15pXj
Kapitel 7: Rahmen, Innen- und Außenabstände
165
Außenabstände, Hinter gründe und Rahmen
margin-left: 0; margin-right: Oj padding: Oj background-color: #f8faflj } Diese Regel versieht die Seite mit einem grau-grünen Hintergrund. Die Ein stellung der Eigenschaft
margin-top
sorgten dafür, dass der Seiteninhalt 15
Pixel unterhalb der Oberkante des Ansichtsbereichs dargestellt wird. Links, rechts und unten wird dagegen der gesamte Leerraum entfernt, sodass der Inhalt bündig mit den Kanten des Ansichtsbereichs angezeigt wird. Das glei che Ergebnis hätten Sie auch mit der einzelnen Kurzschrift-Eigenschaft margin (Seite 140) deftnieren können, nämlich so:
margin: 15px 0 0 0;.
Damit auch Opera mitspielt, verwenden wir hier die Einstellung padding: 0;. Anders als die anderen Browser benutzt Opera die Eigenschaft padding anstelle von margin, um den leerraum zwischen Inhalt und dem Rand des Ansichtsbereichs zu definieren. Hillwels:
Zum Schluss benötigen wir noch ein schließendes -Tag, damit das Stylesheet vollständig ist.
5.
Drücken Sie die Enter-Taste und geben Sie auf der neuen Zeile ein.
Ihr Stylesheet ist jetzt fertig. Damit ist es an der Zeit, die Seite im Browser zu
überprüfen.
6. Speichern Sie die Seite und betrachten Sie sie in einem Webbrowser. Die obere Textzeile ist ein wenig von der Oberkante des Ansichtsbereichs abgerückt, während die linke und rechte Seite der Überschriften und Absätze bündig mit den seitlichen Kanten des Ansichtsbereichs dargestellt werden. Das sieht auf der linken Seite etwas überfüllt aus. Wir werden uns später in dieser Übung damit beschäftigen.
Als Nächstes kümmern wir uns um den Leerraum zwischen den Überschriften und Absätzen.
Den Leerraum zwischen den Elementen anpassen Ober- und unterhalb von Überschriften, Absätzen, Listen, Formularen und ande ren Block-Elementen fügen Webbrowser automatisch etwas Leerraum ein. Die genauen Maße sind browserabhängig. Besser lassen sich die Ergebnisse vorhersa gen, wenn Sie die Werte selbst festlegen. Wie das geht, wird in den folgenden Schritten beschrieben.
1.
166
Kehren Sie zu Ihrem Texteditor und der Datei seitenleiste.html zurück. Kli cken Sie direkt hinter die schließende geschweifte Klammer des body Selektors. Drücken Sie die Enter-Taste und geben Sie die folgenden zwei CSS-Regeln ein:
CSS: Missing Manual
Außenabstimde. Hinter gründe und Rahmen h,
{ margin: 0;
) h2 { .argin-top: lOpx; margin-bottom: 0; )
Die erste Regel setzt ruf alle -Überschriften sämtliche Außenabstände auf null; die zweite Regel entfernt den unteren Außenabstand rur alle -Ele mente, während der obere Außenabstand eine Höhe von 10 Pixeln erhält. Wenn Sie die Seite jetzt betrachten, werden Sie keine großen Veränderungen feststellen. Vielleicht fällt Ihnen aber auf, dass zwischen der primären « hi» Überschrift und der Oberkante des Ansichtsbereichs sowie ober- und unter halb der -Elemente ein gewisser Zwischenraum entstanden ist. Das liegt daran, dass ober- und unterhalb des Absatzes und dem -Tag (»Ideen für bessere Wohnzimmer-Agrikultun() immer noch Außenabstände vorhanden sind. Die �nde zwischen den - und
-Tag; haben sich nicht verändert. weil der untere Au8enabstand von und der obere Au8enabstand von
bereits zusammengefasst wurden. (Mehr zu den Mysterien der zusammengefassten Au8enabstände finden Sie auf Seite 141). 1III:IrftIs
Entfernen Sie als Nächstes den Leerraum oberhalb der Absätze und unterhalb des -Tags. 2.
Klicken Sie direkt hinter die schließende geschweifte Klammer des h2-Typ Selektors und drücken Sie die Enter-Taste, um eine neue Zeile zu erzeu gen. Danach geben Sie die folgende CSS-Regel ein: p { margin-top: 0; margin-bottom: 10px; )
3.
Sichern Sie die Datei und betrachten Sie sie in einem Webbrowser. Der Zwischenraum zwischen der überschrift und dem Absatz ist verschwun den. Allerdings gibt es aufgrund der Einstellung für margin-bottom immer noch einen Zwischenraum von 10 Pixeln zwischen den einzelnen Absätzen (s. Abbildung 7·16).
Text mit Hintergründen und Rahmen hervorheben Mit Hintergründen können Sie eine Seite oder auch nur Teile davon (Seitenleisten, Navigationselemente usw.) farbig gestalten. Aber auch andere Anwendungen sind möglich, z.B. das Hervorheben von Überschriften. Und Rahmen können wesent lich vielseitiger eingesetzt werden, als ihr Ruf es vermuten lässt. Neben ihrer einfa-
Kapitel 7: Rahmen Innen- und Außenabstände .
167
Außenabstände, Hinter gründ e und Rahmen
ehen Verwendung als » Rahmen(( um verschiedene Elemente (Bilder. Tabellen usw.) können einzelne Rahmenseiten die Aufmerksamkeit der Besucher z.B. auf bestimmte Überschriften und einzelne Absätze lenken und so das graue und etwas klobige -Tag ersetzen. In dieser übung werden wir Hintergründe und Rah men(seiten) verwenden. um die Überschriften einer Seite zu betonen.
AOO
IC-El lII.
e
o "kIMef�n .
x4. * ___ .�.
f": Cool: ea cotIVTIOdO consequal.. OUIS aut.em W!Ieum iriure. lorf!m Ipsum doIor sit amet, consectetuer ildipisdng eIi!. sed d'am ronummy nibh euismod tinddlWll Ul Iao<eet � magna aliQ""m erill.lIOIutpat. UI wisl erlim iId "'nim >'eniam, quis nostrud exerd tation ul�pet suscipIt. Iobortls nisl lll aliQUip elC tiI commodo consequat. DuIs aUlem W!I tum .....
tatIon ullarTlClJ!l)el" susdp;llobor"tls nisj UI: aliquip ex ea cornrnodo consequat. Outs autem VI!! @um lriure.
Yves Saint Laurent Heckenscheren tl:lrem
ip:sum (IoIor $11 amet. oonsertetuer ad:erci tation ullamcorper susdpIt lDbortl.s nisl ut aliquip ex ea oommodo consequat. Quls autem VI!! Nm irlull!. L.cnm ipsum dcIIof sit amet, lDnSeC1et\Jef adipiscing eilt, � diam nonurrrny nfbh eulsmod tinddunt ut Iaoreet doIore magna aiiQllam erat voIUlPilt. Ut wisl enim acI minim l'eniam, quis nostrud exerd tation ullarTlClJ!l)el" susdp;llobor"tis nisI ut aliquip ex eil cornrnodo consequat. Ouis autem VI!! @um Irlure. L.cnm ip:sum dcIkIr sil amet,
Schon mit wenigen CSS Regeln verpassen Sie schlichtem HTML-Code ein anspruchsvolles Design. Die Seitenleiste zieht nicht nur dieAufmerksamkeit auf sich, sondern lässt gleichzeitig noch Platz für den Haupttext der Seite.
• � Sie NdIt, das w
WIeder abzustellen. Ger/Ide In k\eInen App/JrtemetIl$ dUngI: man ba!ier mit KatTeesMZ • mIt Hühne bild. Wir arbeiten auch diesmal wieder an einer Webseite von CosmoFarmer.com (Abbildung 8-10). In diesem Fall gibt es bereits ein externes Stylesheet mit eini gen grundsätzlichen Stilregeln, die in die HTML-Seite eingebunden werden.
'- .... � """' ........__-......... ,... _...' _ _ ........tDM,.".. .,_...... ., .... ......., .,-,' __Ut..;,; ..... od ....... """"'" ... -....•...,;"""" _ ...,;."""""" ""' ....... img.abbHdung { } Hiermit fügen Sie die oben stehende CSS-Regel direkt über dem schließenden -Tag ein. Der Selektor img.abbildung trifft lediglich auf -Tags zu, denen die Klasse abbildung zugewiesen wurde. Auf diese Weise werden nur die gewünschten Bilder formatiert.
KapitelS: Webseiten mit Grafiken versehen
193
Übung: Eine Fotogalerie erstellen
4.
Erweitern Sie die gerade erstellte Regel um Deklarationen für die Eigenschaftenfloat und margin, wie hier gezeigt: float: right; margin-left: 10px; margin-bottom: 10px; Die j1oat-Deklaration bewegt das Bild an den rechten Seitenrand und sorgt dafür, dass es links vom Text umflossen werden kann. Der linke und der untere Außenabstand sorgen dafür, dass das Foto etwas Abstand zum Text und so etwas Platz zum Atmen bekommt. Im nächsten Schritt versehen Sie das Bild mit einem Rahmen und ein wenig Innenabstand, um ihm einen professio nelleres Aussehen zu geben.
5.
Erweitern Sie die Regel um die Eigenschaften border und padding. sodass die fertige Stildefinition jetzt so aussieht: img.abbildung { float: right; margin-left: 10px; margin-bottom: 10px; border: lpx solid #666j padding: 10PXj
} Wenn Sie die Seite betrachten, werden Sie allerdings noch keine Änderungen bemerken, weil wir dem -Tag erst die korrekte Klasse zuweisen müssen. 6. Finden Sie das -Tag und erweitern Sie es um das Attribut c/ass="abbildung", sodass das Tag jetzt aussieht wie folg>: Jetzt erhält das Bild sämtliche Formatierungsanweisungen, die Sie zuvor in der Stildeftnition für die Klasse .abbildung festgelegt haben. 7.
Betrachten Sie die Seite in einem Webbrowser. Sie soUte jetzt aussehen wie die in Abbildung 8-10 links.
Die fertige Version dieser Übung fmden Sie in der Datei bild.htmi im Ordner
kapiteL08-fertig.
Ein Bild sagt oft mehr als Tausend Worte. Dennoch sind manchmal ein paar Erläu terungen zu einem Bild notwendig. Daher werden wir Ihnen in der nächsten Übung zeigen, wie Sie Bildunterschriften erstellen können. Der Internet Explorer 5 für Windows zeigt den Innenabstand zwischen Foto und Rahmen nicht an. Pech gehabt! Hillwels:
194
CSS: Missing Manual
Ubung: Eine Fotogalerie erstellen
Bildunterschriften hinzufügen Häufig werden Bildunterschriften verwendet, um zusätzliche Informationen zum Thema bereitzustellen, z.B. wo und wann das Bild entstanden ist u.Ä. Anstatt. wie in der vorigen Übung, nur das Bild als Float zu definieren, soll nun auch die Bild
unterschrift Teil des Floats sein. Am einfachsten geht das, indem Sie heide Ele
mente, Bild und Text. mit einem -Container umgeben, der seinerseits als
Float definiert wird. Durch dieses Vorgehen bleiben Bild und Text beieinander. Wenn Sie sich später dazu entscheiden, das Layout zu ändern - etwa weil der Con
tainer links statt rechts erscheinen 50ll -, ist das kein Problem: Sie brauchen nur die Formatierung für das -Element anzupassen. \.
Öffnen Sie die Datei beschriftung.hlrnl im Ordner kapitel_OB tung mit einem Texteditor Ihrer Wahl.
-+
beschrif
Beginnen Sie, indem Sie den HTML-Code für den -Container in die Webseite einbauen.
2.
Suchen Sie das -Tag und fügen Sie vor dem Tag ein. Hiermit wird einerseits der Anfang des Containers markiert, und gleichzeitig
wird ihm die Klasse abbildung zugewiesen. Im nächsten Schritt fügen wir das .
schließende -Tag ein, um den Container zu vervollständigen.
3.
Suchen Sie das schließende
.Tag des Absatzes direkt nach dem Bild und geben Sie ein: . Der Code sollte jetzt aussehen wie folgt:
H•.." für den ...II DOoGeißOlt)oOeo _.�
,.
5.
Damit die Darstellung auch im IE 5 funktioniert. erweitern Sie das interne Slyleshee' um eine le•••e Regel:
/* IE 5 Platzierungsfehler */ * html #galerie img { width: 100%; } Sie sind bei dieser Methode natürlich nicht auf den Einsatz in einer Fotogalerie beschränkt; sie funktioniert mit beliebigen GrafIken. Der Trick besteht darin, das Bild mit einem eigenen -Container zu umgeben, der das Hintergrundbild für den Schattenwurf enthält. Durch die oben beschriebene Verschiebung machen Sie schließlich den Schatten sichtbar. Der Effekt ist nicht einmal auf GrafIken beschränkt. Sie können ihn auch für Navigationsleisten, Überschriften und Pull Quotes verwenden.
KapitelS: Webseiten mit Grafiken versehen
205
Übung: Hintergrund bilder verwenden
Eine fertige Version dieser Übung fmden Sie im Ordner kapiteL08 -. galerie. Vielleicht ist Ihnen aufgefallen, dass die hier verwendeten Schattenwürte links und oben abrupt abbrechen, anstatt wie richtige Schatten langsam auszublenden. Anleitungen zum Erstellen anspruchsvoller Schattenwürte finden Sie u.a. unter lNH!W.olistoport.comlortidesjcssdrop2 und 1NH!W.ploughdeep.comloni onskin/ Hillwels:
Übung: Hintergrundbilder verwenden Die CSS-Eigenschaft background-image ist die Geheimwaffe für modernes Webde sign. Hiermit können Sie Webseiten, die wie üble Bleiwüsten aussehen, in ein strahlendes Bilderrneer verwandeln. Da Sie jedes beliebige HTML-Tag mit einem eigenen Hintergrund versehen können, sind Sie hier lediglich durch Ihre eigene Vorstellungskraft beschränkt. Der Schattenwurf aus der vorigen übung ist nur ein Beispiel für die kreative Verwendung von Hintergrundbildern. Weitere beliebte Anwendungsgebiete sind die Definition von Seitenhintergründen und die Verwen dung von eigenen Aufzählungszeichen für Listen. Einige dieser immer wiederkeh renden Aufgaben werden wir in dieser Übung genauer untersuchen.
Ein Bild als Hintergrund für Seitenelemente verwenden Unabhängig davon, ob es sich nun um ein feines, gekacheltes Muster, ein Logo oder ein ganzseitiges Foto handelt, werden Bilder oftmals bei der Gestaltung des Hinter grunds von Webseiten eingesetzt. Tatsächlich stellt dies wohl den am häufigsten vorkommenden Gebrauch der Eigenschaft background-image dar. 1. Öffnen Sie in Ihrem Texteditor die Datei seitenleiste.html im Ordner
kapiteLOS � hintergrund.
Diese Seite hat Ähnlichkeit mit der Webseite, die Sie in der Übung für das vorige Kapitel erstellt haben. Sie besitzt eine umflossene (als Float definierte) Seitenleiste und verwendet Hintergrundfarben, um bestimmte Teile der Seite hervorzuheben (Abbildung 8-14 oben). Zu Beginn erweitern Sie den HTML-Code um ein -Tag, das als Behälter für den Seiteninhalt dienen soll. Im Gegensatz zu den vorigen Beispielen, bei denen sich der Inhalt an die Breite des Browserfensters angepasst hat, arbeiten wir diesmal mit einem Layout, das eine feste Breite besitzt und in der Mitte des Browserfensters zentriert wird. 2.
Suchen Sie das öffnende -Tag und geben Sie direkt darunter
Mit (55 können Sie Hinter· grundfarben und -bilder gemeinsam benutzen. Das ist in diesem Beispiel besonders praktisch. Der Hauptbereich besitzt eine weiße Hintergrund farbe, die hilf� diesen Teil optisch vom Farbverlauf im Sei tenhintergrund zu trennen. Zusätzlich bieten die beiden seitlich am Text verlaufenden Linien ein zusätzliches gestalte risches Detail.
IDEEN FÜR IESSERE WOHNZIMMER-AGRIKULTUR � �s.. Ndt, ""'_ w_�
• TOef..._ ...., Pnaruen eignon sich
� -,.., .og....., lim MCHJ
•
... BlumonlöP'e Kr Hytmiwtu....,
Mit ein paar Schritten kön nen wir das Hintergrundbild so positionieren, dass die abgerundeten Ecken an der Unterkante der Seitenleiste korrekt dargestellt werden.
Enfernen Sie die Deklaration für die Eigenschaft border aus der .seiten
leiste-Regel. Die fertige Version sollte nun so aussehen:
. seitenleiste { width: 220px; float: right; margin: 10px; background: n(BF622 url(bilder/hintergrund_unten.gif) center bottom no-repeat; padding-bottom: 75px; } 6. Speichern Sie die Datei und betrachten Sie sie in einem Webbrowser. Die Seitenleiste sollte jetzt so aussehen, wie in Abbildung 8-17 rechts gezeigt. Obwohl wir den Rahmen gerade entfernt haben, ist um die Unterseite der Gra fIk und die abgerundeten Ecken deutlich eine Begrenzungslinie sichtbar. Diese wurde jedoch nicht mit CSS erzeugt, sondern sie ist Teil der Grafik selbst. In den nächsten Schritten werden Sie eine weitere Grafik in die Seitenleiste inte grieren, die auch die oberen Ecken abrundet. Es wäre eigentlich praktisch, wenn Sie für die Seitenleiste zwei verschiedene Hintergrundbilder defInieren könnten: eines für die Unter- und eines für die Oberkante. Auf diese Weise könnte die Seitenleiste ihre Höhe an den Inhalt anpassen. Leider ist in CSS 2.1 nur ein Hintergrundbild pro Element möglich. Sie müs sen also eine andere Lösung finden, das zweite Hintergrundbild » einzu schmuggeln«. Das geht z.B., indem Sie ein Tag in der Seitenleiste benutzen, das keinen eigenen Hintergrund verwendet. Wir nehmen dazu das erste Tag « h3» , das in der Seitenleiste vorkommt, um ihm das Hintergrundbild zuzu weisen, das schließlich die oberen Kanten abgerundet darstellen soll. Ein Nachfahren-Selektor hilft uns dabei. Hillwels: Zukünftige Versionen von CSS werden mit großer SicherheIT mehrere Hintergrundbilder für ein Element unterstützen. Im Moment kann dies allerdings nur Safari,
7.
Suchen Sie im internen Stylesheet die Regel für .seitenleiste h3. (Sie befrn det sich direkt unter der gerade bearbeiteten Regel für die Klasse .seiten leiste.) Erweitern Sie die Regel um die folgende Deklaration:
background: url(bilder/hintergrund_oben.gif) center top no-repeat; Inzwischen sollte Ihnen die Kurzschrift-Eigenschaft eigentlich bekannt sein. Hiermit wird mittig an der Oberkante des Elements eine GrafIk eingefügt. In diesem Fall erscheint sie im Hintergrund des -Tags in der Seitenleiste. Damit sind die abgerundeten Ecken an Ort und Stelle, und die Seitenleiste sieht nicht mehr aus wie ein simpler Kasten. Mit ein paar abschließenden Handgriffen werden wir die Überschrift weiß farben, damit sie sich besser von
216
CSS: Missing Manual
Übung: Hintergrund· bilder verwenden
der neu eingefügten Grafik abhebt. Außerdem fügen wir unterhalb der Über schrift etwas Leerraum ein, damit die Darstellung nicht zu gedrängt erscheint. 8.
Erweitern Sie die .seitenleiste h3-Regel um zwei Deldarationen, wie hier gezeigt:
.seitenleiste h3 { font-size: 1.4e�; margin: 0; text-align: center; text-transform: uppercase; background: url(bilder/hintergrund_oben.gif) center top no-repeat; color: 'FFF;
)
padding : Spx;
Wenn Sie sich die Seite jetzt ansehen, sieht sie eigentlich fertig aus. Na ja - fast. Links und rechts der Seitenleiste fehlen immer noch die Begrenzungslinien, die in den Grafiken bereits vorhanden sind. Auf Höhe der Liste muss also noch etwas passieren (Abbildung 8-18 links). Eine Möglichkeit wäre, in der unteren Graftk einfach die Begrenzungslinie wegzulassen. Das würde aber nicht sehr viel Spaß machen. Stattdessen verse hen wir die Liste mit einer linken und einer rechten Rahmenseite. Da sich diese mit den Begrenzungslinien überschneiden, sieht es jetzt so aus, als hätte die Seitenleiste wieder einen durchgehenden Rahmen - mit abgerundeten Ecken. 9.
Erweitern Sie die Stildefinition für .seitenleiste ul um zwei border-Deldara tionen. Die fertige Regel sollte nun aussehen wie hier:
Jetzt hat die Aufzählungsliste zu beiden Seiten eine Begrenzungslinie. Da die Seitenleiste selbst keine Innenabstände mehr hat, werden die Linien direkt an der Außenkante der Seitenleiste angezeigt. (Abbildung 8-18 rechts).
10. Speichern Sie die Datei und betrachten Sie Ihr Werk in einem Webbrow sero Die fertige Seite verwendet Hintergrundbilder in einer Weise, die nicht direkt wahrnehmbar ist, zum Beispiel zum Erstellen abgerundeter Ecken und einer durchgehenden Begrenzungslinie. Die kreative Verwendung von Hinter-
KapitelS: Webseiten mit Grafiken versehen
217
Übung: Hintergrund bilder verwenden
grundbildern gibt Webdesigns mehr räumliche Tiefe und sorgt dafür, dass die Seiten reichhaltiger und professioneller aussehen.
lPEfN FOR HSSEItE WOHNZIMMER -AGRIKULTUR w__
• Ge-.de \ 1-Tags weiterhin vorhanden sind. Dann fügen Sie zwischen den Tags die folgende Codezeile ein:
<style type="textlcss"> �import url(stile.css)j
1IIInMeJs: Eine andere Methode, ein externes Stylesheet in eine Webseite einzubinden, besteht in der Ver
wendung des -Tags (Seite 23). Wenn Sie dieses Tag verwenden wollen, müssen Sie zuerst die
<styIe>-Tags aus der HTML·Datei entfernen. Stattdessen schreiben Sie die Zeile
<Jink reI="styfesheet"
type=.'Yext/css" href="stile.css" p. 6.
Speichern Sie beide Dateien und betrachten Sie
seitenleiste.html in
einem
Webbrowser.
Die Seite sollte jetzt aussehen, als hätten Sie diese sechs Arbeitsschritte gar nicht ausgeführt (Abbildung 8-14 unten). Der einzige Unterschied besteht darin. dass hinter den Kulissen jetzt zwei Dateien statt einer verwendet wer den: eine für den CSS-Code und eine HTML-Datei. (Eine vollständige Version der fertigen Seite finden Sie im Ordner kapiteC08Jertig -+ hintergrund.) HlIItftIs: Wenn die Seite nicht korrekt dargestellt wird, sollten Sie überprüfen, ob Sie die Datei stile.C5s tatsächlich im selben Ordner wie seitenleiste.html gespeichert haben. Ist das nicht der Fall, müssen Sie den ur/(stile.css)-Teil so anpassen, dass er auf das richtige Verzeichnis zeigt. Liegt stile.C5s beispielsweise in einem Ordner namens stile, der sich im Verzeichnis hintergrund befindet, müsste die Angabe lauten: ur/(stile/stile.m).
KapitelS:
Webseiten mit Grafiken versehen
219
Kapitel
9 für
äße Navigation Website
Ohne Hyperlinks gäbe es mit Sicherheit auch kein World Wide Weh. Erst die Mög lichkeit, etwas anzuklieken und dadurch auf eine neue Seite zu gelangen, die viel leicht eine halbe Welt entfernt liegt, macht das Web so nützlich. Auch für die Navi gation Ihrer Wehsite werden Links verwendet. Daher machen sich Webdesigner viel Arbeit. Navigationslinks besonders gut aussehen und korrekt funktionieren zu lassen.
In diesem Kapitel zeigen wir Ihnen, wie Sie eine schlichte Liste mit Links so gestal
ten können, dass sie sich vom übrigen Text deutlich unterscheidet. Außerdem kön nen Sie Ihre Links mit visuellen Hinweisen versehen, die Ihren Besuchern verdeut lichen. wo sie sich gerade befinden und wo sie bereits waren. Sie werden lernen, wie Sie auf professionelle Weise CSS-hasierte Buttons und Navigationsleisten erstellen können. Im Übungsteil bauen Sie diesmal eine vollständige Navigation auf. die in allen Browsern funktioniert.
Entscheiden, welche Links formatiert werden sollen Wie immer bei der Verwendung von CSS müssen Sie auch hier etwas auswählen. bevor Sie es m.it Stildefmitionen versehen können. Bei Links können Sie nicht nur entscheiden. was Sie gestalten wollen, sondern auch wann. Webbrowser merken sich. ob und wann ein Besucher einen bestimmten Link anklickt. und stellt diesen je nach Zustand (Mauszeiger befmdet sich darüber. angeklickt, besucht usw.) unterschiedlich dar. Mit CSS können Sie diese Darstellung selbst steuern.
Kapitel9: Zeitgemäße Navigation für Ihre Website
22'
Entscheiden, welche Links lormatiert werden
Den Link-Zustand verstehen Die meisten Browser kennen vier Link-Zustände: den unbesuchten Link (noch nicht angeklickt), den bereits besuchten Link (bereits angeklickt. URL ist im Ver lauf des Browsers gespeichert), einen Link. über dem sich der Mauszeiger befindet. und den Link. der momentan angeklickt wird. Wie in Kapitel 3 (Seite 48) bereits erwähnt. stellt CSS für jeden dieser vier Zustände eine eigene Pseudoklasse zur Verfügung: :link (noch nicht angeklickt), :visited (bereits besucht), :hover (Mauszei ger über dem Link) und :active (Link wird gerade angeklickt). Mit ihrer Hilfe kön nen Sie die Links je nach Zustand unterschiedlich gestalten, sodass Ihre Besucher zweifelsfrei wissen, wo sie bereits waren und was sie schon getan haben. Hillwels: Firefox. Safari und Internet Explorer 8 kennen außerdem die Pseudoklasse .tocus. Links können den Fokus erhalten, wenn sich Besucher z.B. mithilfe der Tabulatortaste von Link zu Link bewegen. Wie Sie auf Seite 292 sehen, kann das auch bei Textbereichen in Formularen recht nützlich sein.
Mit folgender CSS-Regel können Sie z.B. die Farbe eines unbesuchten Links vom langweiligen Standardblau in ein strahlendes Orange ändern: a : link { color: ffF60j } Nachdem der Link das erste Mal angeklickt wurde, wechselt sein Zustand zu visited (besucht). Die meisten Browser stellen besuchte Links violett dar. Um diese Farbe in ein tiefes Rot zu ändern, können Sie folgende Regel verwenden: a :visited { color: #9OOj } TIpp: Wenn besuchte und unbenutzte Links identisch dargestellt werden sollen, können Sie die Regeln
auch gruppieren (o:/ink, o.visited (. . . }), wie auf SeITe 46 beschrieben wird. Alternativ können Sie den Typ Selektor 0 ohne Pseudoklassen verwenden und so ein Standardverhalten definieren. Wenn Sie in Ihrer
Website benannte Anker (z.B.
Besuchen Sie diese großartige Website Die entsprechenden Stildefinitionen sehen so aus:
Links gestalten Jetzt erhalten nur Links der Klasse externer_link die angegebene Formatierung.
Um die Beispiele einfach zu halten, haben wir bisher nur die Schriftfarbe eines Links verändert. Tatsächlich können Sie aber alle CS5-Eigenschaften verwenden, um Links zu gestalten. Wie Sie auf den fol genden Seiten sehen, erhalten Sie dadurch eine Menge zusätzlicher Gestaltungsmöglichkeiten. Hillwels:
Link-Formate mit Nachfahren-Selektoren gruppieren Erscheint eine Gruppe von Links gemeinsam in einem bestimmten Teil Ihrer Seite, können Sie durch den Einsatz von Nachfahren-Selektoren etwas Zeit sparen. Wie auf Seite 42 besprochen, können Sie mit Nachfahren-Selektoren ein Tag formatie ren, das sich innerhalb eines anderen Tags befindet. Stellen Sie sich vor, Ihre Site enthält fünf Links für die Navigation der Hauptbereiche Ihrer Site. Diese sollen in Form einer Navigationsleiste ein eigenes Aussehen erhalten. Am einfachsten ist es, Sie umgeben die Links mit einem eigenen -Container, dem Sie eine Klasse oder ID zuweisen wie diese hier:
. Jetzt können Sie die Links
auf einfache Weise im Stylesheet auswählen:
#navigation #navigation #navigation #navigation
a : link { color: #F60j } a :visited { color: #900j } a : hover { color: #F33j } a:active {color: #B2F511j }
Mit Nachfahren-Selektoren wird die unterschiedliche Gestaltung von Links für verschiedene Bereiche einer Webseite stark erleichtert. (Auf Seite 423 in Kapitel 14 finden Sie eine ausführliche Beschreibung von Nachfahren-Selektoren und ihren Möglichkeiten.)
Links gestalten
Nachdem Sie jetzt wissen, wie Sie Selektoren für bestimmte Links und ihre
Zustände erstellen können, wollen Sie vermutlich auch wissen, wie Sie diese gestal
ten können. Die Antwort lautet: Wie Sie wollen! Es gibt keine speziellen CSS Eigenschaften, die nur für Links gültig sind. Stattdessen können Sie die gesamte Palette der CSS-Eigenschaften nutzen, die Möglichkeiten sind nur durch Ihre eigene Fantasie begrenzt. Sie müssen lediglich dafür sorgen, dass die Links auch als solche erkennbar sind. Das heißt nicht, dass Links immer blau und unterstrichen daherkommen müssen, aber sie sollten sich zumindest so vom übrigen Text der Seite unterscheiden, damit Ihre Besucher wissen, was sie anklicken sollen und was nicht. Wenn Sie es schaffen, dass ein Link wie ein Button aussieht - inklusive Rahmen, eigenem Hintergrund und wechselnder Farbe beim Anklicken -, werden die meis ten Leute verstehen, womit sie es zu tun haben. Entsprechend sollten sich Links im Fließtext einer Seite deutlich vom übrigen Text unterscheiden. Das erreichen Sie beispielsweise durch eine fette Darstellung, die Verwendung der traditionellen Unterstreichung oder einer spezielle Hintergrundfarbe, einen eigenen Stil für den
224
CSS: Missing Manual
Links gestaUen
:hover·Zustand des Links usw. Es ist sogar möglich, Links mit einer kleinen GrafIk (z.B. einem Pfeilsymbol) zu versehen, die verdeutlicht, dass ein Klick den Benutzer an einen anderen Ort im Web bringt. ""': Sofern Sie das border-Attribut für das -Tag nicht auf null setzen, versehen einige Browser die Grafik standardmäßig mit einem ein Pixel breiten Rahmen. Das können Sie verhindern, indem Sie für Bil der, die sich innerhalb eines links befinden, die folgende Regel definieren: 0 img { border: none;}.
Links unterstreichen Seit es das Web gibt, hat blauer, unterstrichener Text die Standardbedeutung: »Hier klicken, um dorthin zu gehen.« Textfarbe und Unterstreichung sind aber oftmals die ersten Dinge, die ein Webdesigner ändern will. Unterstreichungen für die Mar kierung von Links sind mittlerweile so üblich, dass sie leicht langweilig wirken (Abbildung 9-1, Bild 1). Dabei gibt es eine Reihe von Techniken, mit denen Sie die Standardunterstreichung aufwerten oder entfernen können und Links trotzdem noch als solche erkennbar sind: •
Entfernen Sie die Unterstreichungen komplett. Um Unterstreichungen kom plett zu entfernen, verwenden Sie die Eigenschaft text-decoration mit dem Wert
none: a :link {text·decoration: none;} Selbstverständlich kann ein komplettes Entfernen der Unterstreichung Ihre Besucher verwirren. Ohne andere visuelle Hinweise sind die Links nicht vom übrigen Text zu unterscheiden (Abbildung 9-1. Bild 2). Sie müssen also dafiir sorgen, dass die Links auf andere Weise hervorgehoben werden, Z.B. indem Sie den Linktext fett darstellen (Abbildung 9-1. Bild 3), eine spezielle Hintergrund farbe verwenden, den Link mit einer informativen Grafik versehen (Seite 228) oder ihn wie einen Button gestalten (Seite 227) . •
Text unterstreichen, wenn sich die Maus über dem Link befindet. Einige
Designer entfernen die Unterstreichungen für alle Links und heben diese auf andere Weise hervor. Die Unterstreichung wird nur angezeigt, wenn sich der Mau,zeiger gerade über dem Link befindet. wie Abbildung 9-1. Bild 4 gezeigt. Hierfür müssen Sie einfach die Unterstreichung fiir Links entfernen und dann fiir die Pseudoklasse :hover neu defInieren: a : link. a:visited { text-decoration: none; background·color: #FOO; ) a: hover { background·color: transparent; text-decoration: underline; )
Kapitel 9: Zeitgemäße Navigation für Ihre Website
225
Links gestalten
AOO •
•
x
c
Un«
Nonnaler Link
o
adipiscing elil sed diam nonummy nibt.
eulsrnod �ncldunl ul laoreel d o!Qre magna
Ut wisi anirn ad
minim �niam, Quis nostrud exerd 1ilticr1
unamcorper sus�t IDlJortjs nlst UI attqulp
ex GlI cornmodo ronooqual. Duis au!em
veI eum iriure d
Fett statt unterstrichen
Loram Ipsum doIor srt amet, consectallJer adipisclng elit, sed diam nonummy nibt. eulsrnod tlncldunt ut laoroot dolor,
, ljZ/O'loi�y ,Q ..
•
Googj. Q
Keine Unterstreichung
e
Loram ipsum doler d ama� consectetoor
Loram ipsum doIor s� amat, consactaloor
aliquam orat volutpal
..
fiI �:I/lU..... /jvoiIOorumon
"
adipisdng elit.
Md diam nonummv nibll
eulsillOd llncldun1 ut Iaoreet dolore magna aliquam arat voUtpal. UI wisi enim ad
minim �nm-.. Quis nostrud exerd 1iltion
ullamcorper susdpll lobonJs nlsl UI attqulp
ax GlI oommodo ronsoQual Ouis autam
AbbUdun, '-l : Es gibt viele Möglichkeiten, die langweilige Unterstreichung (Bild 1) etwas spannender zu gestalten. Entfernen Sie die Unterstrei chung zunächst komplett (2, 3, 4). Oder noch besser: Verwenden Sie eine anspruchsvollere Unterstreichung. indem Sie die Eigenschaft border (Bild 5) oder ein Hintergrundbild (Bild 6) verwenden.
veI eum iriure d
U�-;�t;;i�h��g ���- - - -O sich der Mauszalger über dem Link befindel Loram Ipsum doler s� amet. coosectetl.ler
magna ahquam arat vollJlpat. ut wisi enim ad minirn veniam, quis nostrud C)(erci talion ullamcorper suscipU lol>ortls nist ut aliquip 9J( aa colTYTlodo consllqual. Duis
eutem vel eum iriure d
tii
adipisdng eltt, SIld diam nonummv nibll euismod IIncldunl ut
reet dolore
magna aliquam eral y
pat Ut wisl enim
ad minim lI9Iliam, quis nostrud axarci
tation ullBmcorper _cip� Iobortis nist UI allqulp ex ea oomrncdo COOSEQ,Jat. DuiS autom VIII aum nur. d
adipisCing etit, sed diam nonummy nibll euismod �!I�i
�'!.n! ,!I_�_� aliquam eralvolutpal. Ut wisi enirn ad
minim veniam, quis nostrud axerd tolion
adiplsdng eltt,
auismod
....
SIld diam nonummv nibll
I�D !.$ _ Iao.!:!I!! � magna
aliquam erat voUtpal. UIwisi enim ad
mmim venm-., Quis nostrud exerd tanon
UI aliquip
ullamcorper 9Usc.pit lobortis nist ut eliquip
ul!amcorper slJ9cipit Iobortis nisl
ex eil cornmodo wnsequal. Duis aulem
ex eil oommodo wnsequal Ouis ilUem
val eum iriura d
•
vei eum iriure d
Verwenden Sie eine untere Rahmenlinie als Unterstreichung. Auf Farbe.
Breite und Stil einer normalen Unterstreichung für einen Link haben Sie keinen Einfluss. Es wird immer eine durchgehende. 1 Pixel dicke Linie in der gleichen Farbe wie der Link selbst verwendet. Mehr Möglichkeiten erhalten Sie. wenn Sie stattdessen die Eigenschaft border verwenden. wie in Abbildung 9-1. Bild 5. Mit der folgenden Regel können Sie die normale Unterstreichung verstecken und stattdessen eine 2 Pixel breite. grün gestrichelte Linie verwenden: a { text-decoration: none; border-bottom: dashed 2px #9F3; } Auf Seite 146 wird beschrieben. wie Sie Stil. Farbe und Breite von Begrenzungs linien verändern können. Mit der Eigenschaft padding können Sie zwischen Text und Begrenzungslinie etwas Leerraum schaffen. •
Verwenden Sie ein Hintergrundbild. Sie können die Unterstreichung sogar
noch weiter anpassen. In Bild 6 von Abbildung 9-1 wird beispielsweise eine Gra-
CSS: Missing Manual
Links gestaUen
fik verwendet, die wie eine handgezeichnete Linie aussieht. Diese Technik ähnelt der Methode, die Sie schon aus der Übung in Kapitel S (Seite 210) ken nen. Erstellen Sie zuerst die Graftk in einem Programm wie Fireworks oder Pho toshop. Diese Programme verfUgen über Werkzeuge, mit denen Sie die Linien von Buntstiften, Kreide, Textmarker usw. simulieren können. Im nächsten Schritt erstellen Sie eine CSS-Regel, die die normale Unterstreichung der Links entfernt und sie durch eine Hintergrundgrafik ersetzt. Stellen Sie sicher, dass das Hintergrundbild horizontal wiederholt und an der Unterseite des Links positioniert wird. Eventuell wollen Sie für die Unterseite des Links etwas Innen abstand definieren, hiermit zum Beispiel:
a ( text-decoration: none; background: url(bilder/unterstreichung.gif) repeat-x left bottom; padding-bottom: Spx; ) Am besten eignet sich diese Technik für Links, die nicht länger als drei Wörter sind, weil es sonst Probleme mit dem Internet Explorer gibt. In allen aktuellen Vers ionen vor IE 8 wird bei mehrzelligen Links nur die letzte Zeile unterstri chen. Unter der folgenden Adresse fmden Sie eine Reihe von Lösungsansätzen
für dieses und ähnliche Probleme: http://home.tiscali.nl/developerscorner/ima
ging/jun-links.html.
Buttons erstellen Wenn Sie wollen, können Sie Links auch so gestalten, dass sie aussehen wie die But tons in Dialogfenstern und Werkzeugleisten eines Computerprogramms. Buttons eignen sich besonders gut für Navigationsmenüs, aber Sie können sie auch für die kleinen (ein bis zwei Wörter langen) Textlinks in Ihren Seiten verwenden. Die wichtigsten Verbündeten sind bei dieser Aufgabe die Eigenschaften
ground-color und padding.
border, back
Durch geschickte Kombinationen sind viele verschie
dene Buttons möglich (s. Abbildung 9-2). Am Anfang wird dem Link, der zum Button umgestaltet werden soll, eine Klasse zugewiesen:
Heute abend Freibierk/a>.
Um
den Link mit einer schlichten schwarzen Begrenzungslinie zu versehen (Abbildung
9-2 links oben), reicht die folgende Regel aus: a.button { border : solid lpx #000 ; ) Noch schicker sieht das Ganze mit einer eigenen Hintergrundfarbe aus:
a. button { border: solid lpx #000; background-color: #333; )
Kapitel 9: Zeitgemäße Navigation für Ihre Website
227
Links gestalten
[COSmOFarmer 2_0I
CosmoFarmer 2 0
ICosmoFarmer 2.0I
CosmoFarmer 2 0
�
CosmoFarmer 2.0
1
CO SMOFARMER 2 0
CosmoFarme
20
CosmoFarmer 2 0
Cosmofarmer 10
AbbUdung '·2: Verwenden Sie die Eigenschaften border, background und padding, um einen link in einen offensicht· lich anklickbaren Button zu verwan· dein. Schon eine simple Begren· zungslinie zeigt, worum es geht (oben links). Sie können die But tons aber auch anspruchsvoller gestalten, indem Sie verschiedene Farben, Stile und Breiten mit der Eigenschaft background·color kom binieren (Seite 150).
Hierbei müssen die vier Rahmenlinien nicht einmal die gleichen Einstellungen für Farbe. Breite und Stil verwenden. Häufig erhalten Buttons ein dreidimensionales Aussehen (die Profis nennen das »erhaben«). Allerdings müssen Sie wissen. wodurch diese Erhabenheit sichtbar wird: die Lichtquelle. Kommt das Licht von links. ist diese Seite am hellsten. während die rechte Seite am dunkelsten erscheint (weil der erhabene Button das von links kommende Licht abschirmt). Die Ober und Unterkante des Buttons sollten dagegen eine Helligkeit haben. die irgendwo dazwischenliegt. Hier der CSS-Code zur Erstellung des Buttons in Abbildung 9-2 rechts oben: a. button { background: #B1B1B1; color: #FFF; font-weight: bold; border-width: 4px; border-style: solid; border-top-color: #DFDFDF; border-right-color: #666; border-bottom-color: #333; border-left-color: #858585; } Vergessen Sie nicht. dass Sie für den :hover-Zustand Ihres Buttons einen eigenen Stil definieren können (und vermutlich auch sollten). Auf diese Weise »reagiert« der Button, und der Besucher erhält eine nützliche visuelle Rückmeldung, wenn er den Mauszeiger darüberbewegt. Meistens werden hierfür einfach die Helligkeits werte für die Rahmenseiten umgekehrt: Die linke Seite wird abgedunkelt und die rechte Seite aufgehellt.
Grafiken verwenden Eine der aufregendsten Methoden. Links attraktiver zu gestalten. besteht in der Verwendung kleiner grafischer Symbole. Hierfür gibt es eine Vielzahl verschiede ner Techniken und Designs. wobei die wirklich guten Methoden ohne zusätzliche
228
CSS: Missing Manual
Links gestallen
-Tags auskommen. Die CSS-Eigenschaft background-image bietet eine einfa che Möglichkeit, beliebige Links mit attraktiven und informativen Grafiken zu ver sehen. In Abbildung 9-3 sehen Sie eine Reihe von Beispielen. (Außerdem werden wir in den Übungen ab Seite 250 einige fortgeschrittene Techniken zur Verwen dung von Bildern für grafische Buttons und Rollover-Effekte vorstellen.)
-
-
-
-
Nonnaler Link
o
'I bh I I
-
-
I.
Lorem Ipsum dolor sit arnet, consectetuer adipiscing eilt, sed diam nonummy ni : eulsmod tlncidunt ut Iaoreet dolora magna aliquam eral volutpa!. ..... ..... ..... ..... .....-
:I���� : -_
__
....u
__
__
__
on
' ::=I L:.==::::
-
�I
__
-
I
__
__
__
Bild und Hintergrund
1 1-'.. -0I 1 nlbh 1 I .-J
_______
-
e
-
Nicht wiederholte Bilder
-_
�I
lorem Ipsum dolorsil arnet. consectetuer adlpiSCIng ein, sed dl8m nonummy eulsmod laoreat dolore Q kasdfkJj dskfj kssJdf klJsacI fkJls adfkJJ saclklfj IskadJf klJs sakd�lksJd
-
Lorem Ipsum dolcH slt amet, consectetue' : aclipiscing elit, sed diam nonummy nibh .. eulsmod ti liCktinit- � . magna allqüär;, erst VoiutPal- - - - ...... .... ..... ..... .....
_ _ _
Externer Link
��kj
�
�
Besuchte Links
_-
J
-0
Abbildu., '-J: Selbst eine simple Grafik kann einen link lebendiger gestalten und dessen Zweck deutlicher machen. Ein Globussymbol (Bild 5) kann als Hinweis auf einen externen link dienen, während ein »Abgehakt«-Sym bol verdeutlicht: »Hier war ich schon.«
- -0
J
Lorem ipsum dolcH Slt amet, consectetue adlPISCIng ein, sed dlam nonummy nlbh eulsmod laoreal dolore'; kasdfklJ dsklj ksaJdf klJsad fkljs adfkJj sadklfj Iskadjf klJs dflkj sskdlljlksJd _ __ __ _
Sollten Sie nicht mehr genau wissen, wie die Eigenschaft background-image funkti oniert, fmden Sie auf Seite 180 die nötigen Informationen. Hier noch ein paar Dinge, die Sie bei der Verwendung von GrafIken mit Links beachten müssen: •
•
Denken Sie daran.
no-repeat zu verwenden. Normalerweise wird ein Hinter grundbild so oft wiederholt, bis es das gesamte Element ausfüllt. Bei der Ver wendung von Grafiken für Links sieht das meistens nicht besonders schön aus (Abbildung 9-3, Bild 2). Sofern Sie also kein subtiles Muster (z.B. einen Farbver lauf) verwenden, sollten Sie die Deklaration background-repeat: no-repeat; ver wenden, um zu verhindern, dass das Bild gekachelt wird. Steuern Sie die Platzierung mit background-position. Um ein Hintergrundbild genau zu platzieren, verwenden Sie die Eigenschaft background-position (Seite 185). Um ein Bild auf der rechten Seite des Links und gleichzeitig vertikal zen triert darzustellen, können Sie diese CSS-Deklaration nehmen: background-posi
tion: right center. Eine genauere Platzierung erreichen Sie durch die Verwendung von exakten Längenangaben in Pixeln oder ern-Einheiten. Solche Angaben erleichtern es, eine Grafik schnell mal um ein paar Pixel zu verschieben, wenn es sein muss. Durch die Kombination mit Prozentwerten können Sie für die Grafik einen genauen Wert für die Entfernung von der linken Seite angeben und sie gleich zeitig auf einfache Weise vertikal zentrieren: background-position: lOpx 50%;.
Kapitel9: Zeitgemäße Navigation für Ihre Website
229
Links gestalten
Bei der Positionierung von Hintergrundbildem bestimmt der erste Wert die horizontale Platzie rung (von links nach rechts), während der zweite Werte die vertikale Ausrichtung (von oben nach unten) beeinflusst.
Hillwels:
Leider gibt es keine genaue Methode, die Entfernung des Bilds von der rechten Seite oder der Unterkante des Links anzugeben. Um ein Bild ein wenig von der rechten Seite nach links zu verschieben, haben Sie zwei Möglichkeiten: Entwe der Sie fügen mit einem Bildbearbeitungsprogramm auf der rechten Seite der GrafIk selbst etwas Leerraum ein. Der Leerraum sollte dem Abstand entspre chen, um den Sie das Bild nach links verschieben wollen. Danach können Sie die Eigenschaft background-position verwenden, um die GrafIk an der rechten Seite zu platzieren, z.B.: background-position: right top;. Oder Sie verwenden Prozentwerte wie background-position: 90% 75%;. Hiermit wird der Punkt, der sich bezogen auf die Bildbreite 90 Prozent von der linken Kante des Bilds befm det, mit dem Punkt zur Deckung gebracht, der sich 90 Prozent von der linken Kante des formatierten Elements befindet. Wie Sie sich vorstellen können, ist diese Methode nicht besonders genau, sodass Sie vermutlich ein wenig experi mentieren müssen. (Auf Seite 188 wird die Verwendung von Prozentwerten für Hintergrundbilder ausführlich erläutert.) •
Mehr Leerraum durch Innenabstände. Wenn Sie einen Link mit einem Bild
oder Symbol markieren wollen (wie in den Beispielen 3, 5 und 6 in Abbildung 9-3), sollten Sie auf der Seite des Bilds genügend Innenabstand definieren, damit es keine überschneidungen mit dem Text gibt. Das Bild in Abbildung 9-3 ver wendet beispielsweise einen linken Innenabstand von 30 Pixeln, damit das Wort »Startseite« sich nicht mit dem Haussymbol überschneidet. In den Bildern 5 und 6 sorgt ein kleiner rechter Innenabstand entsprechend dafür, dass das Glo bussymbol und das Häkchen-Zeichen genug Platz haben. Da das-Tag ein Inline-Element ist hat die Definition von oberen und unteren Innenabstän den keine Auswirkungen auf die Darstellung. Den Grund finden Sie auf Seite 144. Allerdings können Sie einen link mit CSS in ein Block-Element verwandeln, für das auch obere und untere Außen- bzw. Innenab stände definiert werden können. Mehr zu dieser Technik weiter unten in diesem Kapitel. Hillwels:
•
Benutzen Sie die Pseudoldassen. Verwenden Sie auch die Pseudoklassen :hover
und :visited. Hiermit können Sie nicht nur dynamische Effekte erzielen, sondern Ihren Besuchern zusätzlich hilfreiche visuelle Rückmeldungen geben. Vielleicht wollen Sie für die verschiedenen Zustände unterschiedliche Hintergrundbilder verwenden. So könnten Sie als Bild für einen normalen Link eine ausgeschaltete Glühbirne verwenden, die »aufleuchtet« , wenn sich der Mauszeiger über den Link bewegt. Oder Sie verwenden die GrafIk nur für Links, die bereits besucht wurden, wie in Bild 6 von Abbildung 9-3, wo durch das Häkchen-Symbol schnell klar wird, dass dieser Link bereits besucht wurde.
230
CSS: Missing Manual
Navigatiomleisten erstellen
Wenn Sie eine GrafIk für den :hover-Zustand verwenden wollen, sollten Sie bedenken, dass viele Browser das Bild erst laden, wenn sich der Mauszeiger tat sächlich über dem Bild befindet. Dadurch kann es zu deutlichen Verzögerun gen kommen, bevor die Grafik zu sehen ist. Wurde die Grafik einmal heruntergeladen, tritt die Verzögerung allerdings nicht mehr auf. Auf Seite 244 zeigen wir Ihnen eine Technik, mit der Sie dieses unangenehme Problem umgehen können. HlIIWf!I:s: Eine sehr ausführliche Anleitung zur Gestaltung von besuchten Links finden Sie auf der (engli schen) Seite http.f/M>W.collylogiccom/?/comments/tickeTestbeIichte(/a>(/li> I�t;," ulllfllCO' ",,>doit loborti. n�1 ut elouicr "" .. «rmr1lOdo 00"""....1. . Oui;eot"'" ""I .u�mod tintidunt ul I""",.. ;,,; Mim .. minim �en"m. oui. ,.,.INd'''_ �t;," ulllfl>CO""" dolofe rna A Tabus bei rlerVerwendung von Gußeisen
"'",m '_m ."ü..-'" .m". mn_tri..., 0.'00"'''9 ",t. sen uhmcof»C' """oi' loboftl< n�1 ut �Iouip .x .. um d"",'" .mat, mn,"" """, .d,,,,,,,"Il oit, oe .u�mod Meidunt vI liOOfHt dolo.. �,.,. .Iooom ."', volutpot, ut ",.. onim it 4.
� .....-. ;,:-�.� ; -;c..
Erweitern Sie die gerade angelegte Regel für #hauptteil a um die Deklara tion text-decoration: none;.
Hiermit wird die Unterstreichung entfernt. Gleichzeitig ist der Link jetzt nur noch schwer vom übrigen Text auf der Seite zu unterscheiden. Sie sollten jedoch immer dafür sorgen, dass Links als solche für Ihre Besucher erkennbar bleiben. 5. Erweitern Sie die Regel für #hauptteil a um die Deklaration font-weight: bold;.
Jetzt wird der Link fett dargestellt. (Anderer Text hat möglicherweise die glei che Formatierung.) Im nächsten Schritt ersetzen Sie die gerade entfernte Unterstreichung auf kreative Weise. Anstelle von text-decoration erzeugen Sie mit der Eigenschaft border-bottom eine gepunktete untere Begrenzungslinie:
Kapitel9: Zeitgemäße Navigation für Ihre Website
249
Übung: Links formatieren
6.
Erweitern Sie die Regel um eine border-bottom-Deklaration. Die Stildefini tion soUten nun so aussehen: #hauptteil a { color: #8(1919; text-decoration: none; font-weight: bold; border-bottom: 2px dotted #A5E410j
}
Jetzt sind die Links wirklich deutlich sichtbar. Anstelle der normalen Unter streichung benutzen wir jetzt eine gepunktete farbige Linie (Abbildung 9-12 links). Damit sind wir aber noch nicht am Ende. Als Nächstes erzeugen wir einen Rollover-Effekt. Die Hintergrundfarbe des Links soll wechseln, sobald der Besucher den Mauszeiger darüberbewegt. 7.
Erweitern Sie das Stylesheet um die Pseudoklasse :hover: #hauptteil a : hover { background-color: #FCC423; }
Diese Pseudoklasse sorgt dafür, dass die Regel nur Anwendung findet, wenn sich der Mauszeiger über dem Link befindet. Die hierdurch geschaffene Inter aktivität signalisiert Ihren Besuchern: »Hier passiert etwas!(( (Abbildung 9-12 rechts).
AbbUd••, '-12: Schon mitwenigen CSS-Regeln können Sie das Aussehen der Links verändern. Mit der Pseudoklasse :hover können Sie sogar einen anderen Stil verwen den, wenn sich der Mauszeiger über dem Link befindet (rechts).
&. Achten Sie luf den Wasserstand
- � iIiI!iiiiiii' ,1
&. Gummienten sind nicht nötig
Links mit Hintergrundbildern versehen Der E-Mail-Link am unteren Ende der Seite ist von den bisher definierten Stilen nicht betroffen (Abbildung 9-13 oben). Das ist auch gut so, denn für den mailto: Link haben wir andere Pläne. Dieser Link verweist auf eine E-Mail-Adresse. Anstatt auf einer anderen Seite zu landen, wird ein E-Mail-Programm gestartet.
250
CSS: Missing Manual
Ubung: Links formatieren Um diese Tatsache zu verdeutlichen, werden wir den Link mit einem kleinen E-Mail-Symbol versehen.
1. Erweitern Sie das interne Stylesheet in der Datei badewanne.htrn' um einen zusätzlichen Nachfahren-Selektor: #copyright a { color: #666666; background: url(bilder/email.gif) no-repeat left center; ) Der E-Mail-Link befmdet sich in einem -Container mit der 10
copyright.
Die gerade erstellte Regel sorgt dafür, dass nur der E-Mail-Link grau darge stellt wird. Mit der Eigenschaft
background soll außerdem links neben dem no-repeat bewirkt, dass die Gra
Link eine Graflk angezeigt werden. Der Wert
fik nicht wiederholt wird. Wir müssen also nur noch dafür sorgen, dass das E-Mail-Symbol nicht vom Linktext überlagert wird (Abbildung 9-13 Mitte), sondern tatsächlich daneben erscheint.
2. Erweitern Sie die gerade erstellte #copyright a-Regel um einen linken Innenabstand von 20 Pixeln: padding-left: 20px; Bedenken Sie, dass der Innenabstand den Leerraum zwischen dem Inhalt und dessen Rahmen bestimmt. Durch die oben stehende Deklaration wird der Text
um 20 Pixel nach links verschoben, wobei sich das Hintergrundbild aber nicht mitbewegt und dadurch komplett sichtbar wird. Abschließend wollen wir den gesamten Link noch ein Stück vom Copyright-Hinweis entfernen.
3.
Erweitern Sie die Regel um einen linken Außenabstand von 10 Pixeln. Die gesamte Stildefmition soUte nun so aussehen: Itcopyright a { color: #666666; background: url(bilder/email.gif) no-repeat left center; padding-left: 20px; margin-left: 10px;
) Diese kleine Anpassung verdeutlicht, dass das Symbol zum Link und nicht zum Copyright-Hinweis gehört (Abbildung 9-13 unten).
Externe Links speziell kennzeichnen Gelegentlich wollen Sie Links auf externe Websites besonders kennzeichnen. Auf diese Weise sollen Ihre Besucher darauf aufmerksam gemacht werden, dass weitere Informationen an anderer Stelle im Internet zu finden sind oder dass sie beim Anklicken des Links Ihre Website verlassen. In den folgenden Schritten werden wir fur externe Links spezielle CSS-Regeln definieren.
Erweitern Sie das interne Stylesheet in badewanne.html um die folgende Regel: #hauptteil a .externer_link { background-image: url(bilder/globus.png); background-repeat: no-repeat; background-position: right top; padding-right: 18px; border-bottom: none; }
Wie beim gerade erstellten E-Mail-Link wird auch bei dieser Regel ein speziel les Hintergrundbild verwendet, diesmal allerdings rechts vom Linktext. Durch die Deklaration border-bottom: none; wird die grün gestrichelte untere Begren zungslinie entfernt, die normalerweise für Links auf andere Seiten von Cosmo Farmer.com verwendet wird. Allein durch die Definition der Regel verändern sich die externen Links aber nicht. Dafür müssen Sie den Links, die Sie formatieren wollen, zunächst die Klasse .externer_link zuweisen. 2.
Im HTML-Code der Seite finden Sie drei externe Links. (Tipp: Sie befin den sich in einer
Horoskope. 2.
260
so
aussehen: r �Ie ome t,
Lor�", I ps"m lorem ;pum dok>r �Ie
"Idtrisc�
""
,,!dtrisc�
4
Sil
79li O O '
m&cron.ch
8314,00 �
�a l" �"rnl l.>ion
Afrol No �
Sie können sämtliche Seiten layout- und Designaufga ben mit CSS erledigen und Tabellen gemäß ihrem eigentlichen Zweck verwen den. Die Definition der Schriften, Rahmen und Hin tergrundfarben dieser Tabelle wurde ausschließlich mit CSS umgesetzt. Die eigentliche Struktur der Tabelle wurde dagegen mit HTML definiert.
,,,. ••
Coal
lam m I p,,,m Dolor 300 J ohn Dee,,, l o ft-Wähdre>cher
Tabelle 1 : Der richtige Rasenmäher für Ihre Wohnung . Mithilfe von Nachfahren-Selektoren wie .oktienkurse td oder .oktienkurse th können Sie die Zellen dieserTabelle nun getrenntvom Rest der SeITe fonnatieren. Mehr zu Selektoren und Klassen finden Sie in KapITel 3.
Rahmen anlegen
Die CSS-Eigenschaft border (Seite 146) funktioniert für Tabellen im Prinzip genau wie für andere Elemente auch. Allerdings gibt es ein paar Besonderheiten zu beach ten. Wenn Sie für das
-Tag einen Rahmen defInieren, gilt dieser nur für die Außenkanten der Tabelle, aber nicht für die einzelnen Zellen. Weisen Sie den ein zelnen Zellen einen Rahmen zu (z.B. td ( border: Ipx solid black; j), wird standard mäßig zwischen den einzelnen Zellen eine kleine Lücke gelassen, wie in Abbildung 10-5 oben. Um dieses Verhalten zu steuern, müssen Sie wissen, wie das HTML Attribut cellspacing bzw. die CSS-Eigenschaften border-spacing und border-collapse funktionieren. •
Den Leerraum zwischen den Tabellenzellen kontrollieren. Standardmäßig stellen Browser die einzelnen Zellen um ein paar Pixel voneinander entfernt dar. Diese Lücke wird besonders gut sichtbar, wenn Sie die Zellen mit einem Rah men versehen. Anhand der CSS-Eigenschaft border-spacing können Sie selbst bestimmen, wie groß dieser Zwischenraum sein soll. Da diese Eigenschaft aber erst ab der Version 8 vom Internet Explorer unterstützt wird, ist es möglicher weise sinnvoll, für ältere IE-Versionen das HTML-Attribut cellspacing zu ver wenden. Um einen Zellenzwischenraum von 10 Pixeln zu definieren, könnten Sie beispielsweise folgenden HTML-Code verwenden:
. (Wenn Sie hier den Wert 0 einsetzen, wird der Zwischenraum komplett ent fernt. Allerdings sollten Sie dann auch einen passenden Wert für die Eigenschaft border-collapse verwenden, zu der wir gleich kommen.)
•
Doppelte Rahmenlinien entfernen. Wenn Sie den Zwischenraum zwischen den Zellen entfernen, rücken die Rahmenlinien zusammen und erscheinen ver doppelt. Es wird sowohl die untere Rahmenlinie einer Zelle angezeigt als auch die obere Rahmenlinie der darunter befindlichen Zelle (Abbildung 10-5 Mitte). Am besten lässt sich dies (und die Zellenzwischenräume gleich dazu) vermei den, indem Sie die Eigenschaft border-collapse verwenden. Zwei Werte sind möglich: separate und collapse. Die Option separate entspricht der Standarddar stellung mit Zellenzwischenräumen und verdoppelten Rahmenlinien. Durch die Einstellung collapse werden die Rahmen angrenzender Zellen dagegen zusammengefasst, und die Zwischenräume verschwinden (Abbildung 10-5 unten). Diese Eigenschaft wird für das
-Tag defIniert, wie hier gezeigt: table { border-collapse: collapsej }
214
CSS: Missing Manual
Tabellen mit Stil
I
-
I=.-�...pport .,..,.,,, ,: 0..-'-;. _.- -...
HlIIWfis: HTML-Tags zum Erstellen von Tabellen besitzen eine große Zahl von Attributen, mit denen Sie die gleichen Dinge erreichen können wie mit CSS. So könnten Sie auch das HTML-Attribut border verwen den, um die Rahmen der Tabelle und deren Zellen zu steuern. Normalerweise samen Sie diese Attribute allerdings vermeiden. Mit CSS geht das wesentlich besser; gleichzeitig brauchen Sie deutlich weniger Code
Zeilen und Spalten gestalten Häufig werden Tabellenzeilen mit abwechselnden Hintergrundfarben versehen (Abbildung 10-6). Dadurch können Benutzer den gewünschten Inhalt leichter in der Tabelle finden. Leider bietet CSS gegenwärtig noch keine Möglichkeit, dem Browser zu sagen: » Gestalte jede zweite Zeile der Tabelle auf diese Weise.(( (Das soll sich mit CSS 3 jedoch ändern.) Stattdessen wird jeder zweiten Zeile manuell eine CSS-Klasse zugewiesen. z.B.
.
die dann wie folgt gestaltet
werden kann:
tr- ungerade { background-color: red; } Hierbei ist Ihre Gestaltung nicht auf Farben beschränkt. Für eine anspruchsvolle Gestaltung können Sie auch Hintergrundbilder (s. Seite 180) verwenden. Ein Bei spiel ist der leichte Farbverlauf für Tabellenüberschriften in Abbildung 10-6. (Ein ähnliches Beispiel fmden Sie auch in der Übung aufSeite 286.) Mithilfe eines Nach fahren-Selektors können Sie auch bestimmte Zellen einer Zeile gesondert formatie ren. Weisen Sie den Zellen einfach eine eigene Klasse zu. z.B.
.
Um der Zelle ein besonderes Aussehen zu geben, wenn sie sich in einer ungeraden Zeile befindet. können Sie den Selelctor tr.ungerade
td.preis verwenden.
Kapitel 10: Tabellen und Formulare
275
Tabellen mit Stil
E.. 0 0
••
e + • •
A
Apple �"PPOr1 - �pKjfi0\
Poworllok (;0 (lS-in0) Pow.. u" G\ (lot. 100< • -Tags zu umgeben und die sen eine eigene Klasse zuzuweisen:
<span c1ass="dumme.Jrage">Was ist Ihre
Lieblingsjarbe?. HlIIWfis: Unter der Adresse http://de.selfhtml.orgjhtmljformulare/strukturieren.htm finden Sie eine Kurzübersicht für das -Tag. 2.
Umfließen (Float) und Breite zuweisen Das Geheimnis dieser Technik besteht darin, einen Stil anzulegen, der die Beschriftungen als nach links verschobene Floats definiert und ihnen eine feste
Kapitel 10: Tabellen und Formulare
281
Übung: Stile für Tabellen
Breite zuweist. Hierbei sollte der Wert für width groß genug gewählt werden. sodass die gesamte Beschriftung auf einer Zeile stehen kann. Da wir, wie oben beschrieben. das spezielle Sofern Sie keine feste Breite für die Tabelle definieren. wird diese automatisch dem Inhalt angepasst. Hier legen wir eine Breite von 100% fest. wodurch die Tabelle die gesamte Breite des umgebenden -Containers einnimmt. (In unserem Fall ist dies der Teil der Seite. der die überschrift » Feature: Indoor Mower Roundup« und die Tabelle selbst enthält.) Da wir die Schriftfamilie (jontJamily) für das
-Tag definieren, wird diese durch Vererbung an die Tags in der Tabelle weitergegeben: . Spaltenüberschriften « th» . Tabellenzellen « td» usw. Im nächsten Schritt werden Sie die Tabellenüberschrift gestalten. 40
Fügen Sie unter dem gerade erstellten Stil eine weitere Regel ein: caption { text-align: right; font-size: .75em; }
Das -Tag enthält Informationen über den Inhalt der Tabelle. In die sem Fall soll die Überschrift aber nicht zu sehr von der Tabelle selbst ablenken. Daher haben wir sie verkleinert und an den rechten Rand - und damit aus dem Weg - verschoben. Wenn Sie versuchen. die Informationen zeilenweise zu erfassen. kann es schnell passieren. dass Sie in eine andere Zeile rutschen. Daher ist hier eine visuelle Hilfestellung sinnvoll. Durch die Definition von Rahmen für die Tabellenzellen im folgenden Arbeitsschritt werden diese optisch besser von einander getrennt. 50
Erweitern Sie das interne Stylesheet um die folgende Regel: td,th { font-size: .8em; border: 1px solid #73afb7; }
In dieser Regel gruppieren wir die Typ-Selektoren für Spaltenüberschriften « th» und Tabellenzellen « td» . Für beide wird die Schriftgröße verringert und ein Rahmen definiert. Standardmäßig fügen Browser zwischen den Zellen etwas Leerraum ein, wodurch das Ganze ein wenig kastenartig aussieht (Abbil dung 10-10 oben, eingekreist). Das wollen wir im nächsten Schritt beheben.
284
CSS: Missing Manual
Übung: Stile für Tabellen
6. Erweitern Sie die in Schritt 3 erstellte Regel um die Eigenschaft border-col lapse. sodass der Stil jetzt so aussieht: table { width: 100%; font-family: "Century Gothic", "Gill Sans", Arial, sans-serif; border-collapse: collapse;
}
Die Eigenschaft border-coIlapse sorgt dafür, dass der Zwischenraum zwischen den Zellen verschwindet und die Rahmen zusammengefasst werden, also nicht verdoppelt erscheinen. Ohne border-coIlapse würden die Rahmen der einzel nen Zellen aneinanderstoßen und die Begrenzungslinien 2 Pixel breit erschei nen lassen. Wenn Sie sich die Tabelle jetzt ansehen, sind die Daten visuell schon wesent lich besser organisiert. Allerdings wirken die Informationen in den Zellen jetzt etwas eingezwängt (s. Abbildung 10-10 unten). Mit ein wenig Innenabstand schaffen wir Platz. AII.11dung 10·11:
Der richtige Rasenmäher für Ihre Wohnung
J"," -lIiiiii I
I
I
I
Standardmäßig fügen Browser zwischen den einzelnen Tabel lenzeIlen etwas leerraum ein (oben). Wird dieser Leerraurn entfernt, erscheinen die zusammengeschobenen Rahmen der Zellen doppelt so dick. Indem Sie die Eigenschaft border collapse auf den Wert collapse setzen, lösen Sie beide Pro bleme auf einmal (unten).
,o�
11= 11 11"""", II Der richtige Rasenmäher für Ihre Wohnung Tab1e< 2.'i2S
2.'JCXl.OO (
Wrorn Ip ......"
0cI0r m
J OM O"..... l.<J It · M ö M ' c W
.�
<MO ,
� . ��
!e.....rtIJ "II
-
,-
... -
,-
. _""
7 '19-00 (
mccoo r.i>ch
B 37•.00 (
( at" � cr"1u.io,,
I
... ....
Erweitern Sie die in Schritt 5 erstellte Regel um die Eigenschaft padding: td,th { border: 1px solid #73afb7; padding: 3px 5px 2px Spx;
font-size: .Sem; } Kapitel 10: Tabellen und Formulare
285
Übung: Stile für Tabellen
Die Spaltenüberschriften werden bereits durch die fette Schrift hervorgeho ben. Dieses Aussehen wollen wir im Folgenden noch verstärken und gleichzei tig verbessern.
8.
Erstellen Sie unterhalb der td. th-Regel einen neuen Stil für die Formatie rung der Tabellenzellen: th {
text-align: leftj border-color: #14556bj } Hier haben wir ein perfektes Beispiel für eine effektive Nutzung der Kaskade. Die gruppierten Selektoren
td. th definieren allgemeine Formatierungsoptio
nen für beide Arten von Zellen. Durch diese spezielle Regel wird nur das Aus sehen der Spaltenüberschriften weiter verfeinert. Die GrundeinsteIlungen für die Rahmen, wie Linienstärke und Rahmenstil, stammen aus der gemeinsa men Regel, während die Farbe mit dem separaten Stil neu definiert wird. Beachten Sie, dass diese Definition nach den gruppierten Selektoren kommen muss, damit sie funktioniert. Die Spaltenüberschriften haben noch nicht genug Durchsetzungskraft. Außer dem erscheint die Tabelle etwas zurückgesetzt. Eine HintergrundgrafIk kann hier für den nötigen Schwung sorgen. 9.
Erweitern Sie den th-Stil um Deklarationen für ein Hintergrundbild und eine andere Textfarbe: th { background: url(bilder/hintergrund_beschriftung.png) no-repeat left top; color: white;
text-align: leftj border-color: #14556bj } In diesem Fall sorgt die Grafik für einen feinen vertikalen Farbverlauf. Die weiße Begrenzungslinie oberhalb und links des Bilds sorgt für einen angeneh men Kontrast zur dunkleren Oberseite und zum linken Rand der Zellen. Es entsteht eine Art 3-D-Effekt.
TIpp: Übrigens hätten Sie einen ähnlichen Effekt auch durch eine Änderung der Hintergrundfarbe für die Tabellenzellen erzielen können Wenn die Tabelle viele Zeilen und Spalten mit Daten enthält, ist es manchmal nicht einfach, herauszufinden, welche Daten zu welcher Zeile gehören. Diesem Problem begegnen Designer, indem sie die Zeilen abwechselnd mit unter schiedlichen Hintergrundfarben versehen. Diesen Effekt werden Sie in den fol genden Schritten nachbauen.
286
CSS: Missing Manual
Ubung: Stile 'ur Formulare
10. Erweitern Sie das interne Stylesheet der Webseite um eine letzte Regel: tr.alt td { background: url(bilder/hintergrund_beschriftung. png) no-repeat left top; )
Dieser Selektor versieht
-Tags mit einem Hintergrundbild. Das
gilt aber
nur, wenn sich die Tabellenzelle in einem
-Tag befmdet, das mit der Klasse
alt markiert wurde.
Damit das funktioniert, müssen Sie den HTML
Code für jede zweite Tabellenzeile entsprechend anpassen.
11. Suchen Sie im HTML-Code der Seite das
-Tag, das direkt vor dem m ip<em ene D
_"1gI c
tu�m O ein <span>-Tag verwenden, damit Sie auch hier die Klassse . beschriftung anwenden können.
6.
Umgeben Sie den Text »Wie schätzen Sie Ihre Fähigkeiten als Indoor-Gärl ner ein?« mit <span>-Tags. denen Sie die Klasse beschriftung zuweisen, wie hier: <span class:"beschriftung->Wie schätzen Sie Ihre Fähigkeiten als Indoor Gärtner ein7 Jetzt erscheinen alle Fragen in einer Spalte (s. Abbildung 10-12 oben). Noch besser würde es aber aussehen, wenn sie an den entsprechenden Formulare1e menten ausgerichtet würden.
7.
Erweitern Sie die #fonnular .beschriftung-Regel um die folgenden Deklara tionen: #formular .beschriftung { float: left; width: 230px;
Kapitel 10: Tabellen und Formulare
289
Übung: Stile für Formulare margin-right: tOPXj text-align: rightj font-weight: boldj
}
Betrachten Sie die Seite in einem Webbrowser. Das Formular sollte jetzt ausse hen wie das untere Bild in Abbildung 10-12. Für die Beschriftungen muss noch eine Sache erledigt werden. Da sie als Floats definiert wurden. kann es passieren, dass die folgenden Fragen versuchen, die vorherige Frage zu umfließen. Um das zu verhindern. müssen Sie die Eigen schaft clear einsetzen. Hillwels: Ein ähnliches Problem ist in Abbildung 7-12 zu sehen. Wenn Sie das Umfließen von Floats ver hindern wollen, finden Sie weITere Informationen dazu im Abschnitt »Umfließen verhindern« auf SeITe 162.
8.
Erweitern Sie den #formular .beschriftung-Stil um die Eigenschaft clear: #formular .beschriftung { float: left; width: 230px; margin-right: 10px; text-align: right; font-weight: bold; elear: leftj
}
Langsam nimmt das Formular Form an (dieses Wortspiel ist nicht beabsich tigt!). Allerdings sieht der Submit-Button (mit der ID abonnieren) auf der lin ken Seite nicht so aus. als gehöre er dort wirklich hin. Im folgenden Schritt werden Sie ihn an den übrigen Formularelementen ausrichten. 9.
Erweitern Sie das interne Stylesheet wiederum um eine Regel: input#abonnieren { margin-left: 240px; }
Dem -Tag, das den Submit-Button erzeugt. wurde bereits die ID abon nieren zugewiesen. Die obige Regel sorgt dafür. dass der Button um 240 Pixel eingerückt wird. Breite und rechter Außenabstand passen jetzt zum #formular
. beschriftung-Stil. Die meisten Browser erlauben es, auch Submit-Buttons mit Stilen zu versehen, also . . .
290
CSS: Missing Manual
Übung: Stile für Formulare
Abonnieren:
Abblld••, .'-12: Manchmal haben kleine Ursachen eine große Wirkung. Hier wird das Aussehen dadurch verbessert. dass die Fragen im For mular in fetter Schrift erscheinen und an den entsprechenden Formularelementen ausge richtet werden (unten).
Unser NewsleIter
WIe heißen Sie?
Wie lautet thre E-Moi�Adres.se? Wie 5chötzen Sie IlYe Föhigkeitcn Indoor-Görlner ein?
Unser NewsleIter Wie helaen Sie? -------� Wie lauleIlIve E-Mall·Adresse?
Wie Jchöllen Sie I/ne fÖhlgkelten
-------�
clJ 0 Anfönge! 0 Millel 0 Fortgeschrittener Indoor Gärtnlllf ein? Wie haben Sie von· uni gehört? &hlen Sie wollen uni e!well mllleUen?
�w
JJ
10. Passen Sie das Aussehen des Submit-Buttons an, indem Sie die gerade erstellte Regel um Deklarationen für die Hintergrundfarbe und die Schrift familie erweitern: input#abonnieren { margin-left: 240PXj )
Hillwels: Internet Explorer, Firefox und Opera übernehmen diese Definitionen. Safari wendet die Regel nur auf das nicht aufgeklappte Menü an. Sobald die Optionen angezeigt werden, wird der Mac-eigene Stil benutzt.
Na also! Beschriftungen und Submit-Button sehen schon gut aus. Warum also jetzt aufhören? Ändern Sie auch die Schrift und die Hintergrundfarben. 12. Erstellen Sie eine Gruppe von Typ-Selektoren, um einen Stil für alle drei Arten von Textfeldern gemeinsam zu definieren: input#name, input#email, textarea#kommentar { background-color: #FBEF99; font-farnily: "ludda Console", Monaco, monospace; font-size: .gern; }
Durch diese Regel erhalten die Textfelder einen leicht gelben Hintergrund. Außerdem wird für Benutzereingaben eine spezielle Schrift verwendet. Die Felder wirken allerdings noch ein bisschen schmal und niedrig im Vergleich zu den Beschriftungen auf der linken Seite. Mit CSS ist das aber kein Problem. 13. Erweitern Sie den gerade erstellten Stil um eine Breitenangabe und eine kleine Änderung am oberen Außenabstand: input#name, input#ernail, textarea#kommentar { background-color: #FBEF99; font-farnily: "ludda Console", Monaco, monospace; font-size: .gern; width: 300px; margin-top: -2px;
}
Um Ihren Besuchern das Ausfüllen des Formulars zu erleichtern, können Sie das gerade ausgewählte Formularelement mit der Pseudoklasse focus hervor heben (Seite 223). Dieses Merkmal werden Sie im nächsten Schritt einbauen. 14. Fügen Sie am Ende des internen Stylesheets eine letzte Regel für das Auf klappmenü und die drei Textfelder ein: input#name:focus, input#email:focus, textarea#kommentar:focus, select#Woher:focus { background-color: #FDDo41; }
292
CSS: Missing Manual
Übung: Stile für Formulare
Die Pseudoklasse focus funktioniert nur in Firefox, Safari, Chrome, Opera und IE 8. Das tut älteren Browserversionen aber nicht weiter weh. Der Stil für focus ist nicht unbedingt lebensnotwendig. Betrachten Sie die Seite in einem Webbrowser. Sie sollte jetzt aussehen, wie in Abbildung 10-13 dargestellt. Eine vollständige und korrekte Version fmden Sie im Ordner kapiteLIO-fertig --.formular. o
AlIIIildu"l "-1: Um ein komplexes Se�enlay out (links) nur mit Tabellen zu realisieren, wurden oft mehrere
-Tags inein ander verschachtelt Anein andergrenzende Zellen wur den zusammengefasst und feste Bre�en mit Spacer-Bil dern erzwunden. Auf diese Weise wurde ein starres Gerüst erzeugt (rechts). Sollte das Design geändert werden, musste das alte Ge rüst komplett eingerissen und ein neues errichtet werden.
Wenn auch Sie standardmäßig
-Tags für das Layout verwendet haben, müs sen Sie umdenken, bevor Sie anfangen, CSS für das Seitenlayout einzusetzen. Als Erstes müssen Sie das Konzept von Zeilen und Spalten und die damit zusammen hängende gitterartige Struktur einer Tabelle in diesem Kontext vergessen. Das gibt es in CSS einfach nicht. Wenn Sie wollen, können Sie sich das -Tag als Tabel lenzelle vorstellen. Diese ist der logische Ort für den Inhalt, der an einer bestimm ten Stelle auf der Seite positioniert werden soll. Zusätzlich werden in CSS, wie bei Layouttabellen, oft mehrere -Tags ineinander verschachtelt, um einen bestimmten visuellen Effekt zu erreichen. Allerdings wird hierfür wesentlich weni ger HTML-Code benötigt als für Tabellen.
Das mächtige -Tag Egal mit welcher Methode Sie arbeiten, beim Layout von Webseiten geht es darum, bestimmte Teile des Inhalts an bestimmte Stellen der Webseite zu platzieren. Hier für werden in CSS so gut wie immer -Tags verwendet. Wie Sie von Seite 8 wissen, ist ein HTML-Element, das keine »eingebauten« Formatierungsvor gaben besitzt (abgesehen davon, dass es standardmäßig als Block-Element auf einer eigenen Zeile dargestellt wird). Stattdessen wird es verwendet, um andere Elemente zu gruppieren oder die Seite zu unterteilen. (Die Bezeichnung des Tags, , kommt vom englischen Wort division, Unterteilung.) Normalerweise umgeben Sie zusammengehörige HTML-Elemente mit . . . -Tags. In Abbildung 11-1 haben wir diese Methode für das Logo und die Navigationsleiste benutzt. Sie bilden den oberen Teil der Seite. Daher erscheint es sinnvoll, sie zusammenzufassen. Zumindest würden Sie die größeren Bereiche einer Seite auf diese Weise markieren, wie Kopfteil, Hauptinhalt, Fußteil und so weiter. Es ist aber auch möglich, mehrere -Tags ineinander zu verschachteln. Häufig wird der gesamte Inhalt des -Tags mit einem zusätzlichen Container umgeben. Danach können Sie diesem Container eine Reihe von Forma tierungen zuweisen, die für die gesamte Seite gültig sein soll, wie die Breite für den
298
CSS: Missing Manual
Veruhiedene Arten von Webseitenlayouts
Inhalt der Seite oder linke und rechte Außenabstände. Oder Sie legen fest. dass der Inhalt in der Mitte des Ansichtsbereichs zentriert werden soll. (Ab Seite 337 kön nen Sie den Einsatz von -Containern selbst ausprobieren.) Sobald die -Tags an Ort und Stelle sind. können Sie ihnen IDs und Klassen zuweisen, um die einzelnen Container unterschiedlich zu gestalten. Teile der Seite. die nur einmal vorkommen. werden dabei üblicherweise mit IDs versehen. z.B. . Da Sie eine ID nur einmal pro Seite vergeben können. müssen Sie für Elemente. die mehrmals auftauchen. stattdessen eine Klasse verwenden. Das kann beispielsweise der Fall sein. wenn Sie -Tags für die Positionierung von Fotos verwenden. z.B. . Anband dieser Grundstruktur können Sie die verschiedenen Bestandteile der Seite jetzt positionieren. Mithilfe der Eigenschaft float können Sie Blöcke mit Inhalt an den linken oder rechten Rand einer Seite (oder des umgebenden Blocks. z.B. eines anderen -Containers) verschieben. WEISE WORTE
Wenn weniger mehr ist Auch wenn -Tags für CSS-Layouts notwendig sind, sollten Sie Ihre Seite nicht damit zupflastern. Viele Leute denken, sie müssten jedes Element einer Webseite mIt eigenen -Tags umgeben. Wenn Ihr NavIgationsmenü aus einer Aufzählungs liste mit Links besteht (zu sehen auf Seite 231), könnten Sie ver sucht sem, die Lmks mit -Tags zu umgeben: . __
.! .! � ""\.'J\�r
o.� �
_ - -
...
..
+-• • , . o: � ___ __���__ -_ ..� -� - .
. •. �
- �-�
I-' �"' . . "" ·· " " ,
Abbilduna 11-2: Es gibt mehrere Methoden, mit unbekannten Größen wie der Breite des Browserfens ters oder der voreingestellten Schriftgröße umzugehen_ Sie fest können die Tatsache, dass Ihre Besucher unterschiedli che Auflösungen verwenden, einfach ignorieren und eine feste Breite Ihrer Seite für alle erzwingen (oben). Oder Sie verwenden ein sogenanntes flüssiges Layout (Mitte), das sich automatisch der Fenster breite anpasst. Ein elastisches flüssig Layout (unten) passt sich dagegen nicht an die Breite, sondern an unterschiedliche Schriftgrößen an.
elastisch
Tastaturkürzel Strg-+ in Firefox), wird die Breite des Layouts entsprechend angepasst. In Abbildung 11-2 unten, sehen Sie ein elastisches Design einmal in der norma len Schriftgröße des Browsers (links) und zum anderen mit einer um einige Stufen höheren Einstellung (rechts). Bei einer Erhöhung der Schriftgröße wird automatisch die Breite aller Seitenelemente entsprechend angepasst. Bei elasti schen Designs behalten die einzelnen Teile Ihrer Seite ihre relative Größe. So können Menschen mit Sehschwierigkeiten die Darstellung » aufblasen«, und die Spalten, die den Text enthalten, wachsen einfach mit. In den Übungen am Ende dieses Kapitels werden Sie jeweils ein Design mit fester Breite und ein flüssiges Design erstellen.
Grundlagen des Float-basierten Layouts Float-basierte Layouts nutzen die Fähigkeit der Eigenschaft float, um Elemente nebeneinander anzuordnen und Spalten auf der Webseite anzulegen. Wie in Kapitel 7 (Seite 158) beschrieben, können Sie mit dieser Eigenschaft eine Art »Vakuumverpackung(( um z.B. ein Foto herum erzeugen. Wenn Sie float allerdings
Kapitel l ! : Float-basierte Layouts
301
Grundlagen des Float· basierten Layouts
für -Tags benutzen. werden sie zu einem mächtigen Layoutwerkzeug. Die Eigenschaftfloat sorgt dafür. dass ein Element an die linke oder rechte Seite einer Seite (oder des umgebenden Elements) verschoben wird. HTML-Code. der im Quelltext unterhalb eines Floats steht. wird in der Darstellung nach oben verscho ben und umfließt das als Float defInierte Element. Die Eigenschaft float kennt drei verschiedene Werte: left. right und none. Um ein Bild an den rechten Seitenrand zu verschieben, könnten Sie die folgende CSS Klasse anlegen und dem -Tag zuweisen: .float_rechts { float: fight; } Mit der gleichen Eigenschaft können Sie eine komplette links platzierte Seitenleiste erzeugen. Hierfür weisen Sie einem -Tag die folgende ID-basierte Regel zu; #seitenleiste { float: left; width: 170px; }
Hierbei ist der englische Name #seitenleiste natürlich nicht zwingend. Sie können der Seitenleiste einen beliebigen Namen geben. Abbildung 11-3 zeigt beide Regeln in Aktion. Hillwels: Der Wert none verhindert. dass ein Element umflossen wird. Es nimmt wieder seine normale Position im Textfluss ein. Das kann sinnvoll sein, wenn eine andere Regel überschrieben werden soll, die das Element bereits als Float definiert hat. Vielleicht haben Sie ein Element dem beispielsweise die Klasse .seiten/eiste zugewiesen wurde und das als Float nach rechts verschoben wird. Auf einer bestimmten Seite soll dieses Element aber nicht verschoben werden, sondern im normalen TextfIuss der Seite erscheinen, Z.B. als Kasten mit einem Hinweis wie diesem hier. Indem Sie dazu einen CSS-Selektor mit einer höheren Spezifität benutzen (Seite 87), der die Deklaration noat: none; enthält, können Sie das Umfließen dieses Elements unterbinden.
Ein einfaches zweispaltiges Layout wie das in Abbildung 11-3 lässt sich schon mit wenigen Schritten umsetzen; 1.
Umgeben Sie jede Spalte mit einem -Tag, das eine eigene ID oder Klasse zugewiesen bekommt. In Abbildung 11-3 erhielten die Kurznachrichten in der Seitenleiste einen eigenen -Container: . und ebenso der Hauptteil, der als definiert wurde.
2. Verschieben Sie die Seitenleisten als Float nach links oder nach rechts.
Bei der Arbeit mit Floats ist die Reihenfolge der Elemente im Quellcode. also welches HTML-Element nach dem anderen kommt. wichtig. Der HTML Code für den Float muss vor den Elementen stehen. von denen es umflossen werden soll.
302
CSS: Missing Manual
Grundlagen des Float basierten Layouts
AII.11domg 11-3:
(0""0 Farm., 2.0
r outem vel llum nure dolorlrl hendretll in wlP'Jlote velil esse moillslie consequot vel llvm doiore 00 leugiot nukl foci
Ein Float kann aus seinem umgebenden Element (hier ein -Container) aus brechen. Enthält das umge bende Element eine Hinter grundfarbe oder einen Rahmen, erscheinen die »entkommenen« Elemente, als stünden sie außerhalb des Containers (im oberen Teil der Seite). Außerdem kann es passieren, dass Floats sich mit anderen Ele menten in die Quere kom men (inklusive anderer Floats) und dadurch anstelle der sauber gestapelten Boxen in Abbildung 11-11 eine Art »Treppeneffekt« entsteht (im unteren Teil der Seite) .
-
,
Ein ähnliches Problem tritt im unteren Teil der Seite in Abbildung 11-10 auf. Hier wurden die Bilder als Floats defmiert, die sich in einem -Tag mit einem Rah men befmden. Da die Bilder größer sind als ihre umgebenden Elemente, ragen sie über deren Unterseite hinaus. Leider ist dieses Beispiel noch schlimmer als das vorige, weil jedes Bild dafür sorgt, dass es von der folgenden Grafik rechts umflos sen wird, wodurch ein hässlicher Treppeneffekt entsteht.
]16
CSS: Missing Manual
Probleme mit Floats losen Für das Problem der abtrünnigen Floats gibt es drei Lösungswege: •
Fügen Sie am unteren Ende des umgebenden -Tags ein nicht umflosse nes Element ein. Diese Lösung ist am einfachsten. allerdings wird dafür zusätz licher HTML-Code benötigt. Fügen Sie einfach direkt vor dem schließenden Tag des -Containers « /div» . das die Floats enthält, ein weiteres Tag ein, z.B. einen Zeilenumbruch « br I» oder eine horiwntale Linie « hr I>; für rei nes HTML lassen Sie den Schrägstrich und das Leerzeichen davor einfach weg). Dann verwenden Sie die Eigenschaft
clear, um ein Umfließen dieses Elements
zu verhindern. Dieser Trick sorgt dafür, dass der -Container sich der Größe der enthaltenen Floats anpasst, wodurch Hintergrundfarbe und Rahmen nun auch hier zu sehen sind. Weisen Sie dem zusätzlichen Tag nun eine eigene Klasse zu, Z.B.
. Danach können Sie
eine Regel wie die fol
gende verwenden, um das Umfließen zu verhindern:
br.clear { clear: both; } •
Definieren Sie das umgebende Element als Float. Einfacher ist es, den Container selbst ebenfalls als Float zu defmieren. Auf diese Weise wird der Con tainer bei Bedarf vergrößert, damit die enthaltenen Floats ganz hineinpassen. Im oberen Teil von Abbildung 1 1 - 1 1 wurde der -Container, der die Über
schrift und die beiden Spalten enthält, als Float nach links verschoben. Dadurch
dehnt sich die gesamte Box, inklusive Hintergrund und Rahmen, so weit aus, dass sämtliche enthaltenen Elemente inklusive der Spalten-Floats ganz hinein passen. Seltsam, aber wahr.
•
Verwenden Sie die "Easy Clearing«-Methode. Mit dieser Technik, die von Tony Aslett von CssCreator.com erfunden wurde, reicht es aus, dem
Container für die Floats eine Klasse zuzuweisen und hierfür ein paar spezielle CSS-Regeln zu deftnieren. Natürlich ist der Name »Easy Clearing« nicht ganz korrekt, da der folgende CSS-Code alles andere als »easy« ist. Sie müssen Ihr Stylesheet um drei Regeln erweitern: Eine ist für Firefox, Safari, Opera, IES sowie andere moderne Browser, eine Regel ist fur JE 7 (der erzeugten Inhalt nicht versteht), und die letzte Regel sorgt dafür, dass sich auch IE 6 und 5 ordentlich benehmen. Das Ganze sieht so aus:
Probleme mit Floats lösen * html .clear { height: lpx; }
Die letzten beiden Stile sorgen dafür. dass das -Tag in IE 5, 6 und 7 » Lay out hat((. wie im Kasten auf Seite 330 beschrieben. Laut Microsoft ist diese Methode für IE 8 nicht mehr nötig.
Sobald die Regeln im Stylesheet deftniert sind. können Sie dem -Contai ner die entsprechende Klasse zuweisen: . Das Ergebnis sollte jetzt aussehen. wie in Abbildung 11-11 unten gezeigt. A"O ...
.. -
c
x
.,..
Cont.aining Flo.au
AII.11dung li-li: lassen Sie Ihre Aoats nicht entkommen! Sie haben mehrere Möglichkeiten, die Floats innerhalb ihres umge benden Elements darzustel len. Eine Möglichkeit ist, den Container selbst als Float zu definieren (oben). Eine wei tere, rein CSS-basierte Methode nennt sich »Easy Clearing«, auch wenn sie nicht ganz so einfach ist (unten). Beide Lösungen sorgen dafür, dass Rahmen und Hintergründe den Con tainer und die enthaltenen Floats komplett umschließen
ti�: IIIU....,jwl IOOCum�naIBIl/O·R�llro; r(r "
H�drokultur in der Badewanne: TiaJ� .6 Achten Sie auf den . Wasserstand
.6 Tabus bei der Verwendung . von Gußeisen
lorem ipsum dolor sit amet,
lorem ipsum dolor sit amet,
consectetuer adlplsclng eilt, sed
consectetuer adiplsclng eilt, sed
diam nonummy nibh euismod
diam nonummy nibh euismod
tlncldunt ut laoreet dolore magna
tlncldunt ut laoreet dolore mag na
ad mlnlm venlam, quls nostrud
ad mlnlm venlam, quls nostrud
exercl tation ullamcorper suscipit
exercl tatio
aliquam erat volutpat. Ut wisl enlm
aliquam erat volutpat. Ut wisl enim
lobortls nisl ut allqulp ex ea commodo consequat. Ouls autem vel
Hillweis: Dieser Fehler tritt nur auf, wenn der Außenabstand des Floats den Rand des umgebenden Ele ments berührt, Bei zwei nebeneinanderstehenden Floats werden die Außenabstände nicht verdoppelt
Die Lösung ist einfach: Erweitern Sie die Regel für das als Float deklarierte Element um die Deklaration display;inline;; #seitenleiste { float: left; margin-left: 10px; width: 160px; display: inline;
}
CSS: Missing Manual
Programmierfehler im Internet Explorer
Hier sorgt die Eigenschaft display nur dafür, dass der Programmierfehler im IE nicht mehr auftritt. Floats werden prinzipiell als Block-Elemente dargestellt. Daher hat eine Änderung der Darstellungsrolle (display: inline;) hier keine Auswirkungen. (Auf Seite 144 fmden Sie weitere Details zur Eigenschaft display.) Damit diese Deklaration keine negativen Auswirkungen auf andere Browser hat, ist es empfeh lenswert, sie in einem IE-eigenen Stil mit dem Star-HTML-Hack zu defmieren: #seitenleiste { float: left; margin-left: 10px; width: 160px;
) • html #seitenleiste {
)
display: inHne;
TIpp: Die lIConditional Commentsl des Internet Explorer eignen sich besser als der Stor-HTML-Hack. um Stile speziell für Internet Explorer vom übrigen CS5-Code zu trennen. Conditional Comments sind spezielle HTMl-Kommentare, die nur vom IE ausgewertet werden; andere Browser ignorieren diese Anweisungen. [);. Details finden S� ab Sen. 429.
3-Pixel-Lücken lnternet Explorer 6 und seine Vorgänger haben die Angewohnheit, zwischen eine Spalte, die als Float realisiert wurde, und einer nicht umflossenen Spalte einen Leerraum von 3 Pixeln Breite einzufügen. Die genaue Platzierung dieser Lücke hängt von mehreren Faktoren ab: •
Für die nicht als Float definierte Spalte wurde keine Breite oder Höhe defi niert. Wurde rur die nicht als Float definierte Spalte keine Breite oder Höhe angegeben, erscheint die 3-Pixel-Lücke zwischen dem Rand und dem Inhalt der Spalte. Die Lücke erscheint dort, wo sich der Float befindet. Unterhalb des Floats rückt der Text wieder zurück zur linken Kante der Spalte (Abbildung 1 1 -16). Die einfachste Lösung ist hier, einfach mit dem Problem zu leben. Die Einrü ckung lenkt nicht besonders stark ab und macht auch keine seltsamen Sachen mit der Seite. Wenn der Perfektionist in Ihnen das anders sieht, können Sie das Problem lösen, indem Sie die Spalte, die nicht als Float definiert ist, ,.mit lay out versehen«, wie im Kasten auf Seite 330 beschrieben. Definieren Sie für die Spalte eine spezielle IE 6-Regel: • ht�l #hauptspalte { height: Ipx; } Der Nachteil dieser Lösung besteht darin, dass dadurch der im Folgenden besprochene Fehler auftritt. (Das haben Sie jetzt von Ihrem Perfektionismus.)
Kapitel 1 1 : Float-basierte layouts
327
Programmierfehler im Internet Explorer
AbbUd••, 11-16:
3 Pixelbreite Einrückung
'
Auf dieser Seite wurde die Seitenleiste als Root nach links ver schoben. Die mittlere Spalte ist dagegen kein Float. Ein linker Außenabstand rückt sie so weit ein, dass sie nicht versucht, den Flaat unten zu umfließen. (Diese Technik wird auf Seite 305) beschrieben. Leider fügen der Internet Explorer 6 und seine Vor gänger dem Text der nicht als Raat definierten Spalte eine 3 Pixel breite Einrückung hinzu.
.....
keine Einrüd:ung nach F100t
•
Für die nicht als Float definierte Spalte wurde eine Breite oder Höhe defi niert. Wurden für die nicht als Float definierte Spalte Angaben zur Höhe oder Breite gemacht, erscheint ein neuer 3-Pixel-Fehler: eine kleine Lücke zwischen den Spalten (s. Abbildung 11-17 links). Dieser Fehler ist ernster als der aus Abbildung 1 1-16, weil dieser 3-Pixel-Bug möglicherweise dafür sorgt, dass die zweite Spalte unter den Float verschoben wird (s. Abbildung 11-17 rechts). Abbildung 11-17:
_. <style type=Mtext/cssM> 'import url(ie_stile.css) d {endif]--> Das
lte steht »weniger oder gleich«. Die Bedingung iflte JE 7 lässt sich also überset
zen als »wenn es sich bei diesem Browser um Internet Explorer 7 oder einen seiner Vorgänger handelt«.
Conditional Comments und die Kaskade Beide Methoden zum Einbinden externer Stylesheets funktionieren hier gleicher maßen (Seite 22). Allerdings sollten die Conditional Comments erst verwendet werden, nachdem Sie die Stylesheets in Ihre Seite eingebunden haben, die für alle
anderen Browser gelten sollen. Die Regeln der Kaskade besagen, dass CSS-Stile, die
später in einer HTML-Seite definiert werden, früher definierte Regeln überschrei ben können. Damit Ihre nur für IE gedachten Anpassungen erfolgreich vom IE erkannt werden, müssen sie daher nach allen anderen Stylesheets für die Seite gela den werden.
Hier ist der Code, mit dem Sie a) Stylesheets fUr alle Browser, b) ein Stylesheet nur
für den JE 6 und c) ein Stylesheet für IE 5 und früher in Ihre Seite einbinden kön nen:
oder <ern> markiert wurde). Der Wert
none entfernt das Element komplett aus
der Darstellung der Seite. Danach können Sie das Element mit der Pseudoklasse
:hover oder etwas JavaScript-Code wieder zum Vorschein bringen (s. Seite 48). •
454
Beispiel: display: block;
CSS: Missing Manual
Eigen5(haften fur das Seitenlayout
float
Definiert ein Element als sogenannten Float. Als Float definierte Elemente werden an den linken oder rechten Rand des umgebenden Elements (bzw. der Seite) ver
schoben. Sie sind vom normalen Textfluss des Dokuments ausgenommen und wer den vom übrigen Inhalt der Seite (bzw. des umgebenden Elements) lJumflossen«.
Das heißt. Elemente, die im Quelltext der Seite auf das Float folgen, werden nach oben verschoben und nehmen den entstandenen Leerraum ein, wie beispielsweise der Fließte.xt in einem Zeitungsartikel. Mit der Eigenschaft auf das Float folgenden Elemente
am
clear (s.o.)
können die
Umfließen gehindert werden. Mit Floats las
sen sich einfache Effekte wie das Verschieben eines Bilds an den Seitenrand, aber auch komplexe Layouts (5. Kapitel 11) realisieren. •
Werte:
[eft, right, none.
Der Wert
none sorgt dafür, dass die Defmition als Float
fur ein Element wieder aufgehoben wird. Das kann praktisch sein, wenn ein Tag in einer allgemeinen Regel als Float definiert wurde. Mithilfe einer CSS-Defmi tion mit höherer Spezifität können Sie diese Einstellung für spezielle Tags über schreiben. •
Beispiel: float: lefr;
height Legt die Höhe des Inbaltsbereichs eines Elements fest. Dies ist der Teil einer Box, in dem Text, Bilder oder auch andere Tags enthalten sind. Um die tatsächliche Höhe eines Elements zu ermitteln, müssen zum Wert von height die Werte für die oberen und unteren Innen- und Außenabstände sowie die Dicke der Begrenzungslinien (Rahmen) hinzuaddiert werden. •
Werte: Eine beliebige in CSS
gültige Maßeinheit, wie z.B.
Pixel, ern-Einheiten
oder Prozentwerte. Letztere werden basierend auf der Höhe des umgebenden Elements berechnet. •
Beispiel: height : 50%;
NI"..: Es kann passieren, dass der Inhalt mehr Platz beansprucht als die per height angegebene Höhe
- beispielsweise wenn ein 8ement besonders viel Text enthält oder der Benutzer die Textgröße im Browser erhöht Browser gehen mit diesem Problem unterschiedlich um: IE
6 und seine Vorgänger vergrößern die
Box einfach nach Bedarf; andere Browser stellen den Text standardmäßig auch außerhalb der Box dar. Mit hilfe von overflow können Sie dieses Verhalten steuern, indem Sie l.B. Rollbalken erzeugen (5. Seite 153).
left Bei der Verwendung von absoluter oder fester Positionierung (Seite 350) ermittelt diese Eigenschaft die Position der linken Seite eines Elements anband der Platzie rung des nächsten positionierten Vorfahren-Elements. Gibt es kein solches Vorfah ren-Element, wird als Referenz die linke Kante des sichtbaren Bereichs des Brow serfensters verwendet. Mit dieser Eigenschaft können Sie beispielsweise ein Bild um 20 Pixel vom Rand des Browserfensters verschieben. Bei der Verwendung von
Anhang A: Referenz der CSS-Eigenschaften
455
Eigen5(haften für das Seitenlayout relativer Positionierung wird der Wert anhand der linken Kante des Elements selbst ermittelt (vor der Positionierung). •
Werte: Eine beliebige in CSS gültige Maßeinheit. wie Pixel. ern-Einheiten oder
•
Beispiel: left : sem;
Prozentwerte.
max-height Definiert die maximal erlaubte Höhe für ein Element. Die Box des Elements darf also niedriger sein als der angegebene Wert. aber keinesfalls höher. Braucht der Inhalt der Box mehr Platz. als mit max-height angegeben. läuft er aus der Box her aus. Anhand der Eigenschaft
overflow
(Seite 153) können Sie steuern. wie der
»überflüssige« Text dargestellt werden soll. Internet Explorer 6 (und dessen Vor gänger) unterstützen •
max-height nicht.
Werte: Eine beliebige in CSS gültige Maßeinheit wie Pixel. ern-Einheiten oder Prozentwerte. Prozentwerte werden basierend auf der Höhe des Elements berechnet.
•
Beispiel: max-height: 100px;
max-width Definiert die maximal erlaubte Breite für ein Element. Ist der Inhalt eines Elements breiter als der mit max-width angegebene Wert. fließt dieser über die Grenzen der Box hinaus. Mithilfe der Eigenschaft overflow (Seite 153) können Sie steuern. wie dieser Inhalt dargestellt wird. Am häufigsten wird max-width für »flüssige« Layouts (Seite 301) verwendet, damit ein Seitendesign auch auf sehr großen Monitoren
noch lesbar bleibt. Diese Eigenschaft wird von Internet Explorer 6 und seinen Vor gängern nicht unterstützt. •
Werte: Eine beliebige in CSS gültige Maßeinheit wie Pixel. ern-Einheiten oder Prozentwerte. Prozentwerte werden basierend auf der Breite des Elements berechnet.
•
Beispiel: max-width : 9S0px;
min-height Legt die minimale Höhe für ein Element fest. Die Box des Elements darf höher sein als diese Einstellung, aber keinesfalls kleiner. Ist der Inhalt der Box niedriger als der mit
min-height definierte Wert, wird die
Höhe der Box so weit erweitert, bis die
angegebe Höhe erreicht ist. Diese Eigenschaft wird vom Internet Explorer 6 und seinen Vorgängern nicht unterstützt. •
Werte: Eine beliebige in CSS gültige Maßeinheit wie Pixel. ern-Einheiten oder Prozentwerte. Prozentwerte werden basierend auf der Höhe des Elements berechnet.
•
456
Beispiel: min-height: 20em;
CSS: Missing Manual
Eigen5(haften fur das Seitenlayout
min-width Definiert die minimale Breite eines Elements. Die Breite eines Elements darf höher sein als dieser Wert, keinesfalls aber geringer. Ist der Inhalt des Elements schmaler als der Wert von min-width. wird die Breite der Box entsprechend verringert. Sie können min-width auch in flüssigen Layouts verwenden. um sicherzustellen, dass das Layout auch bei geringen Fensterbreiten nicht »auseinanderfilltt.
empty-cells Diese Eigenschaft steuert, ob ein Browser vollkommen leere Tabellenzellen