Cascading Style Sheets 2 (CSS2)


CSS Level 2

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

Animation mit HTML, CSS, JavaScript und DOM

Dateien: HTML, CSS, JavaScript.

Medientypen

Beispiel:

   @media print {
       body { font-size: 10pt }
   }
   @media screen {
       body { font-size: 12pt }
   }

Mediengruppen

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-face {
         font-family: "Robson Celtic";
         src: url("http://host/fonts/rob-celt");
   }

   p.rc { font-family: "Robson Celtic"; }

Fontauswahl

@font-face

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

   @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

   @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

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   { display: table }
tr      { display: table-row }
th, td  { display: table-cell }
col     { display: table-col }
caption { display: table-caption }

weitere Tabellen-Eigenschaften

td        { text-align: "," }
td:before { content: "€" }
table     { empty-cells: show }

Stile für Sprachausgaben

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

   @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

Beispiele

Beispiel mit CSS Level 2 Konstrukten.


Ausblick

CSS3

XSL


© Universität Mannheim, Rechenzentrum, 1998-2005.

Heinz Kredel

Last modified: Sat Apr 9 11:48:37 CEST 2005