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

4.2 Vererbung 854.3 Rangfolge und Kaskade 87

4.3.1 Die fmportant-Anweisung 94

Bibliografische Informationenhttp://d-nb.info/1010877550

digitalisiert durch

Inhalt

5.1 Stilanweisungen im HTML-Tag 975.2 Stilanweisungen im Dokumentenkopf 985.3 Verlinkte Stylesheets 99

5.3.1 Individuelles Design durch Alternative Stylesheets 1005.4 Importierte Stylesheets 1015.5 Medienspezifische Stylesheets 102

5.5.1 Medienspezifische Stylesheets mit CSS3 104

Das Kastenmodell6.1.1 Zusammenfallende Außenabstände

(Collapsing Margins)6.2 Elementtypen in CSS

6.2.1 Block-Elemente6.2.2 Eingebundene Elemente6.2.3 Definition des Elementtyps6.2.4 Weitere Elementtypen

6.3 Layout- und Positionierungsmodelle in CSS ..

105

108113114114115115116

7.1 Die Positionierungsart (»position«) 1197.1.1 »position: static« : 1207.1.2 »position: relative« 1227.1.3 »position: absolute« 1247.1.4 »position: fixed« 125

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.8 CSS-Effekte 3419.8.1 »Runde Ecken« 3419.8.2 CSS-Schatten 3429.8.3 Verläufe mit CSS 352

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

Inhalt

10.4 Browsertesting 40510.4.1 Virtualisierung 40610.4.2 Online-Screenshot-Dienste 408

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.1 YAML '. 45312.1.1 Klassische Spaltenlayouts 45412.1.2 Flexible Raster mit YAML 45712.1.3 YAMLBuilder 46112.1.4 Hilfreiche Klassen 46212.1.5 Formulare mit YAML 46312.1.6 Fazit 463

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

17.3 CSS3 Zen Ocean 588

18.1 CSS-Editoren 60518.1.1 TopStyle 605

18.2 Website-Editoren 61018.2.1 Adobe Dreamweaver CS5.5 61018.2.2 Aptana Studio 2.0 622

18.3 Analysewerkzeuge 62518.3.1 Firebug 62518.3.2 Web Developer Toolbars) 62918.3.3 Accessibility-Toolbar 63018.3.4 Calipers 631

18.4 Optimierungswerkzeuge 63218.4.1 CSS-Minifier 632

18.5 Eigene Tools herstellen: Benutzer-Stylesheets 634

A CSS-Referenz 641A.1 Alphabetische Übersicht 641A.2 Pseudo-Elemente und Pseudo-Formate 644

A.2.1 :link 644A.2.2 :visited 646A.2.3 :hover , , 647A.2.4 :focus 648A.2.5 :active 649A.2.6 :lang 650A.2.7 ::first-line 652A.2.8 r.first-letter ; 654A.2.9 :first-child 655A.2.10 "before und ::after 656A.2.11 :not(CSS3) 658A.2.12 :empty(CSS3) ; 659

12

Inhalt

A.2.13 :target (CSS3) 659

A.2.14 :enabled, disabled, xhecked (CSS3) 660

A.2.15 .last-child, :nth-childO, :nth-last-childO (CSS3) 660

A.2.16 :first-of-type, :last-of-type, :nth-of-typeO,

:nth-last-of-typeO (CSS3) 661

A.2.17 :only-child, :only-of-type (CSS3) 662

A.3 Inhaltserzeugung ; 662

A.3.1 content (CSS2, Änderung in CSS 2.1) 662

A.3.2 counterO und countersO 664

A.3.3 counter-increment (CSS2) 666

A.3.4 counter-reset (CSS2) 667

A.3.5 quotes (CSS2) 668

A.4 Schriftformatierungen 669

A.4.1 font-family 669

A.4.2 font-style 673

A.4.3 font-variant 674

A.4.4 font-weight 675

A.4.5 font-size 676

A.4.6 font-size-adjust

(CSS, nicht in CSS 2.1, wieder da in CSS3) 677

A.4.7 font-stretch

(CSS2, nicht in CSS 2.1, wieder da in CSS 3) 678

A.4.8 font 679

A.4.9 @font-face

(CSS2, nicht in CSS 2.1, wieder da in CSS3) 680

A.4.10 text-decoration 683

A.4.11 text-shadow

(CSS2, nicht in CSS 2.1, wieder da in CSS3) 685

A.4.12 text-transform 686

A.4.13 text-size-adjust 687A.4.14 letter-spacing 688

A.4.15 word-spacing (CSS2) 689

A.4.16 white-space 690A.4.17 line-height 690A.4.18 text-indent 691

