Webtechnologien Teil 4: Cascading Style Sheets (CSS)

Webtechnologien
Teil 4: Cascading Style Sheets (CSS) - Teil I
Webtechnologien – SS 2017 - Teil 4/CSS I
15.04.17 1
Literatur
[4-1]
Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011
[4-2]
Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003
[4-3]
Münz, Stefan: <Professionelle Websites>. Addison-Wesley, 2005
[4-4]
Lubkowitz, Mark: Webseiten programmieren und gestalten. Galileo
Computing, 2003
[4-5]
Seibert, Björn; Hoffmann, Manuela: Professionelles Webdesign mit
(X)HTML und CSS. 2. Auflage, Galileo Computing, 2008
[4-6] http://de.wikipedia.org/wiki/Cascading_Style_Sheets
[4-7] http://www.edition-w3.de/TR/1998/REC-CSS2-19980512/
[4-8] http://caniuse.com/
[4-9] http://de.wikipedia.org/wiki/Sass_(Stylesheet-Sprache)
[4-10] http://de.wikipedia.org/wiki/LESS_(Stylesheet-Sprache)
[4-11] http://de.wikipedia.org/wiki/Stylus_(Stylesheet-Sprache)
Webtechnologien – SS 2017 - Teil 4/CSS I
2
Überblick
•
•
•
•
Grundlagen
Selektoren
Klassen und Unterklassen
Vererbung und Prioritäten
Webtechnologien – SS 2017 - Teil 4/CSS I
3
Cascading Style Sheets
• Cascading Style Sheets (CSS) = Sprache zum Definieren des
Layouts von Auszeichnungen
• Mit CSS wird die Präsentation von Auszeichnungen festgelegt.
• Das Ziel von CSS besteht in der Möglichkeit Layout-Attribute von
Tags an einer zentralen Stelle, aber auch direkt bei den
betreffenden Tags zu setzen.
Webtechnologien – SS 2017 - Teil 4/CSS I
4
Geschichte I
Version
Erscheinung
Erläuterungen
CSS Level 1
1996
Umfang: ca. 76 Seiten
Themen: Textgestaltung und Farben
http://www.w3.org/TR/CSS1/
CSS Level 2
1998
Umfang: ca. 340 Seiten
Themen: Erweiterung von CSS1,
Ausrichtung auf Medien
http://www.w3.org/TR/CSS2/
CSS Level 2.1
2011
Aktuelle Version
CSS Level 3
Webtechnologien – SS 2017 - Teil 4/CSS I
nicht vollständig implementiert
http://www.w3.org/TR/selectors/
5
Geschichte II - Bemerkungen
• Da CSS nachträglich in HTML eingebaut wurde, gibt es starke
syntaktische Inkonsistenzen. Syntaktisch gesehen ist CSS eher ein
aufgesetzter Fremdkörper als etwas Integriertes.
• Einiges bei CSS ist nur vor dem geschichtlichen Hintergrund des
Webs zu verstehen.
Bei CSS kommt es auf Groß-/Kleinschreibung an
Aber: Dies ist bei CSS nicht immer korrekt implementiert.
Die aktuellen Browser implementieren CSS1 gut, CSS2
mehr oder weniger korrekt und CSS3 nur teilweise.
Webtechnologien – SS 2017 - Teil 4/CSS I
6
Prüfprogramme und weitere Informationen
• Kompatibilitätslisten:
http://www.css4you.de/browsercomp.html
http://www.webstandards.org
http://www.quirksmode.org
• Prüfprogramme:
http://htmlhelp.com/tools/csscheck/
http://htmlhelp.com/tools/csscheck/upload.html
http://jigsaw.w3.org/css-validator/
• Vertiefung:
http://csszengarden.com
http://www.mezzoblue.com/css/cribsheet
Webtechnologien – SS 2017 - Teil 4/CSS I
7
Gruppen von Tags bzw. Elementen
• Block-Elemente (block level elements):
Text beginnt immer in einer neuen Zeile
Diese Elemente werden in Rechtecken (Boxen) präsentiert.
Beispiele: h1..h6, p, div, ul, ol
• Eingebundene Elemente (inline elements):
Elemente sind Teile von Blöcken
Beispiele: a, span, br, img
• Listenelemente
Dies sind Blockelemente mit damit verbundenen weiteren
Bereichen (der Spiegelpunkt oder die Nummer)
Hier gibt es nur ein Tag: li
• Element =
– Aus HTML-Sicht: Tag mit seinen Eigenschaften
– Aus Präsentationssicht: Ein Bereich des dargestellten Dokuments
Webtechnologien – SS 2017 - Teil 4/CSS I
8
Syntax I
Selector { Attribut: Wert; ... }
Deklaration
Als Selektoren können Tagnamen, Identifier oder Ausdrücke
verwendet werden.
Den selektierten Elementen werden die angegebenen Attribute
zugeordnet. Es sind mit Semikola aufgebaute Listen zulässig.
Bei Angaben direkt am Tag:
<Tag style=" Attribut : Wert ; ..." ...>
Deklaration
Webtechnologien – SS 2017 - Teil 4/CSS I
Nicht gut!
Besser in extra
Datei.
9
Syntax II
• Die Festlegungen beziehen sich
– auf ein neues später definierbares Element,
– auf ein bestehendes Element, das verändert werden soll,
– auf mehrere bestehende Elemente, die auf dieselbe Weise
verändert werden sollen.
Daher wird von Selektoren (to select: auswählen) gesprochen.
In gewisser Weise erfolgt dies analog zum SQL-SELECTStatement.
• Eine Ausnahme bilden einige Kommandos, die mit einem
Klammeraffen ("@") eingeleitet werden; diese gehorchen nicht
der oben angegebenen Syntax.
• CSS-Kommentare haben nur die Form: /* .... */
•
Webtechnologien – SS 2017 - Teil 4/CSS I
10
Element-Selektoren
Tag { Att1: Val1; Att2: Val2; ... }
Tag1, Tag2, Tag3, ... { Att1: Val1; Att2: Val2; ... }
Die Liste der Attribute Attx:Valx wird dem einzelnen Tag oder der
Liste der Tags Tag1, Tag2, Tag3, ... zugeordnet.
Beispiele:
h1 {color: black;}
h2 {color: black;}
h3 {color: black;}
h1, h2, h3 {color: black;}
Webtechnologien – SS 2017 - Teil 4/CSS I
11
Kontextabhängige Selektoren I
Tag1 Tag2 { Att1: Val1; Att2: Val2; ... }
Im Bereich des Wirkens (Kontext) von Tag1 erhält Tag2 die angegebenen
Attribute.
Tag1 Tag2 Tag3 { Att1: Val1; Att2: Val2; ... }
Im Bereich des Kontext von Tag1 geschachtelt mit Tag2 erhält Tag3 die
angegebenen Attribute.
Tag1 Tag2 Tag3 ... { Att1: Val1; Att2: Val2; ... }
Verallgemeinerung auf beliebig tief geschachtelte Kontexte
Der Kontext ist die direkte oder indirekte Schachtelung im Sinne eines
geschachtelten Umfassens.
Webtechnologien – SS 2017 - Teil 4/CSS I
12
Kontextabhängige Selektoren II - Beispiele
h1 {color: black;}
i {color: red;}
bedeutet, dass die Schriftfarbe jeder h1-Überschrift schwarz ist und
dass alle kursiven Auszeichnungen rot sind,
h1 i {color: blue;}
bedeutet, dass die kursiven Teile innerhalb einer h1-Überschrift blau sind.
li a {color: grey;}
bedeutet, dass die Links innerhalb einer Liste grau sind.
ol li a {color: grey;}
bedeutet, dass die Links innerhalb einer verschachtelten Liste grau sind.
Webtechnologien – SS 2017 - Teil 4/CSS I
13
Klassen I
• Jedes Tag wird als Menge von veränderbaren Attributen
aufgefasst.
• Klasse = Menge der veränderbaren Attribute
• Neue Klassen werden dadurch gebildet, dass von einer
bestehenden Klasse (Tag) die Attribute übernommen (vererbt)
werden, bis auf die, die neue Werte erhalten.
• Vererbung = Übernahme und Ersetzen von Attributen
• Aber: Nicht alle Attribute werden vererbt(!)
p {color: red;}
Die Attribute von <p> werden übernommen und gleichzeitig das Attribut
der Schriftfarbe auf rot gesetzt. Das sind dann die Attribute des neuen <p>.
Webtechnologien – SS 2017 - Teil 4/CSS I
14
Klassen II
• Pseudo-Klasse = Klasse, die nur unter bestimmten Bedingungen
zur Laufzeit (Zustand) angewendet wird oder die sich auf einen
Block von Informationen bezieht
Beispiel: Anker-Pseudo-Klasse
a:link {color: red;}
Einem A-Tag können damit abhängig vom Zustand (link, visited
etc.) unterschiedliche Attribute zugeordnet werden.
Dieses Beispiel bezieht sich auf den Zustand.
• Die Pseudo-Klasse, die in der Praxis am häufigsten benutzt wird,
sind die Pseudoklassen für Interaktionen,
:link, :active etc. sind Beispiele dafür.
Webtechnologien – SS 2017 - Teil 4/CSS I
15
Klassen III
• Pseudo-Element = Auswahl (Selector) eines Textteiles oder
Veranlassung einer Änderung des Textes
Beispiele:
:first-line
:first-letter
für die erste Zeile eines Absatzes
für den ersten Buchstaben einer Zeile
• In HTML fehlen dafür die Ausdrucksmöglichkeiten, so dass mit
dieser syntaktischen Konstruktion Abhilfe geschafft wurde.
Webtechnologien – SS 2017 - Teil 4/CSS I
16
Übersicht Pseudoklassen/Elemente (Auszug)
Interaktion
Absätze
Sprache
Neuer Inhalt
:link
:first-line
:lang
:before
:visited
:first-letter
:after
:focus
:hover
:active
• Die markierten Pseudoklassen werden später beschrieben.
• Die Pseudo-Elemente sind fett dargestellt.
• Die Pseudo-Klasse in normaler Schrift.
Webtechnologien – SS 2017 - Teil 4/CSS I
17
Klassen-Selektoren I
Es können auch eigene Klassen definiert werden, die aber
nur als Attribute und nicht als eigenständige Tags innerhalb von
<...> verwendet werden:
.Klasse { Att1: Val1; Att2: Val2; ... }
Klassendefinitionen beginnen immer mit einem Punkt und definieren
den Bezeichner Klasse mit seinen Attributen.
Beispiel:
.Strong {color: red; font-weight: bold; }
...
<p class="Strong"> ... Text ... </p>
Nur mit dem Attribut class lassen sich diese Klassen benutzen.
Webtechnologien – SS 2017 - Teil 4/CSS I
18
Klassen-Selektoren II - Unterklassen
Basierend auf einer Klasse lassen sich Unterklassen definieren,
wobei die Attribute der Oberklasse vererbt sowie die angegebenen
Attribute gesetzt werden. Dies geht nur einstufig.
Tag.Klasse { Att1: Val1; Att2: Val2; ... }
Unterklassendefinitionen beginnen mit einem Tag gefolgt von einem
Punkt und definieren den Namen Klasse mit den Attributen.
Beispiel:
p.definition {color: blue; font-weight: bold; }
...
<p class="definition"> ... Text ... </p>
Mit dem Attribut class lassen sich die Unterklassen benutzen.
Webtechnologien – SS 2017 - Teil 4/CSS I
19
Klassen-Selektoren III – Mehrere Klassen
Layer-Definition:
CSS-Definitionen:
<div class="navigation important">
...
</div>
.navigation {
border : 1px;
color : brown;
}
.important {
font-weight : bold;
}
Es können auch mehrere Klassen gleichzeitig benutzt werden.
Webtechnologien – SS 2017 - Teil 4/CSS I
20
ID-Selektoren I
ID-Selektoren beginnen immer mit einem #:
#id { Att1: Val1; Att2: Val2; ... }
ID-Selektoren haben eine globale Gültigkeit und
benennen eindeutig bestimmte Elemente.
IDs werden typischerweise in Klammerkonstrukten (<div>, <span>)
benutzt.
Beispiel:
#wichtig {color: red; font-weight: bold; }
...
<div id="wichtig"> ... Text ... </div>
Mit dem Attribut id lassen sich diese Identifier benutzen.
Webtechnologien – SS 2017 - Teil 4/CSS I
21
ID-Selektoren II - Beispiel
Layer-Definition:
CSS-Definition:
<div id=“navigation“>
...
</div>
div#navigation {
border : 1px;
color : brown;
}
Webtechnologien – SS 2017 - Teil 4/CSS I
22
Merkregel
• Klassen dienen der systematischen Festlegung des Layouts an
mehreren Stellen.
• Identifier (id) dienen dazu, das Layout an einer einzigen Stelle
gezielt zu definieren (bei <div> üblich).
• Merkregel:
Wenn Layout-Attribute mehrfach verwendet werden oder wenn
sie systematisch für die Seite bzw. Site sind, dann verwende
Klassen bzw. Unterklassen.
Wenn Layout-Attribute sich auf einen einzigen, bestimmten
Bereich beziehen, dann verwende Identifier (IDs).
Webtechnologien – SS 2017 - Teil 4/CSS I
23
<div> und <span>
• <div> ... </div> definiert ein Rechteck innerhalb der Seite und
ist daher ein Blockelement.
• <span> ... </span> definiert einen Teilbereich innerhalb eines
Texts und ist daher ein Inline-Element.
• Alle Attribute an <div> und <span> werden in den
eingeklammerten Bereich hinein vererbt.
• Ohne Attribute haben <div> und <span> keine Bedeutung,
außer dass sie einen eigenen geschachtelten Teilbaum bilden.
• Daher sollten <div>/<span>-Bereiche mit folgenden
Konstrukten verwendet werden:
<div id="Name"
> … </div>
<div class="Name"> … </div>
Text… <span style="CSS-Sachen"> Text… </span> Text…
Webtechnologien – SS 2017 - Teil 4/CSS I
24
Selektoren in der Schachtelung
• Analog zu dem Kontext-Selektor lassen sich Attribute
definieren, die nur bei einer bestimmten Schachtelung gelten
sollen.
• Für den Operator > gilt: Es werden alle Tags Tag2 ausgewählt,
die direkt von Tag1 erben bzw. ein direktes Kind von Tag1
sind.
Tag1 > Tag2 { Att1: Val1; Att2: Val2; ... }
Die Attributliste gilt für Tag2 nur dann, wenn es ein direktes
Kind in der Benutzung von Tag1 ist, aber kein Enkel etc.
Webtechnologien – SS 2017 - Teil 4/CSS I
25
Beispiel
body p { color: black; }
body>p { color: blue; }
...
<body>
<p>Dies ist der erste Absatz. Er ist ein Kind von body.</p>
<div>
<p>Dieser Absatz ein Kind von div</p>
</div>
<p>Dieser Absatz ist wieder ein direktes Kind von body.</p>
Ergibt
Die direkten Kinder haben eine blaue
Schriftfarbe, das Kind von
div (ein indirektes Kind von body)
hat eine schwarze Schriftfarbe.
Webtechnologien – SS 2017 - Teil 4/CSS I
26
Visualisierung des Baums
Erstellt mit
http://bioub.github.io/d3.DOMVisualizer/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body p { color: black; }
body > p { color: blue; }
</style>
</head>
<body>
<p>Dies ist der erste Absatz. Er ist ein Kind von body.</p>
<div>
<p>Dieser Absatz ein Kind von div</p>
</div>
<p>Dieser Absatz ist wieder ein direktes Kind von body.</p>
</body>
</html>
Webtechnologien – SS 2017 - Teil 4/CSS I
Die viele Text-Knoten entstehen
durch das Einrücken und durch
die Zeilenenden.
27
Zwei Vererbungshierarchien I
Es gibt zwei Vererbungshierarchien zur Bestimmung der Attribute:
1. Vererbung bei der Definition
Diese erfolgt durch Angabe der Vererbung in der Definition
Beispiel: p.definition {....}
2. Vererbung durch Schachtelung
Durch Schachtelung der Wirkungsbereiche werden Attribute vererbt.
Die Ausgabe am Ende wird durch die gültigen Attribute bestimmt.
Diese entstehen durch die Mischung beider Hierarchien.
Webtechnologien – SS 2017 - Teil 4/CSS I
28
Zwei Vererbungshierarchien II
html
Jedes HTML-Dokument wird intern als
Baum realisiert. Dieser Baum spiegelt die
geschachtelte Benutzung der Tags wieder.
head
Dies hier ist der verkürzte Baum des letzten
Beispiels.
body
p
div
p
p
Webtechnologien – SS 2017 - Teil 4/CSS I
Vererbt wird immer von der Wurzel in die
Blätter.
29
Folge-Element-Selektoren (Nachbar-Selektion)
Wenn direkt benachbarte Geschwister-Elemente behandelt werden sollen,
ist der Folge-Element-Selektor + nötig:
Tag1 + Tag2 { Att1: Val1; Att2: Val2; ... }
Die Attributliste gilt für Tag2 nur dann, wenn es ein SchwesterElement in der Benutzung von Tag1 ist und lexikalisch direkt als
nächstes hinter Tag1 vorkommt.
Beispiel:
h1 + p {margin-left: -10px;}
Der Absatz unmittelbar hinter der Überschrift h1 wird um 10 Pixel nach
links eingerückt.
li + li {color: red;}
Das 2., 3. etc. Element einer Liste ist rot.
Webtechnologien – SS 2017 - Teil 4/CSS I
30
Selektion anhand von Attributen I
Wenn etwas für alle Tags, die bestimmte Attribute haben, geändert
werden soll, dann stehen für die Auswahl folgende Selektoren
zur Verfügung, z.B.:
[Attribut]:
Selektiert alle Tags mit dem Attribut Attribut
z. B. a[href] wählt alle Links, aber keine Anker
[Attribut=Val]:
Selektiert alle Tags mit dem Attributwert Att=Val
[Attribut~=Val]:
Selektiert alle Tags mit dem Attributwert Att=Val, wobei Val
als einziges Wort im Attributwert vorkommt
[Attribut|=Val]:
Selektiert alle Tags mit dem Attributwert Att=Val, wobei Val
einen Bindestrich hat z. B. in lang="en-US"
[Attribut^=Val]:
Selektiert alle Tags mit dem Attributwert, der mit Val beginnt
Webtechnologien – SS 2017 - Teil 4/CSS I
31
Selektion anhand von Attributen II - Beispiel
a[href^="mailto:"]:before {content: "\2709";}
•
•
•
Bei jedem Anker (<a>-Element) wird vorher das Zeichen \2709
eingefügt, falls die href-Adresse mit "mailto:" beginnt.
Das Zeichen \2709 ist ein kleines Briefsymbol.
Die Funktionsweise wird später an einem Beispiel gezeigt.
Siehe: http://www.w3.org/TR/css3-selectors/#attribute-substrings
Webtechnologien – SS 2017 - Teil 4/CSS I
32
Selektion anhand von Attributen III
Für Tabellen gibt es Sonderformen:
Konstrukt
Erläuterung
table:row[Reihe]
Es werden die Attribute der Reihe mit der
Nummer Reihe zugewiesen
table:column[Spalte]
Es werden die Attribute der Spalte mit der
Nummer Spalte zugewiesen
table:row[%NR]
Die Attribute werden jeder NR-ten Reihe
zugewiesen; geht auch für Spalten
table:row[%NR+Begin]
Die Attribute werden jeder NR-ten ab der
Begin-ten Reihe zugewiesen;
gilt auch für Spalten
Webtechnologien – SS 2017 - Teil 4/CSS I
33
Universal-Selektor
Um einen beliebigen Kontext anzugeben, wird der Stern benutzt: "*":
Tag1 * Tag2 { Att1: Val1; Att2: Val2; ... }
Wenn zwischen Tag1 und Tag2 ein einziges beliebiges Element steht,
dann wird die Attribut-Liste auf Tag2 angewendet.
Der Stern kann auch als Platzhalter allein verwendet werden, z.B. in
"* {color: black;}". Dies bedeutet, dass jede Schriftfarbe schwarz sein
soll.
Webtechnologien – SS 2017 - Teil 4/CSS I
34
Beispiel für Universal-Selektor
body p { color: blue; }
body * p {color: red; }
...
<body>
<p>Farbe: blue</p>
<div>
<p> Farbe: red </p>
</div>
<p>Farbe: blue </p>
Ergibt
Webtechnologien – SS 2017 - Teil 4/CSS I
35
Orte für CSS - Kopf
• Die Style-Angaben können innerhalb des Kopfs stehen;
sie gelten dann für die gesamte Datei:
<head>
...
<style type="text/css">
... Definitionen ...
</style>
</head>
Webtechnologien – SS 2017 - Teil 4/CSS I
36
Globale Struktur einer Seite - Zusammenfassung
<!DOCTYPE html PUBLIC TYP>
<html ... >
<head>
<title>...</title>
<meta ....=.…/>
...
<style type="text/css">
... Definitionen ...
</style>
</head>
<body>
...
</body>
</html>
Webtechnologien – SS 2017 - Teil 4/CSS I
37
Orte für CSS - Externe Datei I
•
<head>
...
<link rel="stylesheet" type="text/css" href=“URL“>
...
</head>
• Die CSS-Datei enthält die CSS-Definitionen wie sie wie im Kopf
(siehe oben) festgelegt wären.
Webtechnologien – SS 2017 - Teil 4/CSS I
38
Orte für CSS - Externe Datei II
Alternative CSS-Definitionen:
Persistent (wird immer angewendet):
<link rel="stylesheet" type="text/css" href=“URL“ />
Bevorzugt:
<link rel="stylesheet" type="text/css" href=“URL“ title=“Titel“/>
Alternativ:
<link rel="alternate stylesheet" type="text/css" href=“URL“ title=“Titel“>
• Der Benutzer hat die Wahl zwischen den CSS-Definitionen, die
alle für dasselbe Medium gelten.
• Anwendungen:
– Kontrastverstärkung
– Varianten für Smartphones oder Tabletts
Webtechnologien – SS 2017 - Teil 4/CSS I
39
Orte für CSS - Externe Datei III
• Medienspezifische CSS-Definitionen werden durch das Attribut
media festgelegt.
• Beispiele:
Vorlesegeräte
<link rel="stylesheet" type="text/css" media="aural" href=“URL“>
Drucker
<link rel="stylesheet" type="text/css" media="printer" href=“URL“>
Beamer
<link rel="stylesheet" type="text/css" media="projection" href=“URL“>
Webtechnologien – SS 2017 - Teil 4/CSS I
40
Orte für CSS - Externe Datei IV
Möglichkeiten für Geräte
aural
Vorlesegeräte
braille
Blindenschriftausgabegeräte
embossed
Blindenschriftdrucker
handheld
Smartphones, Tablets
print
Drucker
projection
Beamer
screen
Bildschirme, LCD
Webtechnologien – SS 2017 - Teil 4/CSS I
41
Orte für CSS - Direkt am Tag
Änderungen des Stils lassen sich auch im Tag durch
das Attribut style angeben:
<Tag style="Definitionen ..." >
Beispiel:
<p style="color: black; background-color: yellow;" ...>
Die Änderungen gelten nur für dieses Element.
Zum Ausprobieren der Wirkung ist diese Möglichkeit gut,
aber ansonsten nicht zu empfehlen.
Webtechnologien – SS 2017 - Teil 4/CSS I
42
@-Anweisungen I
• Innerhalb von <style> und </style> können noch besondere
Anweisungen, eingeleitet mit @, stehen.
• Beispiel Einbinden externer Dateien:
<html><head>
...
<style type="text/css">
@import url(URL);
...
</style>
</head>
<body>
...
</body></html>
Wenn die Import-Anweisungen benutzt werden, müssen sie
immer zum Beginn eines Stylesheets stehen.
Webtechnologien – SS 2017 - Teil 4/CSS I
43
@-Anweisungen II
• Das @media-Statement klammert Definitionen für einen
Medientyp.
Beispiel:
@media print {
body { ... }
h1 { ... }
h2 { ... }
}
@media screen, handheld {
body { ... }
h1 { ... }
h2 { ... }
}
Webtechnologien – SS 2017 - Teil 4/CSS I
44
@-Anweisungen III
• Die Mediatypen können auch nach @import angegeben werden.
Beispiele:
@import url(URL1)
@import url(URL2)
Webtechnologien – SS 2017 - Teil 4/CSS I
print;
handheld, screen;
45
Kaskaden und Vererbung I
Priorisierung bei Stylesheets bei Widersprüchen
• Spezielle sind höherwertiger als allgemeine Definitionen.
• Weiter hinten definierte Festlegungen derselben Priorität sind
höherwertiger als früher definierte.
• Mit important gekennzeichnete haben immer höhere Priorität.
Reihenfolge der Interpretation:
1. Vom Browser definierte Stylesheets
2. Vom Surfer definierte Stylesheets
3. In der Seite definierte Stylesheets
Siehe auch: http://de.selfhtml.org/css/formate/kaskade.htm
Webtechnologien – SS 2017 - Teil 4/CSS I
46
Kaskaden und Vererbung II - Wiederholung
Es gibt zwei Vererbungshierarchien zur Bestimmung der
Menge der Attribute:
1. Vererbung bei der Definition
Diese erfolgt durch Angabe der Vererbung in der Definition
Beispiel: p.definition {.…}
sowie durch das oben angegebene Verfahren
2. Vererbung durch Schachtelung der Tags/Elemente
Durch Schachtelung der Wirkungsbereiche werden Attribute
vererbt.
Webtechnologien – SS 2017 - Teil 4/CSS I
47
Beispiel für !important
h1 {
font-face: Times;
font-size: 20px;
color: black !important;
}
Webtechnologien – SS 2017 - Teil 4/CSS I
48
Beispiel I
<!DOCTYPE html PUBLIC ... ... <html>
<head ... ... >
<title>...</title>
<style type="text/css">
#Ebene1 {
position: absolute;
top: 80px; left: 160px;
width: 200px; height: 100px;
border: 2px dashed olive;
display: block }
a[href^="mailto:"]:before {content: "\2709";}
</style>
</head>
<body>
<div id="Ebene1">Das ist der Inhalt</div>
<p> <a href="http://www.google.de"> google </a>
<p> <a href="mailto:[email protected]"> Messer </a>
</body> </html>
Webtechnologien – SS 2017 - Teil 4/CSS I
49
Beispiel II - Ergebnis
Webtechnologien – SS 2017 - Teil 4/CSS I
50
Beispiel III – Attribute für <div>
Attribut
Erläuterung
position: absolute;
Das Rechteck soll an einer
bestimmten Stelle innerhalb des
umfassenden Rahmens sein
top: 80px; left: 160px;
Koordinaten der linken oberen Ecke
width: 200px; height: 100px;
Breite und Höhe
border: 2px dashed olive;
Art des Rahmens
Webtechnologien – SS 2017 - Teil 4/CSS I
51
Nach dieser Anstrengung etwas Entspannung...
Webtechnologien – SS 2017 - Teil 4/CSS I
52