CSS - Cascading Style Sheets

Inhaltsverzeichnis

Einführung

Was ist CSS und für was braucht man sowas?

CSS ist eine Formatierungssprache, mit welcher man strukturierte Dokumente formatieren kann. Dabei sollte man darauf achten eine strikte Trennung von Stil und Inhalt einzuhalten. Durch diese Trennung wird es einfacher Webseiten zu betreuen und zu veröffentlichen.

Die Geschichte des CSS

Das CSS Konzept wurde 1994 erstmalig von Håkon Wium Lie vorgeschlagen. Zu diesem Zeitpunkt arbeitete Bert Bos an einem Browser Namens Argo, welcher ein eigenes Style Sheet Konzept verwirklichen sollte. Letztenendes entschieden sich beide dazu einen einheitlichen Standard mit dem Namen CSS (Cascading Style Sheets) umzusetzen. Das Ziel beider war es Formatierungsregeln über mehrere Hypertext Dokumente hinweg zu vererben. Nach der ersten Präsentation 1994 wurde das World Wide Web Consortium (W3C) auf die Arbeit der beiden Entwickler aufmerksam bot ihnen an den Standard fur das W3C mit weiteren Entwicklern (u.a. von Microsoft) auszubauen.

Meilensteine

Pro und Kontra

Pro:

Kontra:

Allgemeiner Aufbau

Wie ist ein CSS aufgebaut?

Der CSS Quellcode muss Entweder explizit im HTML File oder als separates Dokument mit der Endung .css in plain text vereinbart werden. Um die Formatierung von HTML Selektoren anzupassen wird einfach das HTML Element genannt und danach die Formatierung durchgeführt.

  Syntax:
  Selektor {
      Eigenschaft 1: Wert 1;
      Eigenschaft 2: Wert 2;
  }
  
  Beispiel:
  /* Alle Zeichenketten des BODYs würden mit der folgenden Formatierung
     in blauer Farbe auf grauem Hintergrund dargestellt werden. */
  body {
      background-color: grey;
      color: blue;
  }

Weiterhin können Klassen mit Eigenschaften definiert werden, welche auf viele und verschiedene HTML Selektoren angewandt werden können.

  Syntax:
  .Klasse {
      Eigenschaft 1: Wert 1;
      Eigenschaft 2: Wert 2;
  }
  
  Beispiel:
  .blue {
      color: blue;
  }

Um diese Klasse auf HTML Selektoren anzuwenden, vergibt man dem entsprechenden Element die Klassenbezeichnung.

  <p class="blue">Diesere Text ist blau</p>

Weiterhin besteht die Möglichkeit, das Element direkt im HTML-tag zu formatieren. Von dieser Methode ist jedoch abzuraten, da so der Style für jedes Element einzeln definiert werden müsste. Allenfalls bei individuellen Anpassungen von bereits definierten Klassen sollte man davon Gebrauch machen.

  <p style="color: blue;">Diesere Text ist blau</p>

Eine Anpassung eines bereits definierten Styles könnte folgendermaßen aussehen:

  <p class="blue" style="background-color: grey;">Dieser Text ist blau, auf grauem Hintergrund.</p>

Um eindeutige Bezeichner fur Elemente festzulegen, ist die Verwendung von IDs empfehlenswert.

  Syntax:
  #ID {
      Eigenschaft 1: Wert 1;
      Eigenschaft 2: Wert 2;
  }
  
  Beispiel:
  #sky {
      background-color: grey;
  }
  
  <p id="sky" class="blue">Der Himmel ist blau-grau.</p>

IDs sollten jedoch, wie der Name schon sagt, nur einmal auf ein HTML Element im ganzen Dokument angewandt werden.

HTML Einbettung

Wie wird ein Style Sheet in HTML Dokumente eingebunden?

