Jetzt lerne ich CSS

Übersicht

Inhaltsverzeichnis

1 Einführung in CSS

1.1 Warum Stylesheets notwendig wurden

1.2 Das W3-Konsortium (W3C)

1.3 CSS-Versionen

1.4 Browser-Unterstützung

1.4.1 Internet Explorer

1.4.2 Netscape/Mozilla/Firefox

1.4.3 Opera

1.4.4 Konqueror/Safari

1.4.5 Browser-Marktanteile

1.5 Ein Beispiel

1.6 Vorteile von CSS

1.6.1 Trennung von Inhalt und Layout

1.6.2 Einfacher in der Wartung, leichter zu aktualisieren

1.6.3 Einheitliches Layout

1.6.4 Schluss mit Layouttabellen und anderen (faulen) HTML-Tricks

1.6.5 Kleinere Dateigröße = schnellere Downloadzeiten = weniger Traffic = geringere Kosten

1.6.6 Für Suchmaschinen optimiert

1.6.7 Barrierefreiheit (Accessibility)

1.6.8 Verschiedene Layouts für unterschiedliche Ausgabe medien

1.6.9 Kein Alles-oder-nichts-Prinzip

1.6.10 Formatierungen einfacher realisieren

1.6.11 Attraktive Formatierungen über CSS

1.6.12 CSS als Teil von dynamischen Anwendungen

1.7 CSS im Einsatz

1.8 Was Sie in den nächsten Kapiteln erwartet

1.9 Wiederholungsfragen und Übungen

2 CSS – formal

2.1 Aufbau einer CSS-Deklaration

2.2 Einbinden von CSS-Angaben

2.2.1 Innerhalb des (X)HTML-Elements: Inline-Stile

2.2.2 Am Dokumentanfang – eingebettetes Stylesheet

2.2.3 Einbindung externer Stylesheet-Dateien über link

2.2.4 Einbindung externer Stylesheet-Dateien über @import

2.3 Kommentare

2.4 Verschiedene Selektoren

2.4.1 Elementselektoren

2.4.2 Klassenselektoren

2.4.3 ID-Selektoren

2.4.4 Selektoren gruppieren

2.4.5 Universalselektor

2.5 Exkurs: Unterschiede zwischen HTML und XHTML

2.5.1 XML-Deklaration

2.5.2 Dokumenttypangabe

2.5.3 Namensraumangabe

2.5.4 Kleinschreibung für Elemente und Attribute

2.5.5 Kein Tag ohne End-Tag

2.5.6 Leere Elemente

2.5.7 Korrekte Schachtelung

2.5.8 Jedes Attribut muss aus Attributname und Attributwert bestehen

2.5.9 Attributwerte in Anführungszeichen

2.5.10 name- und id-Attribute

2.5.11 Script- und Style-Bereiche

2.5.12 MIME-Typ

2.5.13 Unterstützung bei der Konvertierung

2.5.14 Überprüfen von XHTML-Dokumenten

2.6 Wiederholungsfragen und Übungen

3 Schrift- und Absatzformatierung

3.1 Schriftart

3.2 Längenangaben/Größeneinheiten

3.3 Schriftgröße bestimmen

3.4 Zeilenhöhe

3.5 Farbangaben

3.6 Weitere Zeichenformatierungen

3.7 Weitere Text- und Absatzformatierungen

3.7.1 Absätze einrücken

3.7.2 Absatz- und Textausrichtungen

3.7.3 »Text-Ausschmückungen«

3.7.4 Abstände und andere nützliche Formatierungen

3.8 Wiederholungsfragen und Übungen

4 Vererbung

4.1 Vererbung an untergeordnete Elemente

4.2 Relative Einheiten bei der Vererbung

4.3 Wiederholungsfragen und Übungen

5 Listen und Aufzählungen

5.1 Listen

5.2 Dokumentstruktur

5.3 Formatierung von verschachtelten Listen über Nachfahrenselektoren

5.4 Weitere Selektoren, die auf der Dokumentstruktur basieren

5.5 Nützliche Formatierungen für Listen

5.6 Wiederholungsfragen und Übungen

6 Boxen und Boxmodell

