Workshop Internet-Präsenz
Referenz Cascading Style Sheet
Der Sinn von Cascading Style Sheets beruht darauf, einem Element (HTML-Tag bzw. XML-Tag) bestimmte Attribute (z.B. Farbe, Rahmen etc.) zuzuweisen. Die Auswahl der Elemente erfolgt über Selektoren. Elemente, die in einer Abhängigkeit von anderen Elementen stehen, werden über Kombinatoren spezifiziert.
Selektoren
| Art | Muster | Erläuterung | CSS Level |
| Universal selector | * | Repräsentiert jegliches HTML- bzw. XML-Element. | CSS 2 |
| Type selectors | E | Repräsentiert jedes E-HTML- bzw. -XML-Element, z.B. h1. | CSS 1 |
| Class selectors | E.myClass | Nur für HTML. Repräsentiert jedes E-Element, dessen
"class"-Attribut den Wert "myClass" besitzt. Identisch mit
E[class~="myClass"]. Dabei muss keine Element-Spezifikation erfolgen: .myClass ist identisch mit *[class~="myClass"]. |
CSS 1 |
| ID selectors | E#myId | Repräsentiert jedes E-Element, dessen "id"-Attribut
den Wert "myId" besitzt. Identisch mit E[id~="myId"]. Dabei muss keine Element-Spezifikation erfolgen: #myId ist identisch mit *[id~="myId"]. |
CSS 1 |
Kombinatoren
| Art | Muster | Erläuterung | CSS Level |
| Descendant combinators (Contextual selector) |
E F | Repräsentiert jedes F-Element, das vom E-Element umschlossen wird. h1 {color: red} em {color: red} h1 em {color: blue} |
CSS 1 |
| Child combinators | E > F | Repräsentiert jedes F-Element, das ein Kindelement (child) des E-Elements
ist. ol > li { ... } ul > li { ... } |
CSS 2 |
| E * F | Repräsentiert jedes F-Element, das ein Enkelkindelement (grandchild) bzw. Kindelement in einer tieferen Hierarchieebene des E-Elements ist. | CSS 3 | |
| Direct adjacent combinators | E + F | Repräsentiert jedes F-Element, das unmittelbar dem E-Element folgt. h1 + p {text-indent: 0px} |
CSS 2 |
| Indirect adjacent combinators | E ~ F | Repräsentiert jedes F-Element, das dem E-Element folgt. | CSS 3 |
| Attribute selectors | E[attribute] | Repräsentiert jedes E-Element, bei dem das Attribut "attribute" gesetzt ist, egal, welchen Wert es besitzt. | CSS 2 |
| E[attribute="value"] | Repräsentiert jedes E-Element, dessen Attribut "attribute" genau den Wert "value" besitzt. | CSS 2 | |
| E[attribute~="value"] | Repräsentiert jedes E-Element, dessen Attribut "attribute" einen Wert besitzt, der genau einem der Listenelemente der Werteliste "value" entspricht. Die Listenelemente werden durch Leerraum getrennt. | CSS 2 | |
| E[lang|="en"] | Repräsentiert jedes E-Element, dessen "lang"-Attribut einen Bindestrich-geteilten Wert besitzt, der in unserem Falle (von links) mit "en" beginnt. | CSS 2 |