Cascading Style Sheets-Anzeigenwerbung-anzeigenwerbung.net

Navigation

Cascading Style Sheets

19.05.2012 @ 08:41, Günther M. Apsel,

{{Infobox Dateiformat
| Name = Cascading Style Sheets (CSS)
| Icon =
| Logo =
| Screenshot = 200px
| Beschreibung =
| Dateiendung = .css
| MIME = text/css
| UniformTyp =
| MagischeZahl =
| MagischeZahlNotation =
| MagischeZahlHex =
| Entwickler = World Wide Web Consortium
| Veröffentlicht =
| LetzteVersion =
| LetzteVersionDatum =
| Art = Stylesheet-Sprache
| Container für =
| Enthalten in =
| Erweitert von =
| Erweitert zu =
| Standard = [http://www.w3.org/TR/CSS1 Level 1 (Recommendation)]
[http://www.w3.org/TR/CSS2/ Level 2 (Recommendation)]
[http://www.w3.org/TR/CSS21/ Level 2 Revision 1 (Recommendation)]
| Website =

}}

Die Cascading Style Sheets ({{enS}}e Aussprache [{{IPA|kæsˌkeɪdɪŋˈstaɪlʃiːts}}]; für stufenförmige oder (hintereinander) geschachtelte Gestaltungsvorlagen), kurz CSS genannt, sind quasi eine deklarative Sprache für Stilvorlagen (engl. stylesheets) von strukturierten Dokumenten. Sie wird vor allem zusammen mit HTML und XML (zum Beispiel bei SVG) eingesetzt.

Grundidee beim Entwurf von CSS war es, mittels HTML oder XML nur die inhaltliche Untergliederung eines Dokumentes und die Bedeutung seiner Teile zu beschreiben, während mittels CSS weitgehend unabhängig davon die konkrete Darstellung (Farben, Layout, Schrifteigenschaften usw.) der Teile festgelegt wird.
Elemente eines Dokumentes können z. B. aufgrund ihres Elementnamens (z. B. alle Linkelemente), ihrer ID oder auch aufgrund ihrer Position in diesem Dokument (z. B. alle Bildelemente innerhalb von Linkelementen) identifiziert werden. Mithilfe von CSS-Regeln können deshalb für jedes Element die konkreten Werte für bestimmte Darstellungsattribute festgelegt werden. Diese Festlegungen können an zentraler Stelle erfolgen, ggf. sogar in einem separaten Dokument, was ihre Wiederverwendung für andere Dokumente erleichtert.
Daneben enthält CSS ein Vererbungsmodell für Auszeichnungsattribute – deshalb cascading – das die Anzahl nötiger Definitionen vermindert.

CSS ermöglicht allenfalls auch die diskretionäre Auszeichnung von Teilen eines Dokuments.

Mit CSS ist es möglich, für verschiedene Ausgabemedien (Bildschirm, Papier, Projektion, Sprache) unterschiedliche Darstellungen vorzugeben. Das ist nützlich, um zum Beispiel Hyperlinks beim Drucken extra aufzuführen oder für Geräte mit geringerer Auflösung (zum Beispiel PDAs oder Mobiltelefone) die Anzeige mit Rücksicht auf die geringere Seitenbreite und -höhe anzupassen.

Neben verschiedenen Möglichkeiten, Farben und Schriften einzustellen, erlaubt CSS auch, Elemente frei zu positionieren oder Hintergrundbilder festzulegen.

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

Geschichte und Versionen

Anfänge

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 Implementierung 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, die Erfinder von CSS brachten 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 auf 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. Diesen Normierungsvorschlag befolgen die aktuellen Browser mittlerweile fast vollständig.

CSS 2 und 2.1

CSS Level 2 (CSS2) wurde im Mai 1998 veröffentlicht. Bis heute (Stand Januar 2010) wird diese Empfehlung von keinem verbreiteten Browser vollständig 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 Verwendung im Web ergeben sich daher oft Schwierigkeiten.

Seit 2002 arbeitete das W3C an einer Zwischenversion CSS Level 2 Revision 1 (CSS 2.1),{{cite web|url=http://www.w3.org/TR/2002/WD-CSS21-20020802/|title=Cascading Style Sheets, level 2 revision 1 CSS 2.1 Specification W3C Working Draft 2 August 2002|publisher=W3C |date= |accessdate=2010-10-11}} die die Erfahrungen mit CSS2 berücksichtigt, Unstimmigkeiten korrigiert und diejenigen Teiltechniken streicht, die bisher in verschiedenen Browsern nicht korrekt implementiert wurden. Am 7. Juni 2011 wurde CSS 2.1 als Recommendation veröffentlicht.{{cite web|url=http://www.w3.org/2011/05/css-pr|title=Cascading Style Sheets Standard Boasts Unprecedented Interoperability|publisher=W3C |date= |accessdate=2011-06-07}} CSS 2.1 bringt selbst keine grundlegend neuen Fähigkeiten mit sich.

CSS3

Seit 2000 ist CSS Level 3 in der Entwicklung.{{Internetquelle | url=http://www.w3.org/TR/2000/WD-css3-roadmap-20000414 | titel=CSS3 introduction W3C Working Draft, 14 April 2000 | autor= | hrsg=W3C | werk= | seiten= | datum= | zugriff=2010-07-08 | sprache=Englisch | kommentar= | zitat= }} Hier werden die Entwicklungen weiter vorangetrieben, die bereits mit CSS2 begonnen wurden. CSS3 wird im Gegensatz zu den Vorgängern modular aufgebaut sein, womit einzelne Teiltechniken (beispielsweise Steuerung der Sprachausgabe oder Selektoren) in eigenen Versionsschritten entwickelt werden können. So nähert sich CSS bei seinen Fähigkeiten mehr dem etablierten DSSSL (für SGML) an und wird wohl auch in Zukunft noch eine Alternative zu XML-basierten Stylesheet-Sprachen wie XSL-FO sein. Derzeit veröffentlichte und breit unterstützte Standards sind unter anderem CSS Color Level 3, CSS Namespaces und Selectors Level 3. Kurz vor der Fertigstellung sind Media Queries, deren Definitionen auf unterschiedliche Endgeräte reagieren können. Neben diesen Modulen stehen weitere Elemente zur Diskussion, etwa ein Layout-Modul oder verschiedene Grafikfilter.[http://www.w3.org/Style/CSS/current-work w3.org: CSS Current Work] Moderne Browser unterstützen jedoch schon viele CSS3-Module, die noch nicht durch den W3C standardisiert sind.[http://caniuse.com/#compare=ie+9,firefox+12,chrome+18,safari+5.1,opera+11.6 caniuse.com: Vergleich von CSS3-Unterstützung aktueller Browser, abgerufen am 10. Mai 2012]

Syntax

Der Aufbau von CSS-Regeln



   Selektor [, Selektor2, …]

      {

         Eigenschaft-1: Wert-1;

         …

         Eigenschaft-n: Wert-n[;]

      }

  /* Kommentar */

/* In eckigen Klammern stehen optionale Angaben */

Eine CSS-Regel gibt an, dass für durch sie festgelegte Teile eines Dokuments eine bestimmte, ebenfalls in ihr angegebene Eigenschaftskombination gelten soll. Sie wird geschrieben als eine kommagetrennte Liste von Selektoren ("Für diese Typen von Teilen … "), gefolgt von einer in geschweiften Klammern stehenden, semikolongetrennten Liste von Eigenschafts-Deklarationen (" … nimm alle diese Eigenschaften!"); nach der letzten Eigenschafts-Deklaration ist ein abschließendes Semikolon erlaubt. Eine Eigenschafts-Deklaration besteht aus deren Namen und der Angabe, welchen Wert sie annehmen soll; diese Name-Wert-Paare werden ihrerseits durch einen Doppelpunkt getrennt.

Um diese Teile einer Regel herum ist Weißraum frei verwendbar; häufig schreibt man den Doppelpunkt ohne Zwischenraum hinter den Eigenschaftsnamen, jede Eigenschaftsdeklaration auf eigener Zeile und schließt auch die letzte Eigenschaft mit einem Semikolon – so kommt es zu weniger Syntaxfehlern bei Änderungen.

Ein Stylesheet darf beliebig viele solcher Regeln enthalten. Die folgende Tabelle enthält eine vollständige Übersicht aller Selektoren, mit denen Elemente (meist HTML-Elemente) ausgewählt werden können.

Selektoren

Ein Selektor nennt die Bedingungen, die auf ein Element zutreffen müssen, damit der nachfolgende Satz an CSS-Deklarationen mit seinen Darstellungsvorgaben auf das Element angewendet wird. Solche Bedingungen beschreiben unzweideutig, welche Eigenschaften (Typ, Klasse, ID, Attribut oder Attributwert) Elemente haben müssen oder in welchem Kontext sie im Dokument stehen müssen (Existenz eines bestimmten übergeordneten Elementes oder eines Vorgängerelementes bestimmten Typs), damit die Darstellungsvorgaben für sie gelten sollen. In einem Selektor können mehrere Auswahlkriterien verknüpft sein.

{| class="wikitable"
|-
! Muster
! Bedeutung
! Eingeführt in
! Definition
! Erläuterung
|- style="background-color: #ffffff;"
| colspan="5" |einfache Selektoren
|-
| *
| Selektiert jedes Element
| CSS2
| [http://www.w3.org/TR/CSS21/selector.html#universal-selector Universal selector]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Der_Universalselektor Der Universalselektor]
|-
| E
| Selektiert jedes Element vom Typ E
| CSS1
| [http://www.w3.org/TR/CSS21/selector.html#type-selectors Type selectors]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Der_Typselektor Der Typselektor]
|-
| .c
| Selektiert jedes Element der Klasse c (analog [class~='c'])
| CSS1
| [http://www.w3.org/TR/CSS21/selector.html#class-html Class selectors]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Der_Klassenselektor Der Klassenselektor]
|-
| #myid
| Selektiert das Element mit der ID „myid“.
| CSS1
| [http://www.w3.org/TR/CSS21/selector.html#id-selectors ID selectors]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Der_ID-Selektor Der ID-Selektor]
|-
| [foo]
| Selektiert Elemente, deren „foo“-Attribut gesetzt ist (unabhängig vom Wert)
| CSS2
| rowspan="4" | [http://www.w3.org/TR/CSS21/selector.html#attribute-selectors Attribute selectors]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Attributpr.C3.A4senz Attributpräsenz]
|-
| [foo=bar]
| Selektiert Elemente, deren „foo“-Attribut mit dem Wert „bar“ gesetzt ist
| CSS2
| rowspan="3" | [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Attributwerte Attributwerte]
|-
| [foo~=bar]
| Selektiert Elemente, deren „foo“-Attribut das Wort „bar“ enthält (also beispielsweise „bar“ oder auch „bar quz“ aber nicht „barquz“)
| CSS2
|-
| [foo|=bar]
| Selektiert Elemente, deren „foo“-Attribut exakt die Zeichenfolge „bar“ ist oder mit der Zeichenfolge „bar-“ beginnt
| CSS2
|-
| [foo^=bar]
| Selektiert Elemente, deren „foo“-Attribut mit der Zeichenfolge „bar“ beginnt
| CSS3
| rowspan="3" | [http://www.w3.org/TR/css3-selectors/#attribute-substrings Substring matching attribute selectors]
| rowspan="3" | [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Teil.C3.BCbereinstimmungen Teilübereinstimmungen]
|-
| [foo$=bar]
| Selektiert Elemente, deren „foo“-Attribut mit der Zeichenfolge „bar“ endet
| CSS3
|-
| [foo*=bar]
| Selektiert Elemente, deren „foo“-Attribut die Zeichenfolge „bar“ enthält
| CSS3
|- style="background-color: #ffffff;"
| colspan="5" |Kombinatoren
|-
| E F
| Selektiert alle Elemente F, die Nachfahren eines Elements E sind
| CSS1
| [http://www.w3.org/TR/CSS21/selector.html#descendant-selectors Descendant selectors]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Nachfahren_eines_Elements_ansprechen_.28der_Nachfahrenselektor.29 Der Nachfahrenselektor]
|-
| E > F
| Selektiert alle Elemente F, die ein Kind eines Elements E sind
| CSS2
| [http://www.w3.org/TR/CSS21/selector.html#child-selectors Child selectors]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Kinder_eines_Elements_ansprechen_.28der_Kindselektor.29 Der Kindselektor]
|-
| E ~ F
| Selektiert alle Elemente F, die einen Vorgänger E auf gleicher Ebene haben
| CSS3
| [http://www.w3.org/TR/css3-selectors/#general-sibling-combinators General sibling combinator]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Geschwister_eines_Elements_ansprechen_.28der_Geschwisterselektor.29 Der Geschwisterselektor]
|-
| E + F
| Selektiert alle Elemente F, die einen direkten Vorgänger E auf gleicher Ebene haben
| CSS2
| [http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators Adjacent sibling combinator]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Direkten_Nachbarn_eines_Elements_ansprechen_.28der_Nachbarselektor.29 Der Nachbarselektor]
|- style="background-color: #ffffff;"
| colspan="5" |Pseudoklassen
|-
| :link
| Selektiert unbesuchte Verweise
| CSS1
| rowspan="2" |[http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes The link pseudo-classes]
| rowspan="2" |[http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklassen_:link_und_:visited Die Pseudoklassen :link und :visited]
|-
| :visited
| Selektiert bereits besuchte Verweise
| CSS1
|-
| :active
| Selektiert das Element, das gerade angeklickt ist
| CSS1
| rowspan="3" | [http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes The dynamic pseudo-classes]
| rowspan="3" | [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklassen_:hover.2C_:active_und_:focus Die Pseudoklassen :hover, :active und :focus]
|-
| :hover
| Selektiert das Element, über dem sich der Mauszeiger befindet
| CSS2
|-
| :focus
| Selektiert das Element, das den Fokus (z.B. durch die Tabulatortaste) erhalten hat
| CSS2
|-
| :lang()
| Selektiert Elemente, deren Sprache über das Attribut „lang“ festgelegt wurde
| CSS2
| [http://www.w3.org/TR/CSS2/selector.html#lang The language pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:lang.28.29 Die Pseudoklasse :lang()]
|-
| :target
| Selektiert das Element, das Ziel des gerade eben angeklickten Verweises ist
| CSS3
| [http://www.w3.org/TR/css3-selectors/#target-pseudo The target pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:target Die Pseudoklasse :target]
|-
| :enabled
| Selektiert Elemente in Benutzeroberflächen, die auswählbar sind
| CSS3
| rowspan="2" | [http://www.w3.org/TR/css3-selectors/#enableddisabled The :enabled and :disabled pseudo-classes]
| rowspan="3" | [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklassen_:enabled.2C_:disabled_und_:checked Die Pseudoklassen :enabled, :disabled und :checked]
|-
| :disabled
| Selektiert Elemente in Benutzeroberflächen, die gesperrt sind
| CSS3
|-
| :checked
| Selektiert Elemente von Benutzeroberflächen, die angewählt sind
| CSS3
| [http://www.w3.org/TR/css3-selectors/#checked The :checked pseudo-class]
|-
| :not(foo)
| Selektiert Elemente, für die „foo“ nicht zutrifft
| CSS3
| [http://www.w3.org/TR/css3-selectors/#negation The negation pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:not.28.29 Die Pseudoklasse :not()]
|- style="background-color: #ffffff;"
| colspan="5" |strukturelle Pseudoklassen
|-
| :first-child
| Selektiert Elemente, die das erste Kind ihres Elternelementes sind
| CSS2
| [http://www.w3.org/TR/CSS21/selector.html#first-child :first-child pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:first-child Die Pseudoklasse :first-child]
|-
| :last-child
| Selektiert Elemente, die das letzte Kind ihres Elternelementes sind
| CSS3
| [http://www.w3.org/TR/css3-selectors/#last-child-pseudo :first-child pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:last-child Die Pseudoklasse :last-child]
|-
| :nth-child()
| Selektiert Elemente, die das k-te Kind ihres Elternelementes sind
| CSS3
| [http://www.w3.org/TR/css3-selectors/#nth-child-pseudo :nth-child() pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:nth-child() Die Pseudoklasse :nth-child()]
|-
| :nth-last-child()
| Selektiert Elemente, die das k-te Kind ihres Elternelementes sind, Zählung beginnt von hinten
| CSS3
| [http://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo :nth-last-child() pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:nth-last-child() Die Pseudoklasse :nth-last-child()]
|-
| :only-child
| Selektiert Elemente, die das einzige Kind ihres Elternelementes sind
| CSS3
| [http://www.w3.org/TR/css3-selectors/#only-child-pseudo :only-child pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:only-child Die Pseudoklasse :only-child]
|-
| foo:first-of-type
| Selektiert Elemente, die das erste Element des Typs „foo“ ihres Elternelementes sind
| CSS3
| [http://www.w3.org/TR/css3-selectors/#first-of-type-pseudo :first-of-type pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:first-of-type Die Pseudoklasse :first-of-type]
|-
| :last-of-type
| Selektiert Elemente, die das letzte Element des Typs „foo“ ihres Elternelementes sind
| CSS3
| [http://www.w3.org/TR/css3-selectors/#last-of-type-pseudo :first-of-type pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:last-of-type Die Pseudoklasse :last-of-type]
|-
| :nth-of-type()
| Selektiert Elemente, die das k-te Element des Typs „foo“ ihres Elternelementes sind
| CSS3
| [http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo :nth-of-type() pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:nth-of-type() Die Pseudoklasse :nth-of-type()]
|-
| :nth-last-of-type()
| Selektiert Elemente, die das k-te Element des Typs „foo“ ihres Elternelementes sind, Zählung beginnt von hinten
| CSS3
| [http://www.w3.org/TR/css3-selectors/#nth-last-of-type-pseudo :nth-last-of-type() pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:nth-last-of-type() Die Pseudoklasse :nth-last-of-type()]
|-
| :only-of-type
| Selektiert Elemente, die das einzige Element des Typs „foo“ ihres Elternelementes sind
| CSS3
| [http://www.w3.org/TR/css3-selectors/#only-of-type-pseudo :only-of-type pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:only-of-type Die Pseudoklasse :only-of-type]
|-
| :root
| Selektiert das Wurzelelement
| CSS3
| [http://www.w3.org/TR/css3-selectors/#root-pseudo :root pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:root Die Pseudoklasse :root]
|-
| :empty
| Selektiert Elemente, die keine Kinder haben
| CSS3
| [http://www.w3.org/TR/css3-selectors/#empty-pseudo :empty pseudo-class]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklasse_:empty Die Pseudoklasse :empty]
|- style="background-color: #ffffff;"
| colspan="5" |Pseudoelemente
|-
| ::first-line
| Selektiert die erste Zeile des formatierten Textes
| CSS1
| [http://www.w3.org/TR/css3-selectors/#first-line The ::first-line pseudo-element]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Die_erste_Textzeile Die erste Textzeile]
|-
| ::first-letter
| Selektiert das erste Zeichen des formatierten Textes
| CSS1
| [http://www.w3.org/TR/css3-selectors/#first-letter The ::first-letter pseudo-element]
| [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Das_erste_Zeichen Das erste Zeichen]
|-
| foo::before
| Erzeugt und selektiert ein Element vor dem Element „foo“
| CSS2
| rowspan="2" | [http://www.w3.org/TR/css3-selectors/#gen-content The ::before and ::after pseudo-elements]
| rowspan="2" | [http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Elemente_f.C3.BCr_generierten_Inhalt Elemente für generierten Inhalt]
|-
| foo::after
| Erzeugt und selektiert ein Element nach dem Element „foo“
| CSS2

Beispiel

miniatur|450px|Das CSS-Box-Modell
CSS:

p.info {
font-family: arial, sans-serif;
line-height: 150%;
margin-left: 2em;
padding: 1em;
border: 3px solid red;
background-color: #f89;
display: inline-block;
} p.info span {
font-weight: bold;
} p.info span::after {
content: ": ";
}

HTML:

Hinweis
Sie haben sich erfolgreich angemeldet.

Die p-Tags machen den dazwischen stehenden Text zu einem Absatz. Da ihm die Klasse „info“ zugewiesen wird, wird er von einem CSS-kompatiblen Browser wie folgt dargestellt:

Textabsatz, der so formatiert ist, wie obiges CSS es vorgibt.

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

span-Elemente innerhalb solcher Absätze werden in Fettschrift dargestellt; der Doppelpunkt wird als Pseudoelement erzeugt.

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.

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 nichtstandardisierte 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 einen CSS-Hack ist der sogenannte Star-HTML-Hack. Das *-Zeichen dient als Universal-Selektor und ist vor dem Selektor html sinnlos.

CSS-Code-Beispiel:
p { background-color: blue; }

* html p { background-color: red; }

In diesem Fall würden zunächst alle Browser die p-Elemente mit einem blauen Hintergrund darstellen. Lediglich die Internet Explorer unterhalb der Version 7 interpretieren auch die zweite Zeile und färben die Absätze rot, obwohl kein Eltern-Element besitzt, auf das * zutreffen könnte.

Kombination mit HTML oder 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)

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

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

Dokument mit Formatierungen

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

Text

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.

Beispiel

Es gibt drei Varianten Stylesheets mittels eines link-Elements einzubinden, die sich darin unterscheiden, wie zwingend die Stylesheets berücksichtigt werden:

; Dauerhafte Stylesheets (persistent):

Wenn man ein Stylesheet so einbindet, wird es auf jeden Fall verwendet.

; Bevorzugte Stylesheets (preferred):

Sollte man diese Einbindung verwenden, wird das Stylesheet verwendet, bis der Benutzer ein anderes auswählt.

; Alternative Stylesheets (alternate):

Wird das Stylesheet so mit dem HTML-Dokument verknüpft, muss der Benutzer ausdrücklich wählen dieses zu verwenden.
Das wirkt sich in den meisten Browsern aus (z. B. Internet Explorer, Firefox, Opera und Konqueror). Somit wird diese Funktion von den meist benutzten Browsern implementiert.

Außerdem sollte ein "alternate stylesheet" nur in Verbindung mit einem anderen fest eingebundenen verwendet werden, damit es auch nur eine echte Alternative ist.

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.
{| class="wikitable"
|-
! 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)
|-
|print
|Drucker
|-
|projection
|Video-Beamer, Overhead-Projektoren
|-
|screen
|Bildschirme
|-
|tty
|Ausgabegeräte mit feststehenden Zeichentypen (z. B. Fernschreiber, Terminals oder auch ältere Mobiltelefone)
|-
|tv
|TV-Geräte

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

}

Eigenschaftsspezifische Stylesheets (Media Queries)

Bei Media Queries handelt es sich um ein Konzept, welches mit CSS3 eingeführt wurde und das Prinzip des Medientyps in CSS2 erweitert. Anstatt starr zu definieren, welches Medium das Zielmedium ist, können mit Media Queries die Eigenschaften des aktuellen Gerätes direkt abgefragt werden. Verfügbare Geräteeigenschaften sind zum Beispiel:

* Breite und Höhe des Browserfensters
* Breite und Höhe des Gerätes
* Orientierung (Quer- oder Hochformat)

* Bildschirmauflösung

Vor allem im Bereich der mobilen Webprogrammierung werden Media Queries bereits jetzt häufig eingesetzt, um die Webseite ideal an das aktuell verwendete Gerät anzupassen.

Im folgenden Beispiel werden Elemente mit CSS-Regeln versehen. Diese Regeln gelten für das gesamte Dokument. Anschließend wird eine Media Query eingesetzt, die greift, sobald die Bildschirmgröße kleiner als 1025 Pixel wird. In diesem Fall ändern sich die Eigenschaften, die vorher allgemein definiert wurden bzw. gelten zusätzliche Eigenschaften.

#inhalt {
width: 800px;

}

@media screen and (max-width: 1024px) {
#inhalt {
width: 600px;
}

aside {
display: none;
}

}

Siehe auch

* Reset-Stylesheet

Literatur

* {{Literatur
|Autor=Ingo Chao, Corina Rudel
|Titel=Fortgeschrittene CSS-Techniken
|Auflage=3.
|Verlag=Galileo Computing
|Ort=Bonn
|Jahr=2012
|ISBN=978-3-8362-1695-1
|Kommentar=Detailreiche und anspruchsvolle Erklärung von CSS-Interna}}
* {{Literatur
|Autor=Michael Jendryschik
|Titel=Einführung in XHTML, CSS und Webdesign
|Verlag=Addison-Wesley
|Ort=München
|Jahr=2007
|ISBN=978-3-8273-2477-1
|Kommentar=Standardkonforme, moderne und barrierefreie Websites erstellen}}
* {{Literatur
|Autor=Kai Laborenz
|Titel=CSS Praxis
|Auflage=3.
|Verlag=Galileo Computing
|Ort=Bonn
|Jahr=2005
|ISBN=3-89842-577-0
|Kommentar=Grundlagen und Referenz, Praxisbeispiele, Tipps und Tricks, Barrierefreies Webdesign mit CSS}}
* {{Literatur
|Autor=Bettina K. Lechner, Bernhard Stockmann
|Titel=CSS pur - Ultimative Weblösungen mit Stil
|Verlag=Addison Wesley
|Ort=München
|Jahr=2009
|ISBN=978-3-8273-2781-9
|Kommentar=Moderne CSS-Techniken: kompakter Grundlagenteil, 3 Website-Prototypen mit Detailerklärungen}}
* {{Literatur
|Autor=Florence Maurice, Patricia Rex
|Titel=Jetzt lerne ich CSS
|Verlag=Markt und Technik
|Ort=München
|Jahr=2006
|ISBN=978-3-8272-4190-0
|Kommentar=Grundlagen und Einführung in CSS}}
* {{Literatur
|Autor=Jens Meiert
|Titel=Webdesign mit CSS
|Auflage=2.
|Verlag=O’Reilly
|Jahr=2007
|ISBN=978-3-89721-712-6
|Kommentar=Methodik bei Arbeit mit CSS, Praxisbeispiele}}
* {{Literatur
|Autor=Peter Müller
|Titel=Little boxes. Webseiten gestalten mit CSS. Grundlagen
|Verlag=Markt+Technik
|Ort=München
|Jahr=2007
|ISBN=978-3-8272-4224-2
|Kommentar=aktualisierte, erweiterte Ausgabe}}
* {{Literatur
|Autor=Christopher Schmitt
|Titel=CSS Kochbuch
|Auflage=2.
|Verlag=O’Reilly
|Jahr=2007
|ISBN=978-3-89721-492-7
|Kommentar=Grundlagen und Beispiele zu CSS}}
* {{Literatur
|Autor=Heiko Stiegert
|Titel=CSS-Design – Die Tutorials für Einsteiger
|Auflage=1.
|Verlag=Galileo Design
|Ort=Bonn
|Jahr=2008
|ISBN=978-3-8362-1155-0
|Kommentar=über 30 praxisnahe Tutorials, inkl. 4 Exkursen zum Thema CSS}}
* {{Literatur
|Autor=Heiko Stiegert
|Titel=Modernes Webdesign mit CSS: Schritt für Schritt zur perfekten Website
|Auflage=1.
|Verlag=Galileo Design
|Ort=Bonn
|Jahr=2011
|ISBN=978-3-8362-1666-1
|Kommentar=über 20 praxisnahe Tutorials}}
* {{Literatur
|Autor=Dirk Jesse
|Titel=CSS-Layouts
|Auflage=2.
|Verlag=Galileo Design
|Ort=Bonn
|Jahr=2008
|ISBN=978-3-8362-1135-2

|Kommentar=Grundlagen, Praxiseinsatz und Integration}}

Weblinks

{{Wikibooks|Websiteentwicklung: CSS}}

* [http://www.w3.org/Style/CSS/ W3C: Cascading Style Sheets] (englisch)
* [http://www.webmeister.at/Style/CSS/ Cascading Style Sheets] – offizielle deutsche Übersetzung
* [http://www.edition-w3c.de/TR/REC-CSS2 CSS-2-Spezifikation] – deutsche Übersetzung der Spezifikation
* [http://people.opera.com/howcome/2006/phd/ Doktorarbeit von Håkon Wium Lie] – Geschichte, alternative Formate, Designgrundsätze von CSS (englisch)
* [http://de.selfhtml.org/css/ SELFHTML] – Ausführliche Darstellung, Verwendung zusammen mit HTML. Download möglich.
* [http://www.csszengarden.com/tr/deutsch/ Zen Garden] – Umfangreiche Beispielsammlung von CSS-Layouts mit zugehörigem Quellcode
* [http://www.css4you.de/browsercomp.html/browserfilter/safari_3-0+;firefox_3-0+;opera_9-5+;ie_7;ie_6; Browserkompatibilität – CSS 4 You] – Ausführliche Tabelle zur Unterstützung von CSS Eigenschaften und Selektoren gängiger Webbrowser
* [http://jigsaw.w3.org/css-validator/ W3C-CSS Validation Service] Cascading Style Sheets (CSS) und (X)HTML-Dokumente mit CSS validieren

* [http://de.html.net/tutorials/css/ CSS Tutorial] Dieses CSS-Tutorial gibt binnen weniger Minuten einen Einstieg in CSS

Einzelnachweise

Cascading Stylesheets

weiter

Text und Bilder dieses Beitrags stammen aus dem Artikel Cascading Style Sheets der freien Enzyklopädie Wikipedia und stehen unter der GNU Free Documentation License. Die Liste der Autoren ist in der Wikipedia unter dieser Seite verfügbar, der Original-Artikel lässt sich hier bearbeiten.

Diese Domain wird bei Sedo verkauft.
Haben Sie Interesse? Hier klicken!