Einordnung
Grundkonzepte
Layout
Ausblick
Layouts für Web-Publishing
Trennung von Struktur und Präsentation wird möglich
CSS1
Cascading Style Sheets, Level 1
zu HTML
DSSSL
Document Style Semantics and Specification Language
zu SGML
XSL
Extensible Style Language
zu XML
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 }
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" > Text </P>
dies sollte man nicht machen
CLASS:
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:
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 }
entsprechend dem Selektor oder Vererbung
entsprechend dem Gewicht: !important
entsprechend dem Ursprung: Autor, Benutzer, Browser
entsprechend der Detail-Level (specificity)
entsprechend der Reihenfolge
Box-Eigenschaften: Füllung (padding), Rahmen (border), Rand (margin)
Box mit was drin
Schrift: font
zusammenfassende Deklaration
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
P { font-family: monospace; font-size: x-large; }
So siehts aus.
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
, text-decoration
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 }
Moderner Stil: Seite, Style Sheet Inhalt:
/* The W3C Core Styles Copyright (c) 1998 W3C */ H1, H2, H3, H4, H5, H6, TH, DT { font-family: Tahoma, Verdana, 'Myriad Web', Syntax, sans-serif; } P, DIV, UL, DL, DT, DD, PRE, OL, LI, BLOCKQUOTE, ADDRESS { color: black; } A, ADDRESS, BLOCKQUOTE, BODY, CITE, CODE, DD, DEL, DFN, DIV, DL, DT, EM, FORM, H1, H2, H3, H4, H5, H6, IFRAME, IMG, KBD, LI, OBJECT, OL, P, Q, SAMP, SMALL, SPAN, STRONG, SUB, SUP, UL, VAR, APPLET, BIG, CENTER, DIR, FONT, HR, MENU, PRE, ABBR, ACRONYM, BDO, BUTTON, FIELDSET, INS, LABEL, LEGEND { word-spacing: normal; letter-spacing: normal; text-transform: none; text-decoration: none; border-color: #036; border-style: none; } BODY { color: black; background: white; } EM { font-style: normal; font-weight: bold; color: black; } STRONG { font-style: italic; background: white; font-weight: bold; color: black; } EM STRONG, STRONG EM { text-transform: uppercase; font-style: normal; font-weight: bolder; background: white; color: black; } B { font-weight: bold; } I { font-style: italic; } .warning { text-transform: none; font-style: normal; font-weight: bolder; background: yellow; color: black; } DEL { text-decoration: line-through; background: #F66; } INS { text-decoration: none; background: yellow; } VAR, CITE, DFN, .note { font-style: italic; } ADDRESS { font-style: normal; letter-spacing: .1em; } ACRONYM { font-variant: small-caps; letter-spacing: 0.1em; } H1, H2, H3, H4, H5, H6, DT, LEGEND, CAPTION, TH, THEAD, TFOOT { color: #036; background: white; } HR { color: #036; } #colophon { display: none; } CAPTION, COL, COLGROUP, TABLE, TBODY, TD, TR { color: black; text-decoration: none; border-color: black; border-style: none; background: white; } A:link { text-decoration: none; font-weight: bold; color: #F30; background: white; } A:visited { text-decoration: none; font-weight: bold; color: #996; background: white; } A:active { text-decoration: none; font-weight: bold; color: #F30; background: #FF0; } A:hover { text-decoration: none; color: #F30; background: white; } A.offsite { text-decoration: none; font-weight: normal; color: #C30; background: white; } BODY { margin-top: 1.58em; margin-left: 1.58em; margin-right: 1ex; margin-bottom: 1.58em; padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; border-top: 0; border-left: 0; border-bottom: 0; border-right: 0; width: auto; }
Style Sheet für HTML 4.0 in CSS2
Implementiert in Netscape 4.x, IE 4.0
Box-Position:
position:
absolute, relative, static
left:
length
top:
length
height:
length
width:
length
z-index:
integer
visibility:
hidden, visible
Animation mit HTML, CSS, JavaScript und DOM
Dateien: HTML, CSS, JavaScript.
Verdana Font:
@ Microsoft Gallery
Microsoft CSS Gallery:
Entrance
Genug ist Genug:
by Stephen Traub
Schwachstellen von CSS1
keine freie Positionierung
keine volle Autoren-Kontrolle
keine mehrfachen Spalten
keine mehreren Schichten (Layers)
Drucken verbesserungsfähig
keine Sprachausgabe-Layouts
Alles was mit CSS1 machbar ist, ist in HTML 4.0 "deprecated", d.h. nicht mehr empfohlen, zur Nicht-Benutzung empfohlen.
CSS2
XSL
© Universität Mannheim, Rechenzentrum, 1998/1999.