Dies kann auch wieder auf zweierlei Weise geschehen. Zum Einen kann der CSS Code direkt im HEAD stehen.

  <head>
      <style type="text/css">
      /* hier der CSS Inhalt /*
      </style>
  ...

Zum Anderen kann CSS in einer separaten Datei mit der Endung .css stehen. Diese kann dan im HEAD des HTML Dokuments wie folgt eingebunden werden:

  <head>
      <link rel="stylesheet" href="style.css" type="text/css" />
  ...

Um dem Endnutzer der Seite eine Auswahl verschiedener Styles, die er dann im Kontext Menü seines Browsers auswählen kann, anzubieten existiert die Möglichkeit alternative Styles im HEAD des Dokuments zu definieren.

  <head>
      <link rel="stylesheet" href="style.css" type="text/css" title="Standard Style" />
      <link rel="alternative stylesheet" href="style2.css" type="text/css" title="Alternativer Style" />
  ...

Wie funktioniert die Vererbung?

CSS bietet die Möglichkeit Eigenschaften von Selektoren zu vererben. Nehmen wir zum Beispiel folgenden HTML Absatz her:

  <p>Dieser Satz ist in Verdana geschrieben.</p>

Um der Aussage des Satzes gerecht zu werden ist die folgende Formatierung in CSS notwendig:

  p {
      font-family: Verdana;
  }

Nun möchte man aber beispielsweise den Text an bestimmten Stellen des Dokuments in blau darstellen, jedoch bei der Schriftart Verdana bleiben. Dafür ist die folgende Ergänzung des CSS nötig:

  p {
      font-family: Verdana;
  }
  
  p.blau {
      color: blue;
  }

Im HTML Dokument ist dann nur noch folgende Ergänzung an gewünschter Stelle notwendig:

    <p class="blau">Dieser Satz ist in Verdana mit der Textfarbe blau geschrieben.</p>

Natürlich bietet CSS auch die Option der Mehrfachvererbung. Die Anwendung davon soll folgendes Beispiel veranschaulichen:

  p {
      font-family: Verdana;
  }
  
  p.blau {
      color: blue;
  }
  
  p.unterstrichen {
      text-decoration: underline;
  }

Um nun den blauen Verdana Text wie im obigen Beispiel noch zu unterstreichen ist folgende Ergänzung der CLASS vorzunehmen:

  <p class="blau unterstrichen">Blauer unterstrichener Text in Verdana.</p>

Die Verschachtelung von CSS Elementen

In CSS hat man die möglichkeit verschachtelte Elemente ganz gezielt anzusprechen, ohne z.B. unverschachtelte Elemente zu beeinfussen. Das folgende Beispiel soll dessen Anwendung verdeutlichen:

  table thead td {
      font-family: Verdana;
      color: blue;
      text-decoration: underline;
  }

Damit würden alle Spalten im Tabellenkopf einer Tabelle in Verdana, blau und unterstrichen dargestellt. Die Spalten im Tabellenkörper oder Tabellenfuß sind von der Formatierung nicht betroffen. Diese werden im default Format dargestellt.

  <table>
      <thead>
          <tr>
              <td>Tabellenkopf (Verdana, blau, unterstrichen)</td>
          </tr>
      </thead>
      <tfoot>
          <tr>
              <td>Tabellenfuß (default)</td>
          </tr>
      </tfoot>
      <tbody>
          <tr>
              <td>Tabellenkörper (default)</td>
          </tr>
      </tbody>
  </table>

Browserkonformität

CSS wird von den verschiedenen Browsern unterschiedlich (gut) unterstutzt. Die Unterschiede in der Anzeige der eigentlich nach einer Norm formatierten Seite resultiert aus der Nichteinhaltung der W3C Standards. Teilweise werden sogar eigene Funktionalitäten durch den Browser gegeben, die jedoch nicht vom W3C abgesegnet wurden. Dadurch sind des Öfteren mehrere CSS Files für ein Design notwendig. Die Unterscheidung und dementsprechende Anwendungen browserspezifischer Styles auf das Dokument machen so genannte CSS-Hacks möglich. Die folgende Tabelle zeigt die wichtigsten Eigenschaften, die für verschiedenste HTML Selektoren vergeben werden können und deren Unterstützung durch die am häufigsten verwendeten Browser.

Level Formatierung Netscape 4 Opera 8 Internet Explorer 6 Firefox 1.0.4
Textformatierungen
1 font-family + + + +
1 font-style +* + + +
1 font-variant - + + +
1 font-size + + + +
1 font-weight + + + +
1 word-spacing - + + +
1 letter-spacing - + + +
1 text-decoration + + +* +
1 text-transformation + + + +
1 color + + + +
2 font-stretch + + + +
Abstände und Ausrichtungen
1 margin-top + + + +
1 margin-bottom + + + +
1 margin-left + + + +
1 margin-right + + + +
1 padding-top + + + +
1 padding-bottom + + + +
1 padding-left + + + +
1 padding-right + + + +
1 text-indent + + + +
1 line-heigth + + + +
1 vertical-align + + + +
1 text-align + + + +
2 white-space +* + + +
Rahmen
1 border-top-width + + + +
1 border-bottom-width + + + +
1 border-left-width + + + +
1 border-right-width + + + +
1 border-width + + + +
1 border-color + + + +
1 border-style +* + + +
Hintergrundfarben und -Bilder
1 background-color + + + +
1 background-image + + + +
1 background-repeat + + + +
1 background-attachment - + + +
1 background-position - + + +
Listen
1 list-style-type + + + +
1 list-style-position - + + +
1 list-style-image - + + +
Tabellen
2 caption-side - +* - +
2 table-layout - + + +
2 border-collapse - + +* +
2 border-spacing - + + +
2 empty-cells - +* +* +
Pseudoformate
1 a:link + + + +
1 a:visited + + + +
1 a:active - + + +
1 a:hover - + + +
1 a:focus - + + +
2 :first-line - + + +
2 :first-letter - + + +
2 :first-child - + - +
2 :before - +* - +
2 :after - +* - +
Positionierung
2 position + + +* +
2 top + + + +
2 left + + + +
2 bottom - + + +
2 right - + + +
2 width + + + +
2 min-width - + - +
2 max-width - + - +
2 height - + + +
2 min-height - + - +
2 max-height - + - +
2 overflow - + +* +
2 direction - + + +
2 float + + + +
2 clear + + + +
2 z-index + - + +
2 display + + + +
2 visibility - + + +
2 clip + +* +* +*
Seitenumbrüche
2 page-break-before - + + +
2 page-break-after - + + +

* fehlerhaft oder unvollständig

Da diese Untersuchungen (ausschließlich Netscape 4) alle auf ein und dem selben Rechner durchgeführt wurden sind diese Angaben jedoch ohne Gewähr

CSS Level 1

Textformatierungen

font-family

Gibt die Schriftart(en), welche verwendet werden (können) an.

  Syntax:
  font-family: serif;      /* Serifenschrift */
  font-family: sans-serif; /* serifenlose Schrift */
  font-family: cursive;    /* Schreibschrift (Script) */
  font-family: fantasy;    /* exotische Schrift */
  font-family: monospace;  /* alle Zeichen mit gleicher Breite */

  Beispiel.
  font-family: Verdana, Tahoma, Sans-Serif;

