CSS/Syntax

Aus SELFHTML-Wiki
< CSS
Wechseln zu: Navigation, Suche

Dieser Artikel dient als Einstieg in den allgemeinen Aufbau von Cascading Style Sheets (kurz: CSS). Im Artikel Warum Layouts mit CSS? werden die Vorteile von zentralen Formatierungen mit Stylesheets erklärt.

Als Stylesheet wird eine Datei oder der style-Abschnitt innerhalb eines Dokuments bezeichnet, der aus CSS-Regelsätzen besteht. Bei Stylesheets gibt es übrigens keine Entsprechung zum HTML-Doctype mit einer Versionsangabe. Man kann also nicht ausdrücklich festlegen, dass sich bestimmte Regelsätze beispielsweise auf Version CSS3 beziehen. Der Browser muss ihm unbekannte Eigenschaften und Werte einfach ignorieren.

Inhaltsverzeichnis

[Bearbeiten] Regelsätze

In CSS sind Eigenschaften innerhalb von Regelsätzen organisiert. Ein Regelsatz besteht aus:

  • Einem Selektor oder einer Gruppe von Selektoren, gefolgt von
  • einem durch geschweifte Klammern begrenzten Bereich, in dem Eigenschaften ein Wert zugewiesen wird.
Beispiel: (Pseudo-Code)
Selektor { Eigenschaft1: Wert; Eigenschaft2: Wert; } Selektor Eins, Selektor Zwei { Eigenschaft: Wert; }
Hier zwei Beispiele für einen Regelsatz. Der erste Regelsatz besteht aus einem Selektor, dem zwei Eigenschaften zugewiesen werden. Der zweite Regelsatz besteht aus zwei voneinander unabhängigen Selektoren, denen dieselbe Eigenschaft zugewiesen wird. Eine Formatierung, die für mehrere Elemente eines Dokuments gelten soll, muss daher nur einmal definiert werden.

Ein Stylesheet kann schon durch das Vorhandensein einer einzigen Regel entstehen.

Selektoren werden im Abschnitt CSS/Selektoren ausführlich behandelt.

[Bearbeiten] Kommentare

Um die Übersicht zu behalten oder bestimmte Regelsätze zu erläutern, ist es möglich, innerhalb von Stylesheets Kommentare zu verfassen, die vom Browser bei der Anzeige des Dokuments ignoriert werden. Ein Kommentar beginnt mit den Zeichen /* und endet mit dem ersten Auftreten der Zeichen */. Das bedeutet, dass Kommentare nicht ineinander verschachtelt werden können.

Beispiel
/* Dies ist ein Kommentar. Er besitzt keine Auswirkungen. */ /* Verschachtelte /* Kommentare sind */ nicht möglich */
Kommentare dürfen sich über mehrere Zeilen erstrecken. Jedoch ist es nicht möglich, Kommentare zu verschachteln.
Beachten Sie: Die aus vielen Programmiersprachen bekannten einzeiligen Kommentare gibt es in CSS nicht.

[Bearbeiten] Eigenschaften und Werte (Deklaration)

Bereits im Abschnitt „Regelsätze“ haben Sie das allgemeine Aussehen einer Deklaration (also einer Eigenschaft-Wert-Zuordnung) gesehen: Dem Namen der Eigenschaft folgt ein Doppelpunkt, dem wiederum der Wert folgt, der der Eigenschaft zugewiesen wird.

Es gibt Eigenschaften, denen kann nicht nur ein Wert, sondern mehrere Werte zugewiesen werden. In diesen Fällen werden die einzelnen Werte durch ein Leerzeichen voneinander getrennt.

Beispiel: (Pseudo-Code)
Selektor { Eigenschaft: Wert 1.4; }
Dieses Beispiel zeigt eine Eigenschaft, der zwei Werte zugewiesen werden. Einmal ein Schlüsselwort („Wert“) und eine Zahl („1.4“).

[Bearbeiten] „shorthand“-Eigenschaften

Werden einer Eigenschaft mehrere Werte zugewiesen, handelt es sich üblicherweise um eine so genannte „shorthand“-Eigenschaft. Dabei handelt es sich um Eigenschaften, die mehrere andere Eigenschaften zusammenfassen.

Beispiel: (Pseudo-Code)
Überschrift { Schrift-Größe: 200%; Schrift-Stil: kursiv; } Selektor { Schrift: 200% kursiv; }
Bei der Eigenschaft „Schrift“ handelt es sich um eine „shorthand“-Eigenschaft, die die detailierteren Eigenschaften „Schrift-Größe“ und „Schrift-Stil“ kombiniert.

Durch die Angabe einer „shorthand“-Eigenschaft wie z.B.

background: red;

setzen Sie aber nicht nur die Hintergrundfarbe, sondern implizit auch weitere Eigenschaften:

.btn {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: red;
}

Besonders bei Verläufen können solche Festlegungen dann zu plötzlich auftretendem, unerwünschten Verhalten führen. [1]

Empfehlung: Setzen Sie CSS-Festlegungen so sparsam wie möglich.
Legen Sie im Zweifelsfall lieber Einzeleigenschaften anstelle der „shorthand“-Eigenschaften fest.

[Bearbeiten] Mehrfaches Vorkommen einer Eigenschaft

Wenn eine Eigenschaft mehrfach definiert wird, so gilt nur der zuletzt zugewiesene gültige Wert.

Beispiel
h1 { 
  color: red; 
  color: green;
}
Dieses Beispiel zeigt, dass der Eigenschaft „color“ nacheinander zwei verschiedene Werte zugewiesen werden. Der Wert „green“ überschreibt den Wert „red“, der zuerst festgelegt wurde.

[Bearbeiten] Unbekannte Eigenschaften und Werte

Werden in einer Regel Eigenschaften aufgeführt, die das verarbeitendene Programm nicht kennt, so wird diese Eigenschaft ignoriert. Das gilt auch, wenn einer bekannten Eigenschaft ein unbekannter Wert zugewiesen wird. Als unbekannt kann auch eine Eigenschaft oder ein Wert bezeichnet werden, der Fehler enthält.

Beispiel
h1 { 
  color: red; 
  color: verygreen; 
  color: gren; 
}
In diesem Beispiel wird für ein Element die Schriftfarbe rot definiert. Die nachfolgenden Wertzuweisungen werden ignoriert, denn „verygreen“ ist keine in CSS definierte Farbangabe und auch der Wert „gren“ (statt „green“) wird nicht akzeptiert.
Beachten Sie: Auch wenn eine Eigenschaft bzw. ein Wert durch ein CSS-Modul definiert wurde, kann es vorkommen, dass ein Browser damit nicht umgehen kann, also Eigenschaft oder Wert noch nicht kennt.

[Bearbeiten] Herstellerspezifische Eigenschaften

Der Sprachumfang von CSS wächst ständig weiter. CSS erlaubt es, Momentaufnahmen einer Idee oder eines zukünftigen Standards zu implementieren. Damit diese jedoch keine Probleme verursachen, wenn ein Entwurf geändert oder verworfen wird, sind die Hersteller dazu angehalten, Eigenschaften und Werte als herstellerspezifisch zu kennzeichnen.

Dies geschieht ganz einfach durch den Präfix „-Herstellerkürzel-“. Oftmals unterscheidet sich die Geschwindigkeit, in der ein Standard verabschiedet wird, von der Geschwindigkeit, in der Browserhersteller Funktionen implementieren. In der Praxis hat sich die Vorgehensweise bewährt, sowohl herstellerspezifische Eigenschaften als auch die standardisierte Form der Eigenschaft (in dieser Reihenfolge) zu notieren.

Beispiel
main {
 -moz-border-radius: 1em; /* Für Gecko (z.B. Firefox, SeaMonkey) */
 border-radius: 1em; /* Eigenschaft gemäß Standard */
}
In diesem Beispiel wird eine Eigenschaft mehrfach definiert. Zuerst spezifisch für Gecko-Browser, anschließend in der standardisierten Form. Dadurch soll sichergestellt werden, dass eine Eigenschaft auch dann erhalten bleibt, wenn ein Hersteller seine Implementierung gemäß Standard aktualisiert.
Beachten Sie: Das im Beispiel verwendete -moz-border-radius ist nicht mehr notwendig.

[Bearbeiten] Formatierung

Die grundsätzliche Formatierung ist bei CSS weitgehend frei, man kann also zwischen den einzelnen Bestandteilen Selektor, geschweiften Klammern, Eigenschaften, Doppelpunkt, Werten und Semikola beliebig Leerzeichen, Tabulatorzeichen und Zeilenumbrüche einfügen, z.B. um das Stylesheet übersichtlicher zu gestalten. So sind die zwei folgenden – inhaltlich identischen – Definitionen beide erlaubt:

Beispiel
h1{font-size:2.5em;text-align:center;}
Beispiel
h1 {
  font-size:   2.5em;
  text-align: center;
}

Allerdings darf man die genannten Bestandteile nicht auseinanderreißen, z.B. ist Folgendes nicht erlaubt:

Beachten Sie: Der nachfolgende Code ist fehlerhaft.
Beispiel: (fehlerhafter Code)
h1 { text-
     align: center; }
Die Eigenschaft text-align darf nicht getrennt werden.
Beachten Sie: Der nachfolgende Code ist fehlerhaft.
Beispiel: (fehlerhafter Code)
h1 { font-size: 2.5 em; }
Die Einheit (em) darf nicht von ihrer Maßzahl (2.5) getrennt werden.

Die korrekten Angaben lauten:

Beispiel
h1 { text-align: center; }
h1 { font-size: 2.5em; }

Andererseits ist folgende Deklaration syntaktisch korrekt, weil es sich bei der Eigenschaft border um eine sogenannte zusammenfassende Eigenschaft handelt und die Angaben 1px und solid für die gewünschte Rahmenstärke und den Stil des Rahmens stehen.

Beispiel
h1 { border: 1px solid; }
Beachten Sie: Leerzeichen (oder allgemein Whitespace-Zeichen) innerhalb eines Selektors haben semantische Bedeutung, sie entsprechen dem Kombinator Nachfahrenselektor.

[Bearbeiten] Groß- und Kleinschreibung

CSS selbst unterscheidet nicht darin, ob die einzelnen Sprachbestandteile groß- oder kleingeschrieben werden. Es gibt jedoch Einschränkungen von außerhalb, beispielsweise wenn Regeln anderer Sprachen berücksichtigt werden, auf die CSS keinen Einfluss besitzt. Davon betroffen sein können:

  • Namen von Dateien und Schriftarten (auch innerhalb von Internetadressen).
  • ID- und Klassenbezeichner (id- bzw. class-Attribut) in HTML.
  • Selektoren, die Element- und Attributnamen bzw. -werte in XML ansprechen („Element“ ist ein anderer Name als „element“).
Beispiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Groß- und Kleinschreibung in Stylesheets</title>
    <style type="text/css">
      H1 { color: green; }
      h1 { TEXT-DECORATION: UNDERLINE; }
    </style>
  </head>  
  <body>
    <h1>Groß- und Kleinschreibung in Stylesheets</h1>
    <p>Obige Überschrift wird unterstrichen und in grüner Farbe dargestellt.</p>
  </body>
</html>
Dieses Beispiel zeigt wie unterschiedlich ein Stylesheet verarbeitet werden kann: In HTML werden beide Regeln auf das Überschriftenelement angewendet. In XHTML wird nur die zweite Regel angewendet, da es sich bei H1 und h1 nach den Regeln von XML um zwei verschiedene Elemente handelt. (Allerdings werden auch XHTML-Dokumente üblicherweise vom HTML-Parser verarbeitet und unterliegen damit nicht den strengen XML-Syntax-Regeln. Siehe Unterschiede zwischen HTML und XHTML.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Groß- und Kleinschreibung in Stylesheets</title>
    <style>
      H1 { color: green; }
      h1 { TEXT-DECORATION: UNDERLINE; }
    </style>
  </head>
  <body>
    <h1>Groß- und Kleinschreibung in Stylesheets</h1>
    <p>Obige Überschrift wird unterstrichen, aber nicht
    in grüner Farbe dargestellt.</p>
  </body>
</html>

[Bearbeiten] siehe auch


[Bearbeiten] Quellen

  1. csswizardry.com: CSS Shorthand Syntax Considered an Anti-Pattern


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML