Jetzt lerne ich

CSS3

Bibliografische Information der Deutschen NationalbibliothekDie Deutsche Nationalbibliothek verzeichnet diese Publikation in derDeutschen Nationalbibliografie; detaillierte bibliografische Daten sindim Internet über abrufbar.

Die Informationen in diesem Buch werden ohne Rücksicht auf einen eventuellen Patentschutzveröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt.Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen.Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber undAutoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortungnoch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehlersind Verlag und Herausgeber dankbar.

Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherungin elektronischen Medien.Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeitenist nicht zulässig.

Fast alle Hardware- und Softwarebezeichnungen und weitere Stichworte und sonstige Angaben,die in diesem Buch verwendet werden, sind als eingetragene Marken geschützt. Da es nichtmöglich ist, in allen Fällen zeitnah zu ermitteln, ob ein Markenschutz besteht, wird das ®-Symbolin diesem Buch nicht verwendet.

10 9 8 7 6 5 4 3 2 1

14 13 12

ISBN 978-3-8272-4745-2

© 2012 by Markt+Technik Verlag,ein Imprint der Pearson Deutschland GmbH, Martin-Kollar-Straße 10-12, D-81829 München/Germany Alle Rechte vorbehaltenCovergestaltung: Thomas Arlt, tarlt@adesso21.netLektorat: Dorothea Krist, dkrist@pearson.deFachlektorat: Angie Radtke, BonnKorrektorat: Christian Schneider, MünchenHerstellung: Martha Kürzl-Harrison, mkuerzl@pearson.deSatz: text&form GbR, FürstenfeldbruckDruck und Verarbeitung: Drukarnia Dimograf, Bielsko-BialaPrinted in Poland

jetzt lerne ich

CSS3

Modernes Webdesign verstehen und anwenden

Florence Maurice

Inhaltsübersicht

Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

1 CSS-Versionen und aktuelle Browser landschaft . . . . . . . . . . . 19

2 Ohne HTML geht nichts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3 So funktioniert CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

4 CSS und HTML – auf ewig verbunden . . . . . . . . . . . . . . . . . . 77

5 Selektoren allüberall . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

6 Farbangaben in CSS und transparente Bereiche . . . . . . . . . . . 117

7 Ohne Typografie nix los . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

8 Boxmodell – Ausmaße der Kästchen . . . . . . . . . . . . . . . . . . . 173

9 Die Macht im Hintergrund – background-image und Konsorten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

10 Float für flexible Layouts und mehr . . . . . . . . . . . . . . . . . . . . 241

11 Positionierungen über position . . . . . . . . . . . . . . . . . . . . . . . . 287

12 Navigationsleisten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

13 Das C in CSS: Cascading – Kaskade, Spezifität und Co. . . . . 357

14 Tabellen und Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367

15 Druckstylesheet und mehr . . . . . . . . . . . . . . . . . . . . . . . . . . . 389

16 Responsive Webdesign – Seiten für Smartphones, aber nicht nur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399

17 Noch mehr CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419

Stichwortverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431

5

Inhaltsverzeichnis

Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

1 CSS-Versionen und aktuelle Browser landschaft . . . . . . . 191.1 CSS und das W3C . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191.2 Der richtige Zeitpunkt für CSS3 . . . . . . . . . . . . . . . . . . . . . . . . 201.3 Die Browser landschaft . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

2 Ohne HTML geht nichts . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.1 HTML – grundlegend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.2 Dokument erstellen und anschauen . . . . . . . . . . . . . . . . . . . . . 242.3 Besser arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262.3.1 Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262.3.2 Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272.4 Mehr Strukturierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282.4.1 Überschriften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282.4.2 Umbruch automatisch oder gewollt . . . . . . . . . . . . . . . . . . . . . 292.4.3 Hervorhebung einzelner Wörter oder Satzteile . . . . . . . . . . . . . 292.4.4 Listen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302.5 Verknüpfungen und Bilder . . . . . . . . . . . . . . . . . . . . . . . . . . . 322.5.1 Bilder einbinden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322.5.2 Der Link macht’s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342.5.3 Struktur für Navigationsleisten . . . . . . . . . . . . . . . . . . . . . . . . 362.5.4 Pfadangaben – hoch und runter, aber richtig! . . . . . . . . . . . . . . 362.6 Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382.7 div – Klammer für größere Bereiche . . . . . . . . . . . . . . . . . . . . 392.8 span – Texte umfassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412.9 Kommentare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412.10 Besser nicht: HTML-Attribute und Tags für die Formatierung . . . 422.11 HTML-Varianten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422.11.1 Der Klassiker – HTML 4.01 . . . . . . . . . . . . . . . . . . . . . . . . . . . 432.11.2 Weitere Besonderheiten von HTML 4.01 . . . . . . . . . . . . . . . . . 442.11.3 XHTML – weniger Freiheit, mehr Klarheit . . . . . . . . . . . . . . . . . 452.11.4 Damit zusammenkommt, was zusammen gehört: HTML5 . . . . . 472.11.5 Die Qual der Wahl – welches HTML wofür? . . . . . . . . . . . . . . . . 502.12 Validator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512.12.1 Und so benutzen Sie den Validator des W3C . . . . . . . . . . . . . 512.13 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542.14 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

