Grundkonzepte von CSS
CSS Regeln:
element { property: value }
body { background-color: white }
Selektoren und Deklarationen
Eigenschaften (properties) und Werte
Regeln in eigener Datei oder in HTML eingebettet
Gruppierung:
h1, h2, h3 { font-family: helvetica }
h4 { color: red;
font-size: 8pt;
}
Kontext:
h1 { color: red }
h1 em { color: purple }
h1 em strong { color: fuchsia }
Vererbung:
body { font-family: helvetica }
h1 { color: red;
font-size: 14pt;
}
z.B. Schriftfamilie wird auf enthaltene Elemente vererbt
Cascadierung:
em { font-style: italic }
p em { font-weight: bolder }
strong em { font-weight: bold }
h1 em { font-style: normal }
CSS ist "Fehlertolerant" wie HTML
Gross-/Kleinschreibung wird ignoriert
Elemente für die kein Stil definiert wird, werden mit dem
Browser Default-Stil dargestellt.
Verknüpfung mit HTML
im link Element:
<link rel="STYLESHEET" type="text/css"
href="http://host/path/file.css">
im style Element:
<style type="text/css">
h3 { color: lime }
</style>
mit @import:
<style type="text/css">
@import url(http://style.org/company.css)
h1 { color: lime }
</style>
als Attribut:
<p style="color: red" > roter Text </p>
dies sollte man nicht machen
Element-Typen
- Block-Elemente
- blockquote, br, dd, dl, div, dt, hi, hr,
html, li, object, ol, p, pre, ul
- Inline-Elemente
- a, em, i, img, span, strong, tt
- Unsichtbare Elemente
- link, meta, style, title
Auswahl mit Bezeichnern
class, mehrfachverwendbare Bezeichner:
h1.slide { color: lime }
p.slide { color: green }
.buch1 { color: yellow; background-color: black }
<h1 class="slide">BlaBla</h1>
<h1 class="buch1">BluBlu</h1>
id, eindeutige Bezeichner:
h1#sp3 { color: aqua }
<h1 id="sp3">BlaBla</h1>
Pseudo-Klassen:
a:link { color: red } /* unvisited */
a:visited { color: blue }
a:active { color: red }
Pseudo-Elemente:
p:first-line { color: fuchsia }
p:first-letter { color: red; background-color: lime }
Sehr wichtige Definition:
h1.slide { color: fuchsia !important }
Algorithmus der Cascadierung
Es wird die anzuwendende Element-Eigenschaft
Kombination gesucht:
Element entsprechend dem Selektor oder Vererbung
entsprechend explizitem Gewicht: !important geht vor
entsprechend dem Ursprung: Autor vor Benutzer vor Browser
entsprechend dem Detail-Level (specificity):
umgekehrt lexikographisch: (IDs, CLASSes, TAGnumber)
li { prop: .1. } --> (0,0,1)
ul li { prop: .2. } --> (0,0,2)
ul ol li { prop: .3. } --> (0,0,3)
li.rum { prop: .4. } --> (0,1,1)
ul li.rum { prop: .5. } --> (0,1,2)
ul.uni li.rum { prop: .6. } --> (0,2,2)
#hpc { prop: .7. } --> (1,0,0)
<li id="hpc" > .7. gewinnt </li>
<li class="rum"> .4., .5. oder .6. gewinnt </li>
<li > .1., .2. oder .3. gewinnt </li>
entsprechend der Reihenfolge
Beispiel: Header von HTML 2.0 in CSS1
h1, h2, h3, h4 { margin-top: 1em; margin-bottom: 1em }
h5, h6 { margin-top: 1em }
h1 { text-align: center }
h1, h2, h4, h6 { font-weight: bold }
h3, h5 { font-style: italic }
h1 { font-size: xx-large }
h2 { font-size: x-large }
h3 { font-size: large }
Algorithmus der Cascadierung in CSS2
Die Punkte 2 und 3 werden zu einem zusammengefasst.
-
entsprechend dem Ursprung: Autor vor Benutzer vor Browser
aber bei Angabe von !important gilt:
Benutzer vor Autor vor Browser
Layout mit CSS1
Schriften
Liegen in verschiedenen Schnitten (Gestalt mit bestimmten Eigenschaften)
vor.
Die Schrift-Eigenschaften sind nicht einfach berechenbar
(vergleiche TeX und Metafont).
Schrift-Familie: font-family
Helvetica, Times, Western, Courier
sans-serif, serif, fantasy, monospace
Schrift-Stil: font-style
normal, italic
Schrift-Variante: font-variant
normal, small-caps
Schrift-Gewicht: font-weight
normal, bold, lighter, 100, ..., 900 (sehr fett)
Schrift-Grösse: font-size
absolut:
xx-small, x-small, small, medium, large, x-large, xx-large
12pt, 18pt, 1.0cm
relativ:
150%, 0.5em (Höhe M), 0.7ex (Höhe x)
Schrift: font: style variant weight size/height family
zusammenfassende Deklaration
Beispiel
p { font-family: monospace;
font-size: x-large;
}
So siehts aus.
- Beispiele
font-family:
Times,
Helvetica,
Verdana,
Western,
Courier,
Zapf Chancery,
serif,
sans-serif,
monospace,
cursive,
fantasy.
- Beispiele
font-style:
normal,
oblique,
italic.
- Beispiele
font-variant:
normal,
Small-Caps.
- Beispiele
font-weight:
normal,
bold,
bolder,
lighter,
100, ...,
400, ...,
900.
- Beispiele
font-size:
xx-small,
x-small,
small,
medium,
large,
x-large,
xx-large,
2.0cm,
14pt,
24pt,
34pt,
120%,
2.0em,
1.5ex.
Farben
RGB-Farbmodell: Rot, Grün, Blau
bei Computer Bildschirmen
CMYK-Farbmodell: Cyan, Magenta, Yellow, Black
bei Farbdruckern
Farben:
black, silver, gray, white, maroon, red, purple, fuchsia,
green, lime, olive, yellow, navy, blue, teal, aqua
rgb(rot,grün,blau),
Werte: 0 <= rot, grün, blau <= 255,
oder 0% <= rot, grün, blau <= 100%
#rgb, oder #rrggbb,
Werte: 0 <= r, g, b <= F
Schriftfarbe: color
Hintergrundfarbe: background-color
Hintergrundbild: background-image
url(http://host/pfad/bild)
p { color: blue }
Schwarz,
Hellgrau,
Grau,
Weiß,
Dunkelrot,
Rot,
Purpur,
helles Purpur,
Grün,
Hellgrün,
dunkles Grün,
Gelb,
Dunkelblau,
Blau,
Blaugrün,
helles Grünblau (Cyan).
weitere Eigenschaften
Box-Eigenschaften: Füllung (padding),
Rahmen (border), Rand (margin)
Box mit was drin
Quelle: W3C, CSS2 Spezifikation
Box-Eigenschaften:
margin,
margin-top, margin-right,
margin-bottom, margin-left
padding,
border, border-color,
border-style
width, height
Text-Eigenschaften:
word-spacing,
white-space: pre, nowrap,
text-decoration: underline, blink,
text-transform: capitalize, uppercase, lowercase
Text-Ausrichtung:
vertical-align, text-align,
text-indent, line-height
Hintergrundbilder:
backround-image: url(...)
backround-repeat,
backround-attachment,
backround-position
Beispiele und Hinweise
Beispiele vom W3C
HTML 2.0 in CSS1:
/* Copyright (c) 1998 W3C */
BODY {
margin: 1em;
font-family: serif;
line-height: 1.1;
background: white;
color: black;
}
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR,
MENU, DIV, DT, DD, ADDRESS, BLOCKQUOTE,
PRE, BR, HR { display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }
B, STRONG { font-weight: bolder } /*relative to the parent*/
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 } /* tight formatting */
LI { margin-left: 3em }
DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }
HR { border-top: solid }
A:link { color: blue } /* unvisited link */
A:visited { color: red } /* visited links */
A:active { color: lime } /* active links */
/* setting the anchor border around IMG elements
requires contextual selectors */
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }
Beispiele für Basis-HTML
Beispiel
mit einfachen Hervorhebungen.
Stile aus der W3C Style Gallery
Beispiele aus dem Web
Hinweise zur effektiven Nutzung von CSS
Alles was mit CSS1 machbar ist, ist in HTML 4.0 "deprecated",
d.h. nicht mehr empfohlen, d.h. zur Nicht-Benutzung empfohlen.
Benutze nur wenige zentrale Stile,
am Besten ein Stil für alle Web-Seiten.
Benutze nur gelinkte Stildateien.
Benutze nur in Ausnahmefällen zusätzliche
spezielle Stildateien.
Lasse den Stil von einem Experten designen.
Propagiere den Stil, biete gute Dokumentation.
Beachte, dass die Web-Seiten auch noch gut aussehen,
falls der Browser (UA) kein CSS kann.
Benutze nicht mehr als zwei Fonts.
Benutze relative Fontgrössen (200%,50%).
Lasse !important für den Leser.
Beschränkungen von CSS1
Eine Übersicht über den Grad der Unterstützung von CSS(1)
finden Sie zum Beispiel bei
http://webreview.com/style/
unter dem Punkt 'Master list'.
keine freie Positionierung
keine volle Autoren-Kontrolle
keine mehrfachen Spalten
keine mehreren Schichten (Layers)
Drucken verbesserungsfähig
keine Sprachausgabe-Layouts
