Vorlage:Infobox Dateiformat/Wartung/MagischeZahl fehltVorlage:Infobox Dateiformat/Wartung/Website fehlt

Cascading Style Sheets
Vorlage:Infobox Dateiformat/Wartung/Screenshot Format
Dateiendung:	.css
MIME-Type:	text/css
Entwickelt von:	World Wide Web Consortium
Art:	Stylesheet-Sprache
Standard(s):	Level 1 (Recommendation) Level 2 (Recommendation) Level 2 Revision 1 (Candidate Recommendation)

Cascading Style Sheets (Abk.: CSS, [kæsˌkeɪdɪŋˈstaɪlʃiːts]) ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente. Sie wird vor allem zusammen mit HTML und XML (zum Beispiel bei SVG) eingesetzt. CSS legt dabei fest, wie ein besonders ausgezeichneter Inhalt oder Bereich dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als derselben Klasse angehörend erkannt werden können. Man zeichnet im HTML-Dokument also nur die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird. Mit anderen Worten, man trennt den Inhalt von der optischen Gestaltung.

Mit CSS ist es möglich, für verschiedene Ausgabemedien (Bildschirm, Papier, Projektion, Sprache) eine unterschiedliche Darstellung anzugeben. Das ist nützlich, um zum Beispiel Hyperlinks beim Drucken extra aufzuführen oder für Geräte mit geringerer Auflösung (zum Beispiel PDA oder Mobiltelefon) die Anzeige zu optimieren (geringere Seitenbreite und -höhe).

Neben diversen Angaben zu Farben und Schriften bietet CSS die Möglichkeit, Elemente frei zu positionieren oder Hintergrundbilder festzulegen.

CSS gilt heutzutage als die Standard-Stylesheetsprache für Webseiten.

[Bearbeiten] Geschichte und Versionen

Der erste Vorschlag für Web-Stylesheets kam 1993 auf, mehrere weitere folgten bis 1995. Cascading Style Sheets (CSS), wie sie aktuell bekannt sind, wurden 1994 von Håkon Wium Lie vorgeschlagen. Bert Bos arbeitete zu dieser Zeit an der Implementation eines Browsers namens Argo, der seine eigene Stylesheet-Sprache benutzte. Die beiden entschieden sich, zusammenzuarbeiten und CSS zu entwickeln.

Es gab zu dieser Zeit auch andere Sprachen mit dem gleichen Ziel, CSS brachte aber als erste die Idee auf, Regeln zu definieren, die über mehrere Stylesheets hinweg vererbt werden konnten.

Nach der Präsentation von CSS durch Lie an der Konferenz „Mosaic and the Web“ in Chicago 1994, und später mit Bos 1995 wurde das World Wide Web Consortium (W3C) auf CSS aufmerksam. Lie und Bos arbeiteten mit anderen Mitgliedern in diesem Rahmen an CSS weiter. Im Dezember 1996 wurde dann die CSS Level 1 Recommendation publiziert. Diese wird in aktuellen Browsern mittlerweile nahezu vollständig umgesetzt.

CSS Level 2 (CSS2) wurde im Mai 1998 veröffentlicht. Bis heute (Stand Januar 2010) wird diese Empfehlung noch nicht hinreichend von allen verbreiteten Browsern implementiert. Manche Browser setzen den größten Teil von CSS2 korrekt um, andere hingegen bieten nur eine mangelhafte Unterstützung von wenigen Teiltechniken. Bei der praktischen Anwendung im Web ergeben sich daher oft Schwierigkeiten.

Seit 2002 arbeitet das W3C an einer Zwischenversion CSS Level 2 Revision 1 (CSS 2.1)^[1], die die Erfahrungen mit CSS2 berücksichtigt, Unstimmigkeiten korrigiert und diejenigen Teiltechniken streicht, die bisher in verschiedenen Browsern nicht korrekt implementiert wurden. CSS 2.1 bringt selbst keine grundlegend neuen Fähigkeiten mit sich.