7

3 So funktioniert CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593.1 Arbeitsteilung zwischen HTML und CSS . . . . . . . . . . . . . . . . . . 593.1.1 Ohne CSS ist eine Seite nicht ganz ungestaltet . . . . . . . . . . . . 613.2 Ein kleines Beispiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613.2.1 Der HTML-Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613.2.2 CSS-Datei einbinden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623.2.3 Erste Formatierungen in der CSS-Datei . . . . . . . . . . . . . . . . . . 633.2.4 Den #container formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . 653.2.5 Hintergrundbild im Kopf einbinden . . . . . . . . . . . . . . . . . . . . . . 673.2.6 Prinzipielle Anordnung definieren . . . . . . . . . . . . . . . . . . . . . . . 683.2.7 Ein eleganter Schatten mit CSS3 . . . . . . . . . . . . . . . . . . . . . . 693.2.8 Weitere Unterseiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703.2.9 Veränderungen am Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . 713.3 Vorteile von CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 733.4 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743.5 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

4 CSS und HTML – auf ewig verbunden . . . . . . . . . . . . . . . 774.1 Externe Dateien mit link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 774.2 @import zum Einbinden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814.3 Machtkampf – wer setzt sich durch? . . . . . . . . . . . . . . . . . . . . 834.4 Kommentare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 874.5 Stets hilfreich und unentbehrlich: Firebug . . . . . . . . . . . . . . . . 874.6 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 894.7 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

5 Selektoren allüberall . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 935.1 Einfache Selektoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 935.1.1 Typselektor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 935.1.2 Universalselektor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 945.1.3 Klassenselektor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 945.1.4 ID-Selektoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 975.1.5 Klassenselektor und ID-Selektor im Vergleich . . . . . . . . . . . . . . 975.1.6 Voll pseudo: Formatierung für Links über Pseudoklassen . . . . 985.1.7 Mehr Pseudoklassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1025.1.8 Noch mehr pseudo: Die Pseudoelemente . . . . . . . . . . . . . . . . 1025.1.9 Attributselektoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1045.2 Kinder, Kegel und Co. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1065.2.1 HTML-Dokumente als Baum . . . . . . . . . . . . . . . . . . . . . . . . . . 1075.3 Mindestens zwei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1085.3.1 Nachfahrenkombinator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1085.3.2 Weitere Kombinatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1095.4 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1125.5 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

8

Inhaltsverzeichnis

6 Farbangaben in CSS und transparente Bereiche . . . . . . . 1176.1 Farben am Bildschirm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1176.2 Englische Farbnamen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1176.3 Farbangaben mit dem Schlüsselwort rgb() . . . . . . . . . . . . . . . . 1186.4 Hexadezimale Farbangaben . . . . . . . . . . . . . . . . . . . . . . . . . . 1196.5 Farbwähler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1206.5.1 Color Scheme Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1206.5.2 Firefox-Erweiterung ColorZilla . . . . . . . . . . . . . . . . . . . . . . . . . 1206.6 Farbangaben mit rgba() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1216.6.1 rgba() am Beispiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1226.6.2 rgba() in Vorgänger-Versionen des Internet Explorer 9

simulieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1236.7 opacity – noch mehr Transparenzen . . . . . . . . . . . . . . . . . . . . 1266.7.1 opacity in den heutigen Browsern . . . . . . . . . . . . . . . . . . . . . . 1286.8 Filter für den IE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1296.8.1 Auch nicht schön, aber wichtig: hasLayout . . . . . . . . . . . . . . . 1296.8.2 Schreibweise der Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1306.9 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1306.10 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

