Cascading Style Sheets (CSS)

Einordnung

Layouts für Web-Publishing

Trennung von Struktur und Präsentation wird möglich

Made with CSS

Stand der Entwicklung:

CSS Processing Model

Grundkonzepte von CSS

Elemente für die kein Stil definiert wird, werden mit dem Browser Default-Stil dargestellt.

Verknüpfung mit HTML

Element-Typen

Block-Elemente
BLOCKQUOTE, BR, DD, DL, DIV, DT, Hi, HR, HTML, LI, OBJECT, OL, P, PRE, UL
Inline-Elemente
A, EM, I, IMG, SPAN, STRONG, TT
Unsichtbare Elemente
LINK, META, STYLE, TITLE

Auswahl mit Bezeichnern

Algorithmus der Cascadierung

Es wird die anzuwendende Element-Eigenschaft Kombination gesucht:

  1. Element entsprechend dem Selektor oder Vererbung

  2. entsprechend explizitem Gewicht: !important geht vor

  3. entsprechend dem Ursprung: Autor vor Benutzer vor Browser

  4. 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>

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

Layout mit CSS1

Box-Eigenschaften: Füllung (padding), Rahmen (border), Rand (margin)

Box mit was drin
Box-Modell von CSS

Quelle: W3C, CSS2 Spezifikation

Schriften

Liegen in verschiedenen Schnitten (Gestalt mit bestimmten Eigenschaften) vor. Die Schrift-Eigenschaften sind nicht einfach berechenbar (vergleiche TeX und Metafont).

Beispiel

    P { font-family: monospace; 
        font-size: x-large; 
      }

So siehts aus.

Beispiele font-family:

Times, Helvetica, Verdana, Western, Courier, Zapf Chancery,

serif, sans-serif, monospace, cursive, fantasy.

Beispiele font-style:

normal, oblique, italic.

Beispiele font-variant:

normal, Small-Caps.

Beispiele font-weight:

normal, bold, bolder, lighter, 100, ..., 400, ..., 900.

Beispiele font-size:

xx-small, x-small, xx-small, medium, large, x-large, xx-large,

120%, 10pt, 12pt, 24pt.

Farben

    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).

weitere Eigenschaften

Beispiele und Hinweise

Beispiele vom W3C

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 }

Beispiele für Basis-HTML

Beispiel mit einfachen Hervorhebungen.

Stile aus der W3C Style Gallery

Beispiele aus dem Web

Hinweise zur effektiven Nutzung von CSS

Alles was mit CSS1 machbar ist, ist in HTML 4.0 "deprecated", d.h. nicht mehr empfohlen, zur Nicht-Benutzung empfohlen.

Beschränkungen von CSS1

Eine Übersicht über den Grad der Unterstützung von CSS(1) finden Sie zum Beispiel bei http://webreview.com/pub/guides/style/style.html.

CSS Level 2

Beispiel: Style Sheet für HTML 4.0 in CSS2

Positionierung

Schon in 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 page {
      @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

Spalte 1 Spalte 2 Spalte 3
1 2 3
4 6
Beispiel für Tabelle 
<table class="exam" border="solid" 
       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: "DM" }
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

Ausblick

CSS3

XSL

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

Heinz Kredel
Last modified: Fri Feb 25 23:08:02 MET 2000