6.1 Grundprinzip des Boxmodells

6.2 Inhaltsbereich

6.2.1 Breite

6.2.2 Höhe

6.3 Außenabstände

6.3.1 margin

6.3.2 Zusammentreffen von Außenabständen

6.3.3 Negative Außenabstände

6.3.4 Standardwerte bei margin

6.4 Rahmen

6.4.1 Rahmenstil

6.4.2 Rahmenfarbe

6.4.3 Rahmenbreite

6.4.4 Kurzschreibweise

6.5 Innenabstände

6.6 Unterschiedliche Interpretationen des Boxmodells

6.7 Wiederholungsfragen und Übungen

7 Hintergründe

7.1 Hintergrundfarben und -bilder

7.2 Positionieren von Hintergrundbildern

7.3 Hintergrundeffekte: Wasserzeichen, Farbver läufe, runde Ecken & Co.

7.4 Wiederholungsfragen und Übungen

8 Links gestalten

8.1 Links gestalten über Pseudoklassen

8.2 Pseudoelemente und weitere Pseudoklassen

8.2.1 Sprachspezifische Formatierungen über :lang()

8.2.2 Erstes Kindelement :first-child

8.3 Verschiedene Links in Projekten untersch iedlich gestalten

8.4 Fortgeschrittene Methoden nicht nur zur Aus wahl bestimmter Links: Attributselektoren

8.5 Weitere Linkformatierungen über zusätzliche Zeichen

8.6 Schritt für Schritt zur Navigationsleiste

8.7 Grafische Rollover ohne JavaScript

8.8 Wiederholungsfragen und Übungen

9 Formulare und Benutzerschnittstellen

9.1 Praktische (X)HTML-Elemente für Formulare

9.2 Formularelemente per CSS gestalten

9.3 Systemschriftarten und -farben, Mauscursor und farbige Scrollleisten

9.4 Wiederholungsfragen und Übungen

10 Tabellen gestalten

10.1 Weniger bekannte (X)HTML-Elemente für Tabellen

10.2 CSS-Eigenschaften für Tabellen

10.3 Spezielle CSS-Formatierungen für Tabellen

10.4 Tabellarische Daten übersichtlich präsentieren

10.5 Bilder in Tabellen

10.6 Wiederholungsfragen und Übungen

11 Elemente über CSS anordnen

11.1 Unterschiedliche Positionierungsarten

11.1.1 Positionierungstyp "static"

11.1.2 Positionierungstyp "absolute"

11.1.3 Positionierungstyp "relative"

11.1.4 Positionierungstyp "fixed"

11.2 Überlappungen

11.3 Floats

11.4 Wiederholungsfragen und Übungen

12 Kaskadierung und Priorität

12.1 Kaskadierung – oder wer setzt sich durch?

12.1.1 Spezifität

12.1.2 Gewichtung (!important)

12.1.3 Herkunft

12.1.4 Vererbung

12.1.5 Reihenfolge

12.2 Wiederholungsfragen und Übungen

13 Dokumenttypangaben

13.1 Aufbau von Dokumenttypangaben

13.2 Standard – Almost Standard – Quirks

13.3 Einige Auswirkungen der verschiedenen Modi

13.4 Wiederholungsfragen und Übungen

14 Browser-Weichen & Tricks

14.1 Browser austricksen: Einführung am Beispiel

14.2 Browser-Hacks und Browser-Weichen

14.2.1 Mit der @import-Direktive ältere Browser ausschließe n

14.2.2 Browser-Weiche über Angabe des Medientyps

14.2.3 Boxmodell- oder Tantek-Hack

14.2.4 Simplified Box Model Hack (vereinfachter Boxmodell Hack)

14.2.5 High Pass Filter

14.2.6 Browser-Weichen über fortschrittliche Selektoren

14.2.7 Sternchen-html-Hack * html

14.2.8 Hacks mit dem Unterstrich (_)

14.2.9 Conditional Comments – verschiedene CSS-Dateien für die unterschiedlichen Internet Explore...

14.2.10 Kommentarbasierte Tricks

14.2.11 Browser-Hacks und der Internet Explorer 7

14.2.12 Zusammenfassung und Übersicht zu den Hacks/Filtern für die verschiedenen Internet Explore...

