Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Einfache Anweisungen / erste Formatierungen in CSS

Cascading Style Sheets dienen dazu, das Design eines Dokuments von deren logischer Struktur zu trennen. Einige HTML-Attribute wurden dabei in gleicher oder ähnlicher Form in CSS übernommen (z.B.: font-size, border), viele gänzlich neue kamen hinzu. In diesem Artikel wird gezeigt, wie CSS-Formatierungen korrekt angewandt werden.

Einleitung

Gestern konnte man bereits lesen, welche Möglichkeiten es gibt, Stylesheets in HTML einzubinden, und einzelnen HTML-Elementen eine Formatierung zuzuweisen. In diesem Artikel wird dieses Thema ein wenig ausgeweitet und näher erklärt.

Die wohl einfachste und praktikabelste Möglichkeit, Styleanweisungen in einem Dokument zu verwenden, ist zweifelsohne das Auslagern des Stylesheets mit anschließender Referenzierung auf die ausgelagerte Datei durch:

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

Alle Anweisungen werden so zentral gespeichert und müssen im günstigsten Fall nur noch einmal geändert werden, um seitenübergreifende Umformatierung eines oder auch mehrerer Dokumente zu ermöglichen. Einem HTML-Element CSS-Eigenschaften wie Textformatierungen oder Schriftfarben zuzuweisen ist dabei recht simpel und baut sich immer nach dem gleichen Schema auf.

Zuerst definiert man den sogenannten "Selektor". Dieser kann unterschiedlicher Art sein. So gibt es beispielsweise "Typen-Selektoren" die eine Umformatierung ganzer HTML-Elemente erlauben, "Attributsselektoren", die nur HTML-Elemente mit bestimmten Attributen formatieren, "Klassen-" und "ID-Selektoren" bei denen sich um eine spezielle Art der Attributsselektoren handelt und auf die in späteren Artikeln noch einmal genauer eingegangen wird, und auch umfangreiche Verkettungen und Kombinationen einzelner Selektoren sind möglich.

Der gewählte Selektor wird gefolgt von einer geöffneten Akkolade (geschweifte Klammer). Hier können nun Formatierungen für den bzw. die Selektor(en) vor der Klammer vorgenommen werden. CSS-Formatierungen und Anweisungen setzen sich dabei ebenfalls nach immer gleichem Schema zusammen. Zuerst wählen wir die CSS-Eigenschaft. Diese wird gefolgt vom Eigenschaftswert, welcher durch einen Doppelpunkt von der Eigenschaft getrennt, und mit einem Semikolon (Strichpunkt) beendet wird. Die Kombination aus Eigenschaft und Wert wird auch als "Deklaration" bezeichnet. Beendet werden die Anweisungen für einen Selektor schließlich mit einer geschlossenen Akkolade:

Selektor {
  CSS-Eigenschaft: Wert;
}

Um also zum Beispiel Paragrafen (p) eine rote (#FF0000) Hintergrundfarbe (background-color), und weiße (#FFFFFF) Schrift (color) zuzuweisen, wird folgender Code gebraucht:

p {
  background-color: #FF0000;
  color: #FFFFFF;
}

Hier wird der Aufbau einer solchen Anweisung deutlich. Umbrüche und Leerzeichen spielen dabei keine große Rolle. So könnte man auch schreiben:

p { background-color: #FF0000; color: #FFFFFF; }

oder

p {
  background-color:#FF0000;color:#FFFFFF;
}

Das Ergebnis bleibt das gleiche. Der Ordnung halber sollte man jedoch nur eine Anweisung pro Zeile schreiben. Dies erleichtert eine mögliche Fehlersuche bei komplexen Stylesheets um ein Vielfaches.

In diesem Beispiel kann statt des 6-stelligen hexadezimalen Farbwertes außerdem eine 3-stellige Kurzform geschrieben werden, in der jedes zweite Zeichen ausgelassen wird. Aus dem Beispiel wird hier also:

p {
  background-color: #F00;
  color: #FFF;
}

Dies ist möglich, wenn als Farbwert 3 mal 2 gleiche Zahlen oder Buchstaben verwendet werden (z.B. #FF0000 -> #F00, #336633 -> #363, 0033AA -> #03A).

Ebenfalls gibt es die Möglichkeit, auf eine Reihe vordefinierter Farben zurückzugreifen:

p {
  background-color: red;
  color: white;
}

Mögliche Werte für Eigenschaften

Die Werte, die auf die Eigenschaft folgen, sind abhängig von der jeweiligen Eigenschaft und können Farben (#FF0000, #F00, red, rgb(255,0,0)), Zahleneinheiten (10px, 2em, 5cm, 10%), Bilder (url(beispiel.gif)), Zähler (content: counter(chapter)), Strings (content: "Externer Link") und auch eine große Menge an Schlüsselwörtern (solid, left, uppercase, fixed, bold, italic) enthalten:

p {
  border-width: 1px;      /* Breite des Rahmens */
  border-style: solid;  /* Stil des Rahmens */
  margin-top: 2em;  /* Abstand zum oberen Element */
  font-style: italic;   /* Schriftstil kursiv */

  text-transform: uppercase;  /* Umwandlung des Textes in Großbuchstaben */
  position: fixed;    /* Fixierte Position */
}

um nur einige Beispiele zu nennen.

Verkürzte Schreibweisen bei den Eigenschaften

Nicht nur bei Werten, sondern auch bei einigen Eigenschaften gibt es die Möglichkeit der verkürzten Schreibweise. So ist beispielsweise:

div {
  background: white url(beispiel.gif)
     scroll no-repeat top left;
}

die Kurzform von

div {
  background-color: white;
  background-image: url(beispiel.gif);
  background-attachment: scroll;

  background-repeat: no-repeat;
  background-position: top left;
}

Man spart also, wie man sieht, eine Menge an Schreibarbeit.

Im oberen Beispiel wird festgelegt, dass für alle div-Elemente im Dokument die Hintergrundfarbe weiß sein (background-color), zusätzlich ein Hintergrundbild enthalten soll (background-image), dieses soll bei langen Dokumenten mitgescrollt (background-attachment) und nicht gekachelt werden (background-repeat), und sich zu guter Letzt in der linken oberen Ecke des Elements befinden (background-position).

Doch nicht nur für Hintergrundeigenschaften gibt es die Kurzschreibform, sondern auch für einige andere Eigenschaften (border, font). Erste Schritte dazu finden sich in den weiterführenden Links.

Fazit

Es gibt eine sehr große Anzahl an CSS-Eigenschaften, die hier sicherlich den Rahmen sprengen würde. Kaum jemand wird all diese auswendig kennen, daher ist es gerade als Anfänger ratsam, sich durch Beispiellayouts mit den wichtigsten Eigenschaften vertraut zu machen, und beim Entwickeln stets eine CSS Referenz wie SelfHTML oder CSS4You bereit zu haben.

Weiterführende Links

• Mediaevent: Selektoren
• SelfHTML: CSS-Eigenschaften
• CSS4You: CSS-Eigenschaften A-Z
• Ove A. Klykken: Introduction to CSS shorthand properties
• CSS4You: Workshop Farben