font-style

Gibt den Schriftstil (hier die Neigung der Schrift) vor.

  font-style: italic;  /* kursive Schrift */
  font-style: oblique; /* schräge Schrift */
  font-style: normal;  /* normale Schrift */

font-variant

Alternativer Schriftstil in Großbuchstaben.

  font-variant: small-caps; /* Schrift als Kapitälchen */
  font-variant: normal;     /* normale Schrift */

font-size

Gibt die Schriftgröße an.

  font-size: xx-small; /* winzig */
  font-size: x-small;  /* sehr klein */
  font-size: small;    /* klein */
  font-size: medium;   /* mittel */
  font-size: large;    /* groß */
  font-size: x-large;  /* sehr groß */
  font-size: xx-large; /* riesig */
  font-size: smaller;  /* kleiner als normal */
  font-size: larger;   /* größer als normal */
  font-size: 10pt;     /* Schriftgröße 10 Punkte */

font-weight

Gibt das Gewicht der Schrift an.

  font-weight: bold;    /* fett */
  font-weight: bolder;  /* extra fett */
  font-weight: lighter; /* dünner */

word-spacing

Gibt den Wortabstand vor.

  word-spacing: 10pt; /* Wortabstand von 10 Punkten */

letter-spacing

Gibt den Buchstabenabstand vor.

  letter-spacing: 3pt; /* Buchstabenabstand 3 Punkte */