7 Ohne Typografie nix los . . . . . . . . . . . . . . . . . . . . . . . . . . . 1337.1 Schriftformatierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1337.1.1 Als Einstieg in das Thema … . . . . . . . . . . . . . . . . . . . . . . . . . 1337.1.2 Schriftfarbe und nützliche Tipps . . . . . . . . . . . . . . . . . . . . . . . 1347.1.3 Schriftart festlegen, ganz klassisch . . . . . . . . . . . . . . . . . . . . . 1357.1.4 Mehr Freiheit mit CSS3: herunterladbare Schriften . . . . . . . . . . 1377.1.5 Maßeinheiten für Längenangaben . . . . . . . . . . . . . . . . . . . . . . 1427.1.6 font-size für die Schriftgröße . . . . . . . . . . . . . . . . . . . . . . . . . . 1457.1.7 font-weight – Normal oder fett . . . . . . . . . . . . . . . . . . . . . . . . . 1487.1.8 Kursiver Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1517.1.9 Kapitälchen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1517.1.10 Zeilenhöhe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1517.1.11 Kurz und knackig: die font-Kurzschreibweise . . . . . . . . . . . . . . 1527.1.12 Abstände zwischen Wörtern und Buchstaben . . . . . . . . . . . . . . 1537.1.13 Unterstreichungen und mehr . . . . . . . . . . . . . . . . . . . . . . . . . . 1547.1.14 Groß- und Kleinschreibung per CSS . . . . . . . . . . . . . . . . . . . . . 1557.2 Absätze einrücken und ausrichten . . . . . . . . . . . . . . . . . . . . . . 1557.3 Überschriften als Hingucker . . . . . . . . . . . . . . . . . . . . . . . . . . 1567.3.1 Listen formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1607.4 text-shadow: schöne Textschatten . . . . . . . . . . . . . . . . . . . . . . 1607.4.1 Profitrick: Textsäulen über text-shadow . . . . . . . . . . . . . . . . . . 1617.4.2 Profiwissen: text-shadow im IE . . . . . . . . . . . . . . . . . . . . . . . . 1627.4.3 Unterschiede akzeptieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1647.5 Fehler suchen und finden . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

9

Inhaltsverzeichnis

7.6 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1687.7 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169

8 Boxmodell – Ausmaße der Kästchen . . . . . . . . . . . . . . . . 1738.1 Breiten und Höhenangaben . . . . . . . . . . . . . . . . . . . . . . . . . . . 1738.2 Stürmische Höhen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1768.3 Innenabstand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1778.3.1 Aber bitte einzeln! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1788.4 Rahmen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1808.4.1 Praxisbeispiel: Bilderrahmen . . . . . . . . . . . . . . . . . . . . . . . . . . 1838.5 Boxen messen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1858.5.1 Vergangenheit und Zukunft des Boxmodells . . . . . . . . . . . . . . . 1868.6 Außenabstände . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1888.6.1 Collapsing Margins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1918.6.2 Profiwissen: Collapsing Margins bei verschachtelten

Elementen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1928.7 Boxmodell bei Inline-Elementen . . . . . . . . . . . . . . . . . . . . . . . . 1948.8 overflow – mehr Inhalt als Platz . . . . . . . . . . . . . . . . . . . . . . . . 1948.8.1 Profitrick: Scrollleisten im Firefox einblenden über overflow-y . . 1958.9 Abgerundete Ecken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1968.9.1 Ecken einzeln definieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1978.10 box-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1998.10.1 Raffiniert: Schatten nach innen über inset . . . . . . . . . . . . . . . . 2008.11 Sonderangaben für den IE . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2018.12 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2048.13 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

9 Die Macht im Hintergrund – background-image und Konsorten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

9.1 Hintergrundbilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2079.1.1 Hintergrundbild einbinden . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2079.1.2 Wiederholung festlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2099.1.3 Position des Hintergrundbilds festlegen . . . . . . . . . . . . . . . . . . 2119.1.4 Großes Hintergrundbild bei kleinerem Element . . . . . . . . . . . . . 2139.1.5 Profitrick: Sprites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2159.1.6 Fest oder mitscrollend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2209.1.7 Kurzgefasst – background-Eigenschaft . . . . . . . . . . . . . . . . . . 2229.1.8 Mehr des Guten: Mehrere Hintergrundbilder pro Element . . . . . 2239.1.9 background-size: Mach das groß! . . . . . . . . . . . . . . . . . . . . . . 2239.2 Farbverläufe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2279.2.1 Klassisch: Hintergrundbild mit Farbverlauf . . . . . . . . . . . . . . . . 2279.2.2 Farbverläufe über CSS3 erstellen . . . . . . . . . . . . . . . . . . . . . . 2299.2.3 Radiale Farbverläufe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2339.2.4 Browserübergreifende Farbverläufe . . . . . . . . . . . . . . . . . . . . . 234

10

Inhaltsverzeichnis

9.2.5 Farbverläufe erstellen lassen . . . . . . . . . . . . . . . . . . . . . . . . . . 2349.3 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2379.4 Übung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

