Eigenschaft: content, Attribut Selektoren, Strukturelle Selektoren, Kombinatoren, Eigenschaft: column

1. Thema: CSS 3
Eigenschaft: content, Attribut Selektoren,
Strukturelle Selektoren, Kombinatoren,
Eigenschaft: column
Referent: Lucas Mußm¨acher
Datum: 2. September 2013
1 / 29

2. Ablauf der Pr¨asentation:
Einf¨uhrung in HTML und CSS
Eigenschaft: content
Attribut Selektoren
Struktur Selektoren
Komplexe Struktur Selektoren
Kombinatoren
Eigenschaft: column
Regeln f¨ur Spaltenumbr¨uche
2 / 29

3. Einf¨uhrung in HTML
Elemente: HTML Elemente definieren die Struktur oder den Aufbau
eines HTML Dokuments.
Attribute: Attribute besitzen Werte und geben damit HTML
Elementen zus¨atzliche Eigenschaften.
Pseudo Elemente: Durch CSS dynamisch erzeuge HTML Elemente, die
im Dokument nicht sichbar sind aber angezeigt werden. 3 / 29

4. Einf¨uhrung in CSS
Eigenschaft: Eigenschaften formatieren HTML Elemente grafisch.
Wert: Werte in CSS bestimmen das Verhalten einer
Eigenschaften.
Selektor: Selektoren w¨ahlen nach bestimmten Regeln HTML
Elemente aus, die formatiert werden sollen.
4 / 29

5. Einf¨uhrung in Selektoren und Kombinatoren
Selektor: Einzelne Selektoren k¨onnen mit Kombinatoren zu
m¨achtigeren Ausdr¨ucken verbunden werden.
Kombinatoren: Kombinatoren erweitern die M¨achtigkeit einfacher
Selektoren. Die vorderen Selektoren und Kombinatoren
bilden dabei Bedingungen, die gelten m¨ussen. Der letzte
Selektor im Ausdruck w¨ahlt das gesuchte Element aus.
5 / 29

6. Einf¨uhrung in Pseudo Elemente
Erl¨auterung: Pseudo Elemente werden durch CSS Selektoren wie z.B
:before und :after erzeugt. Diese werden durch den
Web-Browser anschließend dynamisch generiert.
Eigenschaft: content: Mit dieser Eigenschaft lassen sich die
Pseudoelemente mit Inhalten bef¨ullen.
h2:before / h2:after Dieser Selektor f¨ugt ein Pseudo Element vor bzw.
nach einem bestimmten HTML Element ein.
6 / 29

7. Syntax: Eigenschaft: content
Eigenschaft: content Beschreibung: Diese Eigenschaft f¨ugt Inhalte mit CSS3
dynamisch in ein HTML Dokument ein kann dabei aber
nur auf Pseudo Elemnte wie :before und :after angewen-
det werden.
None Unterbindet das Erstellen des Pseudo Elements mit :be-
fore und :after.
normal Das Pseudo Element wird zwar erstellt, aber mit keinem
Inhalt bef¨ullt.
”<Wert>” F¨ugt den Inhalt <Wert> in das Pseudo Element ein.
uri(”<Pfadangabe>”) F¨ugt eine externe Resource mittels <Pfadangabe> in das
Pseudo Element ein, die der Browser anzeigen kann. z.B
Bilder.
counter(”<Name>”,”<Style>”) F¨ugt einen CSS Counter in das Pseudo Element ein, der
durch einem <Namen> definiert ist, und durch die Option
<Style> formatiert wird.
open-quote, close-quote F¨ugt beginnende oder endende l¨anderspezifische
Anf¨uhrungszeichen in das Pseudo Element ein, die z.B
durch die Eigenschaft qoutes definiert werden k¨onnen.
no-open-quote, no-close-quote F¨ugt keinen Inhalt in das Pseudo Element ein, erh¨oht aber
das Level von verschachtelten Anf¨uhrungszeichen durch
die Eigenschaft qoutes.
attr(”<AttributName>”) F¨ugt den Wert des Attributs <AttributName> des aus-
gew¨ahlten HTML Elements, in das Pseudo Element ein.
7 / 29

8. Beispiele: Eigenschaft: content
8 / 29

9. Beispiele: Eigenschaft: content
9 / 29

