CSS. Kochbuch O REILLY. Christopher Schmitt & Jørgen W. Lang. Deutsche Ausgabe. Schnelle Lösungen für typische CSS-Probleme. Deckt

Transkript

1 Schnelle Lösungen für typische CSS-Probleme Deckt 3. PHP Auflage 5.1 ab Behandelt CSS 2.1 & CSS3 Deutsche Ausgabe der 3. Auflage CSS Kochbuch O REILLY Christopher Schmitt & Jørgen W. Lang

2

3 3. Auflage CSS Kochbuch Christopher Schmitt & Jørgen W. Lang Beijing Cambridge Farnham Köln Sebastopol Tokyo

4 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 für eventuell verbliebene Fehler und deren Folgen. Alle Warennamen 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 einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen. Kommentare und Fragen können Sie gerne an uns richten: O Reilly Verlag Balthasarstr Köln kommentar@oreilly.de Copyright: 2012 by O Reilly Verlag GmbH & Co. KG 1. Auflage Auflage Auflage 2012 Diese Ausgabe des Buches ist eine Aktualisierung, Überarbeitung und Erweiterung der 3. englischen Auflage des Buches, die 2009 unter dem Titel CSS Cookbook, 3rd Edition bei O Reilly Media, Inc. erschienen ist. Die Darstellung eines Grizzlybären im Zusammenhang mit dem Thema CSS ist ein Warenzeichen von O Reilly Media, Inc. Bibliografische Information der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar. Lektorat: Inken Kiupel, Köln Fachliche Unterstützung: Jens Grochtdreis, Mainz, und Jens O. Meiert, Santa Clara, USA Korrektorat: Sibylle Feldmann, Düsseldorf Satz: Reemers Publishing Services GmbH, Krefeld; Produktion: Geesche Kieckbusch, Hamburg Belichtung, Druck und buchbinderische Verarbeitung: Druckerei Kösel, Krugzell; ISBN Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt.

5 Inhalt Vorwort XIII Einführung XV 1 Allgemeines Eine Webseite mit Stildefinitionen versehen Den Aufbau einer CSS-Regel verstehen Verschiedene Selektoren für die Zuweisung von Stilen verwenden Selektoren gruppieren Alle Elemente auf einmal auswählen Bestimmte Elemente nach ihrem Namen auswählen Nachfahrenelemente auswählen Kindelemente auswählen Benachbarte Geschwisterelemente auswählen Regeln für allgemeine Geschwisterelemente definieren Elemente nach ihren Attributen auswählen Elemente aufgrund von Klassen- und ID-Attributen auswählen Mehrere Klassen auf einmal angeben Regeln für unbenannte Dokumentteile definieren Werte für die neue Pseudoklasse :nth-child() und ihre Verwandten richtig angeben Das Boxmodell begreifen Darstellungsrollen verstehen Die Vererbung nutzen Die Reihenfolge von Stylesheets: die Kaskade Darstellungskonflikte anhand der Spezifität lösen Regeln mit besonderer Priorität versehen V

6 1.22 Dokumenttypen und ihre Auswirkungen auf die Browserdarstellung Stylesheets für verschiedene Ausgabemedien definieren Den Inhalt eines Stylesheets richtig strukturieren Grundrezepte Längeneinheiten verstehen Höhen und Breiten definieren Farben definieren Externe Ressourcen einbinden Außenabstände definieren Innenabstände definieren Elemente mit einem Rahmen versehen Hintergrundbilder verwenden Die Wiederholung von Hintergrundbildern steuern Hintergrundbilder positionieren Das Hintergrundbild verankern Mehrere Hintergrundbilder für ein Element definieren Hintergrundbilder auf den gesamten Ansichtsbereich ausdehnen Definitionen für Hintergründe in einer Deklaration zusammenfassen Durchscheinende Hintergründe definieren Elemente positionieren Elemente absolut positionieren Elemente relativ positionieren Elemente ineinander positionieren Elemente im Ansichtsbereich verankern Elemente voreinander anordnen Elemente scrollbar machen Elemente umfließen lassen Elemente horizontal zentrieren Elemente vertikal zentrieren Typografie für das Web Schriftarten festlegen Schriftgrößen und -maße festlegen Die Schriftfarbe ändern Das Schriftgewicht ändern Den Schriftstil anpassen Text in Kapitälchen darstellen Text in Groß- und Kleinschreibung darstellen VI Inhalt

