Projekte
Webpublishing
CSS – Cascading Style Sheets
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
- 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>
|
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