text-decoration

Zusätzliche Textformatierung.

  text-decoration: underline;    /* unterstrichen */
  text-decoration: overline;     /* überstrichen */
  text-decoration: none;         /* ohne Attribut */
  text-decoration: line-through; /* durchgestrichen */
  text-decoration: blink;        /* blinkend */

text-transformation

Gibt an ob und welche Texttransformation durchgeführt werden soll.

  text-transformation: uppercase;  /* nur Großbuchstaben */
  text-transformation: lowercase;  /* nur Kleinbuchstaben */
  text-transformation: capitalize; /* große Anfangsbuchstaben */
  text-transformation: none;       /* normale Schrift */

color

Gibt die Textfarbe an.

  color: black;   /* schwarzer Text */
  color: #ff0000; /* roter Text */

Abstände und Ausrichtungen

margin

Gibt die Aussenabstände an und umfasst margin-top, margin-right, margin-bottom, margin-left. Diese Angaben können natürlich auch separat definiert werden.

  margin: 1px 2px 3px 4px; /* 1px oben, 2px rechts, 3px unten, 4px links */

padding

Gibt die Innenabstände an und umfasst padding-top, padding-right, padding-bottom, padding-left. Diese Angaben können natürlich auch wieder separat definiert werden.

  padding: 1px 2px 3px 4px; /* 1px oben, 2px rechts, 3px unten, 4px links */

text-ident

Gibt die Texteinrückung vor.

  text-ident: 5px; /* der Text wird um 5px eingerückt */

line-height

Gibt die Zeilenhöhe vor.

  line-height: 12pt; /* Zeilenhöhe von 12pt */

vertical-align

Gibt die verikale Textausrichtung an.

  vertical-align: top;    /* oben */
  vertical-align: middle; /* mittig */
  vertical-align: bottom; /* unten */

text-align

Gibt die horizontale Textausrichtung an.

  tetx-align: left;    /* links */
  tetx-align: center;  /* zentriert */
  tetx-align: right;   /* rechts */
  tetx-align: justify; /* Blocksatz */

Rahmen

border-width

Kann wieder unterteilt werden in border-top-width, border-right-width, border-bottom-width, border-left-width. Gibt die Rahmenstärke an.

  border-width: 3px;    /* 3px stark */
  border-width: thin;   /* dünn */
  border-width: medium; /* mittelstark */
  border-width: thick;  /* dick */

border-color

Kann auch unterteilt werden in border-top-color, border-right-color, border-bottom-color, border-left-color. Gibt die Rahmenfarbe an.

  border-color: grey;    /* grauer Rahmen */
  border-color: #ff0000; /* roter Rahmen */

border-style

Kann genau so unterteilt werden in border-top-style, border-right-style, border-bottom-style, border-left-style. Gibt den Rahmenstil an.

  border-style: none;          /* kein Rahmen */
  border-style: hidden;        /* unsichtbarer Rahmen */
  border-style: dotted double; /* oben, unten gepunktet; rechts, links doppelt */
  border-style: dashed;        /* gestrichelt */
  border-style: solid;         /* durchgezogen */
  border-style: groove;        /* Rillen-3D-Effekt */
  border-style: ridge;         /* Hügel-3D-Effekt */
  border-style: inset;         /* Reliev-3D-Effekt */
  border-style: outset;        /* invertierter Reliev-3D-Effekt*/

Hintergrundfarben und -Bilder

background-color

Gibt die Hintergrundfarbe an.

  background-color: grey;    /* grauer Hintergrund */
  background-color: #ff0000; /* roter Hintergrund */

background-image

Legt ein Hintergrundbild fest.

  background-image: url('picture.jpg'); /* picture.jpg als Hintregrund */

background-repeat

Legt fest, ob sich das Hintergrundbild wiederholen soll oder nicht.

  background-repeat: repeat;    /* wiederholen (Voreinstellung) */
  background-repeat: repeat-x;  /* waagerecht wiederholen */
  background-repeat: repeat-y;  /* senkrecht wiederholen */
  background-repeat: no-repeat; /* nicht wiederholen */