7 3.8 Zeilenhöhen ändern Den Abstand zwischen Buchstaben und Wörtern anpassen Die Kurzschrifteigenschaft font verwenden Webfonts verwenden Die Textausrichtung festlegen Zeilenumbrüche steuern Text mit Über-, Unter- oder Durchstreichungen versehen Grafische Unterstreichungen verwenden Sonderzeichen aus einem anderen Zeichensatz einfügen Typografisch korrekte Anführungszeichen verwenden Hängende Initialen zu Beginn eines Absatzes einfügen Bilder als Initialen einsetzen Stile für die erste Absatzzeile definieren Überschriften mit Grafiken überlagern Die Gestaltung von ausgewähltem Text anpassen Text mit einem Schatten versehen Hoch- und tiefgestellten Text ohne Grundlinienversatz darstellen Die Schreibrichtung festlegen Pull Quotes gestalten Bilder Bilder mit Rahmen versehen Rahmen um Bilder nicht darstellen Die Rahmenfarbe ändern, wenn sich der Mauszeiger über dem Bild befindet Skalierbare Bilder Bilder mit einer Bildunterschrift versehen Text durch Grafiken ersetzen Bilder als Panorama präsentieren Verschiedene Bildformate miteinander kombinieren Sprites zum Speichern von Icons verwenden Listen Browserübergreifende Einrückungen Spezielle Aufzählungszeichen verwenden Eigene textbasierte Aufzählungszeichen für Listeneinträge verwenden Aufzählungszeichen mit einer eigenen Farbe versehen Eigene Grafiken als Aufzählungszeichen verwenden Das Aufzählungszeichen innerhalb des Listeneintrags darstellen Inhalt VII

8 5.7 Die Kurzschrifteigenschaft list-style verwenden Trennlinien für Listeneinträge erstellen Listeneinträge nebeneinander darstellen Stile für Definitionslisten Stile für den ersten oder letzten Eintrag einer Liste definieren Links und Navigation Die Darstellung der verschiedenen Linkzustände anpassen Unterschiedliche Linkfarben für bestimmte Teile einer Seite Icons am Ende von Links einfügen Tooltips mit CSS gestalten Dokumentteile nur bei Bedarf anzeigen Den anklickbaren Bereich eines Links vergrößern Listen als Navigationsmenüs gestalten Die aktuelle Seite hervorheben Eine Breadcrumb-Navigation gestalten Karteireiter-Navigationsmenüs Ein vertikales Navigationsmenü mit mehreren Ebenen erstellen Ein horizontales Navigationsmenü mit mehreren Ebenen erstellen Formulare Stile für Formulare definieren Stile für fieldset-elemente definieren legend-elemente mit Stildefinitionen versehen Die Platzierung von legend-elementen verändern label-elemente gestalten Texteingabefelder mit CSS gestalten Stildefinitionen für textarea-elemente zuweisen Stile für Checkboxen und Radiobuttons definieren Stildefinitionen für Auswahllisten und Aufklappmenüs Stildefinitionen für Buttons Grafikbasierte Buttons Buttons wie einfachen HTML-Text darstellen Eingabefelder hervorheben Benötigte Formularfelder hervorheben Formularelemente zeilenweise darstellen Serviervorschlag: ein mehrspaltiges Formular VIII Inhalt

9 8 Tabellen Rahmen und Innenabstände für Zellen einstellen Den Zellzwischenraum einstellen Leerraum zwischen Bildern und dem unteren Zellenrand entfernen Tabellenzellen individuell gestalten Leere Tabellenzellen verstecken Stildefinitionen für die Tabellenüberschriften Stildefinitionen für Tabellenbeschriftungen Rollover-Effekte für Tabellenzeilen Tabellenzeilen individuell gestalten Tabellenspalten gestalten Abwechselnde Hintergrundfarben für Tabellenzeilen Tabellen mit einer festen Breite versehen Serviervorschlag: eine Tabelle mit Stil Drucken Spezielle Stylesheet-Regeln für das Ausdrucken angeben Die richtigen Längeneinheiten und Werte für das Ausdrucken verwenden Eine Seite für Schwarz-Weiß-Ausdrucke vorbereiten Nach einem Link den URI anzeigen Sonderzeichen vor Links einfügen Seitenumbrüche anlegen Überschriften von Tabellenspalten auf jeder Seite mitdrucken Ein Webformular für den Ausdruck aufbereiten Bestimmte Dokumentteile nicht mit ausdrucken Das Ausdrucken von Hintergrundbildern selbst steuern Mobile Geräte Media Queries verwenden, um mobile und Desktop-Browser zu unterscheiden Längs- oder Querformat ermitteln Die Größe und Skalierung des Ansichtsbereichs steuern Stile für Mobilgeräte zuerst laden Das Laden von Stylesheets beschleunigen Mobile Seiten mit CSS3 schneller machen Nicht benötigte Elemente ausblenden Seitenlayouts linearisieren Tabellen linearisieren Inhalt IX

