Cascading Style Sheets
aus Wikipedia, der freien Enzyklopädie
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 soll dabei festlegen, wie ein besonders ausgezeichneter Inhalt dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als Gruppe erkannt werden können. Man zeichnet im Dokument also die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird.
CSS ermöglicht es, die Darstellung dem jeweiligen Ausgabemedium (zum Beispiel Papier, Projektion, Sprache usw.) entsprechend anzupassen. Das ist nützlich, um zum Beispiel Hyperlinks beim Drucken extra aufzuführen, oder um für ein Anzeigemedium wie einen PDA oder ein Mobiltelefon mit geringerer Auflösung die Anzeige zu optimieren (geringere Seitenbreite und -höhe).
Neben diversen Fähigkeiten im Farb- und Schriftbereich bietet CSS die Möglichkeit, Elemente frei zu positionieren oder Hintergrundbilder festzulegen.
CSS gilt heutzutage als die Standard-Stylesheetsprache für das Web.
Inhaltsverzeichnis[Verbergen] |
[Bearbeiten] Geschichte und Versionen
Das Konzept der Cascading Style Sheets (CSS) wurde 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 Håkon 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. Håkon und Bos arbeiteten in diesem Rahmen an CSS weiter, zusammen mit anderen Mitgliedern, u. a. Thomas Reardon von der Firma Microsoft. 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 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 unnötige Schwierigkeiten.
Momentan arbeitet das W3C an einer Zwischenversion CSS Level 2 Revision 1 (CSS 2.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.
Gleichzeitig ist CSS Level 3 in der Entwicklung. Hier werden die Entwicklungen weiter vorangetrieben, die bereits bei CSS2 gestartet wurden. CSS3 wird im Gegensatz zu den Vorgängern modular aufgebaut sein, d. h. 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 { Eigenschaft-A: Wert-A; Eigenschaft-B: Wert-B; } /* Kommentar */
Ein Stylesheet darf beliebig viele solcher Regeln enthalten. Es gibt unter anderem folgende Selektoren, die jeweils Elemente auswählen. Im Wesentlichen sind dies die HTML-Tags:
Muster | Bedeutung | Hier genauer erklärt (engl.) |
---|---|---|
* | Selektiert jedes Element | Universal selector |
E | Selektiert jedes Element vom Typ E | Type selectors |
E F | Selektiert jedes Element F, das ein Nachfahre von Element E ist | Descendant selectors |
E > F | Selektiert jedes Element F, das ein Kind von E ist | Child selectors |
E:first-child | Selektiert ein Element E, wenn es das erste Kind des direkten Vorfahren ist | The :first-child pseudo-class |
E[foo] | Selektiert jedes Element E, bei dem das „foo“-Attribut gesetzt ist (unabhängig vom Wert) | Attribute selectors |
E[foo=bar] | Selektiert jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar gesetzt ist | Attribute selectors |
.c | Selektiert jedes Element der Klasse c | Class selectors |
E.c | Selektiert alle Elemente E der Klasse c | Class selectors |
#myid | Selektiert jedes Element mit der ID „myid“. | ID selectors |
E#myid | Selektiert das Element E mit der ID „myid“. | ID selectors |
[Bearbeiten] Beispiel
p.note { position: relative; left: 15%; width: 70%; padding: 30px; padding-bottom: 45px; border: 1px solid black; line-height: 1.5em; color: black; font-weight: bold; text-align: justify; background-color: #eeeeee; }
Ein mit dem p
-Tag umgebener Absatz der Klasse „note“ wird dadurch 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 (Kaskade). Diese können dabei aus verschiedenen Quellen stammen: vom Autor des Stylesheets, dem Browser (User Agent) oder dem Benutzer.
[Bearbeiten] Kombination mit HTML bzw. XHTML
Die am häufigsten vorkommende Kombination, nämlich mit HTML oder XHTML, 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 häufigst verwendete Methode. Sie bietet den Vorteil, dass für mehrere Dokumente, die dasselbe CSS 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.
[Bearbeiten] Weblinks
Wikibooks: Websiteentwicklung: CSS – Lern- und Lehrmaterialien |
- W3C: CSS-Home (engl.)
- Cascading Style Sheets, Level 2 (deutsche Ãœbersetzung)
- CSS bei SELFHTML
- Einführung in CSS