background-attachment

Legt fest, ob das Hintegrundbild mitscrollen soll.

  background-attachment: scroll; /* mitscrollen (Voreinstellung) */
  background-attachment: fixed;  /* Hintergrundbild bleibt stehen */

background-position

Falls sich das Hintergrundbild nicht wiederholen soll, kann man hiermit die Anzeigeposition angeben.

  background-position: top;    /* vertikal obenbündig */
  background-position: center; /* horizontal zentriert */
  background-position: middle; /* vertikal mittig */
  background-position: bottom; /* vertikal untenbündig */
  background-position: left;   /* horizontal linksbündig */
  background-position: right;  /* horizontal rechtsbündig */

Listen

list-style-type

Gibt die Art der Nummerierungen, bzw. Anstriche vor.

  list-style-type: decimal;     /* für ol-Listen: Nummerierung 1.,2.,3.,... */
  list-style-type: lower-roman; /* für ol-Listen: Nummerierung i.,ii.,iii.,... */
  list-style-type: upper-roman; /* für ol-Listen: Nummerierung I.,II.,III.,... */
  list-style-type: lower-alpha; /* für ol-Listen: Nummerierung a.,b.,c.,... */
  list-style-type: upper-alpha; /* für ol-Listen: Nummerierung A.,B.,C.,... */
  list-style-type: lower-latin; /* für ol-Listen: Nummerierung a.,b.,c.,... */
  list-style-type: upper-latin; /* für ol-Listen: Nummerierung A.,B.,C.,... */
  list-style-type: disc;        /* für ul-Listen: Karo als Bulletzeichen */
  list-style-type: circle;      /* für ul-Listen: rundes Bulletzeichen */
  list-style-type: square;      /* für ul-Listen: rechteckiges Bulletzeichen */
  list-style-type: none;        /* kein Bulletzeichen, keine Nummerierung */

list-style-position

Gibt eine Listeneinrückung vor.

  list-style-position: inside;  /* eingerückt */
  list-style-position: outside; /* ausgerückt (Voreinstellung) */

list-style-image

Setzt ein eigenes Bild als Bulletgrafik ein.

  list-style-image:  url('bullet.jpg'); /* bullet.jpg als Bulletgrafik */

Pseudoformate

Pseudoformate definieren das Verhalten von HTML Elementen. Sie können entweder bei bestimmten Events oder generell immer ausgelöst werden. Man verwendet sie einfach, indem man das gewünschte Pseudoformat an das zu beschreibende HTML Element anhängt.

  a:hover {
   text-decoration: underline; /* bei überfahren mit der Maus wir der Text unterstrichen */
  }

Pseudoformate für Verweise.

Diese Pseudoformate definieren das Verhalten von Links.

  :link;    /* für Verweise zu noch nicht besuchten Seiten */
  :visited; /* für Verweise zu bereits besuchten Seiten */
  :active;  /* für gerade angeklickte Verweise */
  :hover;   /* für Verweise, während der Anwender mit der Maus darüber fährt */
  :focus;   /* für Verweise, die den Fokus erhalten */

CSS Level 2

Textformatierungen

font-stretch

Gibt die Schriftlaufweite an.

  font-stretch: wider;           /* weiter als normal */
  font-stretch: narrower;        /* enger als normal */
  font-stretch: condensed;       /* gedrängt */
  font-stretch: semi-condensed;  /* halb gedrängt */
  font-stretch: extra-condensed; /* stark gedrängt */
  font-stretch: ultra-condensed; /* extrastark gedrängt */
  font-stretch: expanded;        /* geweitet */
  font-stretch: semi-expanded;   /* halb geweitet */
  font-stretch: extra-expanded;  /* stark geweitet */
  font-stretch: ultra-expanded;  /* extrastark geweitet */
  font-stretch: normal;          /* normale Laufweite */

Abstände und Ausrichtungen

white-space

Gibt an, wie und ob automatisch die Zeile umgebrochen werden soll.

  white-space: normal; /* automatischer Zeilenumbruch */
  white-space: pre;    /* Zeilenumbruch wie im Editor eingegeben */
  white-space: nowrap; /* kein automatischer Zeilenumbruch */

