Einordnung
Grundkonzepte von CSS
Layout mit CSS1
Beispiele und Hinweise
Layouts für Web-Publishing
Trennung von Struktur und Präsentation wird möglich
CSS1, CSS2
Cascading Style Sheets, Level 1 & Level 2
zu HTML
DSSSL
Document Style Semantics and Specification Language
zu SGML
XSL
Extensible Style Language
zu XML
CSS1: W3C Recommendation, Dezember 1996
CSS2: W3C Recommendation, Mai 1998
CSS3: W3C Proposed Recommendation, 1999
Browser wie die von Netscape oder Microsoft implementieren nur ca. 30% bis 80% der Spezifikation korrekt
aber alle Hersteller haben sich zur Unterstützung von CSS1 verpflichtet
CSS Regeln:
ELEMENT { property: value } BODY { background: 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.
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
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 }
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 }
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
Box-Eigenschaften: Füllung (padding), Rahmen (border), Rand (margin)
Box mit was drin
Quelle: W3C, CSS2 Spezifikation
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
xx-small, x-small, small, medium, large, x-large, xx-large
12pt, 18pt, 150%, 0.5em
Schrift: font: style variant weight size/height family
zusammenfassende Deklaration
P { font-family: monospace; font-size: x-large; }
So siehts aus.
font-family
:Times, Helvetica, Verdana, Western, Courier, Zapf Chancery,
serif, sans-serif, monospace, cursive, fantasy.
font-style
:normal, oblique, italic.
font-variant
:normal, Small-Caps.
font-weight
:normal, bold, bolder, lighter, 100, ..., 400, ..., 900.
font-size
:xx-small, x-small, small, medium, large, x-large, xx-large,
120%, 10pt, 12pt, 24pt.
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).
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
Box-Eigenschaften:
margin
,
margin-top
, margin-right
,
margin-bottom
, margin-left
padding
,
border
, border-color
,
border-style
width
, height
Hintergrundbilder:
backround-image: url(...)
backround-repeat
,
backround-attachment
,
backround-position
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 }
Beispiel mit einfachen Hervorhebungen.
Stile aus der W3C Style Gallery
Alle Stile in einem Frameset: Multi
W3C Style Gallery:
http://www.w3.org/StyleSheets/Core/
Genug ist Genug:
by Stephen Traub
Microsoft CSS Gallery:
Entrance
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.
Eine Übersicht über den Grad der Unterstützung von CSS(1) finden Sie zum Beispiel bei http://webreview.com/pub/guides/style/style.html.
keine freie Positionierung
keine volle Autoren-Kontrolle
keine mehrfachen Spalten
keine mehreren Schichten (Layers)
Drucken verbesserungsfähig
keine Sprachausgabe-Layouts
© Universität Mannheim, Rechenzentrum, 1998-2001.
Heinz Kredel Last modified: Fri May 4 22:30:22 MEST 2001