Das ist das Inhaltsverzeichnis des Buches CSS. Internet Intern. Die Autoren sind Jan Heinicke und Vladimir Simovic. Das Buch hat 571 Seiten (24 x 16,5cm), es handelt sich um eine gebundene Ausgabe und es ist im Oktober 2006 bei Data Becker erschienen. Die ISBN-Nr. ist 3815825989.

Einleitung

1. Der Einstieg in CSS

  1. Die Grundlagen von (X)HTML
    • Anatomie eines (X)HTML-Elements
    • Der Unterschied zwischen XHTML und HTML
  2. Was ist CSS, was kann CSS
  3. Was benötigt man
    • Weaverslave installieren und anpassen
    • Verschiedene Browser
    • Exkurs: Geckos und andere Browser
  4. Wie schreibt man CSS und bringt es mit (X)HTML zusammen
    • Welche Selektoren gibt es
    • CSS Einbinden
  5. Kaskade
    • Exkurs: Benutzer-Stylesheets
    • Vererbung
    • Spezifität
  6. Maßeinheiten und Wertangaben
    • Prozentangaben
    • Relative Längenangaben
    • Absolute Längenangaben
    • Schlüsselwörter
    • Farbwerte
    • Erben: inherit
    • Sonstige Werteangaben

2. Grundlagen für das Arbeiten mit CSS

  1. Das Grundgerüst: Die XHTML-Datei richtig aufbauen
    • Die einzelnen Bereiche des Grundgerüstes
    • Exkurs: XHTML vs. HTML und UTF vs. ISO
  2. Inhalt auszeichnen und das Dokument strukturieren
    • Die Elemente gruppieren: div und span
    • Den Inhalt auszeichnen
  3. Unterschiede zwischen Tabellen- und CSS-Layout
  4. Mögliche Probleme beim Arbeiten mit CSS
  5. Gestaltung der Schrift und des Textes
    • Schriftname und Schriftfamilie: font-family
    • Exkurs: Kleine Schriftkunde und Schriften im Web
    • Schriftgröße: font-size
    • Exkurs: die richtige Schriftgröße oder auf der Suche nach dem heiligen Gral
    • Schriftstil: font-style
    • Schriftgewicht: font-weight
    • Kapitälchen: font-variant
    • Kurzform: font
    • Horizontale Ausrichtung: text-align
    • Textdekoration: text-decoration
    • Texteinrückung: text-indent
    • Text-Umwandlung: text-transform
    • Schriftfarbe (Vordergrundfarbe): color
    • Exkurs: Farben und Farbwerte
    • Schreibrichtung: direction
    • Zeichenabstand: letter-spacing
    • Zeilenhöhe: line-height
    • Vertikale Ausrichtung: vertical-align
    • Textumbruch: white-space
    • Wortabstand: word-spacing
  6. Hintergrundfarbe und Hintergrundgrafik
    • Hintergrundfarbe: background-color
    • Hintergrundbild: background-image
    • Hintergrundbild wiederholen: background-repeat
    • Hintergrundbild fixieren: background-attachment
    • Hintergrundbild positionieren: background-position
    • Kurzform: background
  7. Elemente ausrichten, positionieren und anzeigen
    • Angaben zum Rahmen
    • Innerer Abstand: padding
    • Äußerer Abstand: margin
    • Breite eines Elementes: width
    • Höhe eines Elementes: height
    • Boxmodell & Co
    • Minimale und maximale Höhe und Breite: min-height, min-width, max-height, max-width
    • Positionierung: position
    • Überlappungs-Reihenfolge: z-index
    • Floating (Umfließen): float
    • Umfließen beenden: clear
    • Ausufernder Inhalt: overflow
    • Sichtbar oder unsichtbar: visibility
    • Anzeigeart: display
  8. Erstellen eines einfachen Layouts mit der Eigenschaft position
    • Mögliche Variationen
  9. Erstellen eines einfachen Layouts mit der Eigenschaft float
    • Mögliche Variationen

3. Spezielle Herangehensweisen zur Seiteneinteilung

  1. "CSS-Frames" – Elemente mit Scrollbalken
    • Grundlegende Funktionsweise
    • Darstellen eines Blockelementes mit Scrollbalken
    • Scrollbare Bildergalerie
    • Textabsätze waagerecht scrollen
    • Scrollbare Listen
    • Mit der Eigenschaft overflow Darstellungsfehlern vorbeugen
  2. Horizontales Zentrieren von Blockelementen
    • Elemente ohne definierte Breite mit der Eigenschaft margin horizontal zentrieren
    • Elemente ohne definierte Breite mit der Eigenschaft padding horizontal zentrieren
    • Elemente mit definierter Breite horizontal zentrieren
  3. Vertikales Zentrieren von Blockelementen
    • Vertikales zentrieren mit padding und margin
    • Vertikales zentrieren mit der Eigenschaft position
  4. Fensterfüllendes Layout
    • Fensterfüllendes Layout mit skalierbarer Kopf- und Fußzeile
    • Fensterfüllendes Layout mit festen Höhen für Kopf- und Fußzeile
  5. Fixieren von Elementen und Seitenbereichen
    • Die Funktionsweise von position: fixed
    • Elemente auch im Internet Explorer fixieren