Tabellen

caption-side

Gibt die Position der Tabellenüberschrift an.

  caption-side: top;    /* oberhalb der Tabelle */
  caption-side: bottom; /* unterhalb der Tabelle */
  caption-side: left;   /* links neben der Tabelle */
  caption-side: right;  /* rechts neben der Tabelle */

table-layout

Gibt an, ob die Tabelle fixe oder variable Breiten besitzt.

  table-layout: fixed; /* Breitenangaben haben Vorrang vor dem Zelleninhalt */
  table-layout: auto;  /* Zelleninhalt hat Vorrang vor Breitenangaben (Voreinstellung) */

border-collapse

Gibt an, ob die Zellrahmen zusammenfallen sollen oder nicht.

  border-collapse: separate; /* fallen nicht zusammen */
  border-collapse: collapse; /* fallen zusammen */

border-spacing

Gibt dei Rahmenabstände an.

  border-spacing: 3px; /* 3px Abstand der Rahmenlinien voneinader */

empty-cells

Gibt an, ob leere Zellen angezeigt werden sollen oder nicht.

  empty-cells: show;     /* leere Zellen werden angezeigt */
  empty-cells: collapse; /* leere Zellen werden nicht angezeigt */

Pseudoformate

:first-line, :first-letter, :first-child

Definiert das Verhalten von Textabsätzen. Anwendung siehe Pseudoformate CSS 1.

  :first-line;   /* die erste Textzeile des Elements erhält die CSS-Eigenschaften */
  :first-letter; /* der erste Buchstabe des Textes erhält die CSS-Eigenschaften */
  :first-child;  /* das erste Kindelement des Elements erhält die CSS-Eigenschaften */

:before, :after

Gibt an, ob etwas vor oder nach dem Tag platziert werden soll.

  :before; /* Inhalt, der vor dem Tag eingefügt werden soll */
  :after;  /* Inhalt, der nach dem Tag eingefügt werden soll */

Positionierung

position

Legt die Positionierungsart von Elementen fest.

  position: absolute; /* absolute Positionierung, gemessen am Rand des Elternelements, scrollt mit */
  position: fixed;    /* absolute Positionierung, gemessen am Rand des Elternelements, bleibt stehen */
  position: relative; /* relative Positionierung, gemessen an der Normalposition des Elements selbst */
  position: static;   /* keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung) */

top, left, bottom, right

Legt die Startposition von oben, links, unten, rechts fest.

  top:    10px; /* 10px von oben */
  left:   5px;  /* 5px von unten */
  bottom: 20px; /* 20px von unten */
  right:  5px;  /* 5px von rechts */

width, min-width, max-width

Legt die Breite, Mindestbreite und Maximalbreite fest.

  width:     300px;
  min-width: 200px;
  max-width: 400px;

height, min-height, max-height

Legt die Höhe, Mindesthöhe und Maximalhöhe fest.

  height:     300px;
  min-height: 200px;
  max-height: 400px;

overflow

Legt fest, ob übergroße Elemente abgeschnitten werden sollen.

  overflow: visible; /* Element wird so weit ausgedehnt,
                        dass sein Inhalt auf jeden Fall komplett sichtbar ist */
  overflow: hidden;  /* Element wird abgeschnitten, wenn es die Grenzen überschreitet */
  overflow: scroll;  /* Element wird abgeschnitten, wenn es die Grenzen überschreitet.
                        Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie in einem
                        eingebetteten Framefenster */
  overflow: auto;    /* Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt
                        wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein */

direction

Gibt die Textrichtung vor.

  direction: ltr; /* von links nach rechts */
  direction: rtl; /* von rechts nach links */

float

Legt den Textumfluss fest.

  float: left;  /* Element steht links und wird rechts davon von nachfolgenden Elementen umflossen */
  float: right; /* Element steht rechts und wird links davon von nachfolgenden Elementen umflossen */
  float: none;  /* Kein Umfluss (Normaleinstellung) */

clear

