CSS2

CSS Level 2

Positionierung
Medientypen: Sprache, Drucker, Folien
Schriftauswahl, Download
Auto-Numerierung
Tabellen

Beispiel: Style Sheet für HTML 4.0 in CSS2

Positionierung

Ab Netscape 4.x, IE 4.0, 5.0 implementiert

CSS-P = CSS1 + Positionierung

Box-Position:
position: static, relative, absolute, fixed

static =

normaler Elementfluss

relative =

zunächst wie static, dann relativ zu dieser Position

absolute =

unabhängig vom Elementfluss an einer festen Stelle im Dokument

fixed =

unabhängig vom Elementfluss an einer festen Stelle im Fenster
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.

Medientypen

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 }
   }

Mediengruppen

continous oder paged
visual oder aural oder tactile
grid oder bitmap
interactive oder static

neue Selektoren

für Attribute

   p[align]           { font-style: italic; }

   p[align="center"]  { font-style: italic; align: center; }

   p[align~="center"] { font-style: italic; align: center; }

für Kinder und nebeneinanderstehende Elemente

   p > em             { font-style: italic; }

   h1 + h2            { margin-top: -5mm; }

für Sprachauswahl

   p:lang(de)         { font-family: sans-serif; }
   p:lang(fr)         { font-family: serif; }

neue Pseudo-Elemente

   h1:before          { content: counter(kapitel) ". "; }
   p:after            { content: " © BWL 1999"; }

neue Display-Typen

   h3                 { display: run-in; }
   dt                 { display: compact; }
   tr                 { display: table-row; }

Fliesstext

   img                { float: left; }
   img.x              { float: right; }
   p                  { clear: left; }

Erweiterungen bei Fonts

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"; }

Fontauswahl

Auswahl per Fontname
Problem: es gibt kein anerkanntes Namensschema
Auswahl "ähnlicher" Fonts (intelligent font matching)
Erzeugung von Fonts (font synthesis)
Download von Fonts

@font-face

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"; }

Zähler und Textersetzungen

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;

Stile für Drucker

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;
      }
   }

Stile für Tabellen

zugeschnitten für das HTML 4.0 Tabellenmodell
rechteckige Anordnung von Zellen
zeilenweise Anordnung

Beispiel für Tabelle
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; }

freidefinierbare Tabellen-Elemente

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 }

weitere Tabellen-Eigenschaften

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: "€" }
table     { empty-cells: show }

Stile für Sprachausgaben

Eigenschaften: Umgebung-/Raumabhängigkeit, Zeitabhängigkeit, Sprachqualität.

Lautstärke
volume: soft | loud | 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; }
   }

Weitere Änderungen gegenüber CSS1

Berücksichtigung der Text-Schreibrichtung
direction: ltr|rtl
Behandlung von Text-Ausschnitten
clip: shape,
overflow: scroll
Cursor Darstellung
cursor: crosshair | text | wait | url(.)

Beispiele

Beispiel mit CSS Level 2 Konstrukten.

Cascading Style Sheets 2 (CSS2)