Diese Website ist seit dem Ende des Studiengangs Informationswissenschaft
im Juni 2014 archiviert und wird nicht mehr aktualisiert.
Bei technischen Fragen: Sascha Beck - s AT saschabeck PUNKT ch
Drucken

Projekte

Webpublishing

CSS – Cascading Style Sheets

1. Was sind CSS?

1.1 Definition
CSS sind eine Definitionssprache, mit der eigene Formate kreiert und vorhandene HTML-Tags exakt formatiert weden können. -> Vorgeschlagen vom W3-Konsortium

1.2 Versionen/Unterstützung
– liegt seit 1998 in der Version 2.0 vor
– wird in der Version 1.0 durchgängig von den Browsern unterstützt (am meisten vom MS IExplorer 4.5); die Version 2.0 wird noch nicht unterstützt

 
2. Möglichkeiten

Zentral: Trennung von Inhalt und Layout erlaubt das einfache Designen umfangreicher Sites.

Gesamt-Layout einer Site:

  • Seitenlayout-Festlegung für den Druck
  • Professionellere Gestaltung beim Web-Design
  • Corporate Design für große Projekte
  • Anpassung an unterschiedliche Ausgabemedien
Layout für eine Page:
  • Pixelgenaue Positionierung von Elementen
  • Steuerung der akustischen Wiedergabe
  • Zentrale Angabe von Definitionen
 
3. Wie werden sie verwendet?

3.1 Um für eine ganze Page das Design vorzugeben:

<head>
<title>Titel der Datei</title>
<style type=“text/css“>
<!–/* …Style-Sheet-Angaben… */ //–>
</style>

</head>
Wichtig ist hier die Kommentar- Einbindung, da nicht alle Browser Style-Sheets darstellen.

3.2 Um einen Absatz zu formatieren

3.3 Um den Style auf eine Site anzuwenden (in separater Datei definieren)

<head>
<title>Titel der Datei</title>
<link rel=stylesheet type=“text/css“ href=“/formate.css„>
<style type=“text/css“>
<!–// extra Style-Sheet-Angaben //–>
</style>
</head>
Hier wird auf eine reine Textdatei verwiesen, die nur Formatdefinitionen entält (also auch keine HTML-Tags)

 
4. Formatdefinitionen / Syntax (Beispiele)

4.1 Einbau in eine Seite

/*     */ Kommentareinbindung
<style type=“text/css“>
<!–
p.normal{font-size:10pt; color:black;}
p.gross{font-size:12pt; color:black}
p.klein{font-size:8pt; color:black}
all.rot{color:red;}
blau{color:blue;}
//–>
</style>

<body>
<p class=“normal“>Normaler Textabsatz mit Schrift 10 Punkt schwarz</p>
<p class=“gross“>Textabsatz mit Schrift 12 Punkt schwarz</p>
<p class=“klein“>Textabsatz mit Schrift 8 Punkt schwarz</p>
<p class=“rot“>roter Textabsatz</p>
<address class=“rot“>roter Absatz fü Adressen</address>
<blockquote class=“blau“>blaues Zitat</blockquote>
</body>

Definieren von Unterklassen innerhalb von HTML-Tags.
Beispiel: tdbbbb.htm
:   tdbbbc.htm auch Verschachtelungen

4.2 Seitenlayout
Gerade hier liegt das größte Potential, da Style Sheets hier eine echte Konkurrenz zu Acrobat Reader, QuarkXpress oder Framemaker sind.

<style type=“text/css“>
@page{/* Angaben zum Seitenlayout */}
</style>
Seitengröße, Seitenränder, Schnitt- und Passermarken, Seiten rechts/links, laufende Kopf-/Fußzeilen, Seitenumbruch vor einem Element, alleinstehende Zeilen am Seitenanfang und vieles mehr definierbar.
Dynamische Websites : Cursor, Vorder-/hintergrund verschmelzen, verwischen, rauschen (Effekte, die sonst nur mit Grafikprogrammen funktionieren)

 


Referent: Johannes Strobel, 11.11.1999