10. Syntax: Attribut Selektoren
Attribut Selektoren: Beschreibung: Attribut Selektoren dienen zum Ausw¨ahlen von
HTML Elementen, durch bestimmte Attributnamen oder At-
tributwerte. Der Ausdruck E steht hierbei f¨ur ein HTML Ele-
ment. z.B E = h1, h2, body, a, table, td, th, p usw ..........
Gr¨une Zeilen entsprechen den neuen CSS 3.0 Selektoren.
E[<Name>] W¨ahlt alle Elemente vom Typ E aus, die ein Attribut <Name>
besitzen.
E[<Name>=”<Wert>”] W¨ahlt alle Elemente vom Typ E aus, die ein Attribut <Name>
besitzen und das Attribut dem Wert <Wert> exakt entspricht.
E[<Name>~=”<Wert>”] W¨ahlt alle Elemente vom Typ E aus, die ein Attribut <Name>
besitzen und dessen Attributwerte mindestens einen <Wert>
aufweist, der durch mindestens ein Leerzeichen getrennt ist.
E[<Name> ˆ=”<Wert>”] W¨ahlt alle Elemente vom Typ E aus, die ein Attribut <Name>
besitzen und der Wert des Attributs mit <Wert> beginnt.
E[<Name> $=”<Wert>”] W¨ahlt alle Elemente vom Typ E aus, die ein Attribut <Name>
besitzen und der Wert des Attributs mit <Wert> endet.
E[<Name> *=”<Wert>”] W¨ahlt alle Elemente vom Typ E aus, die ein Attribut <Name>
besitzen und <Wert> ein Teilstring vom Attributwert darstellt.
E[<Name> |=”<Wert>”] W¨ahlt alle Elemente vom Typ E aus, die ein Attribut <Name>
besitzen und dessen Attributwert am Anfang einen <Wert>
aufweist, der durch einen Bindestrich getrennt ist.
10 / 29

