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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…