10 10.10 Links als Buttons darstellen Testen Seitenlayouts Flexible zweispaltige Layouts erstellen Zweispaltige Layouts mit festen Breiten erstellen Flexible mehrspaltige Layouts mit Floats erstellen Spalten mit Floats in beliebiger Reihenfolge darstellen Faux Columns einsetzen Den»heiligen Gral«verstehen Den Fußteil an der Unterkante des Browserfensters verankern Layouts mit einem»sticky Footer«versehen Grid-System benutzen Inhalte mit CSS3 auf mehrere Spalten verteilen Ausblick Design mit CSS Rollover-Effekte ohne Bilder erzeugen Ein Farbschema für eine Website erstellen Für ausreichenden Farbkontrast sorgen Farbverläufe mit CSS3 definieren Transparenzen erzeugen Abgerundete Ecken mit CSS3 definieren Schattenwürfe mit CSS3 erzeugen Realistische Schattenwürfe im Internet Explorer vor Version 9 erzeugen Elemente umformen Einfache Animationen erstellen Alternative Cursorsymbole definieren Modulare Skalen verwenden Ein Grundlinienraster verwenden Quasi zufällige Hintergrundmuster erzeugen Tipps und Tricks Überprüfen, ob ein Stylesheet gültig ist Ein Design auf mehreren Plattformen testen Browsererweiterungen zur Fehlersuche benutzen Bekannte Browser-Bugs und CSS-Probleme erkennen und beheben Websites mit einem Textbrowser testen X Inhalt

11 13.6 Die richtige Zeichenkodierung angeben Inhalte mit CSS erzeugen Das Boxmodell anpassen Float-Containern per Clearfix ihre Höhe wiedergeben HTML-Elemente dynamisch hervorheben Elemente nur in Hilfsgeräten darstellen Inline-Stile überschreiben Stylesheets mit Conditional Comments nur für den Internet Explorer definieren Stile für HTML5-Elemente im IE definieren haslayout-probleme beheben Reset-Stylesheets benutzen Die Möglichkeiten von CSS mit Präprozessoren erweitern Älteren Browsern mit Polyfills auf die Sprünge helfen CSS3-Eigenschaften in der Präfixschreibweise angeben Daten-URIs verwenden A Ressourcen Index Inhalt XI

12

13 Vorwort Um ein richtig gutes Essen zuzubereiten, brauchen Sie vor allem eines: hervorragende Zutaten. Diese Einschätzung wird Ihnen jeder gute Koch bestätigen. Der Autor Christopher Schmitt hat die nötigen Einkäufe für Sie erledigt. Dank der Zusammenstellung von hunderten Rezepten in diesem Buch haben Sie alles, was Sie brauchen, um flexible Webseiten mit Stil zu erstellen. Als ich zum ersten Mal versuchte, mich in der wunderbaren Welt von CSS zurecht zu finden, war die Trial-and-Error-Methode mein wichtigstes Werkzeug, um die kreativen Möglichkeiten von CSS zu entdecken. Ich dachte bei mir:»hm, die Liste würde ich gerne als Navigationsleiste darstellen.«oder:»ich muss die Elemente eines Webformulars für einen Kunden gestalten.«ich verbrachte viele Stunden (oder gar Tage) damit, verschiedene CSS-Regeln zu erstellen, wieder zu entfernen und endlose Kombinationen durchzuspielen. Dieses Ausprobieren»auf gut Glück«funktionierte (manchmal), und auch wenn Außenstehende es sogar als Spaß bezeichnen könnten, hat der ganze Prozess doch ganz schön lange gedauert. Damals wünschte ich mir ein Buch wie dieses. Anstatt die Lösung zum Gestalten aller Elemente unverhofft durch einen Zufall zu finden, hätte ich auch kurz das CSS Kochbuch durchblättern können, das richtige Rezept heraussuchen und direkt mit dem Kochen anfangen können. All die Raterei wäre nicht mehr nötig gewesen, und ich hätte meine Zeit mit den Dingen verbringen können, die ich am besten kann: kreativ zu sein. Der modulare Aufbau dieses Buchs macht es zu einem unverzichtbaren Referenzwerk für Designer und Entwickler gleichermaßen. Konfrontiert mit Problemen wie den typografischen Fallstricken im Web, der Gestaltung von Links oder ganzen Seitenlayouts, erklärt Christopher einerseits klar und verständlich, welche Stildefinitionen nötig sind, um die gestellten Anforderungen zu erfüllen, aber auch, welche Eigenheiten es bei den verschiedenen Browsern zu beachten gilt. Zusätzlich enthält das Buch hilfreiche Workarounds für die täglichen Probleme mit CSS und das nötige Wissen, um als Webdesigner erfolgreich zu sein. XIII