11. Beispiele: Attribut Selektoren
Das HTML Element wird von allen CSS Selektoren ausgew¨ahlt.
Selektor und die anschließende Begr¨undung:
a[href] Das HTML Element besitzt ein Attribut href.
a[href=”http://example.com”] Das HTML Element besitzt ein Attribut href mit dem
angegeben Wert ”http://example.com”.
a[title˜=”Link!”] Das HTML Element besitzt ein Attribut title, in dem der Teilstring
”Ein” vorkommt. Der angegebene Wert des Attributs wird von
mindestens einem Leerzeichen getrennt und steht allein.
a[hrefˆ=”http”] Das HTML Element besitzt ein Attribut href, das mit der
angegebenen Zeichenkette ”http” beginnt.
a[title$=”!”] Das HTML Element besitzt ein Attribut title, das mit der angegebenen
Zeichenkette ”!” endet.
a[href*=”example”] Das HTML Element besitzt ein Attribut href, dessen Wert die
angegebene Zeichenkette ”example” enth¨alt.
11 / 29

12. Beispiele: Attribut Selektoren
12 / 29

13. Beispiele: Attribut Selektoren
13 / 29

14. Syntax: Struktur Selektoren:
Struktur Selektoren: Beschreibung: Struktur Selektoren dienen zum Ausw¨ahlen von
einzelnen HTML Elementen, die an bestimmten Stellen einer
HTML Baumstruktur liegen.
:root W¨ahlt die Wurzel des HTML Dokuments aus, i.d.R das HTML
Root Element.
:last-child W¨ahlt ein Element aus, dass das letzte Kindelement eines
Elternelements ist.
E:last-of-type W¨ahlt ein Element vom Typ E aus, dass das letzte Kindele-
ment von einem Elternelement ist.
E:first-of-type W¨ahlt ein Element vom Typ E aus, dass das erste Kindelement
von einem Elternelement ist.
:only-child W¨ahlt alle Elemente aus, dessen Elternelemente nur ein Kin-
delement besitzen.
E:only-of-type W¨ahlt alle Elemente vom Typ E aus, dessen Elternelemente
nur ein Kindelement besitzen.
E:empty W¨ahlt alle Elemente vom Typ E aus, die keine Kindelemente
oder Textknoten besitzen.
:disabled W¨ahlt alle Eingabe Elemente wie z.B <input> aus, dessen
aktueller Zustand auf disabled steht, d.h sie d¨urfen nicht vom
Benutzer genutzt werden.
:enabled W¨ahlt alle Eingabe Elemente wie z.B <input> aus, dessen
aktueller Zustand auf enabled steht, d.h sie k¨onnen vom Be-
nutzer genutzt werden.
14 / 29

15. Beispiele: Struktur Selektoren
15 / 29

16. Syntax: Komplexe Struktur Selektoren:
Komplexe Struktur Selektoren: Beschreibung: Komplexe Struktur Selektoren dienen zu
Ausw¨ahlen von meist mehreren HTML Elementen, die
in einer HTML Baumstruktur liegen. Beispiel: Jede x-te
Zeile einer Tabelle. Der Syntax f¨ur jede zweite Zeile w¨are
hierbei <X>= 2n, jede dritte Zeile <X>= 3n
Syntax des Ausdrucks <X>: Der Wert des Ausrucks <X> errechnet sich mit folgender
Formel: X = An + B, wobei n die Z¨ahler Variable und A,
B einfache festgelege Integer Konstanten sind.
Erlaubte Ausdr¨ucke: <X>= 4n + 1, <X>= 2n, <X>= 6, <X>= n - 2
Berechnung des Ausdrucks: Beispiel: <X>= 3n + 2 und Berechnung: Man setzt f¨ur
die Variable n alle nat¨urlichen Zahlen von 0 bis ∞ ein und
berechnet den Wert <X>.
Beispiel Berechnung: f¨ur n = 0; → x = 3 × 0 + 2 = 2
f¨ur n = 1; → x = 3 × 1 + 2 = 5
f¨ur n = 2; → x = 3 × 2 + 2 = 8
f¨ur n = 3; → x = 3 × 3 + 2 = 11
Selektierte Elemente: Die x-ten Kindelemente 2, 5, 8 und 11 werden nun vom
Selektor erfasst.
Schl¨usselw¨orter: odd ⇔ 2n + 1, even ⇔ 2n
:nth-child(<X>) W¨ahlt die x-ten Kindelemente vom aus, die ein gemein-
sames Elternelement besitzen.
E:nth-of-type(<X>) W¨ahlt die x-ten Kindelemente vom Typ E aus, die ein
gemeinsames Elternelement besitzen.
16 / 29

17. Syntax: Komplexe Struktur Selektoren:
:nth-last-child(<X>) W¨ahlt die x-ten Kindelemente aus, die ein gemeinsames
Elternelement besitzen. Vorsicht: Mit dem x-ten Kindele-
ment meint man beginnend mit dem letzten Element.
E:nth-last-of-type(<X>) W¨ahlt die x-ten Kindelemente vom Typ E aus, die ein
gemeinsames Elternelement besitzen. Vorsicht: Mit dem
x-ten Kindelement meint man beginnend mit dem letzten
Element.
E:target W¨ahlt alle Elemente vom Typ E aus, die durch die aktuelle
URI im Browser (durch das Rautensymbol) referenziert
werden.
E:not(<Y>) W¨ahlt eine Menge von Typ E Elementen aus, die nicht
durch einen einfachen Selektor <Y> erfasst werden. Der
Ausdruck <Y> darf keine Kombinatoren oder komplexe-
re Ausdr¨ucke enthalten. Folgende Selektoren sind erlaubt:
Typ, ID, Klassen, Attribut, Universal und Pseudoklassen
- Selektoren.
17 / 29

18. Beispiele: Komplexe Struktur Selektoren:
18 / 29

19. Beispiele: Komplexe Struktur Selektoren:
19 / 29

20. Beispiele: Komplexe Struktur Selektoren:
Merkhilfe:
20 / 29

21. Syntax: Kombinatoren
Kombinatoren: Die Aus-
dr¨ucke D und F entsprechen
CSS Selektoren.
Beschreibung: Kombinatoren in CSS dienen zum Verbinden
von einfachen Selektoren und erweitern die M¨achtigkeit der
Auswahlm¨oglichkeiten von HTML Elementen in CSS. Kombi-
natoren bringen zus¨atzliche Bedingungen mit, die die Elemen-
te in der HTML Baumstruktur erf¨ullen m¨ussen.
Gr¨une Zeilen entsprechen den neuen CSS 3.0 Selektoren.
D F Dieser Ausdruck w¨ahlt alle Elemente aus, die durch die Selek-
toren <D> und <F> erfasst werden und nimmt anschließend
alle Elemente vom Selektor <F> die Nachkommen von Ele-
menten des Selektors <D> sind.
D > F Dieser Ausdruck w¨ahlt alle Elemente aus, die durch die Selek-
toren <D> und <F> erfasst werden und diejenigen Elemente
vom Selektor <F>, die direkte Kinderelemente von Elemen-
ten des Selektors <D> sind.
D + F Dieser Ausdruck w¨ahlt alle Elemente aus, die durch die Selek-
toren <D> und <F> erfasst werden und diejenigen Elemen-
te vom Selektor <F>, die direkt folgende Zwillingselemente
von Elementen des Selektors <D> sind. Die Elternelemente
m¨ussen jeweils gleich sein.
D ˜ F Dieser Ausdruck w¨ahlt alle Elemente aus, die durch die Selek-
toren <D> und <F> erfasst werden und diejenigen Elemente
vom Selektor <F>, die irgendwann folgende Zwillingselemen-
te von Elementen des Selektors <D> sind. Die Elternelemente
m¨ussen jeweils gleich sein.
21 / 29

22. Beispiele: Kombinatoren:
22 / 29

23. Syntax: Eigenschaft: column
Eigenschaft: column Beschreibung: Mit dieser Eigenschaft k¨onnen komplexe
mehrspaltige Layouts in CSS einfach realisiert werden.
column: <Breite><Anzahl> Mit dieser Eigenschaft kann z.B die Breite und die Anzahl
der Spalten im Layout definiert werden.
column-width: <Breite> Diese Eigenschaft dient zum Festlegen der Breite der ein-
zelnen Spalten.
column-count: <Anzahl> Diese Eigenschaft dient zum Festlegen der Anzahl der ein-
zelnen Spalten, falls keine feste Spalten H¨ohe definiert wur-
de.
column-fill: <auto / balance> Diese Eigenschaft dient zum festlegen, wie die Spalten
bef¨ullt werden sollen, falls eine feste H¨ohe vorher defi-
niert wurde. Standardm¨aßig (auto) werden die Spalten von
Links nach Rechts ausgef¨ullt. Sie k¨onnen auch (balance)
gleichm¨aßig mit Inhalten bef¨ullt werden.
23 / 29

24. Syntax: Eigenschaft: column
column-gap: <Gr¨oße> Diese Eigenschaft dient zum festlegen des Abstand
zwischen den einzelnen Spalten.
column-rule:
<Breite><Farbe><Design>
Diese Eigenschaft dient zum Festlegen der Breite,
der Farbe und dem Design Typs der Spaltentrenn-
linien.
column-rule-width: <Breite> Diese Eigenschaft dient zum Festlegen der Breite
der Spaltentrennlinien.
column-rule-color: <Farbe> Diese Eigenschaft dient zum Festlegen der Farbe
der Spaltentrennlinien.
column-rule-style: <Design> Diese Eigenschaft dient zum Festlegen des Design
Typs der Spaltentrennlinien.
24 / 29

25. Beispiele: Eigenschaft: column
25 / 29

26. Syntax: Regeln f¨ur Spaltenumbr¨uche
Aufgespannte Elemente
und Regeln f¨ur Spaltenum-
br¨uche.
Beschreibung: Mit diesen Eigenschaften k¨onnen z.B Elemen-
te wie z.B ¨Uberschriften ¨uber mehrere Spalten automatisch
¨uberstreckt werden. Zus¨atzlich kann f¨ur jedes einzelne Ele-
ment festgelegt werden, in welcher Situation ein Spaltenum-
bruch durch den Browser durchgef¨uhrt werden soll.
break-before: <Verhalten> Diese Eigenschaft definiert das Verhalten eines Spalten Um-
bruchs durch den Browser, vor dem Element.
break-after: <Verhalten> Diese Eigenschaft definiert das Verhalten eines Spalten Um-
bruchs durch den Browser, nach dem Element.
break-inside: <Verhalten> Diese Eigenschaft definiert das Verhalten eines Spalten Um-
bruchs durch den Browser, falls der Spaltenumbruch innerhalb
des Elements durchgef¨uhrt werden m¨usste.
Der Wert: <Verhalten> always: Erzwingt den Spalten Umbruch, avoid: Vermeidet
einen Spalten Umbruch, left: Setzt so viele Spaltenumbr¨uche
bis eine linke freie Spalte entsteht, right: Setzt so viele Spal-
tenumbr¨uche bis eine rechte freie Spalte entsteht, page: Er-
zwingt einen Seiten Umbruch, column: Erzwingt einen Spal-
ten Umbruch, avoid-page: Vermeidet einen Seiten Umbruch,
avoid-column: Vermeidet einen Spalten Umbruch.
column-span: <all / inte-
ger>
Diese Eigenschaft gibt an, wie viele Spalten das Element
¨uberspannen soll, falls dies nicht in die Spalte hineinpasst.
26 / 29

27. Beispiele: Regeln f¨ur Spaltenumbr¨uche
27 / 29

28. Beispiele: Regeln f¨ur Spaltenumbr¨uche
28 / 29

29. Beispiele: Regeln f¨ur Spaltenumbr¨uche
29 / 29