Auf dieser Seite finden Sie die Beispieldateien aus »Das große Little Boxes-Buch« zum Download (als ZIP). Außerdem gibt es noch das Box-Modell zum Ausdrucken (als PDF bzw. JPG) und die Übersichtsgrafik zur Kaskade (als JPG).

Beispieldateien für »Das große Little Boxes-Buch«

Downloaden, entpacken und loslegen. Im ZIP-Archiv ist eine Textdatei mit kurzen Anmerkungen. 

Die letzte Änderung an den Beispieldateien erfolgte am 02.04.2012 (Changelog).

Bisher wurde das ZIP-Archiv 2646 Mal heruntergeladen.

Am besten holen Sie sich auch gleich die Liste mit den bisher im Buch gefundenen Fehlern:

Das PDF "Updates und Errata" enthält einige Fehlerteufelchen, die auf den 800 Seiten gesichtet wurden. So zum Beispiel ein unvollständiges ToDo auf Seite 292. Die komplette Liste gibt es auch online. 

Falls Sie das Buch noch gar nicht kennen, interessieren Sie vielleicht die Leseproben.

Die unten abgebildete schematische Darstellung des Boxmodells wird in Kapitel 8 ab Seite 171 erklärt (Abbildung 8.1). Sie können sich hier eine farbige Version im A4-Querformat downloaden, ausdrucken und zum Auswendig lernen auf den Schreibtisch legen oder an die Wand hängen:

Das Boxmodell für Inline-Elemente unterscheidet sich leicht von der Variante für Blockelemente. Es wird in Kapitel 8 angedeutet und in Kapitel 23 detailliert erklärt (Abbildung 23.2 auf Seite 458).

Inline-Elemente (und Blockelelemente, die per display:inline dargestellt werden) kennen also keinen oberen und unteren Außenabstand. Die Breite (width) wird nur durch den Inhalt des HTML-Elementes bestimmt, die Höhe (height) durch den berechneten Wert für die Schriftgröße (font-size). Der wiederum sollte in einem lesetechnisch günstigen Verhältnis zu line-height stehen. 

In Kapitel 13 »Kaskade, Vererbung und Standardwert« geht es darum, wie der Browser das korrekte CSS zur Darstellung eines HTML-Elementes findet. 

Nachdem er aus dem Quelltext einen Dokumentenstammbaum erstellt hat, muss er für jedes zu gestaltende Element für jede CSS-Eigenschaft einen eindeutigen Wert finden. Sollte er in den Stylesheets für eine bestimmte CSS-Eigenschaft genau einen Wert finden, nimmt er ihn. Klare Sache. Wenn es hingegen keinen oder mehrere Werte gibt, helfen dem Browser drei Konzepte bei seiner Entscheidung: Kaskade, Vererbung und Standardwert.

Diese drei Konzepte werden in der folgenden Grafik vorgestellt (Abbildung 13.3 auf Seite 269). 

Im großen Little Boxes-Buch vom Juni 2011 ist Abbildung 24.16 auf Seite 490 erstens nur schwarz-weiß und zweitens eher unleserlich. Wer will, kann sich die Grafik hier in Originalfarben und -größe anschauen.