14 Dieses Buch ist deshalb so nützlich, weil es den echten Problemen die richtigen Werkzeuge gegenüberstellt, um wirkliche Ergebnisse zu erzielen. Sie haben vielleicht schon davon gehört, dass CSS Ihr Leben und die Erstellung und Pflege von Webseiten erleichtern kann. Jetzt sind Sie dran, und mit diesem Buch haben Sie eine Ausrede weniger, es nicht zu tun. Ich rate Ihnen, Platz auf Ihrem Schreibtisch zu schaffen, denn das CSS Kochbuch wird Ihnen ein ständiger Begleiter bei Ihrer täglichen Arbeit sein. Ich hoffe, dass es immer in Reichweite ist. Dan Cederholm, Gründer von SimpleBits ( über die 3., englische Auflage dieses Buches XIV Vorwort

15 Einführung Jedes Buch erzählt eine Geschichte selbst eines über Webdesign. In diesem Buch geht es um Cascading Style Sheets, kurz CSS. CSS besitzt eine einfache, standardisierte Syntax, die Webdesignern eine umfassende Kontrolle über die Darstellung einer Website ermöglicht. CSS ist ein wesentlicher Bestandteil des heutigen Webdesigns. Verglichen mit den Möglichkeiten der 1990er-Jahre, können Webdesigner mit CSS das Design einer Site wesentlich präziser kontrollieren, und das mit einem deutlich geringeren Zeitaufwand. Dabei gehen die Möglichkeiten von CSS deutlich über die des traditionellen Webdesigns hinaus und schaffen ein Maß an Interaktivität, das noch vor wenigen Jahren nur mithilfe von JavaScript oder Flash möglich war. Für die Erstellung von Stylesheets brauchen Sie keine spezielle Hard- oder Software. Die Grundvoraussetzungen sind ein einigermaßen aktueller Computer, ein moderner Browser wie z.b. Firefox, Google Chrome oder Internet Explorer ab Version 9 (um nur ein paar zu nennen) und Ihr bevorzugter Code-Editor. Hierfür können Sie alles einsetzen vom einfachen Textprogramm wie Windows Notepad oder TextEdit unter Macintosh bis hin zum komplett ausgestatteten WYSIWYG-Editor wie beispielsweise Adobe Dreamweaver in der Codeansicht. Bevor es richtig losgeht, hier noch ein wenig Geschichte: Manche Menschen sind der Meinung, das Webdesign hätte seinen Anfang genommen, als Tim Berners-Lee, der Erfinder des World Wide Web, die ersten Websites erstellt hat. Andere glauben, dass das Web seinen Anfang nahm, als Netscape HTML um das center-tag erweiterte. Auch wenn es vielleicht zunächst widersinnig erscheint, bin ich persönlich der Meinung, dass die Geburtsstunde des Webdesigns mit der Veröffentlichung der ersten Bücher zu diesem Thema zusammenfiel. Eines der ersten Bücher, die dabei halfen, den Dot-com- Boom der 90er anzuschieben, war das erste vierfarbige Buch über Webgrafiken. Designing Web Graphics von Lynda Weinman wurde im Januar 1996 veröffentlicht. Ein paar Monate später im gleichen Jahr folgte dann Creating Killer Web Sites von David Siegel. Diese beiden Bücher trugen meiner Meinung nach genauso stark dazu bei, die Webrevolution auf den Weg zu bringen, wie die Erfindung der Technologien selbst. XV