10 Float für flexible Layouts und mehr . . . . . . . . . . . . . . . . . 24110.1 Das Grundprinzip von float . . . . . . . . . . . . . . . . . . . . . . . . . . . 24110.1.1 Besonderheiten von float . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24310.1.2 clear – Schluss mit dem Umfließen . . . . . . . . . . . . . . . . . . . . . 24710.1.3 Floats umschließen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24910.2 Zweispaltenlayout mit float . . . . . . . . . . . . . . . . . . . . . . . . . . . 25410.2.1 Gesamtbreite – in Pixel, Prozent oder was? . . . . . . . . . . . . . . . 25710.2.2 Navigation und Inhalt nebeneinander . . . . . . . . . . . . . . . . . . . . 25810.2.3 Gleich lange Spalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25810.2.4 Fußzeile ergänzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25910.2.5 Zentrieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26110.3 Seitenfüllende Kopf- und Fußzeile . . . . . . . . . . . . . . . . . . . . . . 26310.4 Layout in Prozent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26610.4.1 Container flüssig – Navigation feste Breite . . . . . . . . . . . . . . . . 26610.4.2 Navigation und Inhaltsbereich ganz flüssig . . . . . . . . . . . . . . . . 26810.5 Dreispalter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27010.6 Profitrick: 100% Höhe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27510.7 Bildergalerie mit float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27810.8 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28110.9 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

11 Positionierungen über position . . . . . . . . . . . . . . . . . . . . . 28711.1 In Position! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28711.2 Vorbereitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28811.3 position: static . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29011.4 position: absolute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29011.4.1 Absolut ist nicht immer absolut . . . . . . . . . . . . . . . . . . . . . . . . 29211.4.2 Layout erstellen mit position: absolute . . . . . . . . . . . . . . . . . . 29511.4.3 Profitrick: Absolutes Layout mit Fußzeile . . . . . . . . . . . . . . . . . 29911.4.4 Zusammenfassung – Layouts mit position: absolute . . . . . . . . 30411.5 position: relative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30511.6 Starkes Team: absolut und relativ . . . . . . . . . . . . . . . . . . . . . . 30711.6.1 Transparente Bildbeschriftung . . . . . . . . . . . . . . . . . . . . . . . . . 31011.7 position: fixed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31311.7.1 Layout mit position: fixed . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31511.8 z-index – die Stapelreihenfolge . . . . . . . . . . . . . . . . . . . . . . . . 31711.8.1 Profiwissen: Stapelkontext im Detail . . . . . . . . . . . . . . . . . . . . 31911.9 clip – Ausschnitt von Elementen . . . . . . . . . . . . . . . . . . . . . . . 32111.10 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32211.11 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323

11

Inhaltsverzeichnis

12 Navigationsleisten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32512.1 Vertikale Navigationsleiste . . . . . . . . . . . . . . . . . . . . . . . . . . . 32512.1.1 Navigationsleiste in Layout integrieren . . . . . . . . . . . . . . . . . . . 32912.1.2 Aktuellen Navigationspunkt hervorheben . . . . . . . . . . . . . . . . . 33012.2 Horizontale Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33212.3 Tabs ganz klassisch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33512.4 Drop-down: Zeig dich, versteck mich . . . . . . . . . . . . . . . . . . . . 34012.5 Navigation mit CSS3-Effekten . . . . . . . . . . . . . . . . . . . . . . . . . 34512.5.1 Transitions für Profis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35012.6 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35412.7 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355

13 Das C in CSS: Cascading – Kaskade, Spezifität und Co. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357

13.1 So machen es die Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . 35713.2 Vererbung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35913.2.1 Profitipp: Vererbung bei relativen Einheiten . . . . . . . . . . . . . . . 36013.3 Spezifität – wer setzt sich durch? . . . . . . . . . . . . . . . . . . . . . . 36013.3.1 Profitipp: Spezifität berechnen . . . . . . . . . . . . . . . . . . . . . . . . 36213.3.2 Bestechung mit !important . . . . . . . . . . . . . . . . . . . . . . . . . . . 36313.4 Reihenfolge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36413.5 Herkunft . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36413.6 Und die Kaskade? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36513.7 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36513.8 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366