14.3 Browser-Hacks und allgemeine Strategien

14.4 In Browsern testen

14.4.1 Mehrere Internet Explorer-Versionen parallel installie ren

14.4.2 Screenshot-Dienste

14.5 Wiederholungsfragen und Übungen

15 Layouten per CSS

15.1 Zentrieren von Elementen

15.2 Einspalten-Layout: zentrierte Box mit fester Breite

15.3 Flexible Zweispalten-Layouts

15.4 Zweispaltiges Layout mit fester linker Spalte

15.5 Zentrierter Zweispalter mit Kopfzeile

15.6 Dreispalter mit Kopfzeile

15.7 Anordnung von Formularelementen per CSS

15.8 Fixierte Bereiche mit CSS

15.9 Übung

16 Medienspezifische CSS-Dateien

16.1 Angaben für unterschiedliche Ausgabemedien

16.2 Spezielle CSS-Layouts für den Druck

16.2.1 Andere Darstellung für den Druck

16.2.2 Links für den Druck mit angezeigter URL

16.3 Layout für die Vorführung: Opera statt Power point

16.4 Wiederholungsfragen und Übungen

17 Design mit CSS

17.1 Alles ist relativ

17.2 Praktisches Beispiel

17.2.1 Schritt 1: Die XHTML-Struktur

17.2.2 Schritt 2: Allgemeine Hintergrundbilder

17.2.3 Schritt 3: Zusätzliches Hintergrundbild und die Ver wendung mehrerer Stylesheets

17.2.4 Schritt 4: Der Trick mit dem zusätzlichen »span«

17.2.5 Schritt 5: Navigationsliste

17.2.6 Und jetzt das Ganze noch mal relativ

17.3 Noch ein paar grundsätzliche Tipps

17.3.1 Sollte man völlig auf Tabellen verzichten?

17.3.2 Wie groß sollte man ein Layout anlegen?

17.3.3 Ordnung ist die halbe Arbeit oder die »Div-Suppe«

17.3.4 Über das Gestalten von Webseiten

18 CSS Tipps und Tricks

18.1 Styleswitcher mit PHP

18.2 JavaScript als Ausgleich für fehlerhafte CSS Unterstützung

18.3 Mit CSS XML-Dateien formatieren

18.4 Vom Tabellenlayout zum CSS-Layout

18.4.1 Vorentscheidungen

18.4.2 Grundstruktur erstellen/Aufteilung in Bereiche

18.4.3 Anordnung der Elemente

18.4.4 Ausarbeitung der Details

18.4.5 Stylesheet-Definitionen aufteilen

18.5 CSS und Barrierefreiheit

18.6 Zukunftsmusik

19 Fehlersuche und Validierung

19.1 Der (X)HTML-Validator des W3C

19.2 Validome

19.3 CSS-Validator

19.4 Tipps zum Fehlerfinden

19.5 Mailinglisten/Foren

19.6 Wiederholungsfragen und Übungen

20 Tools

20.1 Aus HTML mach XHTML: Tidy

20.2 DOM-Inspector von Mozilla/Firefox

20.3 EditCSS

20.4 Toolbars für Webentwickler

20.5 SelectOracle: Selektoren richtig verstehen

20.6 CSS-Editoren

20.6.1 TopStyle Pro

20.6.2 Style Master

20.6.3 Style Studio

20.6.4 RapidCSS 2006

20.7 Dreamweaver als CSS-Editor

21 Referenz

21.1 Erläuterung der Referenz

21.2 Die wichtigsten Neuerungen im Internet Explorer 7 auf einen Blick

21.2.1 Selektoren

21.2.2 CSS-Eigenschaften

21.2.3 Sonstiges

21.3 Referenz

21.3.1 Allgemeine CSS-Selektoren

21.3.2 Attributselektoren

21.3.3 Pseudoklassen

21.3.4 Pseudoelemente

21.3.5 CSS-Eigenschaften

21.4 Links zur Browser-Kompatibilität

Anhang

A Antworten auf die Wiederholungsfragen und Lösungen zu den Übungen

B Inhalte der CD

Stichwortverzeichnis

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z