Untitled - Buecher.de

Galileo Computing: »CSS-Praxis« Leseprobe
Liebe Leserin, lieber Leser,
Seit der ersten Auflage dieses Buches ist gerade ein Jahr vergangen. CSS-Design
hat seitdem Einzug gehalten in viele Bereiche des modernen Webdesigns. Selbst
große Webprojekte, wie der Internetauftritt des Sterns oder der deutschen Post,
haben seit Ende 2002 einen Relaunch in CSS hinter sich. Unaufhaltsam setzt sich
CSS-Design in der alltäglichen Praxis durch und verdrängt das althergebrachte
Tabellenlayout der reinen HTML-Welt.
Wenn Sie bisher noch wenig oder gar keine Cascading Stylesheets eingesetzt
haben, können Sie mit dem Buch von Kai Laborenz lernen, welche vielen neuen
Möglichkeiten sich für Ihre Internetseite durch den Einsatz von CSS ergeben. Endlich macht Webdesign wieder Spaß. Darüber hinaus bieten Cascading Stylesheets
viele Möglichkeiten, Seiten nicht nur für den Einsatz auf dem PC, sondern auch
auf anderen Geräten wie PDA oder Handy anzupassen – Machen Sie Ihre Webseiten zukunftssicher.
Diejenigen, die bereits CSS einsetzen, finden in diesem Buch viele Tipps und Tricks
aus der Praxis. Hier hilft Ihnen der Autor dabei, browserübergreifende Lösungen
zu entwickeln. Die herausnehmbare Referenzkarte wird eine unentbehrliche Hilfe
bei Ihrer täglichen Coding-Arbeit werden. Auf einen Blick sehen Sie, welche
Browser welche CSS-Elemente unterstützen. Und – schauen Sie doch mal auf der
Webseite des Autors www.css-praxis.de vorbei. Hier finden Sie Hilfestellung im
Forum, neue Entwicklungen und Buch-Updates.
Ich freue mich, wenn Sie uns Ihre kritischen Anmerkungen, Ihr Lob oder Ihre Verbesserungsvorschläge zukommen lassen möchten.
Stephan Mattescheck
Lektorat Galileo Computing
[email protected]
www.galileocomputing.de
Galileo Press • Gartenstraße 24 • 53229 Bonn
Galileo Computing: »CSS-Praxis« Leseprobe
Auf einen Blick
Vorwort zur zweiten Auflage .....................
11
1 Einführung in CSS .....................................
15
2 Grundlegende Konzepte von CSS..............
39
3 Die Zukunft von CSS .................................
77
4 Browser-Kompatibilität.............................
93
5 CSS in der Praxis ....................................... 125
6 Skripte....................................................... 217
7 Beispiele.................................................... 241
8 Tools für CSS ............................................. 299
9 Die CSS-Elemente ..................................... 329
A Die CD-ROM zum Buch ............................ 463
B Die Website zum Buch .............................. 465
C Die Referenzkarte...................................... 467
D Glossar ...................................................... 469
Index ......................................................... 477
Galileo Computing: »CSS-Praxis« Leseprobe
Inhalt
Vorwort zur zweiten Auflage
11
1
Einführung in CSS
15
1.1
Von HTML zu CSS .................................................................................
17
1.2
Was sind CSS? ......................................................................................
1.2.1
Kurze Geschichte der CSS ........................................................
22
24
1.3
Wie sehen CSS aus? ..............................................................................
25
1.4
»Hallo Welt!« auf CSS ...........................................................................
27
1.5
Vorteile und Grenzen des CSS-Einsatzes ...............................................
35
2
Grundlegende Konzepte von CSS
2.1
Selektoren .............................................................................................
2.1.1
Einfache Elementselektoren .....................................................
2.1.2
Kombinierte Selektoren ............................................................
2.1.3
Class- und ID-Selektoren ..........................................................
2.1.4
Kind-Selektoren (CSS2) ............................................................
2.1.5
Folgeelement-Selektoren (CSS2) ..............................................
2.1.6
Attribut-Selektoren (CSS2) .......................................................
2.1.7
Tabellen-Selektoren .................................................................
2.1.8
Pseudo-Klassen und Pseudo-Elemente .....................................
2.1.9
Universal-Selektor ....................................................................
39
41
41
45
45
46
49
49
50
51
51
2.2
Vererbung .............................................................................................
53
2.3
Rangfolge und Kaskadierung ................................................................
2.3.1
Die Important-Anweisung ........................................................
55
60
2.4
Einbindung von Stylesheets in HTML-Dateien .....................................
2.4.1
Stil-Anweisungen im HTML-Tag ...............................................
2.4.2
Stil-Anweisungen im Dokumentenkopf ....................................
2.4.3
Verlinkte Stylesheets ................................................................
2.4.4
Importierte Stylesheets ............................................................
2.4.5
Medienspezifische Stylesheets (CSS2) .......................................
61
61
62
63
66
67
2.5
Die Kastenform (Box Model) ................................................................
69
2.6
Benennungen und Werte für Stylesheets ..............................................
2.6.1
Namen für Stylesheets, Klassen und IDs ...................................
2.6.2
Längen- und Größenangaben ...................................................
71
71
71
Inhalt
5
Galileo Computing: »CSS-Praxis« Leseprobe
Prozentwerte (%) .....................................................................
Farben .....................................................................................
URLs (url) ................................................................................
Schlüsselwörter ........................................................................
73
73
74
75
2.7
CSS-Kommentare .................................................................................
75
3
Die Zukunft von CSS
3.1
CSS 2.1 .................................................................................................
2.6.3
2.6.4
2.6.5
2.6.6
6
77
79
3.2
CSS 3 ....................................................................................................
79
3.3
XHTML, XML und CSS ..........................................................................
3.3.1
Von HTML zu X(H)TML ............................................................
3.3.2
XML und CSS ...........................................................................
80
80
85
3.4
CSS nicht nur im Browser .....................................................................
3.4.1
ScreenReader ...........................................................................
3.4.2
PDAs und Mobiltelefone ..........................................................
88
88
89
4
Browser-Kompatibilität
4.1
Einzelne Browser ..................................................................................
4.1.1
Mosaic, Netscape Navigator 3.x und früher,
Internet Explorer 2.x und früher ..............................................
4.1.2
Netscape Navigator 4.x ............................................................
4.1.3
Netscape Navigator 6 (Mozilla 0.x) ..........................................
4.1.4
Netscape Navigator 7 (Mozilla 1.0) ..........................................
4.1.5
Mozilla 1.5 ..............................................................................
4.1.6
Firebird ....................................................................................
4.1.7
Internet Explorer 3 ..................................................................
4.1.8
Internet Explorer 4 ..................................................................
4.1.9
Internet Explorer 5.x ................................................................
4.1.10 Internet Explorer 6 ..................................................................
4.1.11 Opera 4 ...................................................................................
4.1.12 Opera 5/6 ................................................................................
4.1.13 Opera 7 ...................................................................................
4.1.14 Konqueror ...............................................................................
4.1.15 Safari .......................................................................................
4.1.16 Lynx ........................................................................................
4.1.17 Weitere Browser ......................................................................
93
95
96
96
99
100
100
101
102
102
103
103
104
105
105
105
106
106
107
4.2
Browseranteile ...................................................................................... 108
4.3
Doctypes und Doctype-Switching ........................................................ 110
4.4
Browserweichen und -Hacks ................................................................
4.4.1
@import-Weiche ....................................................................
4.4.2
Box Model Hack ......................................................................
4.4.3
Vereinfachter Box Model Hack und Erweiterter
Vereinfachter Box Model Hack .................................................
4.4.4
Hochpass-Filter ........................................................................
Inhalt
113
114
115
118
119
Galileo Computing: »CSS-Praxis« Leseprobe
4.4.5
4.4.6
4.4.7
4.4.8
4.4.9
4.4.10
media-Attribut .........................................................................
Kommentar-Trick .....................................................................
Selektoren-Tricks ......................................................................
OperaCatcher ..........................................................................
Conditional Comments ............................................................
Browser-Sniffer ........................................................................
120
120
121
121
122
123
5
CSS in der Praxis
125
5.1
Strategien für den CSS-Designer ..........................................................
5.1.1
Valide Dokumente erstellen .....................................................
5.1.2
Der W3C-Validator ..................................................................
5.1.3
CSS zur Schriftgestaltung – »Weicher CSS-Einsatz« ...................
5.1.4
Komplettlayout mit CSS – »Harter CSS-Einsatz« .......................
5.1.5
Suchmaschinenoptimierung per CSS .........................................
127
127
128
129
130
136
5.2
Schriftgrößen ........................................................................................
5.2.1
Schlüsselwörter ........................................................................
5.2.2
Relative Angaben .....................................................................
5.2.3
Punkte .....................................................................................
5.2.4
Pixel .........................................................................................
5.2.5
Gemischte Angaben .................................................................
139
140
142
143
144
145
5.3
Positionierung ....................................................................................... 147
5.4
Zugängliche Websites mit CSS (Accessibility) ....................................... 165
5.5
Zentrierter Inhalt ................................................................................... 168
5.6
CSS-Menüs ...........................................................................................
5.6.1
Feststehende Menüs ................................................................
5.6.2
Dynamische Menüs mit CSS .....................................................
5.6.3
CSS-Menüs mit Listen ..............................................................
5.7
Bildergalerie .......................................................................................... 202
5.8
Schönere Formulare .............................................................................. 205
5.9
Druckversion per CSS ........................................................................... 213
6
Skripte
174
174
182
192
217
6.1
User-Stylesheets ................................................................................... 219
6.2
Stylesheet-Wechsler .............................................................................
6.2.1
Simpler Style-Switcher mit HTML-Mitteln ................................
6.2.2
Style-Switcher mit JavaScript ....................................................
6.2.3
Style-Switcher mit PHP ............................................................
6.2.4
JavaScript mit Sicherheitsnetz ...................................................
6.3
Browserweiche für Stylesheets ............................................................. 235
6.4
Fontsizer (einfach-fuer-alle.de) ............................................................. 236
6.5
Skript zum Schutz vor zu kleinen Schriftgrößen .................................... 238
6.6
List-O-Rama .......................................................................................... 240
223
227
228
231
233
Inhalt
7
Galileo Computing: »CSS-Praxis« Leseprobe
8
7
Beispiele
7.1
Aktion Mensch: Einfach für alle ............................................................ 243
7.1.1
Der Code von Einfach für Alle .................................................. 245
7.2
Lycos Deutschland ................................................................................ 271
8
Tools für CSS
8.1
CSS-Editoren ........................................................................................
8.1.1
TopStyle 3 ...............................................................................
8.1.2
Style Studio .............................................................................
8.1.3
Cascade 2.0 .............................................................................
8.1.4
Morphon CSS-Editor ................................................................
8.1.5
Style Master .............................................................................
8.1.6
Dreamweaver MX 2004 ...........................................................
8.1.7
GoLive 6 ..................................................................................
301
301
305
306
307
308
310
316
8.2
CSS-Werkzeuge und weitere Tools .......................................................
8.2.1
Tidy .........................................................................................
8.2.2
OpTool ....................................................................................
8.2.3
Calippers .................................................................................
8.2.4
IrfanView .................................................................................
320
320
325
326
327
9
Die CSS-Elemente
9.1
Pseudo-Elemente und Pseudo-Formate ...............................................
9.1.1
: link ........................................................................................
9.1.2
: visited ....................................................................................
9.1.3
: hover (CSS2) ..........................................................................
9.1.4
: focus (CSS2) ..........................................................................
9.1.5
: active .....................................................................................
9.1.6
: lang (CSS 2) ...........................................................................
9.1.7
: first-line .................................................................................
9.1.8
: first-letter ..............................................................................
9.1.9
: first-child (CSS2) ....................................................................
9.1.10 : before und : after (CSS2) .......................................................
331
331
334
335
336
337
338
340
342
343
344
9.2
Inhaltserzeugung ..................................................................................
9.2.1
content (CSS2, Änderung in CSS 2.1) .......................................
9.2.2
counter() und counters() ..........................................................
9.2.3
counter-increment (CSS2) ........................................................
9.2.4
counter-reset (CSS2) ................................................................
9.2.5
quotes (CSS2) ..........................................................................
346
346
347
349
351
352
9.3
Schriftformatierungen ...........................................................................
9.3.1
font-family ...............................................................................
9.3.2
font-style .................................................................................
9.3.3
font-variant .............................................................................
9.3.4
font-weight .............................................................................
354
354
357
358
359
Inhalt
241
299
329
Galileo Computing: »CSS-Praxis« Leseprobe
font-size ...................................................................................
font-size-adjust (CSS, nicht in CSS 2.1) .....................................
font-stretch (CSS2, nicht in CSS 2.1) ........................................
font ..........................................................................................
@font-face (CSS2, nicht in CSS 2.1) .........................................
text-decoration ........................................................................
text-shadow (CSS2, nicht in CSS 2.1) .......................................
text-transform ..........................................................................
letter-spacing ..........................................................................
word-spacing (CSS2) ................................................................
white-space .............................................................................
line-height ...............................................................................
text-indent ...............................................................................
text-align (Änderung in CSS 2.1) ..............................................
vertical-align ............................................................................
direction (CSS2) .......................................................................
unicode-bidi (CSS2) .................................................................
360
361
362
363
364
367
371
372
373
374
375
376
377
377
378
384
384
9.4
Farben und Hintergründe ......................................................................
9.4.1
color ........................................................................................
9.4.2
background-color .....................................................................
9.4.3
background-image ...................................................................
9.4.4
background-repeat ...................................................................
9.4.5
background-attachment ...........................................................
9.4.6
background-position (Änderung in CSS 2.1) .............................
9.4.7
background ..............................................................................
386
386
386
387
388
390
391
392
9.5
Kastenformatierungen ..........................................................................
9.5.1
margin .....................................................................................
9.5.2
padding ...................................................................................
9.5.3
border-width ...........................................................................
9.5.4
border-color ............................................................................
9.5.5
border-style .............................................................................
9.5.6
border ......................................................................................
9.5.7
width .......................................................................................
9.5.8
height ......................................................................................
9.5.9
overflow (CSS2) .......................................................................
9.5.10 clip (CSS2, Änderung in CSS 2.1) ..............................................
9.5.11 float .........................................................................................
9.5.12 clear .........................................................................................
9.5.13 position (CSS2) ........................................................................
9.5.14 top (CSS2) ................................................................................
9.5.15 right (CSS2) ..............................................................................
9.5.16 bottom (CSS2) .........................................................................
9.5.17 left (CSS2) ................................................................................
9.5.18 visibility (CSS2) ........................................................................
9.5.19 z-index (CSS2) ..........................................................................
9.5.20 list-style-type ...........................................................................
9.5.21 list-style-image .........................................................................
9.5.22 list-style-position .....................................................................
9.5.23 list-style ...................................................................................
394
394
396
397
399
400
404
405
406
407
408
410
412
418
420
421
422
423
424
424
428
429
430
431
9.6
Anzeigemodus ....................................................................................... 432
9.6.1
display (CSS1, Erweiterung in CSS2 – table, Änderung
in CSS 2.1) ............................................................................... 432
9.3.5
9.3.6
9.3.7
9.3.8
9.3.9
9.3.10
9.3.11
9.3.12
9.3.13
9.3.14
9.3.15
9.3.16
9.3.17
9.3.18
9.3.19
9.3.20
9.3.21
Inhalt
9
Galileo Computing: »CSS-Praxis« Leseprobe
10
9.7
Tabellenformatierungen ........................................................................
9.7.1
table-layout (CSS2) ..................................................................
9.7.2
caption-side (CSS2, Änderung in CSS 2.1) ................................
9.7.3
border-collapse (CSS2, Änderung in CSS 2.1) ...........................
9.7.4
border-spacing (CSS2) .............................................................
9.7.5
empty-cells (CSS2) ...................................................................
9.7.6
speak-header (CSS2) ................................................................
435
435
435
436
437
438
439
9.8
Benutzeroberfläche ...............................................................................
9.8.1
cursor (CSS2) ...........................................................................
9.8.2
outline (CSS2) ..........................................................................
9.8.3
scrollbars (MS-proprietär, kein offizieller CSS-Bestandteil) ........
9.8.4
filter (MS-proprietär, kein offizieller CSS-Bestandteil) ...............
440
440
442
443
445
9.9
Seitenlayout mit @page (CSS2) ...........................................................
9.9.1
size (CSS2, nicht in CSS 2.1) ....................................................
9.9.2
marks (CSS2, nicht CSS 2.1) .....................................................
9.9.3
: left : right : first (CSS2) ...........................................................
9.9.4
page-break-before, page-break-after (CSS2) .............................
9.9.5
page-break-inside (CSS2) .........................................................
9.9.6
page (CSS2, nicht CSS 2.1) .......................................................
9.9.7
orphans (CSS2) ........................................................................
9.9.8
widows (CSS2) .........................................................................
446
446
447
448
449
450
451
452
452
9.10
Sprachausgabe ......................................................................................
9.10.1 speak (CSS2, Änderung in CSS 2.1) ..........................................
9.10.2 volume (CSS2, Änderung in CSS 2.1) .......................................
9.10.3 speech-rate (CSS2, Änderung in CSS 2.1) .................................
9.10.4 pause (CSS2, Änderung in CSS 2.1) ..........................................
9.10.5 cue (CSS2, Änderung in CSS 2.1) .............................................
9.10.6 play-during (CSS2, Änderung in CSS 2.1) .................................
9.10.7 voice-familiy (CSS2, Änderung in CSS 2.1) ...............................
9.10.8 pitch (CSS2, Änderung in CSS 2.1) ...........................................
9.10.9 stress (CSS2, Änderung in CSS 2.1) ..........................................
9.10.10 richness (CSS2, Änderung in CSS 2.1) ......................................
9.10.11 azimuth (CSS2, Änderung in CSS 2.1) ......................................
9.10.12 elevation (CSS2, Änderung in CSS 2.1) .....................................
9.10.13 speak-punktuation (CSS2, Änderung in CSS 2.1) ......................
9.10.14 speak-numeral (CSS2, Änderung in CSS 2.1) ............................
453
453
454
454
455
456
457
457
458
459
459
460
461
462
462
A
Die CD-ROM zum Buch
463
B
Die Website zum Buch
465
C
Die Referenzkarte
467
D
Glossar
469
Index
477
Inhalt
Galileo Computing: »CSS-Praxis« Leseprobe
Vorwort zur zweiten Auflage
Ein Jahr ist schnell vergangen – besonders im Web. Trotzdem ist es
schon erstaunlich, wie viel sich auf dem Gebiet der Stylesheets seit der
ersten Ausgabe, die vor ziemlich genau einem Jahr erschienen ist, getan
hat.
War es damals noch ziemlich schwierig, bedeutendere Websites zu finden, die CSS nutzten, so herrscht inzwischen auch in Deutschland kein
Mangel mehr an guten Beispielen. Ein Grund für die stetig steigende
Verbreitung von CSS-Sites ist sicher das langsame Aussterben der »CSSfeindlichen« Browser – der Marktanteil von Netscape 4 ist im letzten
Jahr fast um die Hälfte gefallen und bewegt sich inzwischen im einstelligen Bereich. Auch das wachsende Bewusstsein, dass Barrierefreiheit
und verbindliche Standards für die Zukunft des Webdesigns wichtig
sind, hat zur Verbreitung beigetragen.
Während ich im Vorwort zur ersten Auflage noch zu mutigem Voranschreiten aufgefordert habe, ist CSS inzwischen auf dem besten Weg,
Webdesign-Alltag zu werden. In diesem Sinne wünsche ich Ihnen beim
Lesen des Buches und beim Ausprobieren der Beispiele und Anleitungen viel Spaß am (noch nicht ganz) Alltäglichen.
Dieses Buch will mit einem praxisbezogenen Ansatz die Möglichkeiten,
Schwierigkeiten und Begrenzungen von Cascading Stylesheets anhand
konkreter Beispiele aufzeigen.
Was erwartet Sie
in diesem Buch?
In den ersten beiden Kapiteln gebe ich eine Einführung zum Aufbau
und den grundlegenden Konzepten von Cascading Stylesheets und
zeige ein einfaches Beispiel.
In den Kapiteln 3 bis 5 geht es um die praktische Umsetzung: Wie sieht
die Entwicklung von CSS aus, wie reagieren die verschiedenen Browser
auf CSS und was gibt es beim Praxiseinsatz zu beachten?
Die Kapitel 6 und 7 sind Beispielen und konkreten Skripten gewidmet
– zum Nachvollziehen und zum praktischen Einsatz.
Kapitel 8 zeigt Ihnen eine Reihe von Programmen, die beim Erstellen
von Stylesheets nützlich sind.
Und schließlich Kapitel 9, das – last but not least – eine vollständige Referenz aller CSS-Eigenschaften mit kompletter Beschreibung, beispielhafter Syntax und Anmerkungen zur Browserkompatibilität enthält.
Vorwort zur zweiten Auflage
11
Galileo Computing: »CSS-Praxis« Leseprobe
Auf der beiliegenden CD-ROM finden Sie alle Beispiele und Abbildungen des Buches. Außerdem alle besprochenen Skripte und Programme
als Freeware, Shareware oder Demoversionen, darunter auch die beiden Website-Editoren Dreamweaver und GoLive in der aktuellen Version. Die Screenshots, die im Buch abgebildet sind, finden Sie auf der
CD-ROM in Farbe.
Stylesheet-Tabelle
zum Herausnehmen
Zusätzlich liegt diesem Buch eine Stylesheet-Kompatibilitätstabelle bei.
Dort sind in Kurzform alle wichtigen Eigenschaften von Stylesheets und
ihre Unterstützung durch die wichtigsten Browser aufgelistet. Die
Tabelle können Sie beim Arbeiten zur schnellen Referenz benutzen und
für Details dann im Buch nachlesen.
Wie sollten Sie
dieses Buch lesen?
Sie können das Buch natürlich ganz normal von vorn nach hinten
durchlesen. Ich empfehle das vor allem, wenn Sie mit Cascading Stylesheets bisher wenig zu tun hatten. Wenn Sie schon etwas über CSS wissen, können Sie auch die Praxisbeispiele ab Kapitel 5, CSS in der Praxis,
durchgehen und nur im Zweifelsfall die Referenzen des ersten Teils zu
Rate ziehen. Oder Sie fangen gleich mit den Stylesheet-Beispielen in
Kapitel 6, Skripte, an und sehen, was Sie für Ihre Website anwenden
können.
Icons und
Hinweise
Um Sie auf bestimmte Dinge aufmerksam zu machen, verwenden wir
ein paar Icons in der äußeren Spalte:
Hinweis: Ergänzende Hinweise zum Thema
Falle: Browserfehler oder andere Fallen für CSS-Designer
Warnung: Warnungen oder Achtung, wichtiger Hinweis
Tool: Werkzeuge für den CSS-Entwickler
Beispiele: Skripte und Quellcodelistings
12
Vorwort zur zweiten Auflage
Galileo Computing: »CSS-Praxis« Leseprobe
CD-ROM: Ergänzendes Material oder Skripte zum Verwenden auf der
beiliegenden CD-ROM
Bedanken möchte ich mich bei den vielen Menschen, die mich bei der
Arbeit an diesem Buch unterstützt und inspiriert haben. Dazu gehören
all diejenigen, die mir Teile ihrer eigenen Arbeiten für dieses Buch zur
Verfügung gestellt haben wie Michael Kaspar, Mark Howells, Bjoern
Hoehrmann, Tomas Caspers, Daniel Ludwin, Ernesto Gimenez, Winfried Schoech, den e-workers und David Andersson (aka Liorean).
Außerdem den Lesern der Mailinglisten css-design von Michael Charlier und i-worker von Erwin Forner, mit denen ich manches Problem
diskutieren konnte.
Vielen Dank!
Vielen Dank an meinen Lektor Stephan Mattescheck, der mich nicht
nur auf die Idee zu diesem Buch brachte, sondern mich auch bei der
Erstellung unterstützte und insbesondere viel Geduld mit mir hatte,
was das verspätete Abgeben von Manuskripten betraf ...
Dank gebührt auch diesen Menschen für ihre wegweisenden Veröffentlichungen zum Thema: Eric Meyer, Jeffrey Zeldman, Eric Costello,
Owen Briggs (vor allem für seine vielen Screenshots) und Stefan Münz
für SelfHTML.
Vor allem danke ich meinen Kollegen und Mitarbeitern bei Sunbeam
und meiner Freundin, die während meiner Arbeit an diesem Buch
unter meiner Doppelbelastung leiden mussten.
Kai Laborenz
Berlin, November 2003
Vorwort zur zweiten Auflage
13
1
Galileo Computing: »CSS-Praxis« Leseprobe
1 Einführung in CSS
2
3
4
1.1 Von HTML zu CSS ....................................... 17
5
1.2 Was sind CSS? ............................................. 22
6
1.3 Wie sehen CSS aus? .................................... 25
7
8
1.4 »Hallo Welt!« auf CSS .................................. 27
9
1.5 Vorteile und Grenzen des CSS-Einsatzes ..... 35
1
Einführung in CSS
2
Grundlegende Konzepte von CSS
3
Die Zukunft von CSS
4
Browser-Kompatibilität
5
CSS in der Praxis
6
Skripte
7
Beispiele
8
Tools für CSS
9
Die CSS-Elemente
1
Galileo Computing: »CSS-Praxis« Leseprobe
1
2
Einführung in CSS
3
Robert seufzte, als er auf die Uhr blickte. Schon halb neun, und er würde
sicher noch einige Stunden benötigen, um die Aufgabe zu erledigen, die ihm
sein Abteilungsleiter Tom am Nachmittag mit den Worten »Nur eine Kleinigkeit!« übergeben hatte.
4
5
Sicher – genau genommen waren es nur Kleinigkeiten, die auf der Website
ihres größten Kunden, der Tempelhofer Werkzeugmaschinen AG – kurz
TWAG –, zu ändern waren: Die Initialen sollten einen anderen Schrifttyp
bekommen und die Zeilenhöhe der Texte sollte um eine Kleinigkeit verändert
werden. Außerdem sollten ein paar Überschriften eine andere Farbe erhalten.
6
7
8
Leider hatte Robert bei der Erstellung der Website alle Initialen als kleine
Grafiken angelegt und auch den Zeilenabstand mit Hilfe von vielen kleinen
Grafiken als »Abstandshalter« erzeugt. Damals war ihm das noch als sehr
gute Idee vorgekommen und er war auch ziemlich stolz gewesen, wie gut
»seine« Website in das Corporate Design der TWAG passte. Wie hatte er
damals nur vergessen können, an Änderungen zu denken?
9
Jetzt würde er alle Initialen als Grafiken neu anlegen und in den über hundert Seiten ersetzen müssen. Außerdem würde er die Abstandshalter für die
Zeilenhöhe neu anlegen und Initialen für die neu hinzukommenden Textblöcke anlegen müssen. Und er müsste auf jeder Seite die Schriftfarbe der Überschriften ändern.
Irgendwie müsste das doch einfacher gehen ... Robert seufzte erneut und
wandte sich wieder dem Monitor zu.
1.1
Von HTML zu CSS
Als Tim Berners-Lee im Jahr 1990 die Sprache HTML entwickelte,
dachte er nicht an das Aussehen von Dokumenten. Ihm ging es um eine
Sprache, mit der sich Struktur und Inhalte einer Seite beschreiben lassen. HTML-Dokumente bestehen aus einer Ansammlung von ineinander verschachtelten Elementen, die eine hierarchische Struktur (ähnlich
der Ordnerstruktur eines Dateisystems) darstellen. Das erste und
oberste Element einer jeden HTML-Seite ist das HTML-Element. Darin
befinden sich die Elemente HEAD und BODY, die wiederum ihrerseits
Elemente enthalten (z.B. Absätze oder Bilder im BODY-Element). So
finden sich im Sprachschatz der ersten HTML-Versionen auch nur
Befehle, welche die Funktion oder Bedeutung eines Dokumentenbestandteils beschreiben:
Einführung in CSS
17
Galileo Computing: »CSS-Praxis« Leseprobe
왘 <p> ... </p> beschreibt einen Abschnitt,
왘 <h1> ... </h1> eine Überschrift erster Ordnung (die wichtigste),
왘 <a href="..."> ... </a> einen Link auf ein anderes Dokument
usw.
Strukturierte
Dokumente mit
HTML
Die Idee dieser Konstruktion war es, ein Dokument so zu beschreiben,
dass es auf vielen unterschiedlichen Anzeigegeräten gemäß seiner
Bedeutung wiedergegeben werden kann (»logische Auszeichnung«). So
ist es für ein HTML-Dokument im Prinzip egal, ob es auf einem hoch
auflösenden 19’’-Monitor oder einem monochromen Handydisplay
angezeigt werden soll. Das jeweilige Endgerät entscheidet selbst, wie
z.B. eine Überschrift 1. Ordnung aussehen soll.
In »reinem« HTML erstellte Webseiten sind dann zwar sehr gut strukturiert, sehen aber auch wenig ansprechend aus.
Abbildung 1.1 »Nur-HTML«-Websites beschränken sich auf die Darstellung der Struktur eines Dokuments.
Das in Deutschland wohl bekannteste und beliebteste Kompendium
zu HTML ist SelfHTML von Stefan Münz. Das inzwischen in der Version 8 erschienene elektronische Dokument ist nicht nur eine gute
Einführung und ein unverzichtbares Nachschlagewerk für HTML,
sondern bietet auch Informationen zu XML, CSS, JavaScript und anderen Programmiersprachen, die für Webentwickler interessant sind.
18
Einführung in CSS
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
Ergänzt wird es durch allgemeine Hinweise über das Web-Publizieren. Sie finden die aktuelle Version auf der beiliegenden CD-ROM.
Unter http://selfaktuell.teamone.de existiert ein Online-Portal mit
News, Tipps und Diskussionsforen rund um HTML.
3
4
Je mehr das WWW an Bedeutung gewann und aus dem Wirkungsbereich der Universitäten heraustrat, desto stärker wurden Wünsche, das
Erscheinungsbild von Webseiten genauer bestimmen zu können. Die
neueren Browser begannen dann, an der Sprachdefinition von HTML
vorbei, eigene Befehle zu interpretieren. Der damals marktbeherrschende Netscape Navigator führte z.B. mit der Version 2 die Möglichkeit ein, Schriftarten, -größen und -farben zu definieren.
Mit den Forderungen nach pixelgenauen Layouts konfrontiert, erkannten findige Webdesigner schnell, dass sich viele HTML-Befehle auch zu
Layoutzwecken nutzen lassen. Gerade die Tabellenfunktion lässt sich –
wenn die Tabellenränder abgeschaltet werden – ausgezeichnet zum
Herstellen von Gestaltungsrastern verwenden, wie sie in gedruckten
Publikationen üblich sind. Das sieht z.B. so aus:
5
6
7
8
Pixelgenaue
Layouts durch
HTML-Tricks
Abbildung 1.2 Zweispalten-Layout mit unsichtbarer Tabelle
Der Trick wird sichtbar, wenn wir die Ränder der Tabelle einschalten
(siehe Abbildung 1.3)
Speziell große Websites mit komplexen Layouts setzen eine Konstruktion von mehrfach ineinander verschachtelten Tabellen ein, um ein
möglichst exaktes Layout zu erreichen (hier die Homepage des Magazins »Spiegel«).
Von HTML zu CSS
19
9
Galileo Computing: »CSS-Praxis« Leseprobe
Abbildung 1.3 Durch Einschalten der Ränder wird die Tabellenkonstruktion enttarnt.
Abbildung 1.4 Der beliebte Online-Dienst des Spiegel setzt beim Design auf Tabellenkonstruktionen ...
20
Einführung in CSS
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
3
4
5
6
7
8
9
Abbildung 1.5 ... was deutlich wird, wenn wir die Ränder der Tabellen sichtbar
machen (schwarze Linien).
Das funktioniert zwar, hat aber eine Reihe von Nachteilen. Zum einen
wird der HTML-Code der Webseiten unnötig aufgebläht und kompliziert, was nicht nur die Ladezeit verlängert. Wenn Browser eine normale HTML-Seite schon teilweise anzeigen, während die letzten Reste
noch geladen werden, so wird eine Tabelle erst dann dargestellt, wenn
alle darin befindlichen Bestandteile vollständig geladen sind. Auch die
Wartung von Webseiten wird dadurch sehr schwierig. Zum anderen
geht die ursprüngliche Idee der plattformunabhängigen Darstellung
dabei verloren.
Nachteile des
Tabellenlayouts
Da die Vielfalt der möglichen Endgeräte (Computer-Monitore, Fernsehgeräte, Organizer, Handys, Screenreader) immer weiter zunimmt, und
selbst auf PCs die Unterschiede zwischen den Betriebssystemen, Webbrowsern und sogar unterschiedlichen Versionen desselben Browsers
enorm sind, stößt das »Tricksen« schnell an seine Grenzen. Entweder
werden immer größere Gruppen von Benutzern einfach ignoriert ...
Von HTML zu CSS
21
Galileo Computing: »CSS-Praxis« Leseprobe
Abbildung 1.6 So geht’s natürlich auch – wer nicht den richtigen Browser hat, muss
draußen bleiben!
... oder der Entwicklungsaufwand für verschiedene Versionen derselben Website steigt ins Absurde. Durch die Vermischung von Inhalt und
Layoutinformationen sind abwärtskompatible Seiten kaum möglich
und nachträgliche Änderungen des Aussehens mühsam und kompliziert.
Tabellen sind
nicht barrierefrei
Auch sehbehinderte Nutzer, die sich eine Website vorlesen lassen müssen, stoßen bei solchen Websites auf erhebliche Hürden. So lesen
Screenreader beispielsweise den Bildschirminhalt einfach zeilenweise
vor – was bei unserem zweispaltigen Layout vom Anfang sehr verwirrend wird.
1.2
Was sind CSS?
Cascading Stylesheets sind die Antwort auf die widersprüchlichen
Anforderungen nach möglichst genauer Kontrolle über das Aussehen
von Websites einerseits und nach »Säuberung« des HTML-Codes von
Formatierungs- und Layoutanweisungen andererseits.
Die wesentliche Idee von Cascading Stylesheets ist es, den HTML-Code
einer Website von allen Formatierungsbefehlen zu befreien. Diese werden getrennt notiert – in einem Stylesheet.
So wird die konsequente Trennung von Struktur, Aussehen und Inhalten gewahrt:
22
Einführung in CSS
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
왘 HTML-Befehle sind nur für die logische Beschreibung eines Doku-
3
ments zuständig.
왘 Zugeordnete Stil-Anweisungen sorgen für die Formatierung und das
4
Aussehen des Dokuments.
왘 Die Inhalte stehen als normaler Text zwischen den HTML-Tags.
5
6
7
8
9
Abbildung 1.7 Aus HTML-Code und Stylesheet entsteht eine Webseite.
Einem HTML-Dokument kann durch Änderung des Stylesheets ein
anderes Aussehen gegeben werden. Für unterschiedliche Endgeräte
können unterschiedliche Stylesheets bereitgestellt werden, und Benutzer können sogar eigene Stylesheets verwenden, beispielsweise um bei
Sehschwäche die Schriftgröße heraufzusetzen.
Neben dieser Trennung von Struktur und Gestaltung erweitern Stylesheets die Möglichkeiten gewaltig, Elemente eines HTML-Dokumentes
zu formatieren. Neben Schriftart, -größe und -farbe, die auch mit dem
HTML-Tag <font> beeinflusst werden können, erlaubt CSS beispielsweise die Einstellung der Zeilenhöhe, eines Einzuges und anderer typo-
Was sind CSS?
Erweiterte
Formatierungsmöglichkeiten
23
Galileo Computing: »CSS-Praxis« Leseprobe
grafischer Parameter. Auch die Größe und Platzierung von Elementen
lässt sich nahezu beliebig bestimmen.
Stylesheets =
Formatvorlagen
Sie können Stylesheets mit den Formatvorlagen von Textverarbeitungsprogrammen wie Microsoft Word vergleichen: Sie weisen logisch markierten Dokumentbestandteilen, etwa einer Überschrift, bestimmte
Erscheinungsmerkmale zu, beispielsweise eine Schriftgröße oder -farbe.
1.2.1
CSS Level 1
Kurze Geschichte der CSS
Die erste Version der Cascading Stylesheets wurde 1996 als CSS Level 1
vom World Wide Web Consortium (W3C) verabschiedet. Der Umfang
war damals noch recht überschaubar. Die Spezifikation umfasste nur 76
Seiten und beschränkte sich hauptsächlich auf Textgestaltung und Farben. Netscape hatte einen eigenen Vorschlag beim W3C eingereicht –
JavaScript Stylesheets – und diesen auch gleich im 1997 erschienenen
Netscape Navigator 4 umgesetzt.
1996 erschien auch der Internet Explorer 3, bei dem erstmals eine Art
CSS-Unterstützung vorhanden war.
1997 wurde der Wirkungsbereich von CSS auf Layoutaufgaben ausgedehnt – das W3C veröffentlichte ein Arbeitspapier zu CSS-P (CSS positioning). Später wurden die darin beschriebenen Eigenschaften in CSS
Level 2 übernommen.
Sie finden alle Spezifikationen von CSS 1 auf der beiliegenden
CD-ROM.
CSS Level 2
Die bis heute aktuelle Version der Cascading Stylesheets ist CSS Level 2
– verabschiedet als offizielle Empfehlung des W3C im Mai 1998. Die
Spezifikation ist auf knapp 340 Seiten angewachsen und beschreibt
neben dem Aussehen von HTML-Dokumenten auch ihre Erscheinung
in anderen Medien wie Screenreadern oder auf dem Drucker.
Sie finden alle Spezifikationen von CSS 2 auf der beiliegenden
CD-ROM.
CSS 2.1
24
Inzwischen hat das W3C ein Update für CSS 2 vorgestellt. In CSS 2.1
werden einige Fehler der ursprünglichen Spezifikation behoben und
einige Unklarheiten ausgeräumt. Ansonsten passt das W3C die Spezifikation hauptsächlich der Browserrealität an und erklärt einige Eigenschaften, die ohnehin nicht unterstützt wurden, zu optionalen
Einführung in CSS
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
Spezifikationen. CSS 2.1 hat zum Zeitpunkt der Manuskripterstellung
den Status »Candidate Recommendation« – es ist noch nicht offiziell
verabschiedet (das wäre dann »W3C Recommendation«), steht aber
kurz davor.
3
4
Sie finden die zum Zeitpunkt der Manuskripterstellung aktuellen Spezifikationen von CSS 2.1 auf der beiliegenden CD-ROM.
5
In der Bearbeitung befindet sich momentan CSS Level 3, welches die
Unterstützung fortgeschrittener Layouttechniken und die Einbindung
alternativer Medienformate weiter verbessern soll. Über den aktuellen
Stand informiert die Website des W3C unter: http://www.w3.org/
style/
CSS Level 3
In der Weiterentwicklung von HTML zu XML spielen Stylesheets sogar
eine noch größere Rolle: Hier kann durch Stil-Anweisungen festgelegt
werden, welche Elemente des Dokumentes für das betreffende Endgerät überhaupt angezeigt werden. Eine Adressdatenbank würde bei Ausgabe auf einem Webbrowser beispielsweise Bilder der Personen
anzeigen, während die gleiche Datenbank bei Abruf über ein Handy die
– für eine Anzeige auf dem winzigen Display viel zu großen – Bilder
nicht zeigt.
Stylesheets
werden immer
wichtiger
1.3
7
8
Wie sehen CSS aus?
Ein Stylesheet ist eine Sammlung von Anweisungen, die beschreiben,
wie bestimmte Elemente eines HTML-Dokumentes ausgegeben werden
sollen.
Eine CSS-Anweisung besteht immer aus zwei Teilen:
Einem Selektor, der beschreibt, was formatiert werden soll, und einer
Deklaration, die beschreibt, wie dies geschieht.
Die Deklaration selbst besteht wiederum aus zwei Teilen: der Eigenschaft und dem dieser Eigenschaft zugeordneten Wert. Dabei befindet
sich der Selektor stets links und rechts die Deklaration in einer
geschweiften Klammer.
Schema einer
CSS-Anweisung
Mit CSS können Sie sowohl bestehende HTML-Elemente umdefinieren,
also ihnen ein neues Erscheinungsbild zuweisen, als auch vollkommen
eigene Formatzuweisungen, Klassen genannt, erstellen.
Wie sehen CSS aus?
6
25
9
Galileo Computing: »CSS-Praxis« Leseprobe
Abbildung 1.8 Schema einer CSS-Anweisung
Einfache
CSS-Beispiele
Beispiel: p { color: black }
legt als Farbe für den Text des HTML-Elementes <p> Schwarz fest.
.fussnote { color: #cccccc }
erstellt eine neue Klasse mit dem Namen »fussnote« und weist ihr die
Textfarbe (Vordergrundfarbe) mit dem hexadezimalen Wert cccccc (entspricht einem mittleren Grau) zu. Was Klassen sind und wie damit
umgegangen wird, zeige ich Ihnen im nächsten Kapitel.
In einem Selektor können mehrere Elemente aufgeführt werden, auf
die sich die folgende Deklaration bezieht. Sie werden dann durch Kommata getrennt.
Beispiel: p, h1 { color: black }
legt als Farbe für den Text der Elemente <p> und <h1> Schwarz fest.
In einer Deklaration können gleichfalls mehrere Eigenschaften und
Werte zusammengefasst werden.
Beispiel: p { color: black; background-color: green }
legt für das Element <p> Schwarz als Textfarbe und Grün als Hintergrundfarbe fest. Hierbei ist das Semikolon das Trennzeichen.
Die Anweisungen können entweder direkt in HTML-Tags integriert
werden
<h1 style="color: black; background-color: green;">Eine
schwarze Überschrift auf grünem Grund</h1>
oder gesammelt notiert werden – in einem Stylesheet.
Stylsheets
26
Stylesheets können im <head>-Bereich einer Webseite notiert werden.
Die Kommentarzeichen dienen dem Schutz vor alten Browsern, die
Einführung in CSS
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
kein CSS verstehen und die CSS-Anweisungen sonst einfach anzeigen
würden.
3
<head>
<style type="text/css">
<!-h1 { color: black }
.fussnote { color: black; background-color: green; }
-->
</style>
</head>
...
4
5
6
7
8
Listing 1.1 Einbindung eines Stylesheets im Dateikopf eines HTML-Dokumentes
Die Anweisungen können auch in eine Datei ausgelagert und über
einen Verweis mit einer oder mehreren HTML-Dateien verknüpft werden.
Stylsheets
einbinden
<head>
<title>Name des Dokumentes</title>
<link rel="stylesheet" type="text/css"
href="styles.css">
</head>
...
Listing 1.2 Verlinkung eines Stylesheets per Link-Befehl
Eine externe CSS-Datei ist eine einfache Textdatei mit der Endung
».css«.
1.4
»Hallo Welt!« auf CSS
Sehen wir uns eine einfache Webseite einmal im Vergleich an.
Traditionell ist das erste Beispiel für Programmiersprachen die Ausgabe
des Textes »Hallo Welt!«. Obwohl CSS und HTML keine Programmiersprachen sind, schließen wir uns da einfach an – ein einfacheres Beispiel ist auch kaum vorstellbar.
Zunächst verwenden wir reines, »logisches« HTML:
1:
2:
3:
4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
»Hallo Welt!« auf CSS
Logisches HTML
27
9
Galileo Computing: »CSS-Praxis« Leseprobe
5:
6:
7:
8:
9:
10:
11:
<title>Hallo Welt!</title>
</head>
<body>
<h1>Ein einfaches Beispiel</h1>
<p>Hallo Welt!</p>
</body>
</html>
Listing 1.3 »Hallo Welt« mit einfachem HTML
Abbildung 1.9 »Hallo Welt« mit HTML-Mitteln
Nun verwenden wir eine Tabelle zum Layouten und den <font>-Tag,
um die Schriften aufzupeppen: Wir wählen eine andere Schriftart, färben den Seitenhintergrund und fügen Seitenränder hinzu.
HTML als
Gestaltungsmittel
28
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>Hallo Welt!</title>
</head>
<body bgcolor="#FFCC66" text="#006633">
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="5%"> </td>
<td><b><font color="#990033" size="5"
face="Comic Sans MS">Ein einfaches
Beispiel</font></b></td>
</tr>
<tr>
<td> </td>
<td> </td>
Einführung in CSS
1
Galileo Computing: »CSS-Praxis« Leseprobe
19:
20:
21:
22:
23:
24:
25:
26:
2
</tr>
<tr>
<td> </td>
<td>Hallo Welt!</td>
</tr>
</table>
</body>
</html>
3
4
5
6
Listing 1.4 HTML als Gestaltungsmittel
7
8
9
Abbildung 1.10 Mit HTML-»Tricks« gestaltete Webseite
Der Preis für das »anspruchsvollere« Design ist ein um mehr als 100%
vergrößerter HTML-Code und damit eine verdoppelte Ladezeit, verlorene Übersichtlichkeit und schlechtere Zugänglichkeit für verschiedene
Browserimplementierungen und Geräte sowie die Suchmaschinen.
Verwenden wir dagegen Cascading Stylesheets für die Formatierung,
vergrößert sich der HTML-Code gegenüber der ersten Version nur um
eine Zeile, die zur besseren Übersichtlichkeit im Folgenden fett ausgezeichnet wird.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>Hallo Welt!</title>
<link href="hallo.css" rel="stylesheet"
type="text/css">
</head>
<body>
<h1>Ein einfaches Beispiel</h1>
<p>Hallo Welt! (nur mit CSS)</p>
»Hallo Welt!« auf CSS
Logisches
HTML + CSS
29
Galileo Computing: »CSS-Praxis« Leseprobe
12:
13:
</body>
</html>
Listing 1.5 HTML für die Struktur und CSS für das Aussehen
Sämtliche Formatierungsinformationen befinden sich in der ausgelagerten Datei »hallo.css«, die so aussieht:
body {
background-color: #FFCC66;
}
h1 {
font-family: "Comic Sans MS";
font-size: x-large;
color: #90033;
margin-bottom: 15px;
margin-left: 5%;
}
p {
color: #006633;
font-size: 0.85em;
margin-left: 5%;
}
Abbildung 1.11 Gleiches Aussehen bei reduziertem Code mit CSS
Vorteile bei
Änderungen
30
Bei diesem einfachen Beispiel zeigt sich die Einsparung zwar noch
nicht, aber denken Sie einmal an eine Website mit mehreren hundert
oder gar tausend Dateien, die auf dieselbe Weise formatiert werden.
Anstatt in jeder Datei die Formatierung im HTML-Code vorzunehmen,
wird dasselbe Stylesheet in allen Dateien einfach eingebunden. Auch
Änderungen werden zum Kinderspiel, da nur noch eine einzige Datei
geändert werden muss!
Einführung in CSS
1
Galileo Computing: »CSS-Praxis« Leseprobe
Müssen Sie nun wie in den grauen Vorzeiten von HTML alle CSS-Dokumente wieder per Hand schreiben?
2
CSS mit
Dreamweaver
Nein. Moderne Website-Editoren – beispielsweise Dreamweaver von
Macromedia – bieten eine mehr oder weniger komfortable CSS-Unterstützung, sodass Sie auch hier nicht auf den (inzwischen) gewohnten
Komfort beim Erstellen von Webseiten verzichten müssen.
4
5
Trotzdem ist es auch und gerade bei Stylesheets wichtig zu wissen,
warum eine bestimmte Anweisung so und nicht anders funktioniert,
und beim derzeitigen Stand der Entwicklung ist auch immer wieder das
Eingreifen per Hand erforderlich.
6
7
Aber sehen wir uns doch einmal unser »Hallo Welt«-Beispiel mit Dreamweaver an.
8
9
Sie finden auf der beiliegenden CD-ROM eine Testversion von Dreamweaver MX 2004, der allerneuesten Ausgabe des Editors (leider war
zum Zeitpunkt der Manuskripterstellung noch keine Version in deutscher Sprache verfügbar). Für dieses Beispiel installieren Sie Dreamweaver und öffnen die ebenfalls auf der CD-ROM befindliche Datei hallo_
html.htm.
Sie sollten dann in etwa folgendes Bild (siehe Abbildung 1.12) im Editor sehen (ggf. müssen Sie auf den im Bild umrandeten Knopf drücken).
Abbildung 1.12 Hauptfenster von Dreamweaver
»Hallo Welt!« auf CSS
3
31
Galileo Computing: »CSS-Praxis« Leseprobe
Lassen Sie sich nicht von den vielen Optionen irritieren – für uns sind
hier vor allem das Quellcode-Fenster 1, die Layout-Ansicht 2 sowie die
Reiter Design 3 und Tags 4 wichtig. Eine detailliertere Beschreibung
von Dreamweaver MX 2004 finden Sie auf der CD-ROM sowie in Kapitel 8, Tools für CSS.
Als Erstes weisen wir dem Dokument die Hintergrundfarbe und die
Schriftformatierung zu. Dazu rufen Sie den Menüpunkt Modify • Page
Properties auf. Hier können Sie (eine Neuerung in Dreamweaver MX
2004) allgemeine Einstellungen für Hintergrund, Schriften und Linkfarben auswählen.
Mit dem Farbpicker wählen Sie hier die Hintergrundfarbe für die Seite
aus (siehe Abbildung 1.13).
Abbildung 1.13 Auswahl der Seiteneigenschaften per CSS
Das Ergebnis sollte dann wie in Abbildung 1.14 aussehen.
Dreamweaver
MX 2004
32
Im Unterschied zur vorherigen Version nutzt Dreamweaver MX 2004
von sich aus die Formatierung per CSS: Während »damals« nämlich eine
allgemeine Hintergrundfarbe in den BODY-Tag geschrieben wurde
(<body bgcolor="#ffcc66" ...>), sehen Sie hier im Quellcode-Fenster
die Hintergrundfarbe als Stil-Anweisung. Im Tag-Reiter finden Sie alle
relevanten CSS-Anweisungen, die sich auf den gerade im Editor markierten Tag auswirken 5.
Einführung in CSS
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
3
4
5
6
7
8
9
Abbildung 1.14 Hintergrundfarbe per CSS
Als Nächstes formatieren wir die Überschrift mit »Comic Sans MS« in
x-large. Dazu klicken Sie im Reiter Design 3 unten das zweite Symbol
von links an (New CSS Style = Neuen Stil erstellen).
Zunächst müssen wir uns entscheiden, ob wir eine Klasse erstellen wollen, einen HTML-Tag umdefinieren oder einen »fortgeschrittenen«
Selektor (Letzteres ist neu in MX 2004) definieren. Da wir die Überschrift bearbeiten wollen, entscheiden wir uns für den HTML-Tag und
wählen in der Dropdown-Liste den Tag h1 aus.
Unten legen wir noch fest, dass wir ein externes Stylesheet erstellen
wollen und wählen (im nächsten Schritt) einen Namen (»hallo1.css«).
In der nun erscheinenden Dialogbox können wir die Schrift einstellen
und die Ränder festlegen (Abschnitt »Box«). Später werden die Ränder
noch genauer erläutert – hier wählen wir für margin-bottom: 15px und
für margin-left: 5%. Die anderen Felder lassen wir leer – ein eventuell
gesetztes Häkchen bei »same for all« müssen wir vorher entfernen.
»Hallo Welt!« auf CSS
33
Galileo Computing: »CSS-Praxis« Leseprobe
Abbildung 1.15 Neue Formatierung für <h1>
Abbildung 1.16 Schrifteinstellungen und Abstände für »h1«
Unser neu erstelltes Stylesheet wird nun im Design-Reiter aufgeführt.
Wenn Sie auf das Kästchen mit dem »+«-Symbol klicken, sehen Sie
unseren ersten Stil.
Wir müssen nur noch den Stil für den normalen Text definieren. Dazu
klicken Sie im Design-Reiter mit der rechten Maustaste auf den Dateinamen des Stylesheets und wählen im Kontextmenü »Neu« aus. Der
Rest ist wie gehabt – die gleichen Dialogfenster erlauben uns, für die
Schrift die Farbe #006633 und eine Schriftgröße von 0.85em zu wählen.
Als margin-left stellen wir 5% ein.
34
Einführung in CSS
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
Fertig! Wenn wir die Datei nun speichern (als »hallo_css2.htm«) und im
Browser öffnen, sieht es genauso aus wie die beiden Vorgänger.
3
Wenn Sie den Code exakt so haben wollen wie in der Variante »CSS per
Hand«, müssen Sie die Anweisungen für <body>, die Dreamweaver
automatisch in das HTML-Dokument eingefügt hat, dort ausschneiden
und in die CSS-Datei einfügen. Dazu öffnen Sie einfach das Stylesheet
selbst in Dreamweaver:
4
5
6
7
8
9
Abbildung 1.17 Stylesheets in Dreamweaver MX 2004 direkt bearbeiten
Sie sehen, Dreamweaver MX 2004 lässt sich auch als CSS-QuellcodeEditor verwenden. Mehr über Dreamweaver und seine CSS-Fähigkeiten erfahren Sie in Kapitel 8, Tools für CSS.
1.5
Vorteile und Grenzen des CSS-Einsatzes
Der Einsatz von Cascading Stylesheets bietet eine Reihe von Vorteilen:
왘 Einfachere HTML-Dokumente
Durch die Trennung von Gestaltung und Inhalt wird eine HTMLSeite kleiner und übersichtlicher. Spätere Änderungen werden einfacher.
Vorteile und Grenzen des CSS-Einsatzes
35
Galileo Computing: »CSS-Praxis« Leseprobe
왘 Mehr Kontrolle
Die CSS-Anweisungen erlauben mehr Kontrolle über die Formatierung eines Dokumentes. Gerade typografisch wichtige Anweisungen, wie die Angabe der Zeilenhöhe, sind mit reinem HTML gar
nicht möglich.
왘 Neue Möglichkeiten
Mit CSS ergeben sich neue Gestaltungsmöglichkeiten, die mit reinem HTML nicht zu erreichen sind. Insbesondere das Ein- und Ausblenden von Elementen und die Möglichkeiten fixer Layouts
(Kapitel 5, CSS in der Praxis) eröffnen neue Horizonte.
왘 Höhere Entwicklungsgeschwindigkeit
Da auf Tricks wie Layout-Tabellen und »Blinde GIFs« verzichtet werden kann, wird auch die Entwicklung selbst deutlich beschleunigt.
Sie wollen einen Kasten mit einem 1 Pixel breiten roten Rahmen?
Mit HTML müssen Sie dazu ineinander verschachtelte Tabellen basteln – mit CSS genügt die Anweisung: border: 1px solid red
왘 Zugängliche Websites
Durch den Verzicht auf Formatierungsanweisungen im HTML-Code
werden Ihre Seiten auch für Menschen mit Behinderungen oder speziellen Anzeigegeräten (Organizer, WebTV) besser erreichbar.
Zugänglichkeit oder Barrierefreiheit (englisch: accessibility) wird in
den nächsten Jahren auch in Deutschland für Websites immer wichtiger werden. Gesetzliche Bestimmungen, die zumindest für staatliche Websites Barrierefreiheit fordern, sind bereits verabschiedet.
왘 Zukunftssicherheit
Erfreulicherweise orientieren sich die wichtigen Browserhersteller
immer mehr an den Standards für Websites, die vom W3C veröffentlicht werden. CSS ist ein solcher Standard. Websites, die sich an
diese Standards halten, müssen nicht befürchten, mit der nächsten
Browsergeneration nicht mehr zu funktionieren, wie es beim Einsatz
von HTML-Tricks schon einmal passieren kann.
왘 Qualitätsbeweis
Für professionelle Webentwickler ist auch die Frage der Gewährleistung wichtig. Wenn es einmal zum Streit um die Qualität einer Website kommt, woran lässt sich die Güte von HTML-Code erkennen?
Ein Browser, mit dem eine Website schrecklich aussieht, lässt sich
immer finden. Da kann es sehr hilfreich sein, internationale Standards bei der Erstellung berücksichtigt zu haben.
36
Einführung in CSS
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
Trotz aller Fortschritte gibt es auch für den Einsatz von Stylesheets
Grenzen.
Nicht alle Browser – und erst recht nicht alle anderen Endgeräte – verstehen alle Stylesheet-Angaben. Alte Browser können mit StylesheetAngaben gar nichts anfangen oder unterstützen sie nur teilweise. Generell hinken selbst die aktuellen Browser der Entwicklung der Stylesheet-Definition deutlich hinterher. So ist CSS Level 2 längst
verabschiedet, wird jedoch selbst von aktuellen Browsern nicht hundertprozentig umgesetzt.
3
Nutzen von CSS
noch eingeschränkt
5
6
7
Zusätzlich gibt es Programmfehler (Bugs) in der CSS-Implementierung
nahezu aller Browser, die dazu führen, dass syntaktisch korrekte CSSAnweisungen nicht so ausgeführt werden, wie sie eigentlich laut CSSDefinition angezeigt werden sollten. In den Kapiteln 1, Einführung in
CSS, und 4, Browser-Kompatibilität, werde ich auf solche Probleme
detailliert eingehen. Die Verwendung von Grafiken als Text oder Layout-Hilfsmittel (z.B. um Überschriften in bestimmten Schriftarten zu
erreichen) schränkt den Nutzen von Stylesheets ebenfalls ein, da das
Aussehen und die tatsächliche Größe von Grafiken nicht per Stylesheet
verändert werden können – wohl allerdings die Ausrichtung. Es ist auch
immer noch nicht ohne weiteres möglich, beliebige Schrifttypen in
HTML-Dokumenten zu verwenden.
8
9
Und schließlich sind nicht alle Dokumente sinnvoll auf andere Formate
übertragbar. So lässt sich eine Tabelle mit zehn Spalten auch mit den
besten Stylesheets nicht so formatieren, dass sie auf einem Handy-Display sinnvoll angezeigt werden kann.
Vorteile und Grenzen des CSS-Einsatzes
4
37
1
Galileo Computing: »CSS-Praxis« Leseprobe
5 CSS in der Praxis
2
3
4
5.1 Strategien für den CSS-Designer ................. 127
5
5.2 Schriftgrößen ............................................... 139
6
5.3 Positionierung ............................................. 146
7
8
5.4 Zugängliche Websites mit
CSS (Accessibility) ....................................... 165
5.5 Zentrierter Inhalt ......................................... 168
5.6 CSS-Menüs .................................................. 174
5.7 Bildergalerie ................................................ 202
5.8 Schönere Formulare ..................................... 206
5.9 Druckversion per CSS .................................. 213
9
1
Einführung in CSS
2
Grundlegende Konzepte von CSS
3
Die Zukunft von CSS
4
Browser-Kompatibilität
5
CSS in der Praxis
6
Skripte
7
Beispiele
8
Tools für CSS
9
Die CSS-Elemente
1
Galileo Computing: »CSS-Praxis« Leseprobe
5
CSS in der Praxis
5.1
Strategien für den CSS-Designer
2
3
4
Grundsatz für die Arbeit mit Stylesheets ist die Erstellung valider, d.h.
syntaktisch korrekter Dokumente – am besten in XHTML.
Eigentlich ist es ja banal; fehlerfreie Dokumente sollten eigentlich eine
Selbstverständlichkeit sein. Aber ein Blick in die Quelltexte vieler, auch
großer Websites belehrt uns schnell eines Besseren (Schlechteren).
5.1.1
5
Valide
Dokumente
6
7
Valide Dokumente erstellen
Durch die rasche Veränderung der für Webdesign wichtigen Sprachen
(HTML, XHTML, XML, JavaScript, diverse Skriptsprachen, ActionScript), durch die Vermischung von »offiziellen« Sprachbestandteilen
und proprietären Erweiterungen der Browserhersteller, durch die Fehlertoleranz vieler Browser und durch die vielen Bugs, die komplizierte
Work-arounds erforderlich machten, hat sich bei vielen Webdesignern
die pragmatische Haltung »Richtig ist, was funktioniert« durchgesetzt.
Eine weitere Ursache für »schlechten« Code sind auch grafische Editoren wie Frontpage, GoLive und Dreamweaver, die zumindest in den
ersten Versionen stark verbesserungsfähigen HTML-Code produzierten
(vom MS Word für Windows-HTML-Export gar nicht zu sprechen).
Dabei gibt es genug gute Gründe, den Mehraufwand für syntaktisch
korrekte, geordnete Dokumente auf sich zu nehmen:
8
9
Gründe für
standardkonforme
Websites
왘 Zukunftssicherheit
Glücklicherweise ist die Standardtreue der Browserhersteller deutlich besser geworden. Standardkonforme Webseiten werden daher
mit hoher Sicherheit auch in Zukunft von den wichtigen Browsern
korrekt angezeigt werden. Nichts ist ärgerlicher, als eine schon fertige Website nachträglich umzubauen, weil ein »schlauer Trick« im
neuesten Browser nicht mehr funktioniert (und bei Auftraggebern
macht es auch keinen besonders guten Eindruck).
왘 Fehlersuche
Standardkonforme Dokumente lassen sich automatisch auf Fehler
untersuchen. Viele Probleme sind auf einfache Tippfehler zurückzuführen. Der HTML-Validator (Abschnitt 5.1.2) zeigt solche Fehler
sofort und erspart die mühselige Suche per Hand.
왘 Qualitätssicherung
Standardkonforme Dokumente sind auch für Kunden ein Zeichen
von Qualität. Besonders in Streitfällen ist es sinnvoll, als Qualitäts-
CSS in der Praxis
127
Galileo Computing: »CSS-Praxis« Leseprobe
kriterium für das erstellte Werk einen anerkannten Standard vorweisen zu können.
왘 Accessibility
Standardkonforme Dokumente sind ein erster Schritt (allerdings
auch nur das) hin zu behindertenfreundlichen und zugänglichen
Websites. Dies ist nicht nur eine moralische Frage, sondern ist für
bestimmte Bereiche jetzt schon gesetzlich gefordert.
Nachteile von
standard-gemäßem Arbeiten
Allerdings gibt es im praktischen Einsatz auch Nachteile: Vor allem
durch die schlechte Standardunterstützung in der Vergangenheit tummeln sich noch viele Browser auf dem Markt, die solche Dokumente
fehlerhaft anzeigen – allen voran der Netscape Navigator 4.x. Im konkreten Einzelfall kann das bedeuten, entweder ein Dokument korrekt
standardkonform und valide zu erstellen und dafür eine in älteren
Browsern schlechtere Darstellung in Kauf zu nehmen oder Abstriche an
der »reinen Lehre« zu machen. Glücklicherweise gibt es auch bei der
Standardtreue unterschiedliche »Härtegrade«, wie wir später sehen
werden.
Was ist erforderlich für eine valide Webseite?
Dokumententyp
angeben
Es ist besonders bei neueren HTML-Sprachversionen wichtig, den richtigen Dokumententyp anzugeben, damit der Browser (oder ein anderes
Ausgabegerät) den folgenden Code korrekt interpretieren kann. Ein
fehlender oder fehlerhafter Dokumententyp schaltet einige Browser in
einen besonderen Anzeigemodus, den »quirks mode«, mit dem versucht
wird, das Anzeigeverhalten alter Browser nachzuahmen – siehe dazu
auch Kapitel 4, Browser-Kompatibilität.
5.1.2
Der W3C-Validator
Ein ausgezeichnetes Hilfsmittel, um den korrekten Aufbau eines
(X)HTML-Dokumentes zu testen, ist der vom W3C bereitgestellte Validator. Er testet HTML-, XHTML- und XML-Dokumente auf ihre syntaktische Korrektheit und Vollständigkeit.
Es gibt ihn in einer Online-Variante, die sich zum schnellen Testen von
Einzeldokumenten eignet, sowie als Download-Variante, die auch bei
einigen HTML-Editoren eingebunden ist.
Die Bedienung ist einfach: Sie wählen das zu überprüfenden Dokument
durch Eingabe der URL aus (es gibt dort auch eine Maske, in der Sie ein
Dokument hochladen können). Encoding und Dokumententyp sollten
128
CSS in der Praxis
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
in einem validen Dokument angegeben sein – daher können Sie diese
Einstellungen auf »automatisch ermitteln« lassen. Nun können Sie noch
angeben, ob Sie den Quellcode, eine Zusammenfassung auf Grundlage
der logischen Struktur der Überschriften und den Dokumentenbaum
anzeigen lassen und ob Sie Attribute mit überprüfen wollen.
3
4
5
6
7
8
9
Abbildung 5.1 Gratulation vom W3C – das geprüfte Dokument ist valide!
Dann klicken Sie auf Validate und erfahren, ob Ihr Dokument den
Segen des W3C erhält.
Sie finden den Online-Validator unter: http://validator.w3.org
5.1.3
CSS zur Schriftgestaltung – »Weicher CSS-Einsatz«
Eine relativ unkomplizierte und daher auch für Einsteiger geeignete
Methode bei der Nutzung von Stylesheets ist es, erst einmal nur die
Eigenschaften zu verwenden, die in nahezu allen Browsern korrekt
oder zumindest ohne gravierende Fehldarstellungen angezeigt werden.
Das sind vor allem diejenigen Eigenschaften, die sich auf die Schriftgestaltung beziehen. Zum einen werden diese Eigenschaften in fast allen
Browsern größtenteils richtig wiedergegeben, zum anderen fällt es in
der Regel weniger auf, wenn eine Anweisung zur Schrift nicht hundertprozentig korrekt angezeigt wird.
Strategien für den CSS-Designer
129
Galileo Computing: »CSS-Praxis« Leseprobe
:link
font-family
[Schriftfamilie(n)], serif, sans-serif, monospace
font-style
normal, italic
font-weight
normal, bold
font-size
[absolute Größenangabe], [relative Größenangabe], [Prozentwert], [Schlüsselwörter], larger, smaller
text-decoration
underline, line-through, none
text-transform
capitalize, uppercase, lowercase, none
white-space
normal, pre
line-height
normal
text-indent
[Länge], [Prozentwert]
text-align
left, right, center
color
background-image
[url], none
background-repeat
repeat, no-repeat
border-width
thin, medium, thick, [Breite]
border-style
solid, double, groove, ridge, inset, outset, none
border
[Farbangabe]
list-style-type
disc, circle, square, decimal, lower-roman, upper-roman,
lower-alpha
list-style
[Schlüsselwort]
display
none
Tabelle 5.1 Tabelle der unproblematischen Eigenschaften
Viele der Einschränkungen sind lediglich auf den Netscape Navigator 4
zurückzuführen. Eigenschaften, die hier fehlen, können im Einzelfall
durchaus erfolgreich eingesetzt werden – wenn man gewillt ist, herumzuprobieren und umfangreiche Tests durchzuführen.
5.1.4
Komplettlayout mit CSS – »Harter CSS-Einsatz«
Deutlich komplizierter ist es, das gesamte Layout einer Website durch
CSS zu realisieren. Die Stile-Eigenschaften, die für die Positionierung
von Elementen notwendig sind, werden von den verschiedenen Browsern unterschiedlich, fehlerhaft und unvollständig interpretiert. Eine
über verschiedene Betriebssysteme und Browser hinweg einigermaßen
130
CSS in der Praxis
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
gleiche Darstellung lässt sich nur durch browserspezifisch angepasste
Stylesheets, diverse Tricks, eingehende Betrachtung der Fehler der verschiedenen Browser und durch sehr viele Tests erreichen.
3
4
Wenn Sie einen relevanten Anteil von Netscape 4.x-Nutzern für Ihre
Site erwarten, sollten Sie ein komplexeres CSS-basiertes Layout nicht in
Erwägung ziehen.
5
Die folgende Seite besteht vollständig aus per CSS positionierten <div>Bereichen. Äußerlich unterscheidet sie sich nicht von den bekannten
Tabellen-Layouts:
6
7
8
9
Abbildung 5.2 Vollständig auf CSS basierendes Layout
Erst der Blick hinter die Kulissen – sprich: auf den Quellcode – zeigt die
Unterschiede (der Quellcode ist aus Gründen der Übersicht leicht
gekürzt):
1:
2:
3:
<?xml version: "1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/2000/
REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
Strategien für den CSS-Designer
131
Galileo Computing: »CSS-Praxis« Leseprobe
Der Dokumententyp zeigt: Es handelt sich um ein XHTML-Dokument.
4:
5:
6:
9:
10:
11:
12:
13:
14:
15:
<head>
<title>Newsletters -- South African Tourism</title>
<meta http-equiv="content-style-type"
content="text/css" />
<script language="javascript" type="text/javascript"
src="js/nn_resize.js"></script>
<link rel="stylesheet" type="text/javascript"
media="screen" href="css/screennn.js" />
<link rel="stylesheet" type="text/css" media="screen"
ref="css/screennn.css" />
<style type="text/css" media="screen">
@import url(css/screen.css);
</style>
Hier eine Reihe von eingebundenen Skripten. Die meisten dienen der
Einbindung unterschiedlicher Stylesheets unter besonderer Berücksichtigung des Netscape Navigators 4.
17:
18:
19:
20:
21:
22:
132
</head>
<body>
<div id="head">
<div id="flagSymbol">
<img src="img/flagsymbol.gif"
alt="" width="199" height="97" border="0" />
</div>
<div id="headImage"><img src="img/header.jpg"
alt="" width="549" height="97" border="0" /></div>
<div class="nav" id="headFirstRow"><img src="img/
south_african_tourism.gif" alt="" width="193"
height="10" border="0" />  <a
class="active"
href="index.html" title="Newsletters Home">
NEWSLETTER</a></div>
<div class="nav" id="headSecondRow"> <a
href="news_from_germany/index.shtml" title="News
From Germany Newsletter">NEWS FROM GERMANY</a> | <a
href="presse-info/index.shtml" title="Sü
dafrika Presse-Info Newsletter">SÜDAFRIKA
PRESSE-INFO</a>
CSS in der Praxis
1
Galileo Computing: »CSS-Praxis« Leseprobe
27:
2
| <a href="product_news/index.shtml" title="Product
News Newsletter">PRODUCT NEWS</a></div>
</div>
3
4
Der Kasten mit dem Seitenkopf
5
Der Quellcode ist sehr verständlich benannt, sodass Sie leicht erkennen, welche Bereiche welche Inhalte enthalten.
28:
29:
30:
31:
32:
33:
35:
42:
43:
44:
46:
47:
6
<div class="pageBody" id="pageBodyTwoRowNav">
<div class="content" id="side">
<h3>Newsletters</h3>
</div>
<div class="content" id="main">
<h4 class="top"><a href="news_from_germany/
index.shtml" title="News From Germany Newsletter">NEWS FROM GERMANY</a></h4>
<p>News from the German travel market bimonthly.</p>
<p> </p>
<p><a href="newsletter.html">Newsletter abonnieren</a> – <a href="newsletter_e.html">subscribe
newsletter</a>
</p>
</div>
<br clear="all" />
7
8
9
Seitenkörper mit zwei Spalten
Links befindet sich ein Bereich mit der id="side", der die Überschriften enthält – rechts daneben der Fließtext.
48:
49:
<div id="foot">
<div class="nav" id="footFirstRow">  <a
class="active" href="index.html" title="Newsletters
Home">NEWSLETTER</a></div>
<div class="nav" id="footSecondRow"><a
href="news_from_germany/index.shtml" title="News
From Germany Newsletter"> NEWS FROM GERMANY</a> |
<a href="presse-info/index.shtml" title="Südafrika Presse-Info Newsletter">SÜDAFRIKA PRESSE-
Strategien für den CSS-Designer
133
Galileo Computing: »CSS-Praxis« Leseprobe
54:
56:
58:
INFO</a>
| <a href="product_news/index.shtml" title="Product
News Newsletter">PRODUCT NEWS</a></div>
<div class="address" id="footThirdRow">
  South African Tourism  
|  An der Hauptwache 11  |
  60313 Frankfurt</div>
<div class="address" id="footFourthRow">  T:
0949-69-92 91 29 0  |  F: 094969-28 09 50  |  <a href="mailto:
[email protected]">
[email protected]</a></div>
</div>
Die Fußzeile mit unterem Menü:
59:
60:
61:
</div>
</body>
</html>
Listing 5.1 Komplettlayout per CSS
Abbildung 5.3 Die CSS-Bereiche markiert
134
CSS in der Praxis
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
Beim Durchlesen des Quelltextes werden der Aufbau der Seite und die
Funktion der jeweiligen Abschnitte sofort offenbar. Stellen Sie sich eine
solche Seite einmal als HTML-Tabellenkonstruktion vor. Nicht nur
würde der Code deutlich umfangreicher und komplizierter sein, aus seiner Schreibweise ergäben sich auch keinerlei Hinweise auf die Struktur
des Dokumentes.
3
4
5
CSS Zen Garden
6
Welche Möglichkeiten eine konsequente Trennung von Inhalten und
Design bietet, demonstriert eindrucksvoll das Projekt CSS Zen Garden:
Dort hat Dave Shea eine HTML-Seite bereitgestellt, die vollständig per
CSS gestaltet wird, und hat andere Entwickler aufgefordert, ihre CSSGestaltungsvorschläge beizusteuern. Inzwischen sind es über 100 und
die Bandbreite der Designs ist atemberaubend! Und als Grundlage dient
immer dieselbe HTML-Datei!
7
8
9
Abbildung 5.4 Die Vielfalt von CSS entdecken – im Zen Garden
http://www.csszengarden.com
Strategien für den CSS-Designer
135
Galileo Computing: »CSS-Praxis« Leseprobe
5.1.5
Suchmaschinenoptimierung per CSS
Auch für die Positionierung in Suchmaschinen ist der Einsatz von Stylesheets hilfreich: Zum einen verbessert er den Anteil inhaltlichen Textes des Dokumentes (»content-to-code-ratio«), zum anderen kann er
helfen, grafische Texte Suchmaschinen-tauglich darzustellen.
Inhaltsanteil
verbessern
Wie ganz am Anfang des Buches diskutiert, lässt sich durch den Einsatz
von CSS einiges an Codezeilen sparen. Insbesondere dann, wenn
Gestaltungsanweisungen konsequent in Stylesheets ausgelagert werden, lässt sich der HTML-Code entschlacken. Für die Anzeige im Browser müssen diese Anweisungen natürlich trotzdem geladen werden,
aber die Spider der Suchmaschinen ignorieren Stylesheets in der Regel
und bekommen von diesen Zeilen nichts mit.
Da Suchmaschinen für die Wertigkeit einer Seite auch den Anteil des
Suchwortes am gesamten Text einer Seite berücksichtigen, ist es sinnvoll, den Code einer Seite so schlank wie möglich zu halten. Ganz abgesehen davon ist das natürlich auch gut für eine kurze Ladezeit.
Anstatt <strong><font face="Arial, Helvetica, sans serif"
color="#3333dd" size="3">Dies ist eine besonders wichtige
Überschrift</font></strong><br><br> zu schreiben (143 Zeichen,
davon 44 Inhalt = 30%), schreiben wir nur noch <h1>Dies ist eine
besonders wichtige Überschrift</h1> in das HTML-Dokument (53
Zeichen, davon 44 Inhalt = 83%) und den Rest in ein Stylesheet.
Würde über eine Suchmaschine nach dem Suchwort »Überschrift«
gesucht, hätte dieses im ersten Beispiel knapp 8% Anteil am Seiteninhalt. Im zweiten Fall wäre der Anteil mit 20% fast dreimal so groß.
Es lässt sich auch noch einiges mehr an Code sparen, wenn beispielsweise Grafiken nicht mehr mittels <img>-Tag eingebunden werden,
sondern per CSS. Das bietet sich aus semantischer Sicht allerdings nicht
für Grafiken an, die zum Inhalt gehören. Auch hier ein Beispiel:
Anstatt ein Menü mit Aufzählungspunkten so zu realisieren:
<a href="link1.html"><img src="icon.gif" height="5"
width="8" alt="">&nbsp<font face="Arial, Helvetica, sans
serif" color="#3333dd" size="3">Link1</font></a><br>
<a href="link22.html"><img src="icon.gif" height="5"
width="8" alt="">&nbsp<font face="Arial, Helvetica, sans
136
CSS in der Praxis
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
serif" color="#3333dd" size="3">Link2</font></a><br>
<a href="link3.html"><img src="icon.gif" height="5"
width="8" alt="">&nbsp<font face="Arial, Helvetica, sans
serif" color="#3333dd" size="3">Link3</font></a><br><br>
3
4
muss nur Folgendes notiert werden:
5
<ul>
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link2.html">Link 3</a></li>
</ul>
6
7
Das ist nicht nur semantisch korrekter und übersichtlicher, sondern
auch mit 123 zu 455 Zeichen deutlich kompakter. Im Stylesheet stünde
dann z.B.:
8
9
Li {
list-style-image: icon.gif;
font-familiy: Arial, Helvetica, sans serif;
font-size: 1.5em;
color: #3333dd;
}
Noch dramatischer werden die Unterschiede, wenn wir auf verschachtelte Tabellen für das Layout zurückgreifen ...
Kombinieren lässt sich dies noch mit der folgenden Technik, die eigentlich zur Verbesserung der Zugänglichkeit gedacht war (aber da leider
nicht so gut funktioniert wie geplant).
Suchmaschinen mögen es besonders, wenn ein Dokument die von
HTML vorgesehenen logischen Kennzeichnungen verwendet – wenn
also ein Suchbegriff in einer Überschrift erster Ordnung ganz am
Anfang der Seite steht:
Logische
Auszeichnungen
statt Grafiken
<body>
<h1>Unser Super-Projekt</h1>
...
</body>
Nun haben wir aber vielleicht für unser »Super-Projekt« auch ein beeindruckendes Logo, das wir unseren menschlichen Besuchern nicht vorenthalten wollen. Normalerweise würden wir dieses an Stelle der H1Überschrift als Grafik einbinden und den Titel im alt-Attribut unterbringen.
Strategien für den CSS-Designer
137
Galileo Computing: »CSS-Praxis« Leseprobe
<body>
<img src="logo.gif" width="350" height="80" alt=" Unser
Super-Projekt">
...
</body>
Sowohl die Suchmaschine als auch Besucher beeindrucken wir mit dieser Variante:
<body>
<h1>Unser Super-Projekt</h1>
...
</body>
und diesen Stilen:
body {
background-image: url("logo.gif");
background-repeat: no-repeat;
}
body h1 {
display: none;
}
So erhalten wir im HTML-Dokument einen absolut einfachen und sauberen logischen Code und sehen auf der Website die ganze grafische
Pracht. Im realen Einsatz könnten Sie die Grafik dann noch positionieren und ggf. mit einem margin-top für H1 Platz für das Logo schaffen.
Einziger Nachteil: Sie können die Grafik nicht mehr als Link zur Homepage verwenden, wie auf vielen Websites üblich.
Eigentlich wäre das auch ein gute Methode für Screenreader und ähnliche Geräte. Leider hat sich gezeigt, dass der weitverbreitete Screenreader JAWS die mit display: none ausgezeichneten Elemente auch nicht
vorliest ... Die Accessibility-Experten diskutieren noch, wie auf dieses
ärgerliche Verhalten am besten zu reagieren ist.
Generell lässt sich dieses Verfahren auf verschiedene Elemente anwenden: Schmuckgrafiken als CSS-Hintergrund, Menüs als Listen, RolloverEffekte mit :hover statt JavaScript und natürlich Positionierung mit
CSS statt Tabellen.
138
CSS in der Praxis
1
Galileo Computing: »CSS-Praxis« Leseprobe
5.2
2
Schriftgrößen
3
Ein Problem, mit dem sich Webdesigner herumschlagen, seit Netscape
mit der Erfindung des <font>-Tags Angaben zur Schriftgestaltung
ermöglicht hat, ist die Gestaltung von Text. Einerseits stehen dem Designer nur die – relativ wenigen – Schriften zur Verfügung, die der
Betrachter einer Webseite auf seinem Rechner installiert hat, andererseits wird die Größe der Schrift auf verschiedenen Browsern und
Betriebssystemen unterschiedlich angezeigt. Das liegt daran, dass die
Größe von Schriften in der Regel in Punkten (Points) angegeben wird.
Dabei hat ein Punkt eine Größe von 1/72 Zoll. Macintosh-Computer
verwendeten diese Festlegung auch für die Umrechnung von Schriftgrößen für die Bildschirmdarstellung (72 ppi). Microsoft setzte hingegen eine Auflösung von 96-120 ppi (je nach Einstellung der
Schriftgrößen unter den Bildschirmeinstellungen) ein. Das führte dazu,
dass Schriftgrößen, die auf PCs noch lesbar waren, unter MacintoshBrowsern nicht mehr zu erkennen waren.
4
5
6
7
8
9
Abbildung 5.5 Unterschiedliche Schriftdarstellung zwischen Browsern und Systemen
Screenshots mit freundlicher Genehmigung von Michael Kaspar
(http://www.upuauet.com).
Mit der Problematik haben sich auch Rene Grassegger auf seiner WINMAC-Site (http://grassegger.at/winmac/index.htm) und Fabrice Pascal (http://www.fabrice-pascal.de/artikel/sizediscussion/) beschäftigt. Und wem die dort angebotenen Informationen noch nicht reichen,
der kann sich die 264(!) Screenshots von Owen Briggs ansehen
(http://www.thenoodleincident.com/tutorials/box_lesson/font/
index.html ).
Glücklicherweise hat Apple bei neueren Macintosh-Rechnern (ab Internet Explorer 5.0) die Schriftdarstellung der des PCs angepasst, sodass
Schriften dann gleich groß dargestellt werden.
Schriftgrößen
139
Galileo Computing: »CSS-Praxis« Leseprobe
Nachdem der <font>-Tag seit HTML 4 als veraltet gilt und nicht mehr
benutzt werden soll (in XHTML existiert er nicht mehr), muss die Formatierung von Schriften per CSS erfolgen.
Schriftgestaltung
ohne <font> –
Chance statt Einschränkung
Das ist aber eigentlich keine Einschränkung, sondern eine Verbesserung, da in CSS wesentlich mehr Möglichkeiten zur Verfügung stehen,
die Typografie eines Textes zu beeinflussen. So lassen sich per CSS die
Zeilenhöhe und weitere typografische Merkmale verändern (siehe auch
Abschnitt 9.16, font-family, bis 9.36, unicode-bidi (CSS2)).
Zur Kennzeichnung der Schriftgröße stehen dabei die Eigenschaft
font-size (Abschnitt 9.20, font-size) und vier Arten von Einheiten zur
Verfügung:
왘 Schlüsselwörter (xx-small bis xx-large)
왘 Relative Angaben (Prozentangaben, em, ex) und
왘 Punkte oder
왘 Pixel
Da alle Varianten Vor- und Nachteile aufweisen, haben sich unter den
Webdesignern unterschiedliche »Schulen« gebildet, die jeweils eine der
Methoden befürworten. Daneben gibt es auch noch Usability-Experten, die generell Angaben zur Schriftgröße ablehnen und die alleinige
Kontrolle über die Anzeige von Schriften dem User überlassen wollen.
Da die Standardschriften sehr unterschiedlich und meist ziemlich groß
angezeigt werden, eignet sich diese Variante tatsächlich nur für sehr
einfach gestaltete Seiten. Eine einigermaßen exaktes Layout lässt sich
damit kaum erreichen.
5.2.1
Schlüsselwörter
Es gibt in der CSS-Definition sieben absolute Schlüsselwörter:
small
x-small
xx-small
medium
large
x-large
xx-large
medium ist die Basisgröße – die anderen Werte werden jeweils um den
Faktor 1,2 vergrößert oder verkleinert, xx-small ist also etwa 0,58 mal
so groß wie die Basisschriftart (1 / (1,2 x 1,2 x 1,2)).
Unglücklicherweise entspricht die Einstellung medium in verschiedenen Browsern nicht der gleichen Schriftgröße, was damit zusammenhängt, dass Microsoft und Netscape die Entsprechung zwischen den
140
CSS in der Praxis
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
CSS-Schriftgrößen und den früher verwendeten HTML-Schriftgrößen
teilweise unterschiedlich handhaben: Während der Internet Explorer 5
die kleinste HTML-Schriftgröße font size="1" als xx-small einsetzt
und dann medium mit font size="4" gleichsetzt, definiert Netscape
medium so, dass es der früheren Standardeinstellung font size="3"
entspricht.
3
4
5
6
7
8
9
Abbildung 5.6 Unterschiedliche Schriftdarstellung bei der Verwendung von Schlüsselwörtern
Hier hilft nur ein Trick weiter: Mit Tanteks Hack oder den Conditional
Comments von Microsoft können Sie allen Browsern »ihre« passenden
Schriftangaben zur Verfügung stellen.
Da die normale Einstellung medium meist etwas zu groß erscheint, eignet sich small recht gut als Standardeinstellung für normalen Text. small
entspricht bei den meisten Browsern etwa 12px – nur der Internet
Explorer 5 benötigt x-small, um diese Schriftgröße anzuzeigen.
Kein Problem mit Tanteks Hack:
<style type="text/css">
/*<![CDATA[*/
p {
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
html>p {
font-size: small;
}
/*]]>*/
</style>
Schriftgrößen
141
Galileo Computing: »CSS-Praxis« Leseprobe
Mit dem aus Abschnitt 4.4.2 bekannten Trick setzen wir dem Internet
Explorer 5.x (Win) zunächst »seinen« Wert vor und lassen ihn dann die
Interpretation abbrechen. Anschließend bekommen alle anderen Browser den korrekten Wert zugewiesen, der nach den Regeln der Wertigkeit die früheren Angaben überschreibt. Das geht natürlich auch mit
Conditional Comments (siehe Abschnitt 4.4.9).
5.2.2
Relative Angaben
Relative Angaben zur Schriftgröße beziehen die Schriftgröße eines Elementes auf sein Eltern-Element und sind daher eigentlich sehr gut
geeignet, um die Größenverhältnisse zwischen unterschiedlichen Textelementen zu wahren, dem Benutzer aber die Möglichkeit zu lassen, die
Schriftgröße seinen Wünschen anzupassen.
Allerdings machen sie das Erstellen von Stylesheets auch etwas komplizierter, da durch sie die Struktur eines HTML-Dokumentes Einfluss auf
die Schriftgröße erhält:
<style type="text/css">
/*<![CDATA[*/
body { font-size: 0.8em; }
div { font-size: 0.8em; }
p { font-size: 0.8em; }
/*]]>*/
</style>
führt dazu, dass die Schriftgröße für alle Elemente auf 0.8em gesetzt
wird – ein Absatz hat also eine Schriftgröße von 0,8 x 0,8 = 0,64. Wenn
Sie später noch ein <div> um den Absatz legen, verkleinert sich die
Schriftgröße nochmals auf 0,51em.
Auch Mehrfachnotationen wie
body,p,h1,h2,h3,h4,table,
th,td,tr,ul,ol,li { font-family:Arial,Helvetica,
sans-serif; font-size: .8em}
– verwendet, weil Netscape 4.x dazu neigt, eigentlich vererbte CSSEigenschaften nach bestimmten Elementen zu »vergessen« – führen zu
bis ins Unleserliche verkleinerten Schriften.
Ein weiterer Browserbug betrifft den Internet Explorer, der unter
bestimmten Bedingungen Schriften unleserlich klein darstellt (lesen Sie
dazu das Fazit und Kapitel 7, Beispiele).
142
CSS in der Praxis
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
Trotzdem ist die Auszeichnung mittels relativer Einheiten die sauberste
Lösung für flexible und barrierefreie Dokumente.
3
5.2.3
4
Punkte
Da Punkte (Points) die aus dem Printbereich bekannte Art sind, Schriftgrößen anzugeben, liegt zunächst einmal der Gedanke nahe, sie auch
für Stylesheets zu verwenden. Doch Bildschirme sind eben keine Druckerpressen, und die Verwendung von Punkten führt dazu, dass Schriften auf verschiedenen Betriebssystemen unterschiedlich dargestellt
werden und des Öfteren auf Macintosh und Linux-Systemen unleserlich werden. Grund dafür ist wieder der oben schon erwähnte unterschiedliche Umrechnungsfaktor (96/72 ppi).
5
6
7
8
9
Abbildung 5.7 Vergleich der Point-Darstellung
Schriften unter 9 Punkt sind generell auf älteren Macintosh-Rechnern
nicht zu lesen – gerade die recht beliebte Variante, als Schrift Arial in 8
Punkt Größe einzusetzen, führt zu unleserlichem Text für manche MacUser (zumal viele Macintosh-Rechner gar keine Arial installiert haben
und der Text in Helvetica angezeigt wird, die am Bildschirm ohnehin in
kleinen Größen schlecht lesbar ist). Glücklicherweise lassen sich die
Schriften auf neueren Systemen der Windows-Darstellung angleichen,
sodass dieses Problem mit der Zeit verschwinden wird.
Abbildung 5.8 Schrift bei älteren Macintosh-Rechnern – können Sie etwas erkennen?
Trotzdem sind Punkte nicht die ideale Größe, um Schriften für Websites
zu definieren. Anders sieht es natürlich aus, wenn Sie ein Stylesheet für
die Druckversion einer Seite (siehe auch Abschnitt 5.9, Druckversion per
CSS) erstellen. Hier sind Punkte genau richtig – die Seite soll ja gedruckt
werden.
Schriftgrößen
143
Galileo Computing: »CSS-Praxis« Leseprobe
5.2.4
Pixel
Letztlich wird alles, was am Bildschirm sichtbar ist, in Pixeln angezeigt.
So ist die Einheit Pixel als »natürliche« Einheit für Screendesign die einzige, die (so gut wie) unter allen Systemen und Browsern gleich angezeigt wird. Ein Buchstabe von 12 Pixel Höhe nimmt auf einem
Bildschirm mit 800 x 600 Pixel eben immer 2% der Bildschirmhöhe ein
– egal welcher Browser ihn darstellt. So schwören viele Designer, die
komplizierte, grafiklastige Layouts erstellen, auf Schriftgrößen, die in
Pixel definiert sind.
Die Definition in Pixel hat aber einen entscheidenden Nachteil: Im
Internet Explorer ist es nicht möglich, in Pixel definierte Schriften zu
skalieren. Nur dadurch können aber sehbehinderte Menschen eine für
sie angenehme Schriftgröße einstellen.
Andererseits ist es in bestimmten Situationen eben auch sinnvoll, die
Schriftgröße unveränderbar zu halten: Wenn Schrift in Menüs verwendet wird, die nur eine bestimmte Breite aufweisen, würde ein Vergrößern der Schrift das Layout sprengen.
Texte, die als Bildunterschriften kleiner Grafiken dienen, sollen in
einem passenden Verhältnis angezeigt werden.
5.2.5
Gemischte Angaben
Prinzipiell ist es natürlich auch möglich, verschiedene Einheiten zu
mischen. Was bei gleichartigen Elementen kaum sinnvoll ist, da die
Verhältnisse zwischen den Schriften sich beim Skalieren verändern.
p {font-size: 12px; }
h1 {font-size: 16px; }
h2 { font-size: 1.2em; }
Ist im Browser eine Basisschriftgröße von 12px eingestellt, so ist die
Überschrift <h2> mit 1,2 x 12px = 14,4px kleiner als <h1>, was auch
ihrer Bedeutung entspricht. Wird aber eine Basisschriftgröße von 16px
verwendet, so überragt die <h2>-Überschrift mit 19px die <h1>. Das
ändert den Gesamteindruck des Dokumentes und entspricht auch nicht
der durch die Formatierung gesetzten Hierarchie (<h1> ist wichtiger als
<h2> und das sollte auch optisch deutlich sein).
144
CSS in der Praxis
1
Galileo Computing: »CSS-Praxis« Leseprobe
2
Es gibt jedoch durchaus Situationen, in denen gemischte Angaben sinnvoll sind. In einem ansonsten in Pixel definierten Stylesheet kann eine
Angabe
3
4
.unwichtig {font-size: 80%; }
Arbeit und Flüchtigkeitsfehler ersparen, da bei einer Änderung der
generellen Schriftgröße diese Deklaration immer noch passt. Außerdem
ist sie auf unterschiedliche Elemente anwendbar: ob im 12px großen
Fließtext, der 16px großen Überschrift oder einem Kasten, der eine
Schriftgröße von 14px besitzt – die Auszeichnung class="unwichtig"
führt immer zu passend verkleinertem Text.
5
Sie müssen natürlich im Auge behalten, dass durch die Definition einer
kleinen Schrift für ein Element nicht an anderer Stelle Schriftgrößen
entstehen, die unterhalb der Lesbarkeitsschwelle liegen.
8
6
7
9
p {font size: 10px;}
würde bei einer HTML-Konstruktion von
<p>Dies ist ein Text mit <span class="unwichtig">unwichtigem Inhalt</span>.</p>
den unwichtigen Text in einer Schriftgröße von 10px x 80% = 8px darstellen, die ihn womöglich nicht nur unwichtig, sondern auch unlesbar
macht.
Umgekehrt können Sie Schrift für Menübereiche oder Bildunterschriften, die aufgrund eines festen Layout-Bereiches eine bestimmte Breite
einnehmen müssen, auch in Pixel angeben, während der Fließtext relative Größenangaben hat. Wenn diese relativ definierten Schriften vergrößert werden, ändert sich natürlich das Verhältnis der Schriften auf
der Webseite untereinander, wie oben schon mit den Überschriftenebenen beschrieben. Das ist unter Umständen aber eher akzeptabel als
eine Zerstörung des Layouts. Wenn wir davon ausgehen, dass am ehesten sehbehinderte Menschen die Schriftdarstellung deutlich vergrößern, ist es recht sinnvoll, am unteren Rand einer Seite eine alternative
Textnavigation anzubieten – dann natürlich auch mit relativen Schriftgrößen.
Was also ist die beste Variante für die Angabe von Schriftgrößen? Es
kommt darauf an, welche Art von Website Sie planen und wie der
(X)HTML-Code der Seiten aufgebaut ist.
Schriftgrößen
145
Galileo Computing: »CSS-Praxis« Leseprobe
Wann immer
möglich: flexible
Schriftgrößen
Für eine Site mit variablem flexiblen Layout sind Schlüsselwörter, relative Größen wie em oder Prozentangaben die richtige Wahl. Schlüsselwörter sind recht einfach anzuwenden und unproblematisch in Bezug
auf die Dokumentenstruktur. Relative Angaben hingegen erlauben eine
feinere Abstufung, erfordern aber auch etwas mehr Aufmerksamkeit
bei verschachtelten Dokumenten. Mit einem Skript, wie in Abschnitt
6.41 vorgestellt, sichern Sie sich gegen den »Minischrift-Bug« im Internet Explorer ab.
Inzwischen hat sich im Zuge einer Diskussion über diesen Bug eine
Lösung ergeben, die auch ohne komplizierte JavaScripte auskommt.
Die einfache Angabe:
body {
font-size: 101%;
}
verhindert den Bug. Hiervon ausgehend können Sie nun problemlos
alle weiteren Schriften in Prozent oder em angeben.
Warum 101%? Ein weiterer Bug in Opera 6 führt bei 100% zu Anzeigefehlern – bei 101% funktioniert die Anzeige browserübergreifend.
Gleiche relative
Schriften für alle
Nach »Einfach für Alle« werden auch die Schriftgrößenangaben 69%,
76%, 86%, 93% browser- und plattformübergreifend gleich dargestellt
und eignen sich daher als Standardschriftgrößen.
Pixelmaße für fixe
Layouts
Für Seiten mit pixelexakten Layouts, die mit absolut positionierten
Bereichen arbeiten, sind Angaben in Pixel manchmal die bessere Wahl.
Sie sollten Ihren Besuchern dann die Möglichkeit geben, die Schriftgröße zu verändern. Auch hier hilft das Skript aus Abschnitt 6.41. Denken Sie auch daran, dass serifenlose Schriften unter 8px Höhe nicht
mehr lesbar sind, eher noch Schriften mit Serifen (wie Times New
Roman).
5.3
Positionierung
Webseiten vollständig mit CSS zu layouten ist die »hohe Schule« der
CSS-Anwendung. Weniger, weil die Positionierung selbst so komplex
ist, sondern eher, weil die verschiedenen Browser einem das Leben
durch eine Vielzahl von Bugs und Schwächen schwer machen.
146
CSS in der Praxis
Galileo Computing: »CSS-Praxis« Leseprobe
Index
!important 56
, prozentuale Angaben 71
@font-face 364
@import-Weiche 114
A
A List Apart 228
Absolute Einheiten 72
Abstand → s. margin 394
Abwärtskompatibilität 167, 186
Accessibility 168
Accessibility → s. Zugängliche
Websites 165
Acessibility 222
Adobe 316
Aktion Mensch 243
alt 222
alternative Stylesheets 225
Alt-Finder 222
Anführungszeichen 345, 346
Anzeigemodus → s. display 432
ASP 232, 311
Asterix 221
Attribut-Selektor 49, 222
Aufzählungszeichen 182
Aufzählungszeichen → s. list-styleimage 429
Aufzählungszeichen → s. list-style-type
428
Ausrichtung 377
Außenabstand 69
Äußerer Abstand → s. margin 69, 394
Äußerer Rand 69
azimuth 460
B
background 392
background-attachment 390
background-color 386
background-image 387
background-position 391
background-repeat 388
baseline → s. Grundlinie 378
behindertengerechtes Webdesign 236,
243, 244
Benutzerauswahl 228
Benutzeroberfläche 440
Bildergalerie 202
Bildschirm-Lineal 326
Bildunterschrift 347
blinde GIFs 88
Block-Element 42, 70, 432
block-level elements 70
Bobby 168
Bookmarklets 219
border 70, 404
border-bottom → s. border 404
border-bottom-color → s. border-color
399
border-bottom-style → s. border-style
400
border-bottom-width → s. borderwidth 397
border-collapse 436
border-color 399
border-left → s. border 404
border-left-color → s. border-color
399
border-left-style → s. border-style 400
border-left-width → s. border-width
397
border-right → s. border 404
border-right-color → s. border-color
399
border-right-style → s. border-style
400
border-right-width → s. border-width
397
border-spacing 437
border-style 400
border-top → s. border 404
border-top-color → s. border-color
399
border-top-style → s. border-style 400
border-top-width → s. border-width
397
border-width 397
bottom 69, 422
box model 69
Box-Modell-Hack 115, 116
Index
477
Galileo Computing: »CSS-Praxis« Leseprobe
Braille-Zeilen 88
Breite 69
Breite → s. width 69, 405
Browser 37
Browseranteile 108
Browser-Sniffer 123
Browserweiche 236
Bundesbehindertengleichstellungsgesetz 165
Buttons 208
C
Calippers 326
caption-side 435
Cascade 306
Cascading Stylesheets 22
CDATA 82
charakter data → s. CDATA 82
child 46
CLASS 45
Class-Selektoren 45
clear 412
clip 408
ColdFusion 311
color 386
Conditional Comments 122, 141
content 346
Cookie 229, 230
counter () 347
counter-increment 349
counter-reset 351
counters() → s. counter () 347
CSS3 79
CSS-Checker 303
CSS-Link 233
CSS-Menüs 186
css-validator 168
cue 456
cue-after → s. cue 456
cue-before → s. cue 456
cursive → s. kursive Schriften 354
cursor 440
D
Deklaration 25
Developer-Exchange 311
DHTML 178, 471
DIN A4 447
478
Index
direction 384
display 432
doctype → s. Dokumententyp 81
Document Objekt Model 470
Dokumententyp 81
DOM 239
DOM → s. Document Objekt Model
470
Dreamweaver 84, 310
Dreispaltiges Layout 159
Drucker 215
Druckversion 213, 215, 223
Dynamische Menüs 182, 186
dynamische Webseiten 470
E
Eigenschaft 25
Einfach für Alle 243
Eingabefelder 208
eingebundene Elemente → s. inline
elements 70
eingebundenes Element 432
eingebundenes Elemente 70
Elementselektoren 41
em 146, 237, 238
empty-cells 438
ersetzte Elemente → s. replaced
elements 70
ex 72
Exchange 311
eXtensible Stylesheets 85
Extensions 311
externe Ressourcen 71
F
Farben 73
Dezimalwerte 74
Hexadezimal 73
Prozentwerte 73
Schlüsselwörter 74
Farbwerte 71
Feststehendes Menü 174
float 410
Folgeelement-Slektoren 49
font 140, 221, 363
font-family 354
Font-Finder 221
font-size 360
Galileo Computing: »CSS-Praxis« Leseprobe
font-size-adjust 361
Fontsizer 236
font-stretch 362
font-style 357
Formular 205, 207
Formularelemente 205
Frames 174
G
GoLive 316
Grundlinie 378
H
Handheld 67
height 69, 406
Hintergrundfarbe → s. backgroundcolor 386
Hintergrundgrafik → s. backgroundimage 387
Hintergrundmusik → s. play-during
457
Hochformat 447
Höhe 69
Höhe → s. height 69, 406
href 214
HTML 17, 80
HTML-Formular 207
JavaScript-Stylesheet-Spezifikation 97
JSP 311
JSS → s. JavaScript-Stylesheet-Spezifikation 97
K
Kapitälchen 358
Kaskadierung 55
Kastenform 69
Kastenform → s. box model 69
Kastenmodell 116
Kerning 373
Kind-Selektor 46
Kind-Selektor → s. child 46
Kommentar-Trick 120
Kompatibilität 95
Komplettlayout 130
Kontextabhängige Selektoren 45
Konvertierung 83
kursive Schriften 354
L
ID 45
ID-Selektoren 45
Important-Anweisung 60
Importierte Stylesheets 66
Inch → s. Zoll 72
Inches 72
inheritance 53
Initiale 342, 471
inline elements 70
inline styles 61
Innenabstand 70
Innerer Abstand → s. padding 396
Innerer Rahmen → s. padding 70
Internet Explorer 103
IrfanView 327
Längen- und Größenangaben 71
em 72
ex 72
Millimeter 72
Pica 72
Pixel 72
Punkt 72
Zentimeter 72
Zoll 72
Lautstärke → s. volume 454
Layout-Sniffer 220
left 69
line-height 376
Linker Abstand 69
Linker Abstand → s. left 69
Listenelement 70, 432
list-style 431
list-style-image 429
list-style-position 430
list-style-type 428
Lycos 271
Lynx 106
J
M
I
Jakob Nielsen 168
JavaScript 186, 228, 229, 238
Macromedia 310, 316
margin 69, 394
Index
479
Galileo Computing: »CSS-Praxis« Leseprobe
margin-bottom → s. margin 394
margin-left → s. margin 394
margin-right → s. margin 394
margin-top → s. margin 394
marks 447
Mauszeiger → s. cursor 440
max-height → s. height 406
max-width → s. width 405
media type → s. Medientyp 215
media-Attribut 67, 120
Medienspezifische Styleshheets 67
Medientyp 215
min-height → s. height 406
min-width → s. width 405
Mobile Profile 90
Module 79
monospace → s. Monospace-Schriften
354
Monospace-Schriften 354
Morphen 307
Mozilla 99
Mozilla-Projekt → s. Mozilla 99
N
Namensraum 81
namespace → s. Namensraum 81
Netscape Navigator 99, 100
Netscape Navigator 6 → s. Netscape
Navigator 99
Netscape Navigator 7 → s. Netscape
Navigator 100
nicht-ersetzte Elemente 70
nicht-ersetzte Elemente → s. nonreplaced elements 70
non-replaced elements 70
Nummerierung 428
O
Oberer Abstand 69
Oberer Abstand → s. top 69
Opera 105, 109
OperaCatcher 121
Organizer 90
orphans 452
outline 442, 443, 445
outline-color → s. outline 442
outline-style → s. outline 442
overflow 407
480
Index
overflow-x → s. overflow 407
overflow-y → s. overflow 407
P
padding 70, 396
padding-bottom → s. padding 396
padding-left → s. padding 396
padding-right → s. padding 396
padding-top → s. padding 396
page 451
page-break-after 449
page-break-before 449
page-break-inside 450
Palm 90
Palm-OS → s. Palm 90
pause 455
pause-after → s. pause 455
pause-before → s. pause 455
PHP 231, 235, 311
pitch 458
pitch-range → s. pitch 458
Pixel 144, 147, 237
pixelgenaue Layouts 19
play-during 457
position 418
absolute 151
fixed 153
static 147
Positionierung 147, 412, 419, 425
Positionierung → s. position 418
postion
relative 149
Print 143
Prozentangaben 146
Prozentwerte 73
Pseudo-Elemente 51
Pseudo-Klassen 51
Punkte 143
Q
Quellcode 304
Querformat 447
quotes 352
R
Rahmen 70
Rahmen → s. border 70
Galileo Computing: »CSS-Praxis« Leseprobe
Rahmeneingenschaften → s. border
404
Rechter Abstand 69
Rechter Abstand → s. right 69
Relative Angaben 142
Relative Einheiten 72
replaced elements 70
richness 459
right 69
Rollover-Menüs 182
S
sans-serif → s. serifenlose Schriften
354
Schichten → s. z-index 424
Schlüsselwörter 71, 75, 140, 146
Schnittmarkierungen 448
Schriftart 354
Schriftfamilie
generische Schriftfamilie 354
Schriftgestaltung 129
Schriftgröße 236, 238, 239
Schriftgrößen 139, 146, 213, 223, 238
Schriftschnitt 357
Schriftstil 357
Screenreader 88, 244
Seitenabmessungen → s. size 446
Seitenlayout 446
Selektoren 25, 41
Selektoren-Tricks 121
Selektoren-Wizard 304
serif → s. Serifenschriften 354
serifenlose Schriften 354
Serifenschriften 354
Sichtbarkeit → s. visibility 424
size 446
Skalierung 237, 239
Skins 223
SourceForge 320
speak 453
speak-header 439
speak-numeral 462
speak-punktuation 462
speech-rate 454
Spezifität 57
Sprachausgabe 453
Sprachgeschwindigkeit → s. speechrate 454
Sprachpausen → s. pause 455
Stilrichtungen 223
Strategien 127
stress 459
Style Master 308
Style-Studio 305
Style-Switcher 232
T
Tabellenbeschriftung → s. caption-side
435
Tabellenspalten 433
Tabellenzeilen 433
table-layout 435
Tag-Inspektor 312
Tanteks Hack 141
Tanteks Hack → s. Box-Model Hack 115
Tanteks Hack → s. Box-Modell-Hack
116
text-align 377
text-decoration 367
Textfarbe 386
Textfarbe → s. color 386
textfix.js 239
text-indent 377
text-shadow 371
text-transform 372
Thumbnails 202
Tidy 83, 320
Tidy → s. TidyGUI 321
TidyGUI 321
top 69, 420
Top-Style 301, 316
Topstyle → s. Top-Style 301
U
UltraDev 311
Umrandung → s. outline 442, 443, 445
Unicode 365
unicode-bidi 384
Unterer Abstand 69
Unterer Abstand → s. bottom 69
Unterstreichungen 214
URI 365
URL 71, 74
User-Agent 235
User-Stylesheets 219
Index
481
Galileo Computing: »CSS-Praxis« Leseprobe
V
Validator 128
Valide Dokumente 127
Validität 127
Vektorgrafiken 79
Vererbung 53
Verlinkte Stylesheets 63
vertical-align 378
visibility 424
voice-familiy 457
volume 454
Vordergrundfarbe 386
Vordergrundfarbe → s. color 386
W
W3C 81, 244
Währungsbezeichnungen 344
Web Accessibility Initiative 165
WebDAV 317, 475
Werbebanner 223
Wert 25
Werte für Stylesheets 71
482
Index
white-space 375
widows 452
width 69, 405
WindowsCE 90
Wizards 306
word-spacing 374
WWW 19
X
x-Höhe → s. ex 72
XHTML 80, 310
XML 25
XSL → s. eXtensible Stylesheets 85
Z
Zähler 347
Zeilenhöhe 376
Zentrierte Inhalte 168
z-index 424
Zugängliche Websites 165, 244
Zweispaltiges Layout 156