Seit 2000 ist CSS Level 3 in der Entwicklung^[2]. Hier werden die Entwicklungen weiter vorangetrieben, die bereits bei CSS2 gestartet wurden. CSS3 wird im Gegensatz zu den Vorgängern modular aufgebaut sein, das heißt einzelne Teiltechniken (beispielsweise zur Steuerung der Sprachausgabe) haben ihren eigenen Entwicklungsrhythmus und Versionsschritte. So nähert sich CSS bei seinen Fähigkeiten mehr dem etablierten DSSSL (für SGML) an und stellt wohl auch in Zukunft noch eine attraktive Alternative zu XML-basierten Stylesheet-Sprachen wie XSL-FO dar.

[Bearbeiten] Syntax

[Bearbeiten] Definition des Syntaxschemas

Eine CSS-Regel hat folgendes Aussehen:

   Selektor [, Selektor2, …]
      {
         Eigenschaft-A: Wert-A;
         Eigenschaft-B: Wert-B
      }
   /* Kommentar */

Ein Stylesheet darf beliebig viele solcher Regeln enthalten. Die folgende Tabelle gibt die wichtigsten Selektoren wieder, mit denen Elemente (meist HTML-Tags) ausgewählt werden können. Eine vollständige Übersicht aller Selektoren findet sich für CSS2^[3] wie auch für CSS3^[4] auf w3.org.

Mögliche Auswahlkriterien sind direkte Merkmale der Elemente (Typ, Klasse, ID, Attributwerte), aber auch strukturelle Eigenschaften (Existenz eines bestimmten übergeordneten Elementes oder eines Vorgängerelementes). Die Auswahlkriterien lassen sich miteinander kombinieren.

[Bearbeiten] Beispiel

CSS:

p.note {
  position: relative;
  left: 15%;
  width: 80%;
  padding: 30px;
  padding-bottom: 45px;
  border: 1px solid black;
  line-height: 1.5em;
  color: black;
  font-weight: bold;
  text-align: justify;
  background-color: #eeeeee;
}

HTML:

<p class="note">
  Dies ist ein kleiner Testabsatz. Dies ist ein kleiner Testabsatz...
</p>

Das p-Tag macht den dazwischen stehenden Text zu einem Absatz. Da ihm die Klasse „note“ zugewiesen wird, wird er von einem CSS-kompatiblen Browser wie folgt dargestellt:

Hier wird der Deklarationsbereich allen p-Elementen zugewiesen, die das class-Attribut mit dem Wert note besitzen. Würde man das p im Selektor weglassen, würden alle Elemente der Klasse note betroffen sein, beim Weglassen des .note alle p-Elemente.

Ein wichtiges Prinzip von CSS ist die Vererbung der Eigenschaftswerte an untergeordnete Elemente und die Kombination verschiedener Stylesheets (Kaskadeneffekt). Diese können dabei aus verschiedenen Quellen stammen: vom Autor des Stylesheets, dem Browser (User Agent) oder dem Benutzer.

[Bearbeiten] CSS-Hacks

Eine Anwendung von CSS-Syntax bei der Gestaltung von Weblayouts sind sogenannte CSS-Hacks. Sie werden benutzt, um Unterschiede bei der Darstellung von Weblayouts in verschiedenen Browsern auszugleichen oder CSS-Anweisungen für bestimmte Webbrowser gesondert zuzuweisen oder auszuschließen. Der Begriff "Hack" bezeichnet dabei nicht standardisierte CSS-Befehle, mit denen die Interpretationsschwäche eines Webbrowsers ausgenutzt wird, der diese Anweisungen entweder interpretiert oder ignoriert. Damit können Schwachstellen von Webbrowsern ausgeglichen werden, um möglichst in jedem Webbrowser das gleiche Ergebnis angezeigt zu bekommen.

Ein CSS-Hack kombiniert z. B. fehlerhaft angegebene Selektoren in Kombination mit zusätzlichen Zeichen oder enthält Anweisungen, die bestimmte Webbrowser nicht kennen. Ein bekanntes Beispiel für ein CSS-Hack ist der sogenannte Star-HTML-Hack. Das "*"-Zeichen, dient als Universal-Selektor und ist vor dem Selektor "html" geschrieben, somit eigentlich sinnlos und wird von allen Webbrowsern deswegen ignoriert. Nur der Internet Explorer 6 interpretiert fälschlicherweise diese CSS-Anweisung. Auf diese Weise kann man dem Internet Explorer 6 Anweisungen geben, die von anderen Webbrowsern ignoriert werden. CSS Code-Beispiel:

