CSS reloaded

Teil 3: [Workshop] CSS: Überladene Websites ade - Objektorientierte Stylesheets

In grids.css sind kleinere Strukturen zuhause, insbesondere Klassen mit denen Sie ein Block-Element in bis zu fünf Spalten unterteilen können. Dazu legen Sie zuerst eine neue Zeile an:

<div class="line">

In div.line packen Sie dann für jede Spalte ein weiteres div. Gemeinsames Merkmal aller Spalten ist die Klasse unit. Die Breite einer Spalte steuern Sie über eine zusätzliche Klasse, deren Name Sie nach dem Muster

sizeXofY

zusammensetzen. X und Y bilden dabei einen Bruch, sodass Sie beispielsweise mit

size1of2

eine Spalte mit einer Breite von 50 Prozent anlegen. Welche Maße verfügbar sind, lesen Sie in der Datei grids_docs.html. Die letzte Spalte kennzeichnen Sie mit der Klasse lastUnit, die dafür sorgt, dass automatisch der gesamte übrige Raum belegt wird.

Unabhängige Formatierungen

Bis hierhin enthält Blocks lediglich den Code, den Sie benötigen, um das Raster einer Seite solide aufzubauen. Ähnlich essenziell ist die content.css, in der die Objekte definiert werden, mit denen Sie Inhalte layouten - Überschriften, Absätze, Listen, Tabellen und so weiter. Der Schwerpunkt liegt dabei auf der Definition von Abständen, Ausrichtungen und Spezialitäten wie der Größe und Farbe von Text, dem list-style-type von Listen und dem Verhalten von Links.Die content.css zeigt zwar einerseits, dass Sullivan den Einsatz verschachtelter Definitionen vermeidet. Aber sie enthält auch die Ausnahmen von der Regel, beispielsweise .data table und .important a. Um diese Sonderfälle abzudecken, muss man die zweite Regel nur ein wenig erweitern: "Trenne Inhalt und Container. Ausnahmen innerhalb der in der Bibliothek definierten Inhalte und Container sind aber erlaubt."

Objektorientierte Stylesheets

© Archiv

Rund 200 verschiedene Boxen lassen sich schon jetzt aus den von Sullivan entwickelten Grundformen generieren.

Module und Skins

Ein Großteil der Blocks-Magie steckt in den Dateien mod.css und mod_skins.css. Deren Funktion erschließt sich am besten, wenn Sie die Datei module.html mit den Entwickler-Tools Ihres Browsers inspizieren, also zum Beispiel mit Firefox und Firebug. Sullivan definiert zunächst einen Container in HTML:

<div class="mod"><b class="top"><b class="tl"></b><b class="tr"></b></b><div class="inner"><div class="hd"><h3>mod</h3></div><div class="bd"><p>Mod ist der Basis-Container ...</p></div></div><b class="bottom"><b class="bl"></b><b class="br"></b></b></div>

Diesen Code können Sie überall dort einsetzen, wo Sie einen Kasten auf einer Webseite benötigen. Dass das HTML weit über ein <div></div> hinausgeht, hat seinen Grund darin, dass der Container genügend Material bieten muss, das sich per CSS stylen lässt.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".