A.4.19 text-align (Änderung in CSS 2.1) 692

A.4.20 text-overflow (CSS3) 693

A.4.21 vertical-align : 694

A.4.22 direction (CSS2) 697

A.4.23 unicode-bidi (CSS2) 697

13

Inhalt

A.5 Farben und Hintergründe 698

A.5.1 color 698A.5.2 background-color 699A.5.3 background-image (Änderung in CSS3) 700A.5.4 background-repeat 700A.5.5 background-attachment 702A.5.6 background-position (Änderung in CSS 2.1) 702A.5.7 background-size 704A.5.8 background 704A.5.9 linear-gradient (CSS3) 706A.5.10 radial-gradient (CSS3) 707A.5.11 repeating-linear-gradient (CSS3) 709A.5.12 repeating-radial-gradient (CSS3) 711

A.6 Kastenformatierungen 713A.6.1 margin 713A.6.2 padding 715A.6.3 border-width 716A.6.4 border-color 717A.6.5 border-style 718A.6.6 border-image (CSS3) 720A.6.7 border-radius (CSS3) 721A.6.8 border 722A.6.9 outline (CSS2) 723A.6.10 width 724A.6.11 height 725A.6.12 overflow (CSS2) 726A.6.13 clip (CSS2, Änderung in CSS 2.1) 727A.6.14 float /. 729A.6.15 clear 731A.6.16 position (CSS2) 733A.6.17 box-sizing (CSS3) 734A.6.18 top(CSS2) 735A.6.19 right (CSS2) 736A.6.20 bottom (CSS2) 737A.6.21 left(CSS2) 737A.6.22 visibility (CSS2) ;. 738A.6.23 opacity (CSS3) 739A.6.24 z-index (CSS2) 740A.6.25 box-shadow (CSS3) 743A.6.26 column-count (CSS3) 744

Inhalt

A.6.27 column-gap (CSS3) 745

A.6.28 column-rule (CSS3) 745

A.7 Listenformatierungen 746

A.7.1 list-style-type 746

A.7.2 list-style-image 748

A.7.3 list-style-position 748

A.7.4 list-style 749

A.8 Anzeigemodus 750

A.8.1 display (CSS1, Erweiterung in CSS2: table,

Änderung in CSS 2.1, Erweiterung in CSS3: icon) 750

A.9 Tabellenformatierungen 752

A.9.1 table-layout (CSS2) 752

A.9.2 caption-side

(CSS2, nicht in CSS 2.1, wieder da in CSS3) 753

A.9.3 border-collapse (CSS2, Änderung in CSS 2.1) 754

A.9.4 border-spacing (CSS2) 755

A.9.5 empty-cells (CSS2) 756

A.9.6 speak-header (CSS2) 757

A.10 Benutzeroberfläche 757

A.10.1 cursor (CSS2) 757

A.10.2 resize (CSS3) 759

A.11 Seitenlayout mit @page 760

A.11.1 size 760

A.11.2 marks 761

A.11.3 :left :right :first 762

A.11.4 page-break-before, page-break-after 763

A.11.5 page-break-inside 764

A.11.6 page 765

A.11.7 orphans, widows 765

A.12 Sprachausgabe 766

A.12.1 speak 766

A.12.2 volume 767

A.12.3 speech-rate , 768

A.12.4 pause 768

A.12.5 cue 769

A.12.6 play-during 770

A.12.7 voice-familiy 771

A.12.8 pitch 771

A.12.9 stress 772

A.12.10 richness 772

Inhalt

A.12.11 azimuth 773A.12.12 elevation 774A.12.13 speak-punctuation 775A.12.14 speak-numeral 775

A.13 Proprietäre CSS-Eigenschaften 776A.13.1 Microsoft 776A.13.2 Firefox 780A.13.3 WebKit 780A.13.4 Opera 782

B Benennungen und Werte für Stylesheets 783B.1 Namen für Stylesheets, Klassen und IDs 783B.2 Längen- und Größenangaben 783

B.2.1 Absolute Einheiten 784B.2.2 Relative Einheiten 784

B.3 Prozentwerte 785B.4 Farben 785

B.4.1 Hexadezimal (#RRGGBB oder #RGB) 785B.4.2 Prozentwerte rgb(rrr.rr%,ggg.gg%,bbb.bb%) 785B.4.3 Dezimalwerte rgb(rrr,ggg,bbb) 785B.4.4 Dezimalwerte mit Alpha-Kanal (CSS3) 786B.4.5 Schlüsselwörter 786

B.5 URLs (url) 786B.6 Schlüsselwörter 787B.7 CSS-Kommentare 787

C HTML5-Elemente 789D DVD zum Buch 793

Index 795

16