14 Tabellen und Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . 36714.1 Tabellen gestalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36714.1.1 Die richtige HTML-Struktur . . . . . . . . . . . . . . . . . . . . . . . . . . . 36714.1.2 Tabellen mit CSS formatieren . . . . . . . . . . . . . . . . . . . . . . . . . 36814.1.3 Zebratabelle – jede zweite Zeile anders . . . . . . . . . . . . . . . . . . 37014.1.4 nth-child() – lustige Abzählreime . . . . . . . . . . . . . . . . . . . . . . . 37114.1.5 CSS3-Selektoren für alle Browser! . . . . . . . . . . . . . . . . . . . . . . 37214.2 Formulare gestalten mit CSS . . . . . . . . . . . . . . . . . . . . . . . . . 37314.2.1 Das richtige Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37414.2.2 Formular formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37714.2.3 Beschriftungen vor den Formularelementen anordnen . . . . . . . 38014.2.4 Negative Außenabstände . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38214.2.5 Darf es etwas mehr HTML5 sein? . . . . . . . . . . . . . . . . . . . . . . 38314.3 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38514.4 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386

12

Inhaltsverzeichnis

15 Druckstylesheet und mehr . . . . . . . . . . . . . . . . . . . . . . . . . 38915.1 Ausgedruckt ist anders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38915.2 Druckstylesheet in der Praxis . . . . . . . . . . . . . . . . . . . . . . . . . 39115.3 Erzeugte Inhalte in CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39415.4 Printstylesheet einbinden . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39515.4.1 Mehr Ausgabetypen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39515.5 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39615.6 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397

16 Responsive Webdesign – Seiten für Smartphones, aber nicht nur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399

16.1 Smartphones sind anders . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39916.2 CSS3 Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40116.3 Desktop first oder Mobile first? . . . . . . . . . . . . . . . . . . . . . . . . 40216.3.1 Desktop first . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40216.3.2 Mobile first! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40316.4 Mobile first am Praxisbeispiel . . . . . . . . . . . . . . . . . . . . . . . . . 40416.4.1 Der HTML-Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40416.4.2 Besser als die Holzhammermethode . . . . . . . . . . . . . . . . . . . . 40416.4.3 Gestaltung für kleine Bildschirme . . . . . . . . . . . . . . . . . . . . . . 40516.4.4 Zweispalter bei mittlerer Größe . . . . . . . . . . . . . . . . . . . . . . . . 41016.4.5 Dreispaltendarstellung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41116.4.6 Zusammenfassung: Das Wichtigste für die Darstellung

auf mittleren und großen Bildschirmen . . . . . . . . . . . . . . . . . . . 41316.4.7 Fast am Ziel, aber etwas fehlt noch: das Beispiel im iPhone . . . 41316.5 Wie viel Layoutänderungen? . . . . . . . . . . . . . . . . . . . . . . . . . . 41516.6 Nachbessern für Vorgänger-Versionen des Internet

Explorer 9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41616.7 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41716.8 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418

17 Noch mehr CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41917.1 Transformationen ahoi! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41917.1.1 Transformationen kombinieren – und mit Transitions

versehen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42117.1.2 Transformationen in Vorgänger-Versionen des Internet

Explorer 9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42317.2 Mehr Spalten! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42417.3 Animationen! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42517.4 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42717.5 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428

Stichwortverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431

13

Inhaltsverzeichnis

Copyright Daten, Texte, Design und Grafiken dieses eBooks, sowie die eventuell angebotenen eBook-Zusatzdaten sind urheberrechtlich geschützt. Dieses eBook stellen wir lediglich als persönliche Einzelplatz-Lizenz zur Verfügung!

Jede andere Verwendung dieses eBooks oder zugehöriger Materialien und Informationen, einschließlich

• der Reproduktion,

• der Weitergabe,

• des Weitervertriebs,

• der Platzierung im Internet, in Intranets, in Extranets,

• der Veränderung,

• des Weiterverkaufs und

• der Veröffentlichung

bedarf der schriftlichen Genehmigung des Verlags. Insbesondere ist die Entfernung oder Änderung des vom Verlag vergebenen Passwortschutzes ausdrücklich untersagt! Bei Fragen zu diesem Thema wenden Sie sich bitte an: info@pearson.de

Zusatzdaten

Möglicherweise liegt dem gedruckten Buch eine CD-ROM mit Zusatzdaten bei. Die Zurverfügungstellung dieser Daten auf unseren Websites ist eine freiwillige Leistung des Verlags. Der Rechtsweg ist ausgeschlossen.

Hinweis

Dieses und viele weitere eBooks können Sie rund um die Uhr und legal auf unserer Website herunterladen:

http://ebooks.pearson.de

mailto:info@pearson.dehttp://ebooks.pearson.de

Jetzt lerne ich CSS3Modernes Webdesign verstehen und anwenden

InhaltsübersichtInhaltsverzeichnisIns Internet: Weitere Infos zum Buch, Downloads, etc.Copyright