Gibt an, wo der umfließende Text fortgesetzt werden soll.

  clear: left;  /* Erzwingt bei float: left die Fortsetzung unterhalb */
  clear: right; /* Erzwingt bei float: right die Fortsetzung unterhalb */
  clear: both;  /* Erzwingt in jedem Fall die Fortsetzung unterhalb */
  clear: none;  /* Erzwingt keine Fortsetzung unterhalb (Normaleinstellung) */

z-index

Gibt vor, ob das Element be (teilweiser) Verdeckung sichtbar bleibt. Je höher der Indexwert, um so höher die Gewichtung bzw. Wichtigkeit der Sichtbarkeit des Elements.

  z-index: 0;
  z-index: 1;
  z-index: 2;
  ...

display

Legt die Anzeigeart von Elementen fest (ohne Platzhalter).

  display: block;              /* Erzwingt einen Block - das Element erzeugt eine neue Zeile */
  display: inline;             /* Erzwingt die Anzeige im Text - das Element
                                  wird im laufenden Textfluss angezeigt */
  display: list-item;          /* wie block, jedoch mit einem Aufzählungszeichen (Bullet) davor */
  display: marker;             /* deklariert Seite automatisch generierten Text für das Element */
  display: run-in und compact; /* bewirken, dass das Element kontext-abhängig als Blockelement oder
                                  als Inline-Element dargestellt wird */
  display: none;               /* Element wird nicht angezeigt und es wird auch
                                  kein Platzhalter freigelassen */

visibility

Legt die Anzeigeart von Elementen fest (mit Platzhalter).

  visibility: hidden;  /* Der Inhalt des Element wird zunächst versteckt (nicht angezeigt) */
  visibility: visible; /* Der Inhalt des Element wird zunächst angezeigt (Normaleinstellung) */

clip

Grenzt den Anzeigebereich ein.

  clip: rect(0px 100px 50px 10px); /* Nur ein Rechteck mit dem genannten Abstand nach oben, rechts,
                                      unten, links des Elements wird angezeigt (Ausschnitt) */

Seitenumbrüche

page-break-before, page-break-after

Es können Seitenumbrüche vor oder nach Elementen unterbunden oder erzwungen werden.

  always;  /* immer einen Seitenumbruch vor dem aktuellen Element einfügen */
  avoid;   /* nie einen Seitenumbruch vor dem aktuellen Element einfügen */
  left;    /* bei nach oben linken/rechten Seiten Seitenumbruch einfügen,
              aktuelles Element auf nächste linke Seite */
  right;   /* bei nach oben linken/rechten Seiten Seitenumbruch einfügen,
              aktuelles Element auf nächste rechte Seite */
  inherit; /* Angabe zum Seitenumbruch vom Elternelement übernehmen (erben) */
  auto;    /* keine Angabe zum Seitenumbruch (Normaleinstellung) */

CSS Level 3

Da CSS 3 noch nicht als Recommendation vom W3C verabschiedet wurde, möchte ich an dieser Stelle lediglich einen kleinen überblick über die kommenden Features geben.

Module

CSS Level 2 war noch in Kapitel gegliedert, CSS Level 3 hingegen weist eine strenge Unterteilung in Module auf. Jedes Modul deckt einen Teil des kommenden Standards ab (z.B. Introduction, Selectors, Paged Media, ...). Viele der Module sind voneinander Abhängig. Die meisten dieser Module können in anderen Technologien (z.B. SVG) verwendet werden. Somit werden leicht erstellbare Geräteprofile möglich (z.B. Paged Media fur PDAs). Einzelne Module können separat "up to date" gebracht werden ohne den ganzen Standard neu zu entwerfen.

Spaltenlayout

Erstmalig wird ein mehrspaltiges Layout ohne wuchtige Tabellen möglich. Das wird durch das Modul "Multi-column layout" ermöglicht. Somit fällt der Code schlanker aus, und lässt sich einfacher überblicken. Der daraus resultierende Code wird nunmehr flexibler, da man Spalten beispielsweise an den vorhandenen Platz anpassen kann. Des weiteren kann man Text automatisch von einer Spalte in die nächste fließen lassen, was z.B. die Erstellung von zeitungsähnlichen Dokumenten erleichtert. Selbst ganze HTML Elemente können über mehrere Spalten hinweg angelegt werden.

