| Weitere Informationen | |
|---|---|
| Ihre Bewertung: | |
| Bewertung: | 0 (Ø 0) |
| Views: | 664 |
| Stichworte: | |
| Erstellt: | 17.02.2010 |
| Geändert: | 17.02.2010 |
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.
Inhaltsverzeichnis[Verbergen] |
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 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.
Eine CSS-Regel hat folgendes Aussehen:
Webdesign Begriffe
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 auf w3.org für CSS2 wie auch für CSS3 (engl.).
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.
| Muster | Bedeutung | Eingeführt in | Definition | Erläuterung |
|---|---|---|---|---|
| * | Selektiert jedes Element | CSS2 | Universal selector | |
| E | Selektiert jedes Element vom Typ E | CSS2 | Type selectors | Typ-Selektoren |
| .c | Selektiert jedes Element der Klasse c (analog [class~='c']) | CSS2 | Class selectors | Klassen-Selektoren |
| #myid | Selektiert das Element mit der ID „myid“. | CSS2 | ID selectors | ID-Selektoren |
| E[foo] | Selektiert jedes Element E, bei dem das „foo“-Attribut gesetzt ist (unabhängig vom Wert) | CSS2 | Attribute selectors | Attribut-Selektoren |
| E[foo=bar] | Selektiert jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar gesetzt ist | CSS2 | Attribute selectors | Attribut-Selektoren |
| E[foo^=bar] | Selektiert jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar beginnt | CSS3 | Substring matching attribute selectors | Attribut-Selektoren |
| E[foo$=bar] | Selektiert jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar endet | CSS3 | Substring matching attribute selectors | Attribut-Selektoren |
| E[foo*=bar] | Selektiert jedes Element E, bei dem das „foo“-Attribut den Wert bar enthält | CSS3 | Substring matching attribute selectors | Attribut-Selektoren |
| E.c | Selektiert jedes Element E der Klasse c | CSS2 | Class selectors | Und-Verknüpfung |
| E F | Selektiert jedes Element F, das ein Nachfahre von Element E ist | CSS2 | Descendant selectors | Hierarchische Verschachtelung |
| E > F | Selektiert jedes Element F, das ein Kind von E ist | CSS2 | Child selectors | Direkte hierarchische Verschachtelung |
| E ~ F | Selektiert jedes Element F, das einen Vorgänger E auf gleicher Ebene hat | CSS2 | General sibling combinator | Abfolge |
| E + F | Selektiert jedes Element F, das einen direkten Vorgänger E auf gleicher Ebene hat | CSS2 | Adjacent sibling combinator | Direkte Abfolge |
| E:first-child | Selektiert ein Element E, wenn es das erste Kind des direkten Vorfahren ist | CSS2 | The :first-child pseudo-class |
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.
Am häufigsten wird CSS mit HTML oder XHTML kombiniert. Dies kann an mehreren Orten geschehen, hier einige Beispiele:
link-Element)<link rel="stylesheet" type="text/css" href="beispiel.css" /><?xml-stylesheet type="text/css" href="beispiel.css" ?>style-Element)<head><title>Dokument mit Formatierungen</title>
<style type="text/css">
body { color: purple; background-color: #d8da3d }
</style></head>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></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.
<link rel="stylesheet" type="text/css" href="beispiel.css" />Wenn man ein Stylesheet mit diesem Befehl einbindet, wird es auf jeden Fall verwendet.
<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.
<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 selber 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.
Man kann auch für verschiedene Medien verschiedene Stylesheets einbinden um z. B. die Gestaltung beim Drucken oder auf Handy-Displays zu regulieren. Dazu gibt es das Attribut media. In dieses Attribut werden die Parameter notiert für die dieses Stylesheet gelten sollen.
| Parameter | Bedeutung |
|---|---|
| all | Stylesheet gilt für alle Ausgabegeräte |
| speech (CSS 2: aural) | aurale Ausgabegeräte (z. B. Screenreader) |
| braille | Blindenschriftfähige Ausgabegeräte |
| embossed | Blindenschriftfähige Drucker |
| handheld | Handhelds (Palmtops, PDAs, WinCE-Geräte) |
| Drucker | |
| projection | Video-Beamer, Overhead-Projektoren |
| screen | Bildschirme |
| tty | Ausgabegeräte mit feststehenden Zeichentypen (z. B. Fernschreiber, Terminals oder auch Mobiltelefone) |
| tv | TV-Geräte |
@media print { body { color: black; background-color: white } h1 { font-size: 14pt } }
| Weitere Informationen | |
|---|---|
| Ihre Bewertung: | |
| Bewertung: | 7 (Ø 4.71) |
| Views: | 376 |
| Stichworte: | |
| Erstellt: | 05.03.2009 |
| Geändert: | 23.11.2009 |
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.
Inhaltsverzeichnis[Verbergen] |
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 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.
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 auf w3.org für CSS2 wie auch für CSS3 (engl.).
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.
| Muster | Bedeutung | Eingeführt in | Definition | Erläuterung |
|---|---|---|---|---|
| * | Selektiert jedes Element | CSS2 | Universal selector | |
| E | Selektiert jedes Element vom Typ E | CSS2 | Type selectors | Typ-Selektoren |
| .c | Selektiert jedes Element der Klasse c (analog [class~='c']) | CSS2 | Class selectors | Klassen-Selektoren |
| #myid | Selektiert das Element mit der ID „myid“. | CSS2 | ID selectors | ID-Selektoren |
| E[foo] | Selektiert jedes Element E, bei dem das „foo“-Attribut gesetzt ist (unabhängig vom Wert) | CSS2 | Attribute selectors | Attribut-Selektoren |
| E[foo=bar] | Selektiert jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar gesetzt ist | CSS2 | Attribute selectors | Attribut-Selektoren |
| E[foo^=bar] | Selektiert jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar beginnt | CSS3 | Substring matching attribute selectors | Attribut-Selektoren |
| E[foo$=bar] | Selektiert jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar endet | CSS3 | Substring matching attribute selectors | Attribut-Selektoren |
| E[foo*=bar] | Selektiert jedes Element E, bei dem das „foo“-Attribut den Wert bar enthält | CSS3 | Substring matching attribute selectors | Attribut-Selektoren |
| E.c | Selektiert jedes Element E der Klasse c | CSS2 | Class selectors | Und-Verknüpfung |
| E F | Selektiert jedes Element F, das ein Nachfahre von Element E ist | CSS2 | Descendant selectors | Hierarchische Verschachtelung |
| E > F | Selektiert jedes Element F, das ein Kind von E ist | CSS2 | Child selectors | Direkte hierarchische Verschachtelung |
| E ~ F | Selektiert jedes Element F, das einen Vorgänger E auf gleicher Ebene hat | CSS2 | General sibling combinator | Abfolge |
| E + F | Selektiert jedes Element F, das einen direkten Vorgänger E auf gleicher Ebene hat | CSS2 | Adjacent sibling combinator | Direkte Abfolge |
| E:first-child | Selektiert ein Element E, wenn es das erste Kind des direkten Vorfahren ist | CSS2 | The :first-child pseudo-class |
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.
Am häufigsten wird CSS mit HTML oder XHTML kombiniert. Dies kann an mehreren Orten geschehen, hier einige Beispiele:
link-Element)<link rel="stylesheet" type="text/css" href="beispiel.css" /><?xml-stylesheet type="text/css" href="beispiel.css" ?>style-Element)<head><title>Dokument mit Formatierungen</title>
<style type="text/css">
body { color: purple; background-color: #d8da3d }
</style></head>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></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.
<link rel="stylesheet" type="text/css" href="beispiel.css" />Wenn man ein Stylesheet mit diesem Befehl einbindet, wird es auf jeden Fall verwendet.
<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.
<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 selber 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.
Man kann auch für verschiedene Medien verschiedene Stylesheets einbinden um z. B. die Gestaltung beim Drucken oder auf Handy-Displays zu regulieren. Dazu gibt es das Attribut media. In dieses Attribut werden die Parameter notiert für die dieses Stylesheet gelten sollen.
| Parameter | Bedeutung |
|---|---|
| all | Stylesheet gilt für alle Ausgabegeräte |
| speech (CSS 2: aural) | aurale Ausgabegeräte (z. B. Screenreader) |
| braille | Blindenschriftfähige Ausgabegeräte |
| embossed | Blindenschriftfähige Drucker |
| handheld | Handhelds (Palmtops, PDAs, WinCE-Geräte) |
| Drucker | |
| projection | Video-Beamer, Overhead-Projektoren |
| screen | Bildschirme |
| tty | Ausgabegeräte mit feststehenden Zeichentypen (z. B. Fernschreiber, Terminals oder auch Mobiltelefone) |
| tv | TV-Geräte |
@media print { body { color: black; background-color: white } h1 { font-size: 14pt } }
| Weitere Informationen | |
|---|---|
| Ihre Bewertung: | |
| Bewertung: | 7 (Ø 4.71) |
| Views: | 376 |
| Stichworte: | |
| Erstellt: | 05.03.2009 |
| Geändert: | 23.11.2009 |
| Weitere Informationen | |
|---|---|
| Ihre Bewertung: | |
| Bewertung: | 0 (Ø 0) |
| Views: | 664 |
| Stichworte: | |
| Erstellt: | 17.02.2010 |
| Geändert: | 17.02.2010 |
