This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Inhalt
Vorwort 17
1.1 Warum sollten Sie Stylesheets nutzen? 201.2 Das CSS-Prinzip 221.3 Wie sieht ein Stylesheet aus? 23
2.1 Die Grundlage - das semantische HTML-Dokument 272.2 Schnelleinstieg HTML 292.3. Code follows Content 322.4 Sektionen einer Webseite 362.5 HTML 4, HTML5 oder XHTML? 392.6 HTML5undCSS 42
2.6.1 HTML5 im Vergleich zu HTML 4 und XHTML 442.6.2 Neue Elemente in HTML5 442.6.3 HTML5 in der Praxis 46
a t ^ ^
4.1 Die verschiedenen Selektoren 564.1.1 Einfache Element-Selektoren 564.1.2 Class-und ID-Selektoren 584.1.3 Kombinierte Selektoren 654.1.4 Universal-Selektor 684.1.5 Kind-Selektoren 714.1.6 Folgeelement-Selektoren 744.1.7 Attribut-Selektoren (CSS2 und CSS3) 764.1.8 Pseudo-Klassen und Pseudo-Elemente 804.1.9 CSS3-Pseudo-Selektoren 804.1.10 Wiederholungs-Selektoren 82
7.2 »float« und »clear« 1287.2.1 »float« mit »clear« aufheben 1337.2.2 »clear« ohne zusätzliches Markup 135
8.1 Fixiert, flexibel, oder elastisch? 1428.1.1 Vor und Nachteile 1428.1.2 Elastische Layouts und Browserzooms 1448.1.3 Auflösungsabhängige Layouts 145
8.2 Der Zweispalter 1468.2.1' Zweispalter mit float 149
Inhalt
8.3 Der Dreispalter 1518.3.1 Dreispalter flexibel 1528.3.2 Dreispalter mit festen Spaltenbreiten rechts und links ... 1558.3.3 Dreispalter mit flexibler Spaltenaufteilung und freier
Wahl der Breiteneinheiten 1598.3.4 Elastischer Dreispalter mit Anpassung an Schriftgröße ... 165
8.4 CSS-Layouttricks 1708.4.1 Das Problem der (nicht) gleich langen Spalten 1708.4.2 Zentrieren 1798.4.3 Minimale und maximale Breiten für flexible Layouts 1848.4.4 Feststehende Bereiche und CSS-Frames 1878.4.5 Auflösungsflexible Layouts 194
9.1 Arbeiten mit Text 2019.1.1 Grundlegende Schriftformatierungen 2019.1.2 Typografie mit CSS 2089.1.3 Einfache Auszeichnungen 2099.1.4 Einbindung von Schriftarten per CSS 2119.1.5 Konstruktion einer konsistenten Typografie 2239.1.6 Überschriften mit CSS 2279.1.7 Initialen und Einrückungen 2329.1.8 Styling von Zitaten 239
9.2 CSS-Menüs mit Listen 2519.2.1 Vertikale Menüs 2529.2.2 CSS-Flyout-Menüs 2609.2.3 Horizontale Menüs 2649.2.4 Menüs mit durchgehendem Hintergrund 273
9.3 Tabellen und CSS 2769.4 Schönere Formulare 289
9.4.1 Ordnung ist alles: die Struktur eines Formulars 2909.4.2 Pimp my Form 3019.4.3 Anpassen von Formular-Rahmenelementen 3059.4.4 Interaktionshilfen 3069.4.5 Fehlermeldungen 309
9.5 Druckversion per CSS 3129.6 Arbeiten mit Transparenz 316
9.6.1 Deckkraft von Ebenen steuern 3169.6.2 Ebenentransparenz mit voll deckendem Inhalt 3189.6.3 PNG: Grafiken mit weichem Verlauf (Alpha-Kanal) 321
Inhalt
9.7 Arbeiten mit Grafiken 3239.7.1 Grafiken per CSS beschneiden 3239.7.2 CSS-Sprites 3239.7.3 Mehrfache Hintergründe (CSS3) 3289.7.4 Grafiken präsentieren - die CSS-Bildergalerie 330
9.9 Elemente per CSS verschieben und drehen 3629.10 CSS-Übergänge und Animationen 364
9.10.1 Animierte Übergänge 3649.10.2 Animationen mit Keyframes 366
9.11 Stylesheet-Wechsler 3709.11.1 Simpler Styleswitcher 3749.11.2 Styleswitcher mit JavaScript und Ajax 3749.11.3 Browserweichen für Stylesheets 377
^J^M^
10.1 Die Browserlandschaft ; 37910.1.1 Browser-Marktanteile 38110.1.2 CSS-Unterstützung testen - der Acid-Test 38310.1.3 Browser mit WebKit-Engine
(Chrome, Safari, Konqueror) 38510.1.4 Firefox (Gecko) 38710.1.5 Opera (Presto) 38910.1.6 Opera Mini und Opera Mobile 39010.1.7 Internet Explorer (Trident) 39110.1.8 Weitere Browser 39310.1.9 Lynx 39410.1.10 Screenreader 395
10.2 Problemfall Internet Explorer 39610.2.1 hasLayout 397
10.3 Browserweichen und -filter 39810.3.1 Strategien für die Anwendung von Browserweichen:
»To hack or not to hack« 39910.3.2 Doctype-Switching und Browseremulationen 40010.3.3 Conditional Comments 40310.3.4 Browser-Sniffer 40410.3.5 CSS-Bugs per JavaScript beheben 405
11.1 Arbeiten mit HTML-Vorlagen 41111.2 Design Patterns 414
11.2.1 Design Pattern und Quellcode von Yahoo! 41511.3 Objektorientiertes CSS 41711.4 Alles auf null: Reset-Stylesheets 42111.5 Kurzschreibweise 42611.6 CSS-Präprozessoren 427
11.6.1 Effizient CSS-Anweisungen schreiben mit LESS 42911.7 Stylesheets organisieren 433
11.7.1 Ordnung durch Stylesheet-Module 43411.7.2 Filter-Management 43511.7.3 Kommentieren von Stylesheets 43611.7.4 Ein Standard für CSS-Kommentare: CSSDoc 43711.7.5 Sprung-Links, Inhaltsverzeichnis und Farbdefinitionen .. 439
11.8 CSS im Entwurfsverfahren (Rapid Prototyping) 44111.8.1 Festlegen der Seitenstruktur in semantischem HTML 44211.8.2 Bereiche ausrichten in Ihrem bevorzugten Browser 44311.8.3 Einfügen der Inhalte 44411.8.4 Dynamische Bereiche umsetzen 44511.8.5 Benutzertests 44511.8.6 Finetuning, Browsertests und technische
Optimierungen 44711.9 Fehlersuche in CSS-Dateien 447
12.2 Yahoo! Grids 46412.2.1 Weitere Aufteilung des Hauptbereichs 467
Inhalt
12.3
12.4
13.1
13.2
13.3
12.2.212.2.312.2.412.2.512.2.6
Der YUI Grids Builder
Yahoo! Grids anpassen
Semantische Rollen für barrierefreie Grids
Gleich lange Spalten mit Grids und JavaScript
Fazit zu Yahoo! Grids
Blueprint CSS
12.3.1 Arbeiten mit Blueprint
12.3.2 Blueprint-Raster anpassen
Weitere CSS-Frameworks ,
12.4.1 Rastersystem »960«
469470471472472473474478479479
Webstandards beachten
13.1.1 Was ist für eine standardkonforme Webseite
erforderlich?
13.1.2 DerW3C-ValidatorSuchmaschinenoptimierung mit CSS
13.2.1 Schlanke Dokumente durch CSS
13.2.2 Semantik für Suchmaschinen
Zugängliche und benutzbare Websites mit CSS
13.3.1 Grundsätze für zugängliche Websites
13.3.2 Barrierefreie Sprung-Links
13.3.3 Link-Auszeichnungen - Nützlich und barrierefrei
13.3.4 Testen
483
484486488488489492493496498500
m14.1 Austausch eines Stylesheets per JavaScript
14.2 Klassen zuweisen mit »className«
14.3 Stile mit »style« zuweisen
14.4 Formularvalidierung mit CSS und JavaScript
14.5 Tageszeitenabhängiger Styleswitcher
14.6 Fadenkreuz für Tabellen :
14.7 JavaScript zur Umgehung von Browsereinschränkungenverwenden
14.7.1 Browser- bzw. Fähigkeitserkennung
14.7.2 JavaScript zur Erweiterung der Browserfähigkeitennutzen
503
504
505
506
511
514
516
517
519
10
Inhalt
15.1 Strategien für das mobile Web: mobilisieren stattminiaturisieren
15.2 Mobile Standards15.3 Stylesheets für mobile Browser ausliefern
15.3.1 Stylesheets per Media Query ausliefern15.3.2 User-Agent-Sniffing
15.4 CSS-Design für den mobilen Einsatz15.5 Einzelne Geräte
15.5.1 Betriebssysteme für Mobilgeräte und Organizer15.5.2 Safari auf dem iPhone und iPad15.5.3 Chrome auf Android-Geräten15.5.4 Opera Mini und Opera Mobile15.5.5 Weitere mobile Browser
15.6 Frameworks für die mobile Entwicklung15.6.1 Mobile Boilerplate15.6.2 jQuery Mobile Framework15.6.3 jQTouch
529
530
531
531
533
533
536
536
537
545
547
550
550
550
552
558
16.1 Grundsätzliche Probleme16.2 Lokale E-Mail-Clients
16.2.1 Microsoft Outlook16.2.2 Mozilla Thunderbird ,16.2.3 Apple Mail
16.3 Webmail-Dienste16.3.1 Google Mail16.3.2 Yahoo! Mail und Windows Live Mail16.3.3 GMX16.3.4 Web.de
16.4 Strategien für E-Mail-Newsletter16.4.1 Techniken für mit CSS gestaltete und alle anderen
E-Mails16.4.2 CSS-Eigenschaften im Einzelnen
561
565
565
567
568
568
568
569
570
571
572
572576
mmmi17.1 CSS-Spezifikationen
17.1.1 CSS3 und die Browser579582
11
Inhalt
17.1.2 Von Standards und Hersteller-Präfixen 58317.2 CSS3 - was können Sie heute verwenden? 583
17.2.1 Selektoren 58317.2.2 Neue Eigenschaften für das Seitenlayout 58417.2.3 Neue Möglichkeiten für das Styling 58617.2.4 Übergänge, Transformationen und Animationen 588