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 }

Algorithmus der Cascadierung in CSS2

Die Punkte 2 und 3 werden zu einem zusammengefasst.

  1. entsprechend dem Ursprung: Autor vor Benutzer vor Browser
    aber bei Angabe von !important gilt: Benutzer vor Autor vor Browser


Layout mit CSS1

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, small, medium, large, x-large, xx-large,

2.0cm, 14pt, 24pt, 34pt, 120%, 2.0em, 1.5ex.

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

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

Box mit was drin
Box-Modell von CSS

Quelle: W3C, CSS2 Spezifikation


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, d.h. 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/style/ unter dem Punkt 'Master list'.


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

Heinz Kredel
Last modified: Mon Nov 4 17:33:35 CET 2002