Literatur
Werbung
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 – WS 2017/18 - Teil 4/CSS I
2
Überblick
•
•
•
•
Grundlagen
Selektoren
Klassen und Unterklassen
Vererbung und Prioritäten
Webtechnologien – WS 2017/18 - 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 – WS 2017/18 - 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 – WS 2017/18 - Teil 4/CSS I
nicht vollständig implementiert
http://www.w3.org/TR/selectors/
5
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 – WS 2017/18 - Teil 4/CSS I
7
Gruppen von Tags bzw. Elementen
• Block-Elemente (block level elements):
Der 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 Text bzw. Blöcken; sie werden in der
angegebenen Reihenfolge hintereinander gesetzt.
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 – WS 2017/18 - 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 von Attributen
zulässig.
Bei Angaben direkt am Tag:
<Tag style=" Attribut : Wert ; ..." ...>
Deklaration
Webtechnologien – WS 2017/18 - Teil 4/CSS I
Nicht gut!
Besser in extra
Datei oder wie oben
9
Syntax III - Benutzung
<head>
<title>...</title>
...
<style type="text/css">
... Definitionen ...
</style>
</head>
<body>
<Tag style=“...“ >
...
</Tag>
</body>
</html>
Zu empfehlende
Stelle der Definitionen
Für Tag muss etwas
eingesetzt werden.
Webtechnologien – WS 2017/18 - Teil 4/CSS I
11
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 – WS 2017/18 - Teil 4/CSS I
12
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
Umfassens von verschiedenen Bereichen.
Webtechnologien – WS 2017/18 - Teil 4/CSS I
13
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: green;}
bedeutet, dass die Links innerhalb einer nummerierten Liste grün sind.
Webtechnologien – WS 2017/18 - Teil 4/CSS I
14
Beispiel
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1 i {color: blue;}
li a {color: grey;}
ol li a {color: green;}
</style>
</head>
<body>
<h1>Das ist eine <i>gute</i>Überschrift</h1>
<ul>
<li><a href="www.google.de">google</a></li>
</ul>
<ol>
<li><a href="www.google.de">google</a></li>
</ol>
</body>
Keine gute
Konstruktion,
besser mit <span>
Webtechnologien – WS 2017/18 - Teil 4/CSS I
15
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 – WS 2017/18 - Teil 4/CSS I
16
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 – WS 2017/18 - Teil 4/CSS I
17
Beispiele für Pseudoklassen/Elemente
Interaktion
Absätze
Sprache
Neuer Inhalt
:link
:first-line
:lang
:before
:visited
:first-letter
:after
:focus
:hover
:active
• Die grau hinterlegten Pseudoklassen werden später beschrieben.
• Pseudo-Elemente sind fett dargestellt, während PseudoKlasse in normaler Schrift.
Webtechnologien – WS 2017/18 - Teil 4/CSS I
19
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 – WS 2017/18 - Teil 4/CSS I
20
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 – WS 2017/18 - Teil 4/CSS I
21
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.
Diese werden mit Blank getrennt hintereinander aufgeführt.
Webtechnologien – WS 2017/18 - Teil 4/CSS I
22
ID-Selektoren II - Beispiel
Layer-Definition:
CSS-Definition:
<div id="navigation">
...
</div>
#navigation {
color : brown;
}
<body>
<div id="navigation">Das ist die Navigation<br>
über 2 Zeilen
</div>
</body>
Webtechnologien – WS 2017/18 - Teil 4/CSS I
24
Merkregel
• Klassen dienen der globalen 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 – WS 2017/18 - Teil 4/CSS I
25
<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 – WS 2017/18 - Teil 4/CSS I
26
Selektoren in der Schachtelung
• Analog zu dem Kontext-Selektor lassen sich Attribute
definieren, die in 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 – WS 2017/18 - Teil 4/CSS I
27
Beispiel I
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 – WS 2017/18 - Teil 4/CSS I
28
Beispiel II - 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>
Die vielen Text-Knoten entstehen
durch das Einrücken und durch
die Zeilenenden.
Webtechnologien – WS 2017/18 - Teil 4/CSS I
29
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.
Das Layout an einer Stelle wird durch die an dieser Stelle gültigen Attribute
Bestimmt. Dabei werden beide Hierarchien beachtet.
Webtechnologien – WS 2017/18 - Teil 4/CSS I
30
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
Vererbt wird immer von der Wurzel in die
Blätter.
Webtechnologien – WS 2017/18 - Teil 4/CSS I
31
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 – WS 2017/18 - Teil 4/CSS I
32
Beispiel
<h1> Das ist eine weitere Überschrift </h1>
<p>Hier beginnt der Text des 1.Absatzes
<p>und hier des zweiten Absatzes
<ul>
<li><a href="www.google.de">google</a></li>
<li><a href="www.gooogle.de">gooogle</a></li>
<li><a href="www.goooogle.de">goooogle</a></li>
</ul>
<style type="text/css">
h1 + p {margin-left: -10px;}
li + li {color: red;}
</style>
Die erste Zeile ist um 10
Pixel nach links eingerückt.
Webtechnologien – WS 2017/18 - Teil 4/CSS I
33
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 u.a. 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 – WS 2017/18 - Teil 4/CSS I
34
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 – WS 2017/18 - Teil 4/CSS I
35
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 – WS 2017/18 - Teil 4/CSS I
36
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 die Schriftfarbe immer schwarz sein
soll.
Webtechnologien – WS 2017/18 - Teil 4/CSS I
37
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 – WS 2017/18 - Teil 4/CSS I
38
Orte für CSS – Kopf I
• 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 – WS 2017/18 - Teil 4/CSS I
39
Orte für CSS – Kopf II
<!DOCTYPE html PUBLIC TYP>
<html ... >
<head>
<title>...</title>
<meta ....=.…/>
...
<style type="text/css">
... Definitionen ...
</style>
</head>
<body>
...
</body>
</html>
Webtechnologien – WS 2017/18 - Teil 4/CSS I
40
Orte für CSS - Externe Datei II
• 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 – WS 2017/18 - Teil 4/CSS I
42
@-Anweisungen II
• Das @media-Statement klammert Definitionen für einen Medientyp.
• Damit können CSS-Definitonen für mehrere Medien in einer Datei
zusammengefasst angegeben werden.
Beispiel:
@media print {
body { ... }
h1 { ... }
h2 { ... }
}
@media screen, handheld {
body { ... }
h1 { ... }
h2 { ... }
}
Webtechnologien – WS 2017/18 - Teil 4/CSS I
45
@-Anweisungen III
• Die Mediatypen können auch nach @import angegeben werden.
• Sie stellen dann weitere Bedingungen dar.
Beispiele:
@import url(URL1)
@import url(URL2)
Webtechnologien – WS 2017/18 - Teil 4/CSS I
print;
handheld, screen;
46
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 – WS 2017/18 - Teil 4/CSS I
47
Beispiel für !important
h1 {
font-face: Times;
font-size: 20px;
color: black !important;
}
Webtechnologien – WS 2017/18 - Teil 4/CSS I
49
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 – WS 2017/18 - Teil 4/CSS I
50
Beispiel II - Ergebnis
Webtechnologien – WS 2017/18 - Teil 4/CSS I
51
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 – WS 2017/18 - Teil 4/CSS I
52
Nach dieser Anstrengung etwas Entspannung...
Webtechnologien – WS 2017/18 - Teil 4/CSS I
53