Slektoren

CSS 2.1 unterscheidet mittlerweile über 45 Selektoren (diejenigen Elemente, die für die Formatierung ausgewählt werden können). In CSS 3 wird es möglich sein Elemente gezielter auszuwählen. So z.B. das n-te Kind eines Elternelements. Weiter wird man Elemente nach Inhalt ansprechen können (z.B. alle Absätze mit dem Wort "Layout"). Neu sind auch Selektoren, die auf Useraktionen eingehen (z.B. Formatierung angewählter Checkboxen).

User Interface

Im neuen Standard wird die Interaktion mit dem User zur Realität. Selbst Systemumgebung und Browser können angesprochen werden. So z.B. kann ein spezielles Design auf Vollbild dargestellt werden. Es wird dem Entwickler auch die Möglichkeit geboten auf Aktionen des Users zu reagieren (beispielsweise das Öffnen eines Menüs bei einer bestimmten Aktion war vorher nur mit JavaScript möglich). Eingabefelder besitzen nun spezielle Lese- und Schreibrechte. Das "look and feel" wird für jeden Nutzer anpassbar sein (z.B. Dropdown Menü als Radiobuttons). Weiterhin wird man mittels Tastatur-Shortcuts spezielle Elemente des Dokuments aktivieren können. Auch die Reihenfolge, in der der User mit der Tabulator Taste Elemente durchspringt wird man im CSS Script festlegen können. Weiterhin werden zu den bereits existierenden ebenfalls neue Systemfarben, Cursors und Listenicons angeboten.

Paged Media

Die Seitenbasierten Ausgaben (z.B. für den Druck) wurden ausgebaut. Nun ist es Möglich Fortlaufende Seitenzahlen, Gesamtseitenzahl und Fußnoten anzeigen zu lassen. Alle Seiten sind automatisch in Kapitel einteilbar. Interne Verweise können mittels Kapitelnummer angelegt werden ohne die Seitenzahlen zählen zu müssen. Dazu steht ein Seiten-Counter und die Funktion content() zur Verfügung. Die URL der Seite, sowie das Datum der letzten Änderung kann somit automatisch ausgegeben werden.

Color und Ruby

Man wird nun auch ICC-Farbmodelle verwenden und einbinden können. Die neue Eigenschaft "opacity" mit der man auch Grad der Transparenz von Objekten festlegen kann wurden ebenfalls neu hinzugefügt. "Ruby" trägt der zunehmenden Internationalisierung Rechnung, z.B. durch Unterstützung arabischer Schriftarten.

Fazit

Viele Module werden erneut eine Erleichterung für den Entwickler bieten. Man nähert sich mehr und mehr den Fähigkeiten von DSSSL (für SGML). Ob CSS 3 jedoch als attraktive Alternative zu XSL (für XML) gelten kann bleibt abzuwarten. Fest steht auf jeden Fall, dass die Einsatzmöglichkeit von CSS auf neuen Geräten durch die neue Struktur gegeben sein wird. Durch Updates der einzelnen Module wird der breiten Masse eine ständig aktuelle Version dargeboten. Die Verwendung mit SVG (Scalable Vector Graphics) zusammen könnte z.B. verschiedenste Darstellungen ein und desselben Bildes möglich machen. Schade nur, dass bisher noch nahezu keine Unterstützung Seitens der Browser gegeben ist. Der im Sommer erscheinende Firefox Version 1.1 soll allerdings schon CSS3 (zumindest rudimentär) unterstützen.

CSS Validator

Um seinen CSS Code auf Korrektheit überprüfen zu können hat das W3C einen CSS Validator online. Falls das Dokument CSS konform ist, kann man seiner Seite ein Icon hinzufügen, um zu zeigen, dass die Seite normgerecht erstellt wurde (siehe Fußzeile von diesem Dokument).

Interessante Links

CSS Validator des W3C

Cascading Style Sheets Homepage des W3C

CSS Testsuites

Quellenangabe

Wikipedia

World Wide Web Consortium

SELFHTML

Guppi - Das Webdesign Magazin

Copyright © 2005 by Daniel Schröder

Valid XHTML 1.0! Valid CSS!