Design

Lexikon: CSS

1. April 2008
von

Von A wie Acid Test bis S wie Span. Wir erläutern Begriffe um CSS herum. Was oft gar nicht einfach ist. Die CSS-Befehle selbst sind an dieser Stelle nicht gemeint.

Acid Test
Zu Deutsch “Säureprobe”. Unter einem Acids Test versteht man eine Kollektion von Webseiten mit deren Hilfe Browser auf ihre Standardkompatibilität getestet werden können. Dazu müssen einige zum Teil recht komplexe Stylesheets interpretiert werden. Unter anderen dieses Gesicht, das keine Grafik sondern pures CSS ist.

Screenshot

Inzwischen gibt es die Acid Tests 1-3.

Block-Element
Wir kennen es bereits aus HTML. Ein Block-Element bildet einen eigenen Block mit Zeilenumbrüchen davor und dahinter. Block-Elemente sind <p>, <div>, <hr>, <blockquote>, <ul>, <li>, <form> und <pre>.

Box-Model(l)
Regelt die Abstände um ein Element herum. Das Box-Modell ist ein Konstrukt, das die Höhe und Breite von Seitenelementen beschreibt und aus der Breite des Elementinhalts (width), des inneren Abstandes (padding), der Rahmenstärke (border-width) und des äußeren Abstandes (margin) besteht.

Screenshot
Das Box-Model in einer Darstellung nach W3C

Container
Ein Container ist ein Behälter der ein oder mehrere Elemente aufnimmt, die dann gemeinsam angesprochen werden können.

CSS
Steht für Englisch “Cascading Style Sheets”. Auf Deutsch etwa “Kaskadierende Fomatvorlage”. CSS ähnelt dem, was man in einer Textverarbeitung Formatvorlage als kennt. Einem Element, zum Beispiel Überschrift, wird ein bestimmtes Aussehen (Größe, Farbe, etc) zugewiesen, das immer dann angewendet wird, wenn diese Überschrift vorkommt. Solche Formatvorlagen können durchaus komplizierte Formen annehmen. Sie regeln auch Positionen und Abstände. Eine Kaskade ist ein Satz von Regeln, die entscheiden, welche CSS-Regel auf ein gegebenes Seitenelement angewandt wird.

DIV
Wohl das wichtigste Block-Element. Die Bezeichnung wurde abgeleitet vom englischen Begriff Division. Auf Deutsch bedeutet es Teil, Teilung oder auch Abteilung.

Faux Columns
Unechte Spalten. Eine Technik um ungewollte Höhenunterschiede zwischen Spalten auszugleichen. Vorgestellt von ALA.

Screenshot

Float
sorgt für die Ausrichtung eines Elements nach links oder rechts, wobei der übrige Seiteninhalt das Element umfliesst – sofern der Platz dafür ausreicht. Das funktioniert im Prinzip wie bei der Benutzung von align=”left” oder align=”right” bei Bildern. Float ist ein zentrales Element für das Layouten mit CSS. Wegen verschiedener Schwächen des Internet Explorers werden auch absolute und relative Positionierungen verwendet.

Hack
Hier ist kein Angriff gemeint sondern eine zusätzliche CSS-Anweisung, die sich an einen bestimmten, zumeist älteren Browser richtet. Auf diese Weise unterdrückt man Darstellungsprobleme. Bekannte Hacks sind Tantek Çeliks Highpassfilter und der Box Model Hack. Siehe auch 10 best CSS hacks

Hover
gemeint ist das Verhalten eines Elements sobald der Mauszeiger darüber schwebt ohne das ein Klick ausgelöst wurde.

ID
IDs dürfen nur einmal auftauchen, gelten aber in der CSS-Hierarchie als gewichtiger. Das heisst, im Notfall, wenn eine Klasse nicht zur Geltung kommen will, hat man mit einer ID bessere Chancen. Sie kann als Sprungziel für Hyperlinks verwendet werden. IDs können mit Javascript angesprochen werden. Das funktioniert über getElementById(). IDs überstimmen Klassen.
Quellcodes können genauer strukturiert werden, als mit den mehrfach vorkommenden Klassen.
Eine ID darf auf einer Seite nur einmal verwendet werden. Auch wenn so mancher Browser das anders sieht. IDs können nicht wie Klassen kombiniert werden. Im Stylesheet erkennt man die IDs an der Raute (#).

Inline CSS
Gemeint sind CSS-Anweisungen die kein Block-Element darstellen und somit keine Zeilenumbrüche davor oder dahinter erzwingen – somit in einer “Linie” oder Zeile vorkommen. Definiert werden sie über <span>, <a>, <label>, <input>, <img>, <strong> und <em>.

Klasse
Einfach ausgedrückt ist eine Klasse (.class) allgemeiner zu handhaben. Sie kann auf einer Seite mehrfach angewendet werden und beliebig oft vorkommen.

Liquid Layout
Gemeint ist ein Layout, das sich der Größe des Browserfensters anpasst (eigentlich Fluid Layout). Spalten und Abstände verbreitern oder verringern sich. Um das zu erreichen werden prozentuale Angaben verwendet. Das Gegenteil ist das so genannte “Fixed” Layout, das für alle Abstände feste Maße vorschreibt. Ein “Elastic Layout” passt auch Schriftgrößen an.

Media Type
Legt fest für welche Ausgabe ein Stylesheet vorgesehen ist. Hier gibt es neben der gewöhnlichen Bildschirmansicht (screen) und der Ausgabe für den Druck (print) noch zahlreiche weitere Möglichkeiten. Nämlich aural braille emboss handheld projection tty und tv.

Pseudoselektoren
Ein Pseudoselektor ist das was vor den geschweiften Klammern steht und etwas anspricht das kein HTML-Element, Tag oder Attribut ist. Zum Beispiel der erste Buchstabe, die erste Zeile oder ein Hyperlink. Es gibt Pseudoelemente und Pseudoklassen. Pseudoelemente werden wie Elemente behandelt. Beispiel :first-line, :first-letter, :before und :after. Pseudoklassen werden wie Klassen behandelt. Beispiel: :link, :lang.

Reset
Auch als Global Reset oder CSS-Reset beschrieben. Darunter versteht man einen Satz von CSS-Anweisungen der die Browserstandardeinstellungen auf Null setzt. Das tut man, um sicher zu gehen, dass Browser keine eigenen Vorgaben verwenden und darstellen. So werden beispielsweise die Abstände margin und padding für diverse Elemente auf null gesetzt:

 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,th,td {
margin:0;
            padding:0; }

Verschiedene Modelle existieren. Bekannte Beispiele sind: Yahoo , Eric Meyer.

Selektor
Ein Selektor ist das was vor den geschweiften Klammern steht und ein HTML-Element, Tag oder Attribut auswählt. Selektieren = Auswählen.

Sliding Doors
Klassisches CSS Reitermenü. Die Sliding Doors (auf Deutsch: Schiebetüren) existieren bereits seit 2003 und wurden bis dato häufig variiert und abgewandelt. Siehe auch: Das perfekte Menü: Teil 3

Screenshot

Span
Spanne. Ein Bereich von … bis. Dient dazu Inline Auszeichnungen vorzunehmen.

Erstveröffentlichung 01.04.2008

Sven ist der Erfinder des Dr. Web Magazins, Autor und Herausgeber diverser Fachbücher. Als Webdesigner und Texter früher freiberuflich für verschiedene Unternehmen und Verlage tätig. Jetzt Vorstand und Mitgründer der Smashing Media AG.

Ein Kommentar zu „Lexikon: CSS
  1. Michael Gerstmann am 20. Oktober 2010 um 20:19

    Als einfachen Reset nutze ich immer den universalselector: *{margin:0; padding:0;} … für mich der kürzeste und einfachste weg, ohne ein aufgeplustertes Reset Stylesheet zu nutzen.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!