4. Mit Rahmen, Linien, Farben und Grafiken das Layout aufwerten

  1. Mehrspatiges Layout mit Hilfe von Hintergrundgrafiken
    • Zweispaltiges Layout mit Spalten die das Fenster in der Vertikalen ausfüllen
    • Dreispaltiges Layout mit verschiedenfarbigen Spalten die das Fenster in der Vertikalen ausfüllen
  2. Runde Ecken
  3. Fixierte Hintergrundbilder
  4. Transparenzeffekte mit Hilfe fixierter Hintergrundgrafiken
  5. Mikroskopeffekt mit fixierten Hintergrundgrafiken
  6. Effekte mit transparenten Gif-Grafiken
    • Strukturierte Rahmenkante
    • Ecken mit transparenten Grafiken
    • Schlagschatten mit transparenten Gif-Grafiken

5. Gestaltung von Navigationselementen

  1. Grundlegendes zum Aufbau von Navigationen
  2. Formatierung von Verweisen im Allgemeinen
  3. Diverse einfache Effekte an Textlinks
  4. Buttons mit Hilfe von border und background
  5. Buttons mit Hintergrundgrafiken
    • Die Verzögerung bei dem hover-Effekt vermeiden

6. Variationen von Navigationsmenüs

  1. a-Elemente im Dokumentenfluss
    • Senkrecht angeordnetes Menü
    • Waagerecht angeordnetes Menu
  2. Menü als Liste
    • Senkrecht angeordnete Menüliste
    • Waagerecht angeordnete Menüliste
  3. Menüelemente in Tabellen
  4. Menüelemente mit Popup-Info
    • Zusatzinfo innerhalb des Menübuttons
    • Zusatzinfo außerhalb des Menübuttons
    • Darstellung des Menüs mit Zusatzinformationen ohne CSS
  5. Aufklappbare Menüs
    • Senkrecht angeordnete Menus mit aufklappbaren Unterpunkten
    • Waagerecht angeordnete Menus mit aufklappbaren Unterpunkten
    • Darstellung im Internet Explorer und anderen älteren Browsern
  6. Navigationsmenü im Stil von Karteireitern
    • Karteireiter ohne Grafikelemente
    • Karteireiter mit Grafikelementen
  7. Gestalten von Breadcrumbnavigationen (Brotkrümelnavigation)
    • Aufbau des HTML Codes
    • Formatierung der Breadcrumbnavigation

7. Weitergehende Gestaltung des Inhaltes im Grundlayout

  1. Überschriften
  2. Grafiken
  3. Tabellen
  4. Listen
  5. Textabsätze und Zitatblöcke
  6. Spalten innerhalb des Grundlayouts
  7. Links bzw. Verweise gestalten
  8. Die Pseudoklasse :hover für nicht a-Elemente
  9. code-Beispiele gestalten

8. Gestaltung von Formularen

  1. Einfache Formatierung von Formularelementen
  2. Formatieren eines kompletten Formulars
    • Gestalten eines Kontaktformulars
    • Gestalten eines Newsletterformulars

9. Komplettes Layout in CSS

  1. Erstellen eine kompletten CSS Layouts
    • Beispiel 1, einfache Konstruktion mit großflächigen Grafikelementen
    • Beispiel 2, dreispaltige Webseite mit kleinen Grafikelementen
  2. Vom Tabellenlayout zum CSS-Layout
    • Einleitung
    • Neuaufbau des HTML-Codes
    • Erste Ausrichtung der Elemente
    • Abstände, Farben, Grafiken
    • Drei Spalten innerhalb einer Spalte
    • Zusammenfassung

10. CSS für verschiedene Ausgabemedien

  1. CSS für die Druckausgabe
    • Dokumentweite Angaben
    • Unnötige Bereiche ausblenden
    • Linkadressen anzeigen
    • Weitere Angaben
    • Beispiel eine kompletten CSS-Datei für die Druckerausgabe
    • Mit (X)HTML und CSS ein Buchprojekt realisieren
  2. CSS für Handhelds bzw. mobile Geräte

Einsatz von alternativen Stylesheets und Styleswitchern

  1. Alternativer Stylesheets erstellen und einbinden
  2. Styleswitcher
    • Formate mit Hilfe von Javascript ändern
    • Formate mit Hilfe von PHP ändern

12. Abschließende Tipps

  1. Unnötige div/span-Elemente und class-/id-Attribute vermeiden
  2. Den Code von CSS- und XHTML-Dateien übersichtlich organisieren
  3. CSS-Regeln zusammenfassen und in Kurzform aufschreiben
    • Die Schreibregeln für die Kurzformen
    • Beispiele
  4. Bestimmte Browser von CSS aussperren bzw. gezielt ansprechen (CSS-Browserweiche)
    • Verschiedene Arten um CSS einzubinden
    • Aussperren der Browser durch CSS-Hacks
    • Conditional Comments
  5. Tools und Helferlein
  6. Ausblick auf den Internet Explorer 7
  7. Häufig auftretende Bugs und deren Lösungen
    • Boxmodell-Bug
    • Doppelter margin-Wert
    • Die drei Pixel Lücke
  8. Weiterführende Quellen und Links
    • CSS-Links
    • Browserspezifische Links
    • Editoren

Gängige Hacks und Filter als Übersicht

Eigenschaften-Referenz