* html div {
   width : 20em;
}

[Bearbeiten] Kombination mit HTML bzw. XHTML

Am häufigsten wird CSS mit HTML oder XHTML kombiniert. Dies kann an mehreren Orten geschehen, hier einige Beispiele:

• Als externes Stylesheet für eine (X)HTML-Datei (link-Element)

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

• Als externes Stylesheet für eine XHTML-Datei (xml-stylesheet-Verarbeitungsanweisung)

   <?xml-stylesheet type="text/css" href="beispiel.css" ?>

• Als internes Stylesheet in einer (X)HTML-Datei (style-Element)

   <head>
      <title>Dokument mit Formatierungen</title>
      <style type="text/css">
             body { color: purple; background-color: #d8da3d }
      </style>
   </head>

• Innerhalb von (X)HTML-Tags (style-Attribut)

   <span style="font-size: small;">Text</span>

Die Einbindung als externes Stylesheet ist dabei die am häufigsten verwendete Methode. Sie bietet den Vorteil, dass für mehrere Dokumente, die denselben Regelsatz benutzen, das Stylesheet nur einmal heruntergeladen werden muss. Auch vermeidet man so sich wiederholenden Code. CSS selbst ermöglicht durch die @import-Regel das Einbinden von weiteren externen Stylesheets.

   <head>
      <title>Beispiel</title>
      <style type="text/css">
             @import url(url_des_stylesheets);
      </style>
   </head>

Es gibt auch alternative Stylesheets. Die erste oben genannte Variante ist eine davon. Es gibt noch zwei weitere, aber der Vollständigkeit halber werden jetzt noch einmal alle drei beschrieben.

• Dauerhafte Stylesheets (persistent)

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

Wenn man ein Stylesheet mit diesem Befehl einbindet, wird es auf jeden Fall verwendet.

• Standard Stylesheets (preferred)

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

Sollte man diese Einbindung verwenden, wird das Stylesheet verwendet, solange der Benutzer kein anderes ausgewählt hat.

• Alternative Stylesheets (alternate)

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

Wird das Stylesheet so mit dem HTML-Dokument verknüpft, kann bzw. muss es der Benutzer selbst auswählen, damit es verwendet wird. Das wirkt sich derzeit nur in den Browsern Firefox, Opera oder Konqueror aus, da diese Funktion derzeit nur von diesen Browsern unterstützt wird. Außerdem sollte man ein "alternate stylesheet" nur in Verbindung mit einem anderen fest eingebundenen verwenden.

[Bearbeiten] Medienspezifische Stylesheets

Es ist auch möglich, für verschiedene Medien verschiedene Stylesheets einzubinden, um zum Beispiel die Gestaltung beim Drucken oder auf Handy-Displays zu regulieren. Diesen Zweck erfüllt das Attribut media. In dieses Attribut werden die Parameter notiert, die für dieses Stylesheet gelten sollen.

@media print {
  body {
       color: black;
       background-color: white
  }
  h1 {
       font-size: 14pt
  }
}

[Bearbeiten] Literatur

• Ingo Chao, Corina Rudel: Fortgeschrittene CSS-Techniken. 2. Auflage. Galileo Computing, Bonn 2009, ISBN 978-3-8362-1426-1 (Detailreiche und anspruchsvolle Erklärung von CSS-Interna). 
• Michael Jendryschik: Einführung in XHTML, CSS und Webdesign. Addison-Wesley, München 2007, ISBN 978-3-8273-2477-1 (Standardkonforme, moderne und barrierefreie Websites erstellen). 
• Kai Laborenz: CSS Praxis. 3. Auflage. Galileo Computing, Bonn 2005, ISBN 3-89842-577-0 (Grundlagen und Referenz, Praxisbeispiele, Tipps und Tricks, Barrierefreies Webdesign mit CSS). 
• Florence Maurice, Patricia Rex: Jetzt lerne ich CSS. Markt und Technik, 2006, ISBN 978-3-8272-4190-0 (Grundlagen und Einführung in CSS). 
• Jens Meiert: Webdesign mit CSS. 2. Auflage. O’Reilly, 2007, ISBN 978-3-89721-712-6 (Methodik bei Arbeit mit CSS, Praxisbeispiele). 
• Peter Müller: Little boxes. Webseiten gestalten mit CSS. Grundlagen. Markt+Technik, München 2007, ISBN 978-3-8272-4224-2 (aktualisierte, erweiterte Ausgabe). 
• Christopher Schmitt: CSS Kochbuch. 2. Auflage. O’Reilly, 2007, ISBN 978-3-89721-492-7 (Grundlagen und Beispiele zu CSS). 
• Heiko Stiegert: CSS-Design – Die Tutorials für Einsteiger. 1. Auflage. Galileo Design, Bonn 2008, ISBN 978-3-8362-1155-0 (über 30 praxisnahe Tutorials, inkl. 4 Exkursen zum Thema CSS). 

[Bearbeiten] Weblinks

 Wikibooks: Websiteentwicklung: CSS – Lern- und Lehrmaterialien

• W3C: Cascading Style Sheets (englisch)
• Cascading Style Sheets (deutsch) – offizielle deutsche Übersetzung
• CSS Spezifikation – deutsche Übersetzung der Spezifikation
• Doktorarbeit von Håkon Wium Lie – Geschichte, alternative Formate, Designgrundsätze von CSS (englisch)
• SELFHTML – Ausführliche Darstellung, Verwendung zusammen mit HTML. Download möglich.
• Zen Garden – Umfangreiche Beispielsammlung von CSS-Layouts mit zugehörigem Quellcode
• Browserkompatibilität – CSS 4 You – Ausführliche Tabelle zur Unterstützung von CSS Eigenschaften und Selektoren gängiger Webbrowser
• W3C-CSS Validation Service Cascading Style Sheets (CSS) und (X)HTML-Dokumente mit CSS validieren

[Bearbeiten] Einzelnachweise

1. ↑ Cascading Style Sheets, level 2 revision 1 CSS 2.1 Specification W3C Working Draft 2 August 2002. W3C. Abgerufen am 11. Oktober 2010.
2. ↑ [http://www.w3.org/TR/2000/WD-css3-roadmap-20000414 CSS3 introduction W3C Working Draft, 14 April 2000]. W3C, abgerufen am 8. Juli 2010 (Englisch). 
3. ↑ CSS2: selector #pattern-matching auf w3.org (engl.)
4. ↑ CSS3 selectors auf w3.org (engl.)

Standards des World Wide Web Consortiums

Empfehlungen (Recommendations): ATAG | Canonical XML | CSS | CharMod | CC/PP | DDR Simple API | DOM | Element Traversal | EMMA | GRDDL | HTML | ITS | MathML | OWL | P3P | PICS | PLS | PNG | POWDER | RDF | RDF-Schema | Ruby | SISR | SKOS | SML | SMIL | SOAP | SOAP MTOM | SPARQL | SRGS | SSML | SVG | UAAG | VoiceXML | WCAG | Webarch | WebCGM | WSDL | WS-Adressing | WS-Policy | XForms | XHTML | XML | XInclude | XKMS | XLink XML Base | XMLEnc-Decrypt | XML Events | XML Information Set | XML Namespace | XML Schema | XML Signature | XOP | XPath | XPointer | XProc | XQuery | XSL | XSLT

Arbeitsentwürfe (Working Drafts) und Kandidaten (Candidate Recommendations): Capture API | CCXML | Clipboard API | Contacts API | Cross-Origin Resource Sharing | CURIE | EARL | EXI | File API | HTML5 | HTML Canvas | HTML Microdata | Indexed Database API | InkML | LTLI | RIF | Selectors API | System Information API | WAI-ARIA | Web IDL | Web Sockets API | Web SQL Database | WICD | Widgets | XForms | XFrames | XBL