CSS Level 2
Ausblick
Positionierung
Medientypen: Sprache, Drucker, Folien
Schriftauswahl, Download
Auto-Numerierung
Tabellen
Beispiel: Style Sheet für HTML 4.0 in CSS2
Ab Netscape 4.x, IE 4.0, 5.0 implementiert
CSS-P = CSS1 + Positionierung
Box-Position:
position:
static, relative, absolute, fixed
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.
screen:
Bildschirmausgabe
print:
Druckausgabe
aural:
Sprachausgabe
braille:
Blindenschrift
embossed:
Blindenschrift-Drucker
handheld:
Mobilfunk, Handy
projection:
Projektor, Video-Beamer
tty:
Text-Bildschirm
tv:
TV-Bildschirm
Beispiel:
@media print { body { font-size: 10pt } } @media screen { body { font-size: 12pt } }
continous oder paged
visual oder aural oder tactile
grid oder bitmap
interactive oder static
p[align] { font-style: italic; } p[align="center"] { font-style: italic; align: center; } p[align~="center"] { font-style: italic; align: center; }
p > em { font-style: italic; } h1 + h2 { margin-top: -5mm; }
p:lang(de) { font-family: sans-serif; } p:lang(fr) { font-family: serif; }
h1:before { content: counter(kapitel) ". "; } p:after { content: " © BWL 1999"; }
h3 { display: run-in; } dt { display: compact; } tr { display: table-row; }
img { float: left; } img.x { float: right; } p { clear: left; }
font-stretch:
Dehnungsverhalten
normal, wider, narrower, condensed, expanded
font-size-adjust:
Angleichung der Zeichengrössen
zwischen verschiedenen Fonts,
Aspekt-Wert
@font-face
Beschreibung und Auswahl von Fonts
@font-face { font-family: "Robson Celtic"; src: url("http://host/fonts/rob-celt"); } p.rc { font-family: "Robson Celtic"; }
Auswahl per Fontname
Problem: es gibt kein anerkanntes Namensschema
Auswahl "ähnlicher" Fonts (intelligent font matching)
Erzeugung von Fonts (font synthesis)
Download von Fonts
alle Eigenschaften von Fonts können verwendet werden
font-family, font-style, font-variant, font-weight, font-stretch, font-size
zusätzlich kommen neue Deskriptoren hinzu:
uni-code-range:
Bereich vorhandener Zeichen (glyphs)
U+0-7FFFFFFF
units-per-em:
Anzahl der Einheiten per 'em'
src:
URL (zum Download) oder Bezeichnung
für einen Font
src: local("Verdana"), url("../fonts/verdana") format("type-1")
Deskriptoren für Fontauswahl
panose-1: 0 0 0 0 0 0 0 0 0 0
Panose-1 Nummer
stemv:
vertikaler Stem-Wert
("M", em, Höhe des grossen M)
stemh:
horizontaler Stem-Wert
("x", ex, Höhe des kleinen x)
slope:
Neigungswinkel
cap-height:
Grösse der Grossbuchstaben
x-height:
Grösse der Kleinbuchstaben
ascent:
Grösse der Buchstaben ohne Akzente
descent:
Grösse der Buchstaben ohne untere Akzente
Deskriptoren für Fontsynthese
width:
Breite von Buchstaben
bbox:
maximaler Umriss von Buchstaben
definition-src:
definiert wo die
Spezifikation zu finden ist
Deskriptoren für Ausrichtung von Fonts untereinander
baseline:
untere Basisline der Schrift
centerline:
Mittelline der Schrift
mathline:
Ausrichtung der mathematischen Zeichen
topline:
obere Basisline der Schrift
die Auswahl geeigneter Fonts erfolgt durch einen (längeren) Algorithmus
Beispiel
@font-face { font-family: "Swiss 721 Condensed"; src: url("http://host/fonts/swiss721co.pfr"); font-style: normal, italic; font-stretch: condensed; } p.sc { font-family: "Swiss 721 Condensed"; }
Pseudo-Elemente :before, :after
Textersetzungen content:
"string", URL, counter(cnt), attr(X), open-quote, close-quote
Initialisieren von Zählern counter-reset: cnt
Weiterzählen counter-increment: cnt
Zähler-Format counter( name, type )
disk, circle, square, upper-latin, hebrew, upper-roman
Einrückungen für Zähler marker-offset:
@media aural { blockquote { content: url("bq-music.wav"); } } h1:before { content: "Kapitel " counter(kapitel) ". "; counter-increment: kapitel; counter-reset: abschn; } h2:before { content: counter(kapitel) "." counter(abschn) ". "; } counter-increment: abschn;
Druckseiten @page { ... }
Seitengrösse size:
Ränder margin:
für linke und rechte Seiten :left, :right
Seitenumbruch page-break-before:
page-break-after:
page-break-inside:
auto, always, avoid, left, right
Seitenumbruch in Paragraphen
Anzahl Zeilen am Fuss orphans: int
Anzahl Zeilen am Kopf widows: int
@media print { @page { size: auto; margin: 10%; } @page :right { margin-left: 10; margin-right: 5; } @page :left { margin-left: 5; margin-right: 10; } }
zugeschnitten für das HTML 4.0 Tabellenmodell
rechteckige Anordnung von Zellen
zeilenweise Anordnung
Spalte 1 | Spalte 2 | Spalte 3 |
---|---|---|
1 | 2 | 3 |
4 | 6 |
<table class="exam" border="1" cellpadding="10" cellspacing="10" summary="HTML Elemente"> <tr> <th>Spalte 1</th><th>Spalte 2</th><th>Spalte 3</th> </tr> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td></td><td>6</td> </tr> <caption>Beispiel für Tabelle</caption> </table>
mit folgendem Style Sheet
table.exam { font-size: large; background-color: lime; } table.exam td { text-align: center; color: red; } table.exam caption { caption-side: right; color: blue; }
Neue display:
Werte ermöglichen Tabelleneigenschaften
für beliebige Elemente, wichtig für XML (Auswahl).
table
wie table in HTML 4.0
table-row
wie tr
table-column
wie col
table-cell
wie td, th
table-caption
wie caption
table { display: table } tr { display: table-row } th, td { display: table-cell } col { display: table-col } caption { display: table-caption }
Grundlayout
table-layout:
auto | fixed
Ausrichtung an bestimmten Zeichen
text-align: "."
Rand-Modelle
border-collapse:
collapse, separate
Ränder
border-spacing: len
leere Zellen
empty-cells:
show, hide
Randstil
border-style:
solid, dotted, groove, ridge
Sprachausgabe
speak-header:
once, always
td { text-align: "," } td:before { content: "DM" } table { empty-cells: show }
Eigenschaften: Umgebung-/Raumabhängigkeit, Zeitabhängigkeit, Sprachqualität.
Lautstärke
volume: soft | laud | x%
Sprechart
speak: normal | spell-out
Pausen
pause-before: zeit
pause-after: zeit
pause:
before after
"Ton-Icons" = Cue
cue-before: url(.)
cue-after: url(.)
cue:
before after
Gleichzeitiges Abspielen
play-during: url(.) mix? repeat?
Räumliche Eigenschaften
azimuth:
Raumseitenwinkel, behind, left, right
elevation:
Raumhöhenwinkel, below, above
weitere Eigenschaften
speech-rate: slow | fast
, Worte pro Minute (180-200),
voice-family: male | female | 'speaker'
,
pitch: freq
, Frequenz (120Hz)
pitch-range:
,
stress: int
, Betonung
richness: int
, "Fülle"
speak-punctuation: code | none
,
speak-numeral: digits | continous
@media aural { h2 { pause: 30ms 40ms; } a { cue-before: url("a-bell.wav"); } em { play-during: url("em-sound.wav") mix repeat; } p.note { azimuth: behind; } p.dog { elevation: below; } }
Berücksichtigung der Text-Schreibrichtung
direction: ltr|rtl
Behandlung von Text-Ausschnitten
clip: shape
,
overflow: scroll
Cursor Darstellung
cursor: crosshair | text | wait | url(.)
Beispiel mit CSS Level 2 Konstrukten.
Paged Media Support, z.B. WAP auf Handys
DOM Level 2 Support
Scalable Vector Graphics (SVG)
User Interface, z.B. "Kiosk" Mode
International Layout, z.B. Arabisch, Japanisch
Multicolumn Layout
CSS und XML
XSL
XSLT
© Universität Mannheim, Rechenzentrum, 1998-2003.
Heinz Kredel Last modified: Wed May 21 17:39:47 CEST 2003