XHTML, CSS und Co . Die W3C-Spezifikationen für das Web-Publishing [1 ed.] 3827318726, 9783827318725 [PDF]

Zitiervorschau

---

Titel.fm Seite i Mittwoch, 9. April 2003 3:26 15

Sandini Bib

XHTML, CSS & Co.

Die W3C-Spezifikationen für das Web-Publishing

Titel.fm Seite ii Mittwoch, 9. April 2003 3:26 15

Sandini Bib

Die edition W3C.de bietet IT-Experten die maßgebliche Referenz zu den technischen Grundlagen des WWW. Fachleute haben die englischen W3C-Recommendations ins Deutsche übersetzt, begutachtet und kommentiert. Parallel zur Buchreihe finden Sie die Übersetzungen auch online unter www.edition-w3c.de.

XML & Co Die W3C-Spezifikationen für Dokumentenund Datenarchitektur Stefan Mintert (Hrsg.) XML & Co. - das sind XML, XML Schema, XSLT, XPath, XLink und weitere W3C-Spezifikationen, die hier kommentiert und in deutscher Übersetzung vorliegen. Sie bilden die Grundlage für den Einsatz von XML zur Dokumenten- und Datenmodellierung, wie auch für die Verarbeitung von XML. Jeder, der mit oder für XML Daten entwickelt, muss diese technischen Standards beherrschen. edition W3C.de 760 Seiten € 59,95 [D] / € 61,70 [A] ISBN 3-8273-1844-0

„Als gute, vollständige deutsche Übersetzung, kommentiert und mit Beispielen angereichert ist es ein sehr gutes Handwerkszeug für den deutschen XML-Entwickler. Gesamturteil, sehr empfehlenswert.“ (Java Spektrum, 1/2003)

Titel.fm Seite iii Mittwoch, 9. April 2003 3:26 15

Sandini Bib

Stefan Mintert (Hrsg.)

XHTML, CSS & Co.

Die W3C-Spezifikationen für das Web-Publishing

An imprint of Pearson Education München • Boston • San Francisco • Harlow, England Don Mills, Ontario • Sydney • Mexico City Madrid • Amsterdam

Titel.fm Seite iv Mittwoch, 9. April 2003 3:26 15

Sandini Bib

Bibliografische Information Der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar.

Die Informationen in diesem Produkt werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar. Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig. Fast alle Hardware- und Softwarebezeichnungen, die in diesem Buch erwähnt werden, sind gleichzeitig auch eingetragene Warenzeichen oder sollten als solche betrachtet werden.

Umwelthinweis: Dieses Produkt wurde auf chlorfrei gebleichtem Papier gedruckt. Die Einschrumpffolie – zum Schutz vor Verschmutzung – ist aus umweltverträglichem und recyclingfähigem PE-Material.

10 09 08 07 06 05 04 03 02 01 ISBN 3-8273-1872-6

© 2003 by Addison-Wesley Verlag, ein Imprint der Pearson Education Deutschland GmbH Martin-Kollar-Straße 10–12, D-81829 München/Germany Alle Rechte vorbehalten Einbandgestaltung: Barbara Thoben, Köln Lektorat: Sylvia Hasselbach, [email protected] Korrektorat: Johannes Gerritsen, Emmerich-Elten Satz: reemers publishing services gmbh, Krefeld, www.reemers.de Druck: Bercker Graphischer Betrieb, Kevelaer Printed in Germany

Page size: 168,00 x 240,00 mm

Sandini Bib

Inhaltsverzeichnis Vorwort

17 Herstellung des Buches, typografische Konventionen und weitere Formalien Danksagung

Einleitung Thematische Einf"hrung und #berblick "ber den Band Die W3C-Spezifikationen in diesem Band Weitere W3C-Spezifikationen und -Texte Internet Society und Internet Engineering Task Force HTTP und MIME MIME-Typen f"r XHTML Uniform Resource Identifier (URI) International Organization for Standardization Organization for the Advancement of Structured Information Standards Common Gateway Interface Literatur

A n

19 20 21 22 23 25 25 26 27 28 31 32 32 33

Die HTML 4.01- Spezifikation 1

ber die HTML 4-Spezifikation 1.1 Wie die Spezifikation aufgebaut ist 1.2 Dokumentkonventionen 1.3 Danksagungen 1.4 Bemerkung zum Urheberrecht 2 Einf%hrung in HTML 4 2.1 Was ist das World Wide Web? 2.2 Was ist HTML? 2.3 HTML 4 2.4 Dokumente erstellen mit HTML 4

38 38 39 40 41 41 41 44 45 48

Page size: 168,00 x 240,00 mm

Sandini Bib

3

4

5

6

7

8

9

ber SGML und HTML 3.1 Einf"hrung in SGML 3.2 In HTML verwendete SGML-Konstrukte 3.3 Wie die HTML-DTD zu lesen ist Konformit+t: Anforderungen und Empfehlungen 4.1 Definitionen 4.2 SGML 4.3 Inhaltstyp (Content-Type) text/html Repr+sentation von HTML-Dokumenten 5.1 Der Dokumentzeichensatz 5.2 Zeichenkodierungen 5.3 Zeichenreferenzen 5.4 Nicht darstellbare Zeichen HTML-Grunddatentypen 6.1 Information zu Groß- bzw. Kleinschreibung 6.2 Grunddatentypen in SGML 6.3 Text-Zeichenfolgen 6.4 URIs 6.5 Farben 6.6 Maße 6.7 Inhaltstypen (content type) (MIME types) 6.8 Sprachcodes 6.9 Zeichenkodierungen 6.10 Einzelne Zeichen 6.11 Datum und Zeit 6.12 Linktypen 6.13 Medien-Deskriptoren 6.14 Skript-Daten 6.15 Stylesheet-Daten 6.16 Namen von Ziel-Frames (target names) Die globale Struktur eines HTML-Dokuments 7.1 Einf"hrung in die Struktur eines HTML-Dokuments 7.2 HTML-Versionsinformation 7.3 Das HTML-Element 7.4 Der Dokument-Kopf 7.5 Der Dokumentrumpf Sprachinformation und Leserichtung 8.1 Spezifizierung der Sprache des Inhalts: das lang-Attribut 8.2 Spezifizierung der Richtung von Text und Tabellen: das dir-Attribut Text 9.1 Leeraum (white space) 9.2 Strukturierter Text 9.3 Zeilen und AbsEtze

Inhaltsverzeichnis

49 49 51 54 61 61 63 63 64 64 65 70 72 72 72 73 74 74 75 76 77 77 77 77 77 78 80 81 82 82 83 83 84 85 86 96 104 104 108 115 115 116 122

Page size: 168,00 x 240,00 mm

Sandini Bib

9.4

10

11

12

13

14

15

16

Kennzeichnen von DokumentEnderungen: Das INS- und das DEL-Element 128 Listen 130 10.1 Einf"hrung in Listen 130 10.2 Ungeordnete Listen (UL), geordnete Listen (OL) und ListeneintrEge (LI) 132 10.3 Definitionslisten: Die Elemente DL, DT und DD 134 10.4 Das DIR- und das MENU-Element 138 Tabellen 138 11.1 Einf"hrung in Tabellen 138 11.2 Elemente zur Tabellenerzeugung 141 11.3 Tabellenformatierung durch visuelle Benutzerprogramme 159 11.4 Tabellendarstellung durch nicht visuelle Benutzerprogramme165 11.5 Beispieltabelle 173 Links 178 12.1 Einf"hrung in Links und Anker 178 12.2 Das Element A 182 12.3 Dokumentbeziehungen: das LINK-Element 189 12.4 Pfadangaben: das BASE-Element 192 Objekte, Bilder und Applets 193 13.1 Einf"hrung in Objekte, Bilder und Applets 193 13.2 Eine Graphik einbinden: das Element IMG 195 13.3 Allgemeine Objekte einbetten: das Element OBJECT 197 13.4 Einbinden eines Applets: das Element APPLET wird zu Gunsten des Elements OBJECT missbilligt (mit all seinen Attributen). 205 13.5 Anmerkungen zu eingebetteten Dokumenten 207 13.6 Imagemaps 208 13.7 Visuelle Darstellung von Bildern, Objekten und Applets 214 13.8 Wie alternativer Text angegeben wird 216 Stylesheets 217 14.1 Einf"hrung in Stylesheets 217 14.2 HTML-Dokumente formatieren 219 14.3 Externe Stylesheets 225 14.4 Cascading Style Sheets 228 14.5 Formatierungsangaben vor Benutzerprogrammen verbergen 229 14.6 Mit HTTP-Headern auf Stylesheets verweisen 230 Ausrichtung, Schriftarten und horizontale Linien 231 15.1 Formatierung 231 15.2 Schriftarten 236 15.3 Linien: das Element HR 240 Frames 241 16.1 Einf"hrung in Frames 241 16.2 Frame-Layout 243

Inhaltsverzeichnis

Page size: 168,00 x 240,00 mm

Sandini Bib

17

18

19

20 21 22 23 24

A B

16.3 Informationen f"r Ziel-Frames angeben 251 16.4 Alternativer Inhalt 254 16.5 Eingebettete Frames: das Element IFRAME 256 Formulare 257 17.1 Einf"hrung in Formulare 257 17.2 Steuerelemente 258 17.3 Das Element FORM 261 17.4 Das Element INPUT 263 17.5 Das Element BUTTON 268 17.6 Die Elemente SELECT, OPTGROUP und OPTION 270 17.7 Das Element TEXTAREA 275 17.8 Das Element ISINDEX 276 17.9 Beschriftungen 277 17.10 Formularen Struktur hinzuf"gen: die Elemente FIELDSET und LEGEND 279 17.11 Einem Element den Fokus zuweisen 281 17.12 Deaktivierte und schreibgesch"tzte Steuerelemente 284 17.13 Formular"bertragung 285 Skripte 290 18.1 Einf"hrung in Skripte 290 18.2 Dokumente f"r Benutzerprogramme erstellen, die Skripte unterst"tzen 291 18.3 Dokumente f"r Benutzerprogramme erstellen, die Skripte nicht unterst"tzen 299 SGML-Referenzinformationen f%r HTML 301 19.1 Dokumentvalidierung 302 19.2 Beispiel f"r einen SGML-Katalog 303 SGML-Deklaration von HTML 4 303 20.1 SGML Declaration 304 Documenttyp-Definition 305 TransitionalDocumenttyp-Definition 305 Frameset-Dokumenttyp-Definition 305 Zeichen-Entity-Referenzen in HTML 4 306 24.1 Einf"hrung in Zeichen-Entity-Referenzen 306 24.2 Zeichen-Entity-Referenzen f"r Zeichen aus ISO 8859-1 309 24.3 Zeichen-Entity-Referenzen f"r Symbole, mathe- matische Symbole und griechische Buchstaben 313 24.4 Zeichen-Entity-Referenzen f"r markup-relevante und internationale Zeichen 318 ;nderungen 321 Anmerkungen zur Performance, Implementierung und Gestaltung 321 B.1 Anmerkungen zu ung"ltigen Dokumenten 321 B.2 Besondere Zeichen in URI-Attributwerten 323

Inhaltsverzeichnis

Page size: 168,00 x 240,00 mm

Sandini Bib

B.3 B.4 B.5 B.6 B.7 B.8 B.9 B.10

B

Anmerkungen zur SGML-Implementierung Anmerkungen zum Thema: Suchmaschinen helfen, die eigene Website zu indexieren Anmerkungen zu Tabellen Anmerkungen zu Formularen Anmerkungen zu Skripten Anmerkungen zu Frames Anmerkungen zur ZugEnglichkeit Anmerkungen zur Sicherheit

324 327 330 336 337 338 338 339

XHTML 1.0: Die Extensible HyperText Markup Language 1 Was ist XHTML? 1.1 Was ist HTML 4? 1.2 Was ist XML? 1.3 Wozu braucht man XHTML? 2 Definitionen 2.1 Terminologie 2.2 Allgemeine Begriffe 3 Normative Definition von XHTML 1.0 3.1 Konforme Dokumente 3.2 Konforme Benutzerprogramme 4 Unterschiede zu HTML 4 4.1 Dokumente m"ssen korrekt aufgebaut sein 4.2 Element- und Attributnamen m"ssen in Kleinbuchstaben dargestellt werden 4.3 F"r nicht leere Elemente m"ssen End-Tags angegeben werden 4.4 Attributwerte m"ssen immer in Anf"hrungszeichen stehen 4.5 Attributminimierung 4.6 Leere Elemente 4.7 Behandlung von Leerraum in Attributwerten 4.8 Script- und Style-Elemente 4.9 SGML-Ausschl"sse 4.10 Die Elemente mit 'id'- und 'name'-Attributen 4.11 Attribute mit vordefinierten Wertemengen 4.12 Entity-Referenzen als hexadezimaler Wert 5 Kompatibilit+tsaspekte 5.1 Internet-Medientyp A DTDs A.1 Dokumenttypdefinitionen A.2 Entity-Mengen

Inhaltsverzeichnis

366 366 367 367 368 368 369 370 370 373 374 374 375 375 375 375 376 376 376 377 377 377 377 378 378 378 378 379

Page size: 168,00 x 240,00 mm

Sandini Bib

B Element-Ausschl%sse C Richtlinien zur HTML-Kompatibilit+t C.1 Verarbeitungsanweisungen und die XML-Deklaration C.2 Leere Elemente C.3 Elementminimierung und leerer Elementinhalt C.4 Eingebettete Stylesheets und Skripte C.5 Zeilenumbr"che innerhalb von Attributwerten C.6 Isindex C.7 Die Attribute lang and xml:lang C.8 Fragmentbezeichner C.9 Zeichencodierung C.10 Boolesche Attribute C.11 Document Object Model und XHTML C.12 Die Verwendung von et-Zeichen in Attributwerten (und anderswo) C.13 Cascading Style Sheets (CSS) und XHTML C.14 Referenzierung von Style-Elementen bei Verwendung als XML C.15 Leerraumzeichen in HTML vs. XML C.16 Die benannte Zeichenreferenz ' D Danksagungen E Literaturverzeichnis

C

< 10 >

379 380 380 380 380 380 381 381 381 381 382 382 382 383 383 384 384 384 385 385

Modularisierung von XHTML 1 Einf%hrung 1.1 Was ist XHTML? 1.2 Was ist XHTML-Modularisierung? 1.3 Warum XHTML modularisieren? 2 Begriffe und Definitionen 3 Definition der Konformit+t 3.1 KonformitEt eines Dokumenttyps als XHTML Host Language 3.2 KonformitEt eines Dokumenttyps als XHTML Integration Set 3.3 KonformitEt eines Moduls zur XHTML-Familie 3.4 KonformitEt eines Dokuments zur XHTML-Familie 3.5 KonformitEt eines Benutzerprogramms zur XHTML-Familie 3.6 Namensregeln 3.7 Evolution von XHTML-Modulen 4 Definition abstrakter Module 4.1 Syntaktische Konventionen 4.2 Inhaltstypen

Inhaltsverzeichnis

391 391 392 392 394 397 397 398 398 399 399 401 402 402 403 404

Page size: 168,00 x 240,00 mm

Sandini Bib

5

A B C D

E

F

4.3 Attributtypen Ein Beispiel f"r eine Definition eines abstrakten Moduls 4.4 Abstrakte XHTML-Module 5.1 Sammlungen von Attributen 5.2 Kernmodule (Core Modules) 5.3 Applet-Modul (Applet Module) 5.4 Texterweiterungsmodule (Text Extension Modules) 5.5 Formularmodul (Forms Modules) 5.6 Tabellenmodul (Table Modules) 5.7 Bildmodul (Image Module) 5.8 Modul f"r client-seitige Image Maps (Client-side Image Map Module) 5.9 Modul f"r server-seitige Image Maps (Server-side Image Map Module) 5.10 Objektmodul (Object Module) 5.11 Frames-Modul (Frames Module) 5.12 Target-Modul (Target Module) 5.13 Iframe-Modul (Iframe Module) 5.14 Modul f"r eingebaute Ereignisse (Intrinsic Events Module) 5.15 Metainformationsmodul (Metainformation Module) 5.16 Scripting-Modul (Scripting Module) 5.17 Stylesheet-Modul (Style Sheet Module) 5.18 Style-Attributmodul (Style Attribute Module) 5.19 Link-Modul (Link Module) 5.20 Base-Modul (Base Module) 5.21 Name-Identifizierungsmodul (Name Identification Module) 5.22 Altlastenmodul (Legacy Module) Erstellen von Schema-Modulen Entwicklung eines Schemas mit definierten und erweiterten Modulen Implementierungen der XHTML-Schema-Module Erstellen von DTD-Modulen D.1 Benennung von Parameter-Entities D.2 Definieren des Namensraums f"r ein Modul Entwickeln von DTDs mit definierten und erweiterten Modulen E.1 Definition zusEtzlicher Attribute E.2 Definition zusEtzlicher Elemente E.3 Definition des Inhaltsmodells f"r eine Modulsammlung E.4 Erstellen einer neuen DTD E.5 Benutzen der neuen DTD Implementierungen von XHTML-Modulen mit DTDs F.1 XHTML-Zeichen-Entities F.2 Modulares Rahmenwerk von XHTML

Inhaltsverzeichnis

404 409 410 410 411 414 414 415 418 420 420 421 421 421 422 422 423 424 424 424 425 425 425 425 426 428 428 428 429 429 430 437 438 438 439 440 450 450 451 459

< 11 >

Page size: 168,00 x 240,00 mm

Sandini Bib

F.3 Implementierungen der XHTML-Module 473 F.4 Unterst"tzende Module der XHTML-DTD-Implementierung 474 G Bibliographie 491 G.1 Normative Quellen 491 G.2 Informelle Quellen 493 H Entwurfsziele 494 H.1 Anforderungen 494 I Danksagungen 496

D

E

XHTML Basic 1 Einleitung 1.1 XHTML f"r KleinstinformationsgerEte 1.2 Hintergrund und Voraussetzungen 1.3 Gr"nde f"r Entwurfsentscheidungen 2 Konformit+t 2.1 KonformitEt der Dokumente 2.2 KonformitEt der Benutzerschnittstelle 3 Der XHTML-Basic-Dokumenttyp 4 Wie XHTML Basic verwendet wird 5 Danksagung A Referenzen A.1 Normative Referenzen A.2 Informelle Referenzen B XHTML-Basic- Dokumenttyp-Definition B.1 "SGML Open Catalog Entry" f"r XHTML Basic B.2 XHTML Basic-Treiber B.3 XHTML-Basic-Anpassungen

XHTML 1.1 - Modulbasiertes XHTML 1 Einf%hrung 2 Definition der Konformit+t 2.1 DokumentkonformitEt 2.2 KonformitEt eines Benutzerprogramms 3 Der XHTML 1.1-Dokumenttyp A ;nderungen gegen%ber XHTML 1.0 Strict B Bibliographie B.1 Normative Quellen B.2 Informelle Quellen

< 12 >

500 500 500 501 503 503 503 503 504 505 505 505 506 506 506 507 511

Inhaltsverzeichnis

518 518 518 519 519 521 521 521 522

Page size: 168,00 x 240,00 mm

Sandini Bib

C XHTML 1.1-Dokumenttyp-Definition C.1 SGML Open Catalog-Eintrag f"r XHTML 1.1 C.2 XHTML 1.1-Treiber C.3 Anpassung f"r XHTML 1.1 D Danksagungen

F

522 522 523 529 534

Cascading Style Sheets, Level 2 1 Informationen zur CSS2-Spezifikation 1.1 Wie Sie die Spezifikation lesen 1.2 Der Aufbau der Spezifikation 1.3 Konventionen 1.4 Danksagungen 1.5 Copyright-Hinweis 2 Einf%hrung in CSS2 2.1 Ein kurzer CSS2-#berblick f"r HTML 2.2 Ein kurzer CSS2-#berblick f"r XML 2.3 Das CSS2-Verarbeitungsmodell 2.4 CSS-Entwurfskonzepte 3 Konformit+t: Anforderungen und Empfehlungen 3.1 Definitionen 3.2 KonformitEt 3.3 Fehlerbedingungen 3.4 Der text/css-Inhaltstyp 4 CSS2-Syntax und grundlegende Datentypen 4.1 Syntax 4.2 Regeln f"r die Verarbeitung von Parser-Fehlern 4.3 Werte 4.4 CSS-Dokumentdarstellung 5 Selektoren 5.1 Mustervergleich 5.2 Selektorsyntax 5.3 Universeller Selektor 5.4 Typselektoren 5.5 Selektoren f"r Nachfahren 5.6 Kind-Selektoren 5.7 Selektoren f"r benachbarte Elemente 5.8 Attribut-Selektoren 5.9 ID-Selektoren 5.10 Pseudo-Elemente und Pseudo-Klassen 5.11 Pseudo-Klassen 5.12 Pseudo-Elemente

538 538 539 540 544 545 546 546 549 551 553 555 555 558 560 560 560 560 568 569 578 580 580 582 582 583 583 584 584 585 589 590 591 595

Inhaltsverzeichnis

< 13 >

Page size: 168,00 x 240,00 mm

Sandini Bib

6 Eigenschaftswerte zuweisen, Kaskaden und Vererbung 6.1 Spezifizierte, berechnete und tatsEchliche Werte 6.2 Vererbung 6.3 Die @import-Regel 6.4 Die Kaskade 7 Medientypen 7.1 Einf"hrung in Medientypen 7.2 Angabe medienabhEngiger Stylesheets 7.3 Erkannte Medientypen 8 Das Box-Modell 8.1 Maße der Boxen 8.2 Beispiele f"r REnder, Polsterung und Rahmen 8.3 Randeigenschaften: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' und 'margin' 8.4 Polstereigenschaften: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' und 'padding' 8.5 Rahmeneigenschaften (border) 9 Visuelles Formatierungsmodell 9.1 Einf"hrung in das visuelle Formatierungsmodell 9.2 Kontrolle "ber das Erstellen von Boxen 9.3 Positionierungsschemata 9.4 Normaler Fluss 9.5 Floats 9.6 Absolute Positionierung 9.7 Beziehungen zwischen 'display', 'position' und 'float' 9.8 Vergleich von normalem Fluss, Floats und absoluter Positionierung 9.9 Ebenen (Layer) 9.10 Textrichtung: die Eigenschaften 'direction' und 'unicode-bidi' 10 Details zum visuellen Formatierungsmodell 10.1 Definition des „umschließenden Blocks“ 10.2 Inhaltsbreite: die 'width'-Eigenschaft 10.3 Breiten und REnder berechnen 10.4 Minimale und maximale Breiten: 'min-width' und 'max-width' 10.5 InhaltshPhe : die 'height'-Eigenschaft 10.6 HPhen und REnder berechnen 10.7 Mindest- und MaximalhPhen: 'min-height' und 'max-height' 10.8 ZeilenhPhenberechnungen: die Eigenschaften 'line-height' und 'vertical-align' 11 Visuelle Effekte 11.1 #berlauf und Abschneiden 11.2 Sichtbarkeit: die 'visibility'-Eigenschaft

< 14 >

Inhaltsverzeichnis

601 601 602 604 605 610 610 610 611 613 613 615 617 619 621 628 628 629 635 639 642 647 649 649 657 658 663 663 665 666 668 670 671 673 674 677 677 682

Page size: 168,00 x 240,00 mm

Sandini Bib

12 Erzeugter Inhalt, automatische Nummerierung und Listen 12.1 Die Pseudoelemente :before und :after 12.2 Die 'content'-Eigenschaft 12.3 Zusammenspiel von :before und :after mit den Elementen 'compact' und 'run-in' 12.4 Anf"hrungszeichen 12.5 Automatische ZEhler und Nummerierung 12.6 Markierungen (Marker) und Listen 13 Seitenmedien 13.1 Einf"hrung in Seitenmedien 13.2 Seiten-Boxen: die @page -Regel 13.3 Seitenumbr"che 13.4 Kaskade im Seitenkontext 14 Farben und Hintergrund 14.1 Vordergrundfarbe : die 'color'-Eigenschaft 14.2 Der Hintergrund 14.3 Gammakorrektur 15 Schriften 15.1 Einf"hrung 15.2 Schriftspezifikation 15.3 Schriftauswahl 15.4 Schriftcharakteristika 15.5 Algorithmus zum Schriftvergleich 16 Text 16.1 Einr"ckung: die 'text-indent'-Eigenschaft 16.2 Ausrichtung: die 'text-align'-Eigenschaft 16.3 Ausschm"ckung 16.4 Buchstaben- und WortabstEnde: die 'letter-spacing'- und 'word-spacing'-Eigenschaften 16.5 Großschreibung: die 'text-transform'-Eigenschaft 16.6 Leerraum: die 'white-space'-Eigenschaft 17 Tabellen 17.1 Einf"hrung in Tabellen 17.2 Das CSS-Tabellenmodell 17.3 Spaltenselektoren 17.4 Tabellen im visuellen Formatierungsmodell 17.5 Visuelles Layout von Tabelleninhalt 17.6 Rahmen 17.7 Akustische Darstellung von Tabellen 18 Benutzeroberfl+che 18.1 Cursor: die 'cursor'-Eigenschaft 18.2 Benutzereinstellungen f"r Farben 18.3 Benutzereinstellungen f"r Schriften

Inhaltsverzeichnis

684 684 686 688 689 693 697 708 708 709 714 719 719 720 720 726 727 727 729 745 761 767 772 772 773 774 777 779 780 781 781 787 789 790 793 802 808 812 812 813 815

< 15 >

Page size: 168,00 x 240,00 mm

Sandini Bib

19

A B

C

D

E

F G

< 16 >

18.4 Dynamische Einrahmungen: die 'outline'-Eigenschaft 815 18.5 VergrPßerung 817 Akustische Stylesheets 817 19.1 Einf"hrung in akustische Stylesheets (Aural Stylesheets) 817 19.2 Eigenschaften f"r die LautstErke : 'volume' 818 19.3 Spracheigenschaften: 'speak' 820 19.4 Pausen-Eigenschaften: 'pause-before', 'pause-after' und 'pause' 821 19.5 Cue-Eigenschaften: 'cue-before', 'cue-after' und 'cue' 822 19.6 Misch-Eigenschaften: 'play-during' 824 19.7 REumliche Eigenschaften: 'azimuth' und 'elevation' 825 19.8 Eigenschaften zur Sprachcharakteristik: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress' und 'richness' 827 19.9 Spracheigenschaften: 'speak-punctuation' und 'speak-numeral' 831 Ein Beispiel-Stylesheet f%r HTML 4.0 832 ;nderungen gegen%ber CSS1 834 B.1 Neue Funktionen 835 B.2 Aktualisierte Beschreibungen 835 B.3 Semantische Qnderungen gegen"ber CSS1 835 Hinweise zur Implementierung und Performance von Schriften 836 C.1 Glossar f"r Schriftbegriffe 836 C.2 Schriften finden 840 C.3 Bedeutung der Panose-Zahlen 840 C.4 Ableitung von Unicode-Bereichen f"r TrueType 844 C.5 Automatische Deskriptor-Erstellung 847 Die Grammatik von CSS2 848 D.1 Grammatik 849 D.2 Lexikalischer Scanner 851 D.3 Vergleich der Tokenbildung zwischen CSS1 und CSS2 852 Literaturhinweise 853 E.1 Normative Literaturhinweise 853 E.2 Informelle Literaturhinweise 855 Eigenschaftsindex 857 Deskriptor-Index 870 Index 873

Inhaltsverzeichnis

Page size: 168,00 x 240,00 mm

Sandini Bib

< Vorwort >

Page size: 168,00 x 240,00 mm

Sandini Bib

Endlich ist er da. Der zweite Band der edition W3C.de. Entstanden ist diese Buchreihe als Idee, die ich 1999 whrend der OpenNet-Veranstaltung an Klaus Birkenbihl, den Leiter des deutschen B"ros des World Wide Web Consortium (W3C) herangetragen habe. Unser gemeinsames Ziel ist es seitdem, die technischen Spezifikationen des W3C in deutscher Sprache herauszugeben. Die als Empfehlung (Recommendation) ver0ffentlichten Texte haben lngst den Charakter einer Norm. Sie sind lngst zur wesentlichen technischen Grundlage des World Wide Web geworden – um so wichtiger, dass diese Texte in deutscher Sprache zur Verf"gung stehen. Zweifellos ist das World Wide Web Consortium die maßgebliche Organisation f"r die technische Weiterentwicklung des WWW. Die edition W3C.de liefert Referenzinformation auf hohem Niveau. Im Zentrum stehen die maßgeblichen, in der Regel englischsprachigen Originaltexte, ins Deutsche "bertragen und fachlich kommentiert von Experten aus dem deutschsprachigen Raum. Und noch etwas gilt f"r dieses Buch wie f"r das erste: Die 7bersetzungen wurden vom W3C gepr"ft. Daf"r geht schon an dieser Stelle der Dank an Klaus Birkenbihl (Deutsch-8sterreisches W3C-B"ro) und an Ivan Herrmann (W3C). Es k0nnte Einwnde geben, dass doch Englisch gerade im IT-Bereich als Fachsprache etabliert sei. Diese unbestrittene Tatsache ndert jedoch nichts daran, dass viele der W3C-Empfehlungen und andere Spezifikationen schwer verstndlich, weil sehr formal geschrieben sind. Eine 7bersetzung ins Deutsche unter Beibehaltung der formalen Exaktheit bietet dem Leser einen leichteren Zugang zu den einzigen verbindlichen Texten, die es in diesem Bereich gibt. »Sind die B"cher der edition W3C.de also Leseb"cher f"r jedermann?« – Nein, sicher nicht. Die edition W3C.de besteht nicht aus Einsteigerb"chern. Die Texte halten sich inhaltlich an das englische Original. Sie sind technisch exakt, przise und zum Teil formal. Der Leser der edition W3C.de ist Profi; oder auf dem Weg dorthin. Der Leser ist Software- Entwickler, der W3C-konforme Applikationen entwickelt. Er f"hrt Datenmodellierungen durch, die sich an die relevanten Standards halten, um sich reibungslos in eine heteroge IT-Landschaft zu f"gen. Er formuliert Dokumentstrukuren, die ihre Inhalte hersteller- und medienneutral beschreiben. Er generiert Webseiten, die durch Befolgen der Recommendations eine maximale Reichweite erzielen. 7ber die 7bersetzung hinaus war es von Anfang an unser Ziel, dem Leser noch mehr zu bieten. Mit der Absicht, die Verstndlichkeit der technischen Texte zu erh0hen, haben wir deshalb Experten gesucht, die nicht nur "bersetzen, sondern auch fachlich kommentieren. Die Kommentare der Fachleute sollen Ihnen helfen, auch die schwierigen Passagen der Spezifikationen zu verstehen – und die einfachen Passagen bequemer. Dies geschieht in Form von anderen Umschreibungen des Sachverhalts oder durch zustzliche Beispiele. Das Maß an Kommentierungen variiert von Text zu Text, abhngig vom Schwierigkeitsgrad des Originals. Zusammen mit den Experten, die die Kommentierung angefertigt haben, hoffe ich, dass wir das richtige Maß gefunden haben. F"r diesen Band der edition W3C.de haben die folgenden Personen Beitrge geliefert: Christine K hnel Christine K"hnel ist schon bald nach ihrem Mathematikstudium der Informatik verfallen. Nach mehrjhriger Programmiererfahrung hat sie Mitte der Neunzigerjahre das Netz f"r sich entdeckt und besitzt heute ausgewiesenes Know-How "ber Web-Techniken, auch "ber W3C-Themen hinaus.

< 18 >

Vorwort

Page size: 168,00 x 240,00 mm

Sandini Bib

Neben freiberuflichen Ttigkeiten im Bereich Web-Design hat sie vor allem den Ruf als eine der namhaftesten deutschen JavaScript- Expertinnen erworben. Die FAQ zur deutschsprachigen JavaScript- Newsgruppe wird von ihr herausgegeben. Christine K"hnel schreibt Fachartikel f"r die iX. Als Co- Herausgeberin hat sie 2000 ihre erste Monographie, den „JavaScript-Workshop“, bei Addison-Wesley ver0ffentlicht. Stefan Mintert Stefan Mintert begann parallel zu seinem Informatik-Studium in Dortmund bereits 1993 als Web-Admin am Informatik- Fachbereich zu arbeiten. Seit 1994 ergnzt er seine WWWErfahrung mit SGML-Know-how. Als stndiger freier Mitarbeiter der im Heise-Verlag erscheinenden iX schreibt er regelmßig Fachartikel. Des Weiteren hat er bereits mehrere Buchtitel ver0ffentlicht. 1998 erschien von Stefan Mintert als Co-Autor das erste deutschsprachige Buch zum Thema XML. Die erste deutsche Fassung einer W3C-Recommendation war seine 7bersetzung von XML. Den Verlag Addison-Wesley hat er auch schon bei der 7bersetzung der W3C-B"cher von Dave Ragget et. al. („Raggett on HTML 4“) und von HNkon Lie & Bert Bos („Cascading Style Sheets“) fachlich beraten. Er lebt heute in Hamburg und arbeitet seit 1998 als freier Berater, unter anderem in den Bereichen Cross Media Publishing und Content Management. Dar"ber hinaus publiziert er weiter und ist hufiger Referent auf Fachtagungen und Kongressen. Judith Muhr Judith Muhr arbeitet freiberuflich als 7bersetzerin. Stefan Schumacher Stefan Schumacher entdeckte die Seiten des World Wide Web Consortiums 1996 als Student und erkannte die Spezifikationen als wertvolle Informationsquelle. Das Interesse an der englischen Sprache und die Herausforderung, die Spezifikationen vollkommen zu verstehen, weckten sein Interesse, wichtige Dokumente ins Deutsche zu "bersetzen. Er ist selbststndiger Berater in den Bereichen Internet, Netzwerk und Kommunikation. 7ber die Website www.edition-w3c.de finden Sie die Kurzvita jedes Mitarbeiters, zum Teil ergnzt um Links, auf die wir in der gedruckten Fassung verzichtet haben.

Herstellung des Buches, typografische Konventionen und weitere Formalien Da die Spezifikationen, die in diesem Band als kommentierte 7bersetzung enthalten sind, im Original im (X)HTML-Format vorliegen, ist fr"h die Entscheidung gefallen, auf diesem Format aufzusetzen. Aus organisatorischen Gr"nden konnten nicht alle Mitarbeiter direkt in HTML arbeiten. Da andererseits nicht alle modernen Software-Produkte einen reibungslosen Export in (X)HTML anbieten, mussten wir Alternativen suchen. So haben wir zwei Texte, deren 7bersetzungen in Word erfasst wurden, nach RTF exportiert und dann mit der Software upCast nach XML konvertiert und von dort mittels XSLT in (X)HTML transformiert. F"r die freundliche Bereitstellung von upCast gilt unser Dank der Firma infinity loop.

Buchherstellung, typografische Konventionen, Formalien

< 19 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Die W3C-Texte sind vor allem f"r die Darstellung im Web ausgezeichnet. Wir haben versucht, diese Auszeichnungen so gut wie m0glich f"r den Druck zu verwenden. Folgende Textbausteine werden Ihnen in diesem Buch hufig begegnen:

Anmerkung der !bersetzer: Kommentare, die nicht im Originaltext enthalten sind, sondern f"r die 7bersetzung hinzugef"gt wurden, sind entsprechend kenntlich gemacht. Bitte beachten Sie, dass diese Abschnitte nicht durch das W3C verabschiedet sind. Sie geh0ren nicht zum Originaltext.

Anmerkung: Nicht nur die bersetzer haben kommentiert. Auch das W3C hat in seinen Texten Anmerkungen. Sie sehen so aus, wie dieser Absatz. n Im gesamten Buch finden Sie zahlreiche Beispiele. Dazu geh0ren auch Listings mit Code-Beispielen. Code-Beispiele gibt es viele. Neben einer besonderen Darstellung, zeichnen sie sich auch dadurch aus, dass Zeilenumbrche erhalten bleiben.

Neben diesen Elementen auf Blockebene finden sich verschiedenartige Auszeichnungen in den Bl0cken. Zu den wichtigsten zhlen die Elemente und Attribute von (X)HTML. Des Weiteren enthlt jeder Text dieser Sammlung einige eigene Auszeichnungen, die (hoffentlich) selbsterklrend sind.

Danksagung F"r die inhaltliche Pr"fung der 7bersetzungen danke ich Ivan Hermann (W3C) und Klaus Birkenbihl (W3C.de). Stefan Hermann (infinity loop) hat durch die Bereitstellung seines Produkts upCast zum Gelingen dieses Bandes beigetragen. Ohne das Engagement von Stefan Schumacher und Christine K"hnel htte es keine 7bersetzung von HTML 4 gegeben. Des Weiteren sind Christine K"hnel die meisten der Kommentare in HTML 4 zu danken. Last but not least: Mein besonderer Dank an Sylvia Hasselbach, unsere Lektorin von AddisonWesley. Dass sie das Projekt trotz allen Qrgers durchgezogen und das Buch gegen alle Widerstnde und Bedenken verteidigt hat, danke ich ihr pers0nlich sehr. Abschließend bleibt mir der Wunsch zu ußern, dass sich unsere Arbeit lohnt und wir richtig liegen mit der 7berzeugung, dass dieses Buch, so wie das erste der Reihe und die (hoffentlich) nachfolgenden gebraucht werden; dass die edition W3C.de in deutscher Sprache das Referenzwerk wird, das auf keinem Schreibtisch fehlen darf. 7bersetzer, Verlag, W3C und der Herausgeber glauben daran... Stefan Mintert

Hamburg im April 2002

< 20 >

Vorwort

Page size: 168,00 x 240,00 mm

Sandini Bib

< Einleitung >

Page size: 168,00 x 240,00 mm

Sandini Bib

Thematische Einf hrung und !berblick ber den Band Der vorliegende Band widmet sich dem wichtigsten Thema des World Wide Web. Es geht um die technischen Standards f"r die Ausgabe und Darstellung von Texten und Daten im WWW. Die zentrale Sprache, die Lingua Franca des Web ist die Hypertext Markup Language (HTML). Ohne HTML, in alle ihren Versionen und neuen Fassungen, gbe es kein WWW. HTML geh0rt mittlerweile schon fast zur Allgemeinbildung. Doch das, was von Autoren HTML genannt wird, ist oft alles andere als sauber geschrieben. Moderne Web-Browser sind gndig bei Regelverst0ßen im Source-Code der Dokumente. Es geh0rte zum guten Ton, Web-Seiten mit verschiedenen Browsern zu testen. Doch damit kann keine wirkliche Gewhr "bernommen werden, dass Texte "berall und von jedermann zu lesen sind. Zu verschieden sind die Benutzerprogramme und Ausgabeformen im Internet – von graphischen Browsern, "ber Suchmaschinen bis zu akustischer Ausgabe. Nach und nach setzt sich bei immer mehr Menschen die Einsicht durch, die schon seit langem die 7berzeugung vieler Experten ist: Der beste Weg, um m0glichst viele Menschen m0glichst gut im Web zu erreichen, besteht darin, akzeptierte WebStandards zu schaffen, zu verbreiten und selbst zu praktizieren. Aus diesem Grund ist die Kenntnis der vorliegenden W3C- Spezifikationen f"r jeden unerlsslich, der als Autor, Designer oder Anwendungsentwickler ttig ist. HTML steht schon lngst nicht mehr allein da. Die Nachfolgerin und aktuelle Fassung trgt den Namen Extensible Hypertext Markup Language (XHTML). Whrend die Erstere mit Hilfe von SGML (Standard Generalized Markup Language) definiert wurde, ist die j"ngere Schwester eine Anwendung von XML (Extensible Markup Language). Der Zusammenhang der Sprachen ist in der folgenden Abbildung dargestellt. formatiert

DSSSL

HTML

SGML definiert XML

formatiert

CSS

XHTML

beeinflusst

Metasprachen

& transformiert

formatiert & transformiert

XSL XSLT

Auszeichnungssprachen Formatierungs- und Transformationssprachen

Der Zusammenhang zwischen XML, SGML, XHTML, HTML, CSS, DSSSL, XSL, XSLT (Quelle: [BeMi2000])

< 22 >

Einleitung

Page size: 168,00 x 240,00 mm

Sandini Bib

Die W3C-Spezifikationen in diesem Band Die W3C-Spezifikationen in diesem Band sind innerhalb des World Wide Web Consortiums in der »Document Formats Domain« angesiedelt. Zu anderen Arbeitsbereichen des W3C zhlen etwa die »Architecture Domain« und die Domain »Technology and Society«. In diesen Namen zeigt sich schon, wo XHTML, CSS & Co angesiedelt sind. Es geht darum, Dokumente darzustellen und zu formatieren. F"r die strukturierte Darstellung von Web-Seiten dienen HTML und XHTML. Die wichtigste Spezifikation ist nach wie vor HTML 4.01. HTML 4.01 definiert die Menge der Elementtypen (wie p, h1, a, table und so weiter), die f"r Web-Seiten verwendet werden k0nnen. Hierbei ist wichtig, dass HTML 4.01 auch die Semantik der Elementtypen definiert. Erst dann ist klar, dass h1 eine 7berschrift erster Ordnung und p ein Absatz ist. Das Web ist nun mehr als zehn Jahre alt und immerhin schon Mitte der Neunzigerjahre begann es seinen Siegeszug um die Welt. Und doch gab es niemals zuvor eine HTML-Spezifikation in deutscher Sprache. Das heißt, alles was Sie bisher in deutscher Sprache "ber HTML gelesen haben, war Sekundrliteratur. Erst mit diesem Band liegt eine 7bersetzung der Primrliteratur zum Web-Design in Deutsch vor – zudem fachlich kommentiert. XHTML 1.0 (zweite Auflage) ist die zweite Recommendation im Buch. Es handelt sich dabei um die Neuformulierung von HTML 4 mit den Vokabeln von XML. XHTML 1.0 erklrt nicht die Semantik der Elementtypen, sondern verweist auf HTML 4. Sie m"ssen deshalb auch heute noch die HTML 4-Recommendation kennen. Trotzdem ist es sinnvoll neue Dokumente in XHTML und nicht mehr in HTML herauszugeben, denn die Weiterentwicklung geht in diese Richtung. Whrend HTML 4 und XHTML 1.0 noch recht monolithisch sind, werden neuere Versionen modular aufgebaut. Viele Gerte brauchen nicht den vollen Sprachumfang von HTML oder k0nnen ihn nicht unterst"tzen. Einige Gertehersteller wollen Teile von HTML unterst"tzen, aber auch eigene Teile zuf"gen. Dies k0nnen zum Beispiel zuk"nftige Mobiltelefone, PDAs oder e-Books sein. Der Schl"ssel dazu ist die Modularisierung von XHTML, die Sie als dritten Text in diesem Buch finden. Bei XHTML 1.1 handelt es sich um eine auf Modulen aufbauende Version. XHTML Basic ist eine Untermenge von XHTML, die besonders f"r mobile Gerte entworfen wurde. Die Formatierung von (X)HTML im weiteren Sinne, von der Bildschirmdarstellung bis zur Sprachausgabe ist die Domne der Cascading Style Sheets, deren »Level 2« Sie zum Abschluss des Bandes finden. Die folgende Tabelle zeigt den Zeitplan aus der „HTML Working Group Roadmap“ vom 7. Februar 2003. Die Daten sind tatschliche (zur"ckliegende) oder voraussichtlichte (zuk"nftige) Daten, die angeben wann ein Dokument den jeweiligen Status erreicht hat. Die Abk"rzungen stehen f"r Candidate Recommendation (CR), Proposed Recommendation (PR), Recommendation (REC). Nur der letzte Status ist ein stabiler Zustand. Alle genannten W3C-Dokumente, die eine Recommendation sind, finden Sie in kommentierter Fassung in diesem Buch.

Thematische Einfhrung und berblick ber den Band

< 23 >

Page size: 168,00 x 240,00 mm

Sandini Bib

1. Entwurf

2. Entwurf

Letzter Aufruf

endet

CR

PR

REC

2. Auflage

HTML 4.01

-

-

-

-

-

24 Aug 1999

24 Dec 1999

-

XHTML 1.0

5 Dec 1998

24 Feb 1999

5 May 1999

1 Jun 1999

-

10 Dec 1999

26 Jan 2000

1 Aug 2002

Modularization

6 Apr 1999

10 Sep 1999

5 Jan 2000

1 Feb 2000

20 Oct 2000

23 Feb 2001

10 Apr 2001

TBD

XHTML 1.1

10 Sep 1999

-

5 Jan 2000

1 Feb 2000

-

6 Apr 2001

31 May 2001

TBD

XHTML Basic

21 Dec 1999

-

10 Feb 2000

15 Mar 2000

-

3 Nov 2000

19 Dec 2000

TBD

Media Type

18 Dec 2000

8 Feb 2001

27 Sep 2001

26 Oct 2001

-

-

6 Feb 2002

-

XML Events

21 Dec 1999

28 Aug 2000

26 Oct 2001

30 Nov 2001

7 Feb 2003

Apr 2003

TBD

-

Modularization of XHTML in XML Schema

22 Mar 2001

19 Dec 2001

9 Dec 2002

31 Jan 2003

Mar 2003

Sep 2003

TBD

-

XHTML + MathML + SVG

30 Apr 2002

9 Aug 2002

Mar 2003

TBD

Sep 2003

Mar 2004

TBD

-

XFrames

6 Aug 2002

-

Jan 2003

Feb 2003

TBD

TBD

TBD

-

XHTML 2.0

5 Aug 2002

11 Dec 2002

Jul 2003

TBD

Oct 2003

Jul 2004

TBD

-

Modularization 2.0

TBD

TBD

TBD

TBD

TBD

TBD

TBD

-

XML Schemas for XHTML 1.0

3 Sep 2002

TBD

TBD

TBD

TBD

TBD

TBD

-

< 24 >

Einleitung

Page size: 168,00 x 240,00 mm

Sandini Bib

1. Entwurf

2. Entwurf

Letzter Aufruf

endet

CR

PR

REC

2. Auflage

XML Schemas for XHTML 1.1 and Basic

Mar 2003

TBD

TBD

TBD

TBD

TBD

TBD

-

HLink

13 Sep 2002

TBD

TBD

TBD

TBD

TBD

TBD

-

XHTML + SMIL

Jan 2003

Mar 2003

Jun 2003

TBD

Oct 2003

Apr 2004

TBD

-

Weitere W3C-Spezifikationen und -Texte Neben den Spezifikationen, die in diesem Band enthalten sind, gibt es zahlreiche weitere, die mehr oder weniger eng verwandt sind. Einige dieser Spezifikationen sind zum Zeitpunkt der Drucklegung noch nicht fertig, whrend alle in diesem Band enthaltenen Texte verabschiedete Recommendations sind, die eine Reihe von Pr"fungen hinter sich haben. Wer sich f"r die technische Grundlage von XHTML interessiert, findet in der XML-Spezifikation alle Informationen – auf www.edition-w3c.de sogar in deutscher Sprache. Im Rahmen der Buchreihe ist bereits ein Band zu diesem Thema erschienen. Im engeren Umfeld von XHTML sind einige Recommendations am Horizont zu erkennen: XFrames wird die Neuformulierung der HTML-Frames sein, die allerdings nicht die gleichen Nachteile haben sollen. Qhnlich verhlt es sich mit XForms, einer XML- Sprache f"r Formulare. HLink wird es gestatten, beliebigen Elementen Hyperlink-Fhigkeiten zu geben. Weitere in Arbeit befindliche Spezifikationen beschftigen sich mit der Erstellung von Schemata anstelle von DTDs f"r XHTML. Des weiteren gibt es einige Arbeiten, die XHTML-Profile f"r kombinierte Anwendungen definieren. Dazu geh0rt zum Beispiel XHTML+MathML+SMIL. Die nchste große Version von XHTML wird die Version 2.0 sein. Der gegenwrtige Zeitplan unter www.w3.org/MarkUp/xhtml-roadmap/ nennt als Ver0ffentlichungszeitpunkt f"r die Proposed Recommendation den Juli 2004. Einen Termin f"r die Recommendation gibt es noch nicht, aber es darf angenommen werden, dass XHTML 2.0 nicht vor Ende 2004 verabschiedet wird.

Internet Society und Internet Engineering Task Force Auch wenn es vielen Menschen so vorkommt: Das Web ist nicht das Internet, vielmehr setzt es auf der Infrastrukur des Internet auf. Die Internet Society (ISOC) k"mmert sich um die offene Weiterentwicklung des Internet. Eine wichtige Rolle nimmt die mit ihr assoziierte Internet Engineering Task Force (IETF) ein. Die wichtigsten Ver0ffentlichungen der IETF sind die Requests for Comments (RFC), die zum Beispiel die Standards f"r alle Internet-Protokolle beschreiben. Die offiziellen Websites sind: http://www.isoc.org/, http://www.ietf.org/, http://www.rfc-editor.org/

Thematische Einfhrung und berblick ber den Band

< 25 >

Page size: 168,00 x 240,00 mm

Sandini Bib

F"r das Web sind wichtige RFCs unter anderen: HTTP/1.1 (RFC 2616) und HTTP Authentication (RFC 2617). Jenseits des Hypertext Transfer Protocol (HTTP) endet die Zustndigkeit der IETF und es beginnt die Zustndigkeit des W3C. HTTP ist sozusagen die Schnittstelle zwischen beiden Organisationen. Informationen "ber HTTP gibt es beim W3C unter http://www.w3.org/ Protocols/.

HTTP und MIME Neben der Integration bestehender Protokolle war in der Geburtsstunde des Web auch ein neues Protokoll geboren, das (besser als bestehende 7bertragungsverfahren) auf die Bed"rfnisse von Hypertextsystemen zugeschnitten sein sollte. Getauft hat Berners-Lee seine Entwicklung auf den Namen Hypertext Transfer Protocol (HTTP). In der Version 1.1 kennt HTTP die Befehle GET, POST, HEAD, PUT, DELETE, TRACE und OPTIONS. Die wichtigsten davon sind: GET zur Anforderung eines Dokumentes von einem Server POST zur 7bertragung von Daten, die etwa Formulareingaben des Benutzer darstellen HEAD zur Abfrage von HTTP-Header-Informationen, ohne ein Dokument vollstndig laden zu m"ssen PUT als Gegenst"ck zu GET zum 7bertragen eines Dokumentes zu einem Server Die fr"h geforderte Multimedialitt des World Wide Web macht es notwendig, dass verschiedenartige Inhalte von Dokumenten (Text, Graphik, Video, Audio usw.) mit einer Kennzeichnung versehen werden, damit der Empfnger (der Client) weiß, wie er die erhaltenen Daten verarbeiten muss und ob er es "berhaupt kann. Diese Kennzeichnung folgt im Web der MIMEKonvention. Urspr"nglich als Multipurpose Internet Mail Extensions f"r den Mailverkehr entwickelt, wird MIME nun auch als Multimedia Internet Message Extensions f"r weitere Dienste, darunter das World Wide Web, eingesetzt. An einem Beispiel ist die Verfahrensweise leicht ersichtlich. Das HTTP ist aufgrund seiner textuellen Natur auch f"r Menschen lesbar. Folgende Zeilen zeigen eine Telnet-Verbindung zu einem Web-Server. > telnet www.w3.org 80 Trying 18.23.0.22... Connected to www.w3.org. Escape character is '^]'. HEAD /pub/WWW/Addressing/ HTTP/1.0

HTTP/1.0 200 Document follows Server: CERN/3.0A Date: Thu, 17 Apr 1997 11:16:47 GMT

< 26 >

Einleitung

Page size: 168,00 x 240,00 mm

Sandini Bib

Content-Type: text/html Content-Length: 12094 Last-Modified: Wed, 16 Apr 1997 21:44:29 GMT

Die hervorgehobenen Zeilen zeigen den Verbindungsaufbau (telnet), die HTTP-Anfrage (HEAD), den Antwortcode des Servers (200 Document follows) sowie den MIME-Typ des angefragten Dokumentes (text/html). Falls im Web sensible Daten (etwa personenbezogene Daten, Kontodaten und so weiter) "bertragen werden, dann ist nat"rlich eine hohe Sicherheit gegen unbefugtes Mith0ren gew"nscht. Ein gngiger Ansatz besteht im Einsatz von TLS. TLS steht f"r Transport Layer Security. Im Zusammenhang mit HTTP kann TLS in zwei Arten eingesetzt werden: HTTP ber TLS In diesem Fall wird eine TLS-Verbindung hergestellt, "ber die dann HTTP „gesprochen“ wird. Eigenschaften dieser Vorgehensweise sind URIs, die mit https beginnen und Verbindungen "ber den Port 443. Die Spezifikation ist in RFC 2818 zu finden. TLS mit HTTP/1.1 In diesem Fall wird TLS "ber eine bestehende TCP-Verbindung abgewickelt. Dadurch lassen sich gesicherte und ungesicherte HTTP-Nachrichten "ber denselben Port (80) schicken. Details sind in RFC 2817 zu finden.

MIME-Typen f r XHTML Was unter einem MIME-Typ zu verstehen ist und wie er in HTTP benutzt wird, wurde soeben schon erklrt. Bleibt die Frage, welcher MIME-Typ wof"r verwenden werden soll.Als es nur HTML gab, war die Angelegenheit relativ einfach, mittlerweile ist es kompliziert. Neben HTML (text/html) gibt es XML (text/xml). Was ist mit XHTML? Einerseits handelt es sich um HTML, andererseits XML. Außerdem gibt es XHTML in mehreren Geschmacksrichtungen. Dar"ber hinaus kann man noch MathML oder SVG in XHTML einbetten. Das Problem ist nicht ganz trivial. F"r einige wichtige Flle enthlt die W3C-Note „XHTML Media Types“ (http://www.w3.org/TR/ xhtml-media-types) L0sungsvorschlge. Der Text unterscheidet zwischen voneinander abweichenden XHTML-Versionen, XHTML mit eingebettetem MathML und HTML. text/html ist im Allgemeinen nicht f"r XHTML geeignet, sondern nur f"r HTML. Er darf jedoch verwendet werden, wenn ltere Browser XHTML darstellen sollen. In diesem Fall halten sich die XHTML-Dokumente an die HTML-Kompatibilittsrichtlinien aus der XHTML 1-Spezifikation. Dazu geh0rt, dass ein leeres Element wie
(korrekte XHTML-Schreibweise) nun als
geschrieben wird. Das Leerzeichen vor dem Schrgstrich sorgt daf"r, dass alte Browser das als br erkennen. Aber auch in diesem Fall sollte man text/html nur f"r XHTML 1 verwenden. Der Einsatz mit kombinierten Sprachen, wie XHTML+MathML ist nicht zulssig. Außerdem ist unbedingt anzuraten, eine explizite Angabe "ber die Zeichenkodierung zu machen. Fehlt eine solche Angabe, k0nnte man annehmen, das UTF-8 oder UTF-16 f"r XHTML erlaubt sind, da es sich ja um Defaults f"r XML handelt. Bei Verwendung von text/html weist die zugeh0rige Spezifikation („The 'text/html' Media Type“, RFC 2854) darauf hin, dass durch RFC 2046 (MIME) als Default-Kodierung US-ASCII anzunehmen ist. Diesen Widerspruch kann

Thematische Einfhrung und berblick ber den Band

< 27 >

Page size: 168,00 x 240,00 mm

Sandini Bib

man verlsslich durch Angabe der Zeichenkodierung in der XML-Deklaration () und im meta-Element () vermeiden. Prinzipiell sollte man f"r XHTML-Dokumente den MIME-Typ application/xhtml+xml benutzen, allerdings um den Preis, dass der Großteil der Browser heute damit nichts anfangen kann. Selbstverstndlich kann auch application/xml f"r XHTML verwendet werden, schließlich sind XHTML-Dokumente g"ltige XML-Instanzen. Mit diesem MIME-Typ verliert man jedoch die Behandlung des Dokuments als XHTML-Dokument. Durch Einsatz von Stylesheets (etwa CSS) lsst sich auf der gestalterischen Seite einiges ausgleichen, aber die Ber"cksichtigung der besonderen Semantik einiger Elemente (beispielsweise Links, Formulare und so weiter) ist verloren. Fehlt bei der Verwendung von application/xml auf MIME-Ebene die Angabe der Zeichenkodierung, muss das empfangende Programm anhand der durch XML 1.0 definierten Regeln die Kodierung bestimmen. Im Gegensatz dazu gilt f"r text/xml dasselbe wie f"r text/html: Fehlt die Kodierungsangabe auf MIME-Ebene, geben die „XML Media Types“ (RFC3023) US-ASCII vor. Die Problematik wird in der W3C-Note in folgender Tabelle zusammengefasst. Ber"cksichtigt man die aktuelle Browser-Situation, bedeutet das f"r den Einsatz von XHTML: beschrnken auf XHTML 1, beachten der HTML-Kompatibilittsrichtlinien, deklarieren als text/html sowie vollstndige Angabe der Zeichenkodierung (XML-Deklaration und meta). Medientyp

HTML 4

XHTML 1.0 (HTMLkompatibel)

XHTML 1.0 (anderes)

XHTML Basic / 1.1

XHTML+ MathML

text/html

sollte

darf

sollte nicht

sollte nicht

sollte nicht

application/ xhtml+xml

darf nicht

sollte

sollte

sollte

sollte

application/xml

darf nicht

darf

darf

darf

darf

text/xml

darf nicht

darf

darf

darf

darf

Es ist momentan nicht leicht, einerseits standardkonform zu bleiben und andererseits mit den aktuellen Browsern kompatibel. Da die Entwicklung der Browser schnell voranschreitet, verweisen wir an dieser Stelle auf eine Online-Quelle: Unter http://www.w3.org/People/mimasa/ test/xhtml/media-types/ finden Sie einen Test, der feststellt, welcher Browser welchen MIMETyp akzeptiert. Selbstverstndlich sind die Ergebnisse f"r bereits getestete Browser dort ver0ffentlicht.

Uniform Resource Identifier (URI) Jedes HTML-Dokument, oder allgemeiner jedes Objekt, das im Netz erreichbar ist, soll "ber eine eindeutigen Bezeichner adressierbar sein. Die Objekte nennt man auch Ressource. Der Bezeichner heißt Uniform Resource Identifier (URI). Dessen Syntax wird in RFC 2396 festgelegt. Beispiele sieht man bei der tglichen Arbeit mit dem World Wide Web stndig, dennoch sei eines genannt: http://www.edition-w3c.de/presse.html. Bei der Ressource, die damit adressiert wird, handelt es sich um ein HTML-Dokument. Nebenbei sei bemerkt, dass dort Pressebe-

< 28 >

Einleitung

Page size: 168,00 x 240,00 mm

Sandini Bib

richte "ber unsere Buchreihe zu finden sind. Ein URI besteht aus mehreren Teilen. Der erste Teil (hier: http) wird „Schema“ (engl.: Scheme) genannt. Im obigen Beispiel gibt das Schema an, wie das Dokument zu erreichen ist, nmlich per HTTP. Es handelt sich bei diesem URI deshalb um einen Spezialfall, den Uniform Resource Locator (URL). Auch wenn dieser Begriff mittlerweile als veraltet gilt, RFC 2396 beschreibt ihn so: „Der Ausdruck Uniform Resource Locator (URL) bezeichnet die Vertreter der URIs, die Ressourcen durch Nennung ihres primren Zugriffsmechanismus' (z. B. ihren Aufenthaltsort im Netzwerk) beschreiben, anstatt sie durch ihren Namen oder andere Eigenschaften zu identifizieren. Der Ausdruck Uniform Resource Name (URN) bezeichnet die Vertreter der URIs, von denen verlangt wird, dass sie global eindeutig und bestndig bleiben, selbst wenn die Ressource nicht mehr existiert oder nicht mehr erreichbar ist.“ Beim Schreiben von HTML-Texten d"rften URIs mit dem http-Schema am hufigsten Anwendung finden. Dennoch sind andere Schemata wichtig. Eine offizielle Liste der URI-Schemata ist bei der Internet Assignet Names Authority (IANA) zu finden: http://www.iana.org/assignments/ uri-schemes. Mit Stand vom 11. Mrz 2003 sind folgende Namen bei der IANA reserviert: Name des Schemas

Beschreibung

Referenz

ftp

File Transfer Protocol

[RFC1738]

http

Hypertext Transfer Protocol

[RFC2616]

gopher

The Gopher Protocol

[RFC1738]

mailto

Electronic mail address

[RFC2368]

news

USENET news

[RFC1738]

nntp

USENET news using NNTP access

[RFC1738]

telnet

Reference to interactive sessions

[RFC1738]

wais

Wide Area Information Servers

[RFC1738]

file

Host-specific file names

[RFC1738]

prospero

Prospero Directory Service

[RFC1738]

z39.50s

Z39.50 Session

[RFC2056]

z39.50r

Z39.50 Retrieval

[RFC2056]

cid

content identifier

[RFC2392]

mid

message identifier

[RFC2392]

vemmi

versatile multimedia interface

[RFC2122]

service

service location

[RFC2609]

imap

internet message access protocol

[RFC2192]

nfs

network file system protocol

[RFC2224]

acap

application configuration access protocol

[RFC2244]

rtsp

real time streaming protocol

[RFC2326]

tip

Transaction Internet Protocol

[RFC2371]

pop

Post Office Protocol v3

[RFC2384]

Thematische Einfhrung und berblick ber den Band

< 29 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Name des Schemas

Beschreibung

Referenz

data

data

[RFC2397]

dav

dav

[RFC2518]

opaquelocktoken

opaquelocktoken

[RFC2518]

sip

session initiation protocol

[RFC2543]

tel

telephone

[RFC2806]

fax

fax

[RFC2806]

modem

modem

[RFC2806]

ldap

Lightweight Directory Access Protocol

[RFC2255]

https

Hypertext Transfer Protocol Secure

[RFC2818]

soap.beep

soap.beep

[RFC3288]

soap.beeps

soap.beeps

[RFC3288]

xmlrpc.beep

xmlrpc.beep

[RFC-harold-beepxmlrpc-03.txt]

xmlrpc.beeps

xmlrpc.beeps

[RFC-harold-beepxmlrpc-03.txt]

urn

Uniform Resource Names (siehe http://www. iana.org/assignments/urn-namespaces)

[RFC2141]

go

go

[RFC3368]

h323

H.323

[RFC-levin-iptelh323-url-scheme05.txt]

Die bekannten Namen wie http, ftp oder mailto bed"rfen keiner weiteren Beispiele. Interessant, insbesondere f"r den Aufbau von Firmen-Websites d"rften die Namen tel und fax sein. Das folgende Beispiel illustriert eine m0gliche Verwendung auf dem Website von AddisonWesley:

Sie erreichen uns telefonisch unter 089 / 4 60 03-0. Wenn Sie uns ein Fax schicken mEchten, senden Sie es bitte an 089 / 4 60 03-100.

Auf den ersten Blick mag es wenig Sinn machen, Telefon- und Faxnummern als URI anzugeben. Doch lngst ist es "blich Faxe per Computer zu verschicken und auch Software zur IP-Telefonie ist keine Science-Fiction. Je nach Ausstattung seines Computers kann ein Benutzer obige Links anklicken und es startet seine Fax- respektive Telefon-Software. Letztere beginnt m0glicherweise gleich den Whlvorgang.

< 30 >

Einleitung

Page size: 168,00 x 240,00 mm

Sandini Bib

International Organization for Standardization Das W3C versteht sich selbst nicht als Normierungsorganisation. Derer gibt es aus deutschsprachiger Sicht vier: eine internationale und je eine nationale in Deutschland, 8sterreich und der Schweiz. Die Internationale Organisation f>r Normierung (ISO), mit Sitz in Genf, ist nat"rlich ebenfalls im Web vertreten: http://www.iso.ch/. Deutsches Mitglied der ISO ist das Deutsche Institut f>r Normung e.V. (DIN, http://www.din.de/). Die 0sterreichische Vertretung ist das @sterreichische Normungsinstitut (ON, http://www.on-norm.at/) und die Schweiz wird durch die Schweizerische Normen-Vereinigung (SNV, http://www.snv.ch/) vertreten. Im technischen Bereich muss neben der ISO unbedingt die 40 Jahre fr"her gegr"ndete International Electrotechnical Commission (IEC, http://www.iec.ch/) erwhnt werden. Aufgrund der Zusammenarbeit tragen viele Normen das Prfix ISO/IEC. SGML (ISO 8879) Informationen "ber SGML, dem Vorfahren von XML, sind auf den XML Cover Pages sowie in [Goldfarb97] zu finden. Von Interesse ist auch die International SGML/XML Users' Group: http://www.isgmlug.org/ HyTime (ISO/IEC 10744) Den Einstieg in die Hypermedia/Time-based Structuring Language findet man am besten auf der HyTime Users' Group Home Page (http://www.hytime.org/). HyTime hat viele Grundlagen f"r die Linking-Spezifikationen f"r XML geschaffen. Topic Maps (ISO/IEC 13250) Die 2000 verabschiedete Norm Topic Maps dient zur thematischen Gruppierung von Informationsobjekten (dies k0nnten zum Beispiel Webseiten sein) und zum Beschreiben der zwischen ihnen bestehenden Relationen. Es besteht ein gewisser Zusammenhang zu den W3C-Sepzifikationen f"r RDF. Eine Variante sind die XML Topic Maps. Siehe http://www.topicmaps.org/ ISO/IEC 10646-1 Zu dieser Norm geh0ren Universal Multiple-Octet Coded Character Set (UCS), Transformation Format for 16 planes of group 00 (UTF-16) sowie UCS Transformation Format 8 (UTF-8). Es handelt sich dabei um die f"r XML zugrunde gelegte Zeichenkodierung. F"r den praktischen Einsatz ist die »offizielle Implementierung« namens Unicode wichtig (Zitat von der Unicode-Site). Informationen sind unter http://www.unicode.org/ zu finden. Die im Februar 2000 ver0ffentlichte Version 3.0 von Unicode ist mit der Second Edition von ISO/IEC 10646-1 abgeglichen. Ein lesenswerter Text zu Unicode und XML ist als kombinierte W3C Note/ Unicode Technical Report auf den Sites beider Konsortien zu finden: Unicode in XML and other Markup Languages (http://www.unicode.org/unicode/reports/tr20/ oder http://www. w3.org/TR/unicode-xml/) HyperText Markup Language (HTML, ISO/IEC 15445:2000) Diese Variante von HTML 4 wird "blicherweise als ISO-HTML bezeichnet. Eine Beschreibung der beiden Herausgeber, David M. Abrahamson und Roger Price, ist unter http:// purl.org/NET/ISO+IEC.15445/Users-Guide.html zu finden.

Thematische Einfhrung und berblick ber den Band

< 31 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Organization for the Advancement of Structured Information Standards OASIS ist eine Organisation, die sich der Verbreitung von offenen Standards wie XML verschrieben hat. Im Gegensatz zum W3C gibt sie selbst keine technischen Spezifikationen heraus. Außerdem ist die Mitgliedschaft nicht auf Firmen beschrnkt, sondern steht auch Einzelpersonen offen. Die OASIS-Homepage ist unter http://www.oasis-open.org/. OASIS betreibt auch das Portal XML.org unter der gleichnamigen Adresse http://xml.org/. OASIS ist gemeinsam mit den Vereinten Nationen verantwortlich f"r das Projekt Electronic Business XML (http://www.ebxml.org/). Ein f"r den praktischen Einsatz von XML sehr wichtiger Aspekt wird vom W3C nicht adressiert: Das Auffinden von externen Entities. Im Gegensatz zu SGML muss bei XML f"r externe Entities immer ein System-Identifier angegeben werden. In XML-Dokumenten ist dies ein URI. Damit ist das Problem der Entity-Referenzierung aus W3C-Sicht erledigt. In der Praxis ist dieser formale Standpunkt oft nicht zufriedenstellend. Doch schon zu SGML-Zeiten gab es eine L0sung: Ein Katalog, der global eindeutige Entity-Namen (damals:Formal Public Identifier (FPI); heute mehr und mehr: URI) auf lokale Namen abbildet. Eine Initiative f"r XML Catalogs gibt es ([XMLcat]); praktisch werden nach wie vor die alten, etablierten SGML Open Catalogs eingesetzt ([SOcat]) und auch von vielen XML-Programmen unterst"tzt.

Common Gateway Interface HTML-Formulare sind vergleichsweise pl0tzlich im Web aufgetaucht. Sie wurden in der zweiten Jahreshlfte 1993 im XMosaic-Browser implementiert. Zu dieser Zeit gab es nur zwei verbreitete Web-Server, den vom NCSA (Vorlufer des Apache-Servers) und den vom CERN. Es stellte sich die Frage, wie Daten, die vom Benutzer in Formulare eingetragen wurden, zum Server "bertragen und von diesem an ein verarbeitendes Programm "bertragen werden. Die 7bertragung zum Server erfolgt durch Anhngen an einen URI (Get-Methode) oder als Inhalt der HTTP-Nachricht (Post-Methode). Die Entwickler am National Center f"r Supercomputing Applications (NCSA) haben einen Vorschlag gemacht, wie die Daten auf dem Server-Rechner an ein beliebiges Programm "bergeben werden k0nnen: das Common Gateway Interface. Das Ziel der Entwickler war eine L0sung, die es gestattet, ein so genanntes CGI-Programm mit beliebigen Server-Programmen benutzen zu k0nnen; es sollte keine L0sung nur f"r den NCSAServer sein. Daher kommt der Name Common Gateway Interface. Da CGI im Unix-Umfeld entwickelt wurde, war es naheliegend, dass Daten per Standardeingabe (STDIN) und durch Umgebungsvariablen "bergeben werden. Die Dokumentation von CGI ist nach fast zehn Jahren noch immer unter der selben Adresse zu finden: The Common Gateway Interface, http://hoohoo.ncsa.uiuc.edu/cgi/overview.html. Wer ein Bourne-Shell-Skript f"r die Auswertung von per HTTP "bertragenen Daten schreiben m0chte, wird nach wie vor sehr direkt mit dem CGI in Ber"hrung kommen. F"r die meisten komfortableren Programmiersprachen, wie etwa Perl oder PHP, ist eine „manuelle“ Auswertung der CGI-Parameter nicht mehr n0tig. F"r Perl beispielsweise gibt es ein Modul, dass die CGI-Parameterwerte in ein Perl-Objekt umwandelt und in einer f"r die Programmiersprache nat"rlichen Weise zur Verf"gung stellt.

< 32 >

Einleitung

Page size: 168,00 x 240,00 mm

Sandini Bib

Literatur BeMi2000 Henning Behme und Stefan Mintert. XML in der Praxis, Addison-Wesley, M"nchen 2000 Clark97 James Clark. Comparison of SGML and XML,1997. http://www.w3.org/TR/NOTE-sgmlxml-971215 Goldfarb97 Charles F. Goldfarb. The SGML History Niche, 1997. http://www.sgmlsource.com/history/ index.htm Raggett98 Dave Raggett, Jenny Lam, Ian Alexander, Michael Kmiec. HTML 4, Addison-Wesley, Bonn 1998 SOcat Paul Grosso (Subcommitee chair). Entity Management - OASIS Technical Resolution 9401:1997 (Amendment 2 to TR 9401), OASIS, 10. September 1997. http://www.oasisopen.org/specs/tr9401.html W3C7pt Das World Wide Web Consortium (W3C) in sieben Punkten, 7bersetzung von Henning Fischer, 6.4.2002. http://www.w3.org/Consortium/Offices/Germany/sieben.html W3CTR W3C Technical Reports and Publications. http://www.w3.org/TR/. Deutsche 7bersetzungen siehe http://www.edition-w3c.de/ XML10pt W3C Communication Team. XML in 10 Punkten, 7bersetzung von Henning Fischer, 2002. http://www.w3.org/Consortium/Offices/Germany/Misc/XML-in-10-points.html.de XMLcat Norman Walsh (editor). XML Catalogs, OASIS, 6. August 2001. http://www.oasis-open.org/ committees/entity/spec.html XMLspec21 Guide to the W3C XML Specification ("XMLspec") DTD, Version 2.1. http://www. w3.org/XML/1998/06/xmlspec-report-v21.htm

Literatur

< 33 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

A

< Die HTML 4.01Spezifikation >

Page size: 168,00 x 240,00 mm

Sandini Bib

Die HTML 4.01- Spezifikation

HTML 4.01-Spezifikation Deutsche bersetzung Diese Version: http://www.edition-w3c.de/TR/1999/REC-html401-19991224 Aktuelle Version: http://www.edition-w3c.de/TR/html4 bersetzer: Christine Khnel ( bersetzung, fachliche Kommentierung)

Stefan Schumacher ( bersetzung, fachliche Kommentierung)

Stefan Mintert (Fachlektorat und fachliche Kommentierung) Bei diesem Dokument handelt es sich um eine bersetzung eines W3C-Textes. Dieser Text ist urheberrechtlich geschtzt; bitte beachten Sie die nachfolgenden Hinweise des Originaldokuments. Die Rechte an der bersetzung liegen bei den bersetzern und dem Verlag Addison-Wesley. Die bersetzung hat keine durch das W3C legitimierte, normative Wirkung. Das einzige maßgebliche Dokument ist das englische Original. Bitte senden Sie Fehler und Korrekturen zur deutschen Fassung an die bersetzer. Kommentare der bersetzer, die als solche gekennzeichnet sind, unterliegen dem Urheberrecht der bersetzer. Sie sind nicht Bestandteil des Ursprungsdokuments. Diese Ver=ffentlichung ist eine Vorver ffentlichung. Kein Teil dieses Textes darf kopiert werden. Alle Rechte vorbehalten. Nach Abschluss der Arbeit wird das endgltige Dokument unter der oben angegebenen Adresse ver=ffentlicht. Die jetzige Ver=ffentlichung w@hrend der laufenden Arbeit dient zur Information von Interessierten und zur Prfung durch die Fach=ffentlichkeit. Sollten Sie Fehler finden oder Verbesserungsvorschl@ge haben, schicken Sie diese bitte per Mail an die bersetzer.

W3C-Recommendation 24. Dezember 1999 Diese Version: http://www.w3.org/TR/1999/REC-html401-19991224 (Textdatei [794Kb] http://www.w3.org/TR/1999/REC-html401-19991224/html40.txt, gzipptes Tar-Archiv der HTML-Dateien [371Kb] http://www.w3.org/TR/1999/REChtml401-19991224/html40.tgz, Zip-Archiv der HTML-Dateien [405Kb] http://www.w3.org/TR/1999/REChtml401-19991224/html40.zip, gzippte Postscript-Datei [746Kb, 389 Seiten] http://www.w3.org/TR/1999/REChtml401-19991224/html40.ps.gz, gzippte PDF-Datei [963Kb] http://www.w3.org/TR/1999/REChtml401-19991224/html40.pdf.gz) Aktuelle Version von HTML 4.01: http://www.w3.org/TR/html401

< 36 >

Die HTML 4.01- Spezifikation

Page size: 168,00 x 240,00 mm

Aktuelle Version von HTML 4: http://www.w3.org/TR/html4 Aktuelle Version von HTML: http://www.w3.org/TR/html Vorherige Version von HTML 4.01: http://www.w3.org/TR/1999/PR-html40-19990824 Vorherige HTML 4-Recommendation: http://www.w3.org/TR/1998/REC-html40-19980424 Editoren: Dave Raggett Arnaud Le Hors, W3C Ian Jacobs, W3C Copyright L1997-1999 W3CM (MIT, INRIA, Keio), All Rights Reserved. W3C trademark, document use and software licensing rules apply.

liability,

Zusammenfassung Diese Spezifikation definiert die HyperText Markup Language (HTML), die Sprache fr Ver=ffentlichungen im World Wide Web. Diese Spezifikation definiert HTML 4.01, eine berarbeitung von HTML 4. Zus@tzlich zu den Text-, Multimedia und Hyperlink-Funktionen der frheren HTML-Versionen (HTML 3.2 [HTML32] und HTML 2.0 [RFC1866]), untersttzt HTML 4 mehr Multimedia-Erweiterungen, Skript-Sprachen, Stylesheets, bessere Druckfunktionen, sowie zug@nglichere Dokumente fr behinderte Benutzer. HTML 4 macht auch große Schritte im Hinblick auf die Internationalisierung von Dokumenten, mit dem Ziel, das Netz wirklich weltweit zu machen (World Wide Web). HTML 4 ist eine zum internationalen Standard ISO 8879 konforme SGML-Anwendung (Standard Generalized Markup Language [ISO8879]).

Status dieses Dokuments Dieser Abschnitt beschreibt den Status dieses Dokuments zum Zeitpunkt seiner Ver=ffentlichung. Andere Dokumente k=nnen dieses ersetzen. Der letzte Stand der Dokumentreihe wird vom W3C gepflegt. Dieses Dokument spezifiziert HTML 4.01, das Teil der HTML 4-Spezifikationen ist. Die erste Version von HTML 4 war HTML 4.0 [HTML40], ver=ffentlicht am 18. Dezember 1997 und berarbeitet am 24. April 1998. Diese Spezifikation ist die erste HTML 4.01-Recommendation. Sie enth@lt nicht redaktionelle Onderungen seit der HTML-Version 4.0 vom 24. April. Es gab zum Beispiel einige Onderungen an den DTDs. Dieses Dokument erkl@rt vorherige Versionen von HTML 4.0 fr veraltet, obgleich das W3C diese Spezifikationen und ihre DTDs weiterhin auf der Web-Site des W3C verfgbar machen wird. Dieses Dokument wurde von Mitgliedern des W3C und anderen Interessierten geprft und vom Direktor des W3C als W3C-Recommendation gebilligt. Es ist ein stabiles Dokument und kann als Referenzmaterial verwendet werden oder von anderen Dokumenten als normative

Die HTML 4.01- Spezifikation

< 37 >

Die HTML 4.01- Spezifikation

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

Die HTML 4.01- Spezifikation

Referenz zitiert werden. Die Rolle des W3C bei der Erstellung dieser Recommendation ist es, die Spezifikation bekannt zu machen und ihren breiten Einsatz zu f=rdern. Dies erh=ht die Funktionalit@t und Interoperabilit@t des Webs. Das W3C empfiehlt, dass Benutzerprogramme und Autoren (und im besonderen Programme zur Erstellung von Web-Seiten) Dokumente bevorzugt in HTML 4.01 erzeugen und nicht in HTML 4.0. Das W3C empfiehlt, dass Autoren HTML 4-Dokumente erstellen, statt HTML 3.2-Dokumente. Aus Grnden der Rckw@rtskompatibilit@t empfiehlt das W3C zus@tzlich, dass Programme, die HTML 4 interpretieren, auch weiterhin HTML 3.2 und HTML 2.0 untersttzen. Informationen ber die n@chste Generation von HTML, die „Extensible HyperText Markup Language“[XHTML], finden Sie bei der W3C HTML Activity (http://www.w3.org/MarkUp/) und in der Liste der W3C Technical Reports (http://www.w3.org/TR/). Dieses Dokument wurde als Teil der W3C HTML Activity (http://www.w3.org/MarkUp/) erstellt. Die Ziele der HTML Working Group (http://www.w3.org/MarkUp/Group/, nur fr Mitglieder: http://cgi.w3.org/MemberAccess/) werden in der HTML Working Group Charter (http://www.w3.org/MarkUp/Group/HTMLcharter, nur fr Mitglieder: http://cgi.w3.org/ MemberAccess/) besprochen. Eine Liste der aktuellen W3C-Recommendations und anderer technischer Dokumente ist unter http://www.w3.org/TR zu finden. Sffentliche Diskussionen zu HTML-Gesichtspunkten werden in der Mailingliste [email protected] gefhrt (Archiv: [email protected]).

Verf-gbare Sprachen Die englische Version dieser Spezifikation ist die einzige normative Version. bersetzungen dieses Dokuments finden Sie unter http://www.w3.org/MarkUp/html4-updates/translations.

Errata Die Liste der bekannten Fehler in dieser Spezifikation ist verfgbar unter http://www.w3.org/MarkUp/html4-updates/errata. Bitte senden Sie Berichte ber Fehler in diesem Dokument an [email protected].

1 ber die HTML 4-Spezifikation 1.1 Wie die Spezifikation aufgebaut ist Diese Spezifikation ist in die folgenden Abschnitte unterteilt: Abschnitte 2 und 3: Einf-hrung in HTML 4 Die Einfhrung beschreibt, wie HTML in das Schema des World Wide Webs einzuordnen ist, erz@hlt kurz die Geschichte der HTML-Entwicklung, stellt heraus, was mit HTML gemacht werden kann, und gibt einige Tips zur Arbeit mit HTML.

< 38 >

ber die HTML 4-Spezifikation

Page size: 168,00 x 240,00 mm

Das kurze SGML-Tutorial kl@rt den Leser im Grundsatz ber die Beziehung von HTML zu SGML auf und gibt einen berblick, wie die Dokumenttyp-Definition (DTD) von HTML zu lesen ist. Abschnitt 4 bis 24: HTML 4-Referenzhandbuch Der berwiegende Teil des Referenzhandbuchs besteht aus der HTML-Sprachreferenz, die alle Elemente und Attribute der Sprache definiert. Dieses Dokument folgt in seinem Aufbau weniger der HTML-Grammatik als vielmehr Themenschwerpunkten. Die Themen gliedern sich in drei Kategorien: Struktur, Darstellung und Interaktivit@t. Auch wenn es nicht einfach ist, HTML-Konstrukte perfekt in diese drei Kategorien einzuordnen, spiegelt dieses Modell die Erfahrungen der HTML Working Group wider, die besagen, dass die Trennung der Dokumentstruktur von der Darstellung effektivere und pflegeleichtere Dokumente erzeugt. Die Sprachreferenz besteht aus den folgenden Informationen: Welche Zeichen drfen in einem HTML-Dokument erscheinen. Grundlegende Datentypen eines HTML-Dokuments. Elemente zur Bestimmung der Struktur von HTML-Dokumenten, einschließlich Text, Listen, Tabellen, Links und eingeschlossene Objekte sowie Bilder und Applets. Elemente zur Bestimmung der Darstellung eines HTML-Dokuments, einschließlich Stylesheets, Schriftarten, Farben, Trennlinien und andere optische Darstellungsformen und Frames fr die Darstellung in mehreren Fenstern. Elemente, die Interaktivit@t mit einem HTML-Dokument erlauben, einschließlich Formulare fr Benutzereingaben und Skripte fr aktive Dokumente. Die formale SGML-Definition von HTML: Die SGML-Deklaration von HTML. Drei DTDs: strict, transitional und frameset. Die Liste der Zeichenreferenzen.

·· · · · ·· ··

Anh.nge Der erste Anhang enth@lt Informationen ber die Onderungen gegenber HTML 3.2, um Autoren und Entwicklern beim bergang zu HTML 4 zu helfen, sowie Onderungen gegenber der Spezifikation vom 18. Dezember 1997. Der zweite Anhang enth@lt Bemerkungen zur Leistungsf@higkeit und zur Implementierung und ist prim@r darauf ausgerichtet, Entwickler bei der Erstellung von Benutzerprogrammen fr HTML 4 zu untersttzen. Referenzen Eine Liste normativer und informeller Referenzen. Indizes Drei Indizes verschaffen dem Leser einen raschen Zugriff auf die Definitionen der Schlsselkonzepte, Elemente und Attribute.

1.2 Dokumentkonventionen Dieses Dokument wurde fr zwei Lesergruppen geschrieben: Autoren und Entwickler. Wir hoffen, dass die Spezifikation Autoren mit den n=tigen Werkzeugen ausstatten wird, um effiziente, attraktive und zug@ngliche Dokumente zu schreiben, ohne sie mit den Details der HTML-Implementation zu berfordern. Entwickler sollten jedoch alles finden, was sie ben=tigen, um konforme Benutzerprogramme zu erstellen. Die Spezifikation kann von verschiedenen Seiten angegangen werden:

Dokumentkonventionen

< 39 >

Die HTML 4.01- Spezifikation

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

Die HTML 4.01- Spezifikation

· ·

Vom Anfang bis zum Ende lesen. Die Spezifikation beginnt mit einer allgemeinen Darstellung von HTML und wird zum Ende mehr und mehr technisch und geht in die Details. Schneller Zugang zu Informationen. Um an Informationen ber die Syntax und Semantik so schnell wie m=glich zu kommen, enth@lt die Online-Version der Spezifikation die folgenden Eigenschaften. 1. Jede Bezugnahme auf ein Element oder Attribut ist ber einen Link mit dessen Definition in der Spezifikation verbunden. Jedes Element oder Attribut ist nur an einer Stelle definiert. 2. Jede Seite enth@lt Links auf die Indizes. So ist man niemals mehr als zwei Links von der Definition eines Elements oder Attributs entfernt. 3. Jeder Abschnitt des Sprachreferenzhandbuchs erweitert das ursprngliche Inhaltsverzeichnis um weitere Details zum jeweiligen Abschnitt.

1.2.1 Elemente und Attribute Elementnamen werden in Großbuchstaben geschrieben (z. B. BODY). Attributnamen werden in Kleinbuchstaben geschrieben (z. B. lang, onsubmit). Rufen Sie sich ins Ged@chtnis, dass fr HTML gilt: Element- und Attributnamen unterscheiden nicht zwischen Groß- und Kleinschreibung (case-insensitive); die Konvention soll lediglich die Lesbarkeit f=rdern. Element- und Attributnamen wurden in diesem Dokument ausgezeichnet und werden von einigen Benutzerprogrammen eventuell besonders dargestellt. Jede Attributdefinition gibt den Typ des Attributwerts an. Erlaubt der Typ eine geringe Anzahl m=glicher Werte, listet die Definition die verschiedenen Werte auf, getrennt durch einen senkrechten Strich (|). Nach den Angaben zum Typ, zeigt jede Attributdefinition innerhalb von eckigen Klammern („[ ]“) an, ob der Wert zwischen Groß- und Kleinschreibung unterscheidet oder nicht (casesensitivity). Details finden Sie in Abschnitt 6.1, „Information zu Groß- bzw. Kleinschreibung“.

1.2.2 Bemerkungen und Beispiele Um sich vom umgebenden Text abzuheben, sind informelle Bemerkungen hervorgehoben, und werden von einigen Benutzerprogrammen eventuell besonders dargestellt. Alle Beispiele, die missbilligten Sprachgebrauch verdeutlichen sollen, sind als „MISSBILLIGTES BEISPIEL“ gekennzeichnet. Missbilligte Beispiele beinhalten auch empfohlene alternative L=sungen. Alle Beispiele, die nicht erlaubten Sprachgebrauch verdeutlichen, sind klar als „UNERLAUBTES BEISPIEL“ gekennzeichnet. Beispiele und Bemerkungen wurden ausgezeichnet und werden eventuell von einigen Benutzerprogrammen besonders dargestellt.

1.3 Danksagungen Dank an alle, die mitgeholfen haben, den Working Draft zu erstellen, der zur HTML 4-Spezifikation fhrte, und an all diejenigen, die Vorschl@ge und Korrekturen eingebracht haben. Vielen Dank an die Web Accessibility Initiative Task Force (WAI HC Group) fr ihre Arbeit zur Verbesserung der Zug@nglichkeit in HTML und an T.V. Raman (Adobe) fr seine frhe Arbeit bei der Entwicklung von zug@nglichen Formularen.

< 40 >

ber die HTML 4-Spezifikation

Page size: 168,00 x 240,00 mm

Die Autoren dieser Spezifikation, die Mitglieder der W3C HTML Working Group, verdienen große Anerkennung fr ihre gewissenhafte Bearbeitung dieses Dokuments, ihre konstruktiven Kommentare und ihre harte Arbeit: John D. Burger (MITRE), Steve Byrne (JavaSoft), Martin J. Drst (University of Zurich), Daniel Glazman (ElectricitW de France), Scott Isaacs (Microsoft), Murray Maloney (GRIF), Steven Pemberton (CWI), Robert Pernett (Lotus), Jared Sorensen (Novell), Powell Smith (IBM), Robert Stevahn (HP), Ed Tecot (Microsoft), Jeffrey Veen (HotWired), Mike Wexler (Adobe), Misha Wolf (Reuters) und Lauren Wood (SoftQuad). Danke Dir, Dan Connolly (W3C) fr die genaue und zeitintensive Arbeit als Teilzeit-Editor und fr die aufmerksame Leitung als Vorsitzender der HTML Working Group. Danke Dir, Sally Khudairi (W3C) fr Deine unentbehrliche Arbeit bei der Erstellung der Presseinformationen. Dank an David M. Abrahamson und Roger Price fr das sorgf@ltige Lesen der Spezifikation und konstruktive Kommentare. Dank an Jan K@rrman, dem Autor von html2ps (http://www.tdb.uu.se/~jan/html2ps.html), fr die große Hilfe bei der Erstellung der Postscript-Version der Spezifikation. Von besonderer Hilfe vom W3C in Sophia-Antipolis waren Janet Bertot, Bert Bos, Stephane Boyera, Daniel Dardailler, Yves Lafon, HZkon Lie, Chris Lilley und Colas Nahaboo (Bull). Schließlich gebrt Dank Tim Berners-Lee, ohne den nichts von alledem m=glich gewesen w@re.

1.3.1 Danksagungen f-r die aktuelle berarbeitung Vielen Dank an Shane McCarron fr die Fehlerverfolgung zu dieser Version der Spezifikation.

1.4 Bemerkung zum Urheberrecht Informationen zum Urheberrecht finden Sie in der W3C Intellectual Property Notice (http://www.w3.org/Consortium/Legal/ipr-notice#Copyright), der W3C Document Notice (http://www.w3.org/Consortium/Legal/copyright-documents-19990405.html) und der W3C IPR Software Notice (http://www.w3.org/Consortium/Legal/copyright-software-19980720.html).

2 Einf-hrung in HTML 4 2.1 Was ist das World Wide Web? Das World Wide Web (Web) ist ein Netzwerk von Informationsquellen. Um diese Ressourcen dem gr=ßtm=glichen Publikum problemlos verfgbar zu machen, sttzt sich das Web auf drei Mechanismen: 1. Ein einheitliches Namensschema zum Lokalisieren von Ressourcen im Web (z. B. URIs) 2. Protokolle fr den Zugriff auf benannte Ressourcen ber das Web (z. B. HTTP) 3. Hypertext zur einfachen Navigation zwischen den Ressourcen (z. B. HTML) Die Zusammenh@nge zwischen den drei Mechanismen sind in der gesamten Spezifikation erkennbar.

Bemerkung zum Urheberrecht

< 41 >

Die HTML 4.01- Spezifikation

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

Die HTML 4.01- Spezifikation

2.1.1 Einf-hrung in URIs Jede im Netz verfgbare Ressource – HTML-Dokument, Grafik, Videoclip, Programm und so weiter – hat eine Adresse, die in Form eines Universal Resource Identifier oder „URI“ kodiert werden kann. URIs bestehen blicherweise aus drei Teilen: 1. Dem Namensschema des fr den Zugriff auf die Ressource verwendeten Mechanismus 2. Dem Namen des Rechners, auf dem sich die Ressource befindet 3. Dem Namen der Ressource selbst, angegeben als Pfad Nehmen wir den URI, der die „Technical Reports“ des W3C kennzeichnet: http://www.w3.org/TR

Dieser URI kann folgendermaßen gelesen werden: Es gibt ein via HTTP-Protokoll verfgbares Dokument (s. [RFC2616]), das sich auf dem Rechner www.w3.org befindet und ber den Pfad „/TR“ erreichbar ist. Andere Schemata, die Ihnen in HTML-Dokumenten begegnen k=nnen, enthalten „mailto“ fr Email und „ftp“ fr FTP.

Anmerkung der bersetzer: In gewissem Sinne ist dies kein so gutes Beispiel. Zwar liefert der Web-Browser bei Eingabe von http://www.w3.org/TR die gewnschte Seite; wer aber genau hinsieht, stellt fest, dass die Adresse nach dem Laden anders lautet: http://www.w3.org/TR/. Der Schr@gstrich am Ende rhrt daher, dass der Server bei Zugriff auf /TR eine Umlenkung ausl=st. Das heißt, der Browser wird angwiesen, es doch noch einmal an anderer Stelle zu probieren, in diesem Fall /TR/. Auf Protokollebene sieht das so aus: Zuerst der Zugriff auf /TR: HEAD /TR HTTP/1.0 HTTP/1.1 301 Moved Permanently Date: Fri, 29 Nov 2002 18:11:17 GMT Server: Apache/1.3.26 (Unix) PHP/3.0.18 Location: http://www.w3.org/TR/ Connection: close Content-Type: text/html; charset=iso-8859-1

Zu erkennen ist die Antwort „301 Moved Permanently“ und die neue Adresse „Location: http://www.w3.org/TR/“. Nun zum Vergleich der Zugriff auf /TR/: HEAD /TR/ HTTP/1.0 HTTP/1.1 200 OK Date: Fri, 29 Nov 2002 18:11:37 GMT Server: Apache/1.3.26 (Unix) PHP/3.0.18 P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml" Cache-Control: max-age=600 Expires: Fri, 29 Nov 2002 18:21:37 GMT Last-Modified: Sat, 16 Nov 2002 15:56:59 GMT ETag: "3dd66acb" Accept-Ranges: bytes Content-Length: 102136

< 42 >

Einf#hrung in HTML 4

Page size: 168,00 x 240,00 mm

Sandini Bib

Hier die Antwort „200 OK“. Im ersten Fall werden also zwei HTTP-Anfragen ben=tigt. In einer Situation wie dieser sollte der Schr@gstrich nicht leichtfertig weggelassen werden. Andernfalls entsteht unn=tiger Netzverkehr.

Hier ist ein weiteres Beispiel fr einen URI. Dieser weist auf die Mailbox eines Benutzers: ...dies ist Text... Anregungen und Meinungen senden Sie bitte an Joe Cool.

Anmerkung der bersetzer: An dieser Stelle sei darauf aufmerksam gemacht, dass ein Link, der auf ein anderes Protokoll als „http“ verweist, bei seiner Aktivierung in aller Regel auch ein anderes Benutzerprogramm als den Web-Browser erfordert; in diesem Fall w@re das ein Mail-Client. Man sollte also nicht davon ausgehen, dass die Aktivierung des Links bei jedem Benutzer zum gewnschten Ergebnis fhren muss.

Anmerkung: Den meisten Lesern wird der Begriff „URL“ gel,ufig sein, nicht aber der Begriff „URI“. URLs bilden eine Teilmenge des umfassenderen URI-Namensschemas. n

2.1.2 Fragmentbezeichner (fragment identifiers) Einige URIs weisen auf eine Stelle innerhalb einer Ressource. Diese Art von URIs endet mit „#“, gefolgt von Bezeichnern fr einen Anker (genannt Fragmentbezeichner). Zum Beispiel zeigt dieser URI auf einen Anker namens section_2: http://somesite.com/html/top.html#section_2

2.1.3 Relative URIs Ein relativer URI enth@lt keinerlei Namensschemainformationen. Sein Pfad weist im Allgemeinen auf eine Ressource auf demselben Rechner wie das aktuelle Dokument. Relative URIs k=nnen relative Pfadkomponenten (z. B. meint „..“ die n@chsth=here Ebene in der durch den Pfad festgelegten Hierarchie) und auch Fragmentbezeichner enthalten. Relative URIs werden unter Verwendung eines Basis-URIs zu vollst@ndigen URIs aufgel=st. Als Beispiel fr die Aufl=sung relativer URIs nehmen wir an, wir h@tten den Basis-URI „http://www.acme.com/support/intro.html“. Der relative URI in folgender Auszeichnung eines Hypertext-Links Suppliers

Was ist das World Wide Web?

< 43 >

Die HTML 4.01- Spezifikation

Connection: close Content-Type: text/html; charset=iso-8859-1

Page size: 168,00 x 240,00 mm

Sandini Bib

wrde erweitert zum vollst@ndigen URI „http://www.acme.com/support/suppliers.html“, w@hrend der relative URI in der folgenden Auszeichnung fr ein Bild

Die HTML 4.01- Spezifikation

aufgel=st wrde zum vollst@ndigen URI „http://www.acme.com/icons/logo.gif“. In HTML werden URIs verwendet, um auf ein anderes Dokument oder eine andere Ressource zu verweisen, (s. A- und LINKElement). auf ein externes Stylesheet oder Skript zu verweisen (s. LINK- und SCRIPT-Element). ein Bild, Objekt oder Applet in eine Seite einzufgen, (s. IMG-, OBJECT-, APPLET- und INPUTElement). eine Imagemap zu kreieren (s. the MAP- und AREA-Element). ein Formular abzuschicken (s. FORM-Element). ein Frame-Dokument zu erzeugen (s. FRAME- und IFRAME-Element). eine externe Quelle zu zitieren (s. Q-, BLOCKQUOTE-, INS- und DEL-Element). auf Meta-Daten zu verweisen, die das Dokument beschreiben (s. HEAD-Element).

· ·· ·· ·· ·

Mehr zu URIs lesen Sie bitte im Abschnitt 6.4, „URIs“.

2.2 Was ist HTML? Um Informationen zur globalen Verbreitung zu publizieren, braucht man eine universell verst@ndliche Sprache, eine Art Muttersprache der Publikation, die m=glichst alle Computer verstehen k=nnen. Die vom World Wide Web benutze Publikationssprache ist HTML (HyperText Markup Language). HTML gibt Autoren die Mittel an die Hand, um Dokumente mit berschriften, Text, Tabellen, Listen, Fotos usw. online zu ver=ffentlichen. Online-Informationen via Hypertext-Links auf Knopfdruck abzurufen. Formulare fr Transaktionen mit entfernten Diensten fr den Einsatz bei der Informationssuche, bei Reservierungen, bei Warenbestellungen usw. zu gestalten. Spreadsheets, Videoclips, Soundclips und andere Applikationen direkt in ihre Dokumente einzufgen.

·· · ·

2.2.1 Ein kurzer Abriss der Geschichte von HTML HTML wurde ursprnglich von Tim Berners-Lee w@hrend seiner CERN-Zeit entwickelt und durch den von NCSA geschaffenen Mosaic-Browser popul@r gemacht. Mit dem explosiven Wachstum des Web erblhte es w@hrend der Neunzigerjahre. In dieser Zeit wurde HTML auf mehrere Arten erweitert. Das Web ist darauf angewiesen, dass Autoren von Webseiten und Produkthersteller dieselben Konventionen fr HTML einhalten. Das hat zur gemeinsamen Arbeit an Spezifikationen fr HTML angeregt. HTML 2.0 (November 1995, s. [RFC1866]) wurde unter der Leitung der Internet Engineering Task Force (IETF) entwickelt, um die Ende 1994 g@ngige Praxis zu formalisieren. HTML+ (1993) und HTML 3.0 (1995, s. [HTML30]) schlugen reichhaltigere Versionen von HTML vor. Obwohl in den Diskussionen der Standards nie ein Konsens erreicht wurde, fhrten diese Entwrfe zur bernahme einer Auswahl von neuen Features. Die Bemhungen der HTML Working Group

< 44 >

Einf#hrung in HTML 4

Page size: 168,00 x 240,00 mm

des World Wide Web Consortiums to codify common practice in 1996 endeten mit HTML 3.2 (January 1997, s. [HTML32]). Onderungen gegenber HTML 3.2 sind in Anhang A zusammengestellt. Die Mehrheit ist sich darin einig, dass HTML-Dokumente ber verschiedene Browser und Plattformen hinweg funktionieren sollten. Wird diese Interoperabilit@t erreicht, reduzieren sich die Kosten der Content-Provider, denn sie mssen nur eine Version eines Dokuments erarbeiten. Wird diese Anstrengung nicht unternommen, besteht eine wesentlich gr=ßere Gefahr, dass das Web auf eine propriet@re Welt inkompatibler Formate zugeht und sich letzten Endes das kommerzielle Potenzial des Web fr alle Beteiligten verringert. Jede Version von HTML hat versucht, den wachsenden Konsens unter den Industrievertretern widerzuspiegeln, so dass die Investitionen der Inhaltsanbieter nicht verschwendet und ihre Dokumente nicht in kurzer Zeit unlesbar werden. HTML wurde mit der Vision entwickelt, dass alle Arten von Ger@ten in der Lage sein sollten, Informationen aus dem Web zu nutzen: PCs mit grafischen Displays unterschiedlichster Aufl=sung und Farbtiefe, Funktelefone, Handhelds, Ger@te mit Sprachein- und -ausgabe, Ger@te mit großer und kleiner Bandbreite usw.

2.3 HTML 4 HTML 4 erweitert HTML um Mechanismen fr Stylesheets, Scripting, Frames, eingebundene Objekte, verbesserte Untersttzung fr von rechts nach links zu lesende Texte sowie Texte mit unterschiedlichen Leserichtungen, reichhaltigere Tabellen und fr Menschen mit Behinderungen bessere Zug@nglichkeit bietende Erweiterungen bei Formularen. HTML 4.01 ist eine berarbeitung von HTML 4.0, in der Fehler korrigiert und einige Onderungen seit der vorhergehenden berarbeitung vorgenommen wurden.

2.3.1 Internationalisierung Diese HTML-Version wurde mit Hilfe von Experten auf dem Gebiet der Internationalisierung gestaltet, so dass Dokumente in jeder Sprache geschrieben und problemlos um die Welt transportiert werden k=nnen. Erreicht wurde das durch die Einbeziehung von [RFC2070], der sich mit der Internationalisierung von HTML befasst. Ein bedeutender Schritt war die Aufnahme des Standards ISO/IEC:10646 (siehe [ISO10646]) als Dokument-Zeichensatz fr HTML. Dies ist der weltweit umfassendste Standard zu Fragen der Darstellung internationaler Zeichen, Leserichtung, Zeichensetzung und anderer Themen bezglich der Sprachen der Welt. HTML bietet jetzt weitreichendere Untersttzung fr verschiedene menschliche Sprachen innerhalb eines Dokuments. Dies erm=glicht die effektivere Indizierung von Dokumenten durch Suchmaschinen, qualitativ bessere Typographie, eine bessere Text-nach-Sprache-Konvertierung, bessere Silbentrennung usw.

Anmerkung der bersetzer: Mit Fragen der Internationalisierung besch@ftigt sich eine eigene Activity, die „W3C Internationalization Activity“, die es sich zur Aufgabe gemacht hat, die Nutzbarkeit von Formaten und Protokollen des W3C weltweit in allen Sprachen sicherzustellen.

HTML 4

< 45 >

Die HTML 4.01- Spezifikation

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

Die HTML 4.01- Spezifikation

N@heres dazu finden Sie auf der zugeh=rigen Web-Site unter http://www.w3.org/International/.

2.3.2 Zug.nglichkeit Da die Web-Community w@chst und ihre Mitglieder sich in ihren F@higkeiten und ihrem K=nnen voneinander unterscheiden, ist es entscheidend, dass die zugrunde liegenden Technologien an deren spezifische Bedrfnisse angepasst sind. HTML wurde darauf ausgelegt, Webseiten fr Menschen mit physischen Einschr@nkungen besser zug@nglich zu machen. Folgende HTML 4-Entwicklungen sind durch die wachsende Bedeutung der Zug@nglichkeit angeregt worden: Bessere Trennung zwischen Dokumentstruktur und Pr@sentation, demzufolge F=rderung der Nutzung von Stylesheets anstelle von HTML-Pr@sentationselementen und -Attributen. Bessere Formulare, darin enthalten die Erg@nzung um Zugriffstasten, die F@higkeit, Formular-Kontrollelemente semantisch zu gruppieren, die F@higkeit, SELECT-Optionen semantisch zu gruppieren, und wirkliche Labels. Die F@higkeit, im Markup eingebundener Objekte (mit dem OBJECT-Element) eine Text-Beschreibung anzugeben. Ein neuer Mechanismus fr clientseitige Imagemaps (MAP-Element), der Autoren gestattet, Bild- und Textlinks zu integrieren. Die Forderung, dass mit dem IMG-Element eingebundene Bilder und durch das AREA-Element eingebundene Imagemaps von alternativem Text begleitet werden. Untersttzung fr title- und das lang-Attribut bei allen Elementen. Untersttzung fr das ABBR- und das ACRONYM-Element. Ein breiteres Spektrum von Zielmedien (TTY, Braille usw.) zur Nutzung mit Stylesheets. Bessere Tabellen, die berschriften, Spaltengruppen und Mechanismen zur F=rderung nichtvisueller Darstellung beinhalten. Langbeschreibungen (long descriptions) von Tabellen, Bildern, Frames usw.

· · · · · ·· ·· ·

Autoren, die die Aspekte der Zug@nglichkeit nicht aus den Augen verlieren w@hrend sie Seiten gestalten, werden nicht nur den Segen der Accessibility-Gemeinschaft empfangen, sie werden auch in anderer Form Nutzen daraus ziehen: wohlgestaltete HTML-Dokumente, die Struktur und Pr@sentation trennen, werden sich leichter an neue Technologien anpassen. Anmerkung: Fr mehr Informationen ber die Gestaltung zug,nglicher HTML-Dokumente lesen Sie bitte [WAI]. n

2.3.3 Tabellen Das neue Tabellen-Modell in HTML basiert auf [RFC1942]. Autoren haben jetzt gr=ßere Kontrolle ber Struktur und Layout (z. B. Spaltengruppen). Dass Designer in der Lage sind, Spaltenbreiten zu empfehlen, erlaubt es Benutzerprogrammen, Tabellendaten inkrementell (so, wie sie eintreffen) anzuzeigen, ohne auf die vollst@ndige Tabelle warten zu mssen bevor sie sie darstellen.

< 46 >

Einf#hrung in HTML 4

Page size: 168,00 x 240,00 mm

Sandini Bib

2.3.4 Zusammengesetzte Dokumente (compound documents) HTML bietet jetzt einen Standard-Mechanismus zum Einbinden beliebiger Medienobjekte und Anwendungen in HTML-Dokumente. Das OBJECT-Element untersttzt (zusammen mit seinen spezifischeren Vorfahren IMG und APPLET) einen Mechanismus zum Einbinden von Bild-, Video-, Sound-, mathematischen, besonders spezialisierten Anwendungen und anderen Objekten in ein Dokument. Es gestattet Autoren auch, fr Benutzerprogramme, die eine bestimmte Darstellung nicht untersttzen, eine Hierarchie alternativer Darstellungen vorzugeben.

2.3.5 Stylesheets Stylesheets vereinfachen das HTML-Markup und entlasten HTML erheblich von der Verantwortung fr die Pr@sentation. Sie geben sowohl Autoren als auch Nutzern Kontrolle ber die Pr@sentation von Dokumenten – ber Schriftarten, Ausrichtungen, Farben usw. Style-Informationen k=nnen fr einzelne Elemente oder Gruppen von Elementen angegeben werden. Style-Informationen k=nnen innerhalb eines HTML-Dokuments oder in externen Stylesheets angegeben werden. Der Mechanismus der Zuordnung eines Stylesheets zu einem Dokument ist unabh@ngig von der Stylesheet-Sprache. Vor dem Erscheinen der Stylesheets hatten Autoren eingeschr@nkte Kontrolle ber die Darstellung. HTML 3.2 beinhaltete eine Anzahl von Attributen und Elementen, die Kontrolle ber Ausrichtung, Schriftgr=ße und Textfarbe anboten. Die Autoren nutzten darber hinaus Tabellen und Graphiken als Layout-Hilfsmittel. Es wird eine verh@ltnism@ßig lange Zeit dauern, bis die Benutzer ihre Browser ersetzt haben, d. h., diese Features werden noch fr einge Zeit Verwendung finden. Wie dem auch sei, da Stylesheets m@chtigere Pr@sentations-Mechanismen bieten, wird das World Wide Web Consortium letzten Endes viele der HTML-Pr@sentationselemente und -attribute nach und nach zurckziehen. In der gesamten Spezifikation sind die gef@hrdeten Elemente und Attribute als „missbilligt“ (siehe Abschnitt 4) gekennzeichnet. Sie werden begleitet von Beispielen, die zeigen, wie derselbe Effekt mit anderen Elementen oder Stylesheets zu erreichen ist.

2.3.6 Scripting Mit Hilfe von Skripten k=nnen Autoren dynamische Webseiten gestalten (z. B. „Intelligente Formulare“ („Smart Forms“), die reagieren, wenn Benutzer sie ausfllen) und HTML als Werkzeug verwenden, um Netz-Applikationen zu bauen.

Anmerkung der bersetzer: „Intelligent“ sind Formulare dann, wenn sie bereits beim Ausfllen auf Eingaben des Benutzers reagieren, z. B. Werte auf Zul@ssigkeit hin prfen, Formularfelder in Abh@ngikeit von in anderen Feldern eingetragenen Werten vorbelegen usw. Da das bereits auf dem Client passiert, werden Formulare deutlich benutzerfreundlicher. Als Autor sollte man aber stets daran denken, dass zwingend notwendige Prfungen eingegebener Werte nicht ausschließlich durch clientseitige Skripte

HTML 4

< 47 >

Die HTML 4.01- Spezifikation

Anmerkung: Einige Autorenwerkzeuge sttzen sich fr Formatierungen beim Schreiben sehr stark auf Tabellen; das kann leicht zu Problemen bzgl. der Zug,nglichkeit fhren. n

Page size: 168,00 x 240,00 mm

Sandini Bib

Die HTML 4.01- Spezifikation

erfolgen sollten. Ein Formular soll auch dann benutzbar sein, wenn Scripting nicht zur Verfgung steht, sei es, weil der Browser Scripting generell oder fr die gew@hlte Skriptsprache nicht untersttzt, sei es, weil der Benutzer Scripting deaktiviert hat.

Die zum Einbinden von Skripten angebotenen Mechanismen sind unabh@ngig von der Skriptsprache.

2.3.7 Drucken Manchmal werden Autoren wnschen, es Benutzern leicht zu machen, mehr als nur das aktuelle Dokument zu drucken. Wenn Dokumente Teil einer gr=ßeren Arbeit sind, kann der Zusammenhang zwischen ihnen durch das HTML-LINK-Element oder mit Hilfe des „Resource Description Framework (RDF)“ (s. [RDF10]) vom W3C beschrieben werden.

2.4 Dokumente erstellen mit HTML 4 Wir empfehlen, dass Autoren und Entwickler die folgenden allgemeinen Regeln beachten, wenn sie mit HTML 4 arbeiten.

2.4.1 Trennen von Struktur und Pr.sentation HTML hat seine Wurzeln in SGML, das stets eine Sprache zur Spezifikation strukturierter Auszeichnungen war. So wie sich HTML entwickelt, werden mehr und mehr seiner Pr@sentationselemente und -attribute durch andere Mechanismen ersetzt werden, insbesondere durch Stylesheets. Die Entwicklung hat gezeigt, dass die Trennung der Struktur eines Dokuments von seinen Pr@sentationsaspekten die Kosten fr die Bedienung eines breiten Spektrums von Plattformen, Medien usw. reduziert und die berarbeitung von Dokumenten erleichtert.

2.4.2 Allgemeine Zug.nglichkeit zum Web beachten Um das Web zug@nglicher fr jedermann zu machen, insbesondere fr jene Personen mit Behinderungen, sollten Autoren darber nachdenken, wie ihre Dokumente auf verschiedenen Plattformen dargestellt werden k=nnten wie z. B. durch sprachbasierte Browser, Braille-Leser usw. Wir fordern nicht etwa dazu auf, dass Autoren ihre Kreativit@t einschr@nken, sondern lediglich, dass sie alternative Darstellungen in ihrem Design bedenken. HTML bietet eine Anzahl von Mechanismen dafr (z. B. das alt-Attribut, das accesskey-Attribut usw.) Darber hinaus sollten Autoren bedenken, dass ihre Dokumente ein weit entferntes Publikum mit anderen Computer-Konfigurationen erreichen k=nnten. Damit Dokumente korrekt interpretiert werden, sollten Autoren in ihre Dokumente Informationen ber die natrliche Sprache und die Leserichtung des Textes aufnehmen, darber, wie das Dokument kodiert ist, und ber andere Aspekte, die im Zusammenhang mit der Internationalisierung stehen.

< 48 >

Einf#hrung in HTML 4

Page size: 168,00 x 240,00 mm

Sandini Bib

Durch sorgf@ltige Gestaltung ihrer Tabellen und Einsatz der neuen Tabellen-Features von HTML 4 k=nnen Autoren Benutzerprogrammen helfen, Dokumente schneller darzustellen. Autoren k=nnen lernen, wie man Tabellen fr inkrementelle Darstellung gestaltet (siehe TABLEElement). Entwickler sollten die „Anmerkungen zu Tabellen“ im Anhang B konsultieren, um an Informationen zum inkrementellen Algorithmus zu kommen.

3 ber SGML und HTML Dieser Abschnitt des Dokuments fhrt in SGML ein und er=rtert dessen Verh@ltnis zu HTML. Eine vollst@ndige Diskussion von SGML sei dem Standard (siehe [ISO8879]) berlassen.

Anmerkung der bersetzer: HTML basiert auf SGML. Aus diesem Grund ist die Diskussion des Verh@ltnisses in diesem Kapitel wichtig. Mittlerweile ist HTML aber von XHTML abgel=st worden. XHTML basiert auf XML, nicht mehr auf SGML. Und obwohl HTML inhaltlich auch heute noch ein sehr wichtiger Standard ist, sind die nachfolgenden Ausfhrungen ber SGML fr XHTML nicht mehr uneingeschr@nkt zutreffend. Aus diesem Grund finden Sie im Folgenden eine Reihe von Kommentaren, die die Gltigkeit der Aussagen aus Sicht von XHTML korrigieren. Ein einfhrender Artikel zum Thema SGML ist im Web unter http://www.mintert.com/ xml/ zu finden. An gleicher Stelle gibt es auch Einfhrungen in XML. Eine deutsche bersetzung des XML-Standards (http://www.edition-w3c.de/TR/REC-xml) ist ebenso wie eine deutsche bersetzung von XHTML (http://www.edition-w3c.de/TR/xhtml1) als Teil des deutschen W3C- bersetzungsprojekts entstanden.

3.1 Einf-hrung in SGML SGML ist ein System zur Definition von Auszeichnungssprachen. Autoren zeichnen ihre Dokumente durch entsprechende den Inhalt begleitende Informationen bzgl. Struktur, Pr@sentation und Semantik aus. HTML ist ein Beispiel einer Auszeichnungssprache. Hier folgt ein Beispiel eines HTML-Dokuments:

Mein erstes HTML-Dokument

Hallo Welt!

ber SGML und HTML

< 49 >

Die HTML 4.01- Spezifikation

2.4.3 Benutzerprogrammen bei inkrementeller Darstellung helfen

Page size: 168,00 x 240,00 mm

Sandini Bib

Die HTML 4.01- Spezifikation

Ein HTML-Dokument unterteilt sich in einen Kopf (Head) (hier zwischen und ) und einen Rumpf (Body) (hier zwischen und ). Der Titel eines Dokuments erscheint (zusammen mit anderen Informationen ber das Dokument) im Kopf; der Inhalt des Dokuments steht im Rumpf. Der Rumpf in diesem Beispiel enth@lt lediglich einen Absatz, ausgezeichnet mit

.

Anmerkung der bersetzer: In den Beispielen in dieser Spezifikation werden die Elementnamen von HTML-Elementen groß geschrieben. In HTML spielt die Klein/Großschreibung keine Rolle. In XHTML sind jedoch nur noch kleine Elementnamen zul@ssig. Aus diesem Grund sollten Sie beim Schreiben von HTML-Dokumenten immer nur die Kleinschreibung fr Element- und Attributnamen verwenden; also statt usw. Eine weitere Onderung besteht darin, dass in XHTML keine Tags weggelassen werden drfen. Die obige Zeile

Hallo Welt! muss in XHTML

Hallo Welt!

lauten.

Jede in SGML definierte Auszeichnugssprache wird SGML-Anwendung genannt. Eine SGML-Anwendung ist ganz allgemein gekennzeichnet durch: 1. Eine SGML-Deklaration. Die SGML-Deklaration spezifiziert, welche Zeichen und Begrenzer in der Anwendung auftreten k=nnen. 2. Eine Dokumenttyp-Definition (DTD). Die DTD definiert die Syntax von Auszeichnungskonstrukten. Die DTD kann zus@tzliche Definitionen wie z. B. Zeichen-Entity-Referenzen enthalten. 3. Eine Spezifikation, die die zur Auszeichnung geh=rende Semantik beschreibt. Diese Spezifikation erlegt zudem Syntaxrestriktionen auf, die innerhalb der DTD nicht ausgedrckt werden k=nnen. 4. Dokument-Instanzen, die Daten (Inhalt) und Auszeichnung beinhalten. Jede Instanz enth@lt eine Referenz auf die zu ihrer Interpretation zu verwendende DTD. Diese Spezifikation beinhaltet eine SGML-Deklaration (Abschnitt 20), drei Dokument-Typ-Definitionen (fr die Beschreibung dieser drei Definitionen siehe Abschnitt 7.2, „HTML-VersionsInformation“) und eine Liste von Zeichenreferenzen.

Anmerkung der bersetzer: Fr XHTML spielt das Konzept der SGML-Deklaration keine Rolle mehr. Das liegt darin begrndet, dass fr alle XML-Anwendungen eine einzige, feste SGML-Deklaration vereinbart wurde. In der Praxis kann man also einfach davon ausgehen, dass Tags durch spitze Klammern begrenzt werden und dass es eine Reihe von Sonderzeichen (wie &) gibt, die sp@ter erkl@rt werden. Der Begriff der Dokumentinstanz rhrt daher, dass jedes Dokument ein Beispiel oder ein Vertreter des Dokumenttyps ist, der durch die DTD definiert wird. Wer sich mit objektorientierter Programmierung auskennt, wird den Begriff der Instanz kennen; der Dokumenttyp entspricht dann der Klasse.

< 50 >

ber SGML und HTML

Page size: 168,00 x 240,00 mm

Sandini Bib

Die folgenden Abschnitte stellen die in HTML verwendeteten SGML-Konstrukte vor. Im Anhang sind einige SGML-Features aufgelistet, die sich keiner breiten Untersttzung durch HTML-Programme erfreuen und deshalb vermieden werden sollten.

3.2.1 Elemente Eine SGML-Dokumenttyp-Definition deklariert Elementtypen, die Strukturen oder gewnschtes Verhalten repr@sentieren. HTML beinhaltet Elementtypen, die Abs@tze, Hypertext-Links, Listen, Tabellen, Bilder usw. repr@sentieren. Jede Elementtyp-Deklaration beschreibt im Allgemeinen drei Teile: einen Start-Tag, den Inhalt und einen End-Tag.

Anmerkung der bersetzer: Pr@zise: Die Elementtyp-Deklaration beschreibt den Namen des Elementtyps sowie sein Inhaltsmodell. Der Name bestimmt wie Startund End-Tag aussehen.

Der Name des Elements erscheint im Start-Tag (geschrieben ) und im End-Tag (geschrieben ); beachten Sie den Schr@gstrich vor dem Elementnamen im EndTag. Zum Beispiel begrenzen Start- und End-Tag des Elementtyps UL die Aufz@hlungspunkte in einer Liste:

• ...Punkt.1...

• ...Punkt.2...

Einige HTML-Elementtypen erlauben Autoren, die End-Tags wegzulassen (z. B. die Elementtypen P und LI). Einige wenige Elemementtypen gestatten auch das Weglassen der Start-Tags, z. B. HEAD und BODY. Die HTML-DTD gibt fr jeden Elementtyp vor, ob Start- und End-Tag erforderlich sind oder nicht.

Anmerkung der bersetzer: Wie oben schon gesagt, mssen Elemente in XHTML sowohl Start- als auch End-Tag besitzen. Kein Tag darf weggelassen werden.

Einige HTML-Elementtypen haben keinen Inhalt. Zum Beispiel hat das Zeilenwechsel-Element BR keinen Inhalt; seine einzige Funktion besteht darin, eine Textzeile zu begrenzen. Solche leeren Elemente haben nie End-Tags. Die Dokumenttyp-Definition und der Text der Spezifikation geben vor, ob ein Elementtyp leer ist (keinen Inhalt hat) oder, wenn er Inhalt haben kann, was als zul@ssiger Inhalt betrachtet wird.

In HTML verwendete SGML-Konstrukte

< 51 >

Die HTML 4.01- Spezifikation

3.2 In HTML verwendete SGML-Konstrukte

Page size: 168,00 x 240,00 mm

Sandini Bib

Die HTML 4.01- Spezifikation

Anmerkung der bersetzer: Die Forderung, dass leere Elemente niemals einen End-Tag besitzen drfen, ist weder durch SGML noch (fr XHTML) durch XML begrndet. Es ist eine Festlegung dieser Spezifikation. Die nachfolgende Aussage bzgl. der Klein/Großschreibung gilt nicht mehr fr XHTML. Auch die anschließenden Beispiele sind nur fr HTML, nicht jedoch fr XHTML richtig und sollten unter diesem Blickwinkel ignoriert werden.

Bei Elementnamen wird nie zwischen Groß- und Kleinschreibung unterschieden. Bitte konsultieren Sie den SGML-Standard zu Informationen ber die fr Elemente geltenden Regeln (z. B. mssen sie korrekt verschachtelt sein, ein End-Tag schließt zurck bis zum korrespondierenden Start-Tag alle dazwischenliegenden ungeschlossenen Start-Tags mit weggelassenen End-Tags (siehe Abschnitt 7.5.1) usw.). Zum Beispiel kann der folgende Absatz:

Dies ist der erste Absatz.

...ein Block-Element...

auch ohne seinen End-Tag:

Dies ist der erste Absatz. ...ein Block-Element...

geschrieben werden, da der

-Start-Tag vom folgenen Block-Element geschlossen wird. Gleiches gilt, wenn ein Absatz in einem Block-Element eingeschlossen ist wie in:

Dies ist der Absatz.

Der End-Tag des umschließenden Block-Elements (hier ) impliziert den End-Tag des offenen

-Start-Tags. Elemente sind keine Tags. Manche Leute sprechen von Elementen als Tags (z. B. „der P-Tag“). Denken Sie daran, dass ein Element eine Sache ist und der Tag (sei es Start- oder End-Tag) eine andere. Zum Beispiel ist das HEAD-Element immer vorhanden, sogar, wenn sowohl Start- als auch End-Tag in der Auszeichnung fehlen. n

Anmerkung der bersetzer: Die obige Bemerkung ist sehr wichtig. Tats@chlich werden die Begriffe Tag, Element, Elementtyp immer wieder durcheinander gebracht. HTML-Dokumente bestehen aus ineinander verschachtelten Elementen (

Hallo Welt!

), die wiederum aus Start-Tags (

), End-Tags (

) und Inhalt (Hallo Welt!) bestehen. Der HTML-Dokumenttyp (festgelegt durch die DTD) deklariert die Elementtypen (hier: p).

Alle in dieser Spezifikation deklarierten Elementtypen sind im Index der Elemente aufgelistet.

< 52 >

ber SGML und HTML

Page size: 168,00 x 240,00 mm

Anmerkung der bersetzer: Dieser Verweis auf den Index ist ein klassisches Beispiel fr die falsch benutzte Terminologie: Natrlich ist es kein Index der Elemente. Wie sollte das auch m=glich sein? Die Anzahl der Elemente ist potenziell unbegrenzt (n@mlich die Summe aller HTML-Elemente, die alle HTML-Dateien berall auf der Welt enthalten). Der Verweis zeigt auf den Index der Elementtypen.

3.2.2 Attribute Elemente k=nnen zugeh=rige Eigenschaften haben, genannt Attribute, diese k=nnen Werte besitzen (standardm@ßig oder von Autoren oder Skripten gesetzt). Attribut-Wert-Paare erscheinen vor „>“ des Start-Tags eines Elements. Im Start-Tag eines Elements kann eine beliebige Anzahl von durch Zwischenraum getrennten (zul@ssigen) Attribut-Wert-Paaren stehen. Sie k=nnen beliebig angeordnet sein. In diesem Beispiel ist das id-Attribut fr ein H1-Element gesetzt:

This is an identified heading thanks to the id attribute

Standardm@ßig verlangt SGML, dass alle Attributwerte entweder von doppelten Anfhrungszeichen (ASCII dezimal 34) oder einfachen Anfhrungszeichen (ASCII dezimal 39) begrenzt werden. Einfache Anfhrungszeichen k=nnen im Attributwert enthalten sein, wenn der Wert durch doppelte Anfhrungszeichen begrenzt ist und umgekehrt. Autoren k=nnen auch Numerische Zeichenreferenzen verwenden, die die doppelten (") und einfachen (') Anfhrungszeichen repr@sentieren. Fr doppelte Anfhrungszeichen drfen Autoren auch die Zeichen-Entity-Referenz „"“ benutzen. In bestimmten F@llen k=nnen Autoren den Wert eines Attributs ohne jegliche Anfhrungszeichen angeben; der Attributwert darf nur Buchstaben (a-z und A-Z), Ziffern (0-9), Bindestriche (ASCII dezimal 45), Punkte (ASCII dezimal 46), Unterstriche (ASCII dezimal 95) und Doppelpunkte (ASCII dezimal 58) enthalten. Wir empfehlen, Anfhrungszeichen auch dann zu verwenden, wenn es m=glich ist, sie wegzulassen.

Anmerkung der bersetzer: Wir empfehlen die Anfhrungszeichen niemals wegzulassen. In XHTML ist das Weglassen nicht mehr zul@ssig. Fr die Groß/Kleinschreibung gilt das Gleiche wie fr Elemente.

Bei Attributnamen wird nie zwischen Groß- und Kleinschreibung unterschieden. Die Definition eines jeden Attributs gibt an, ob bei seinem Wert zwischen Groß- und Kleinschreibung unterschieden wird. Alle durch diese Spezifikation definierten Attribute sind im Index der Attribute aufgelistet.

In HTML verwendete SGML-Konstrukte

< 53 >

Die HTML 4.01- Spezifikation

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

Die HTML 4.01- Spezifikation

Anmerkung der bersetzer: Es handelt sich um den Index der Attributtypen.

3.2.3 Zeichenreferenzen Zeichenreferenzen sind numerische oder symbolische Namen fr Zeichen, die in einem HTMLDokument enthalten sein k=nnen. Sie sind ntzlich fr selten verwendete Zeichen oder solche, die in Authoring Tools nur schwer oder gar nicht eingegeben werden k=nnen. Sie werden Zeichenreferenzen berall in diesem Dokument sehen; sie beginnen mit einem „&“-Zeichen und enden mit einem Semikolon (;). Bekannte Beispiele sind: „

ber SGML und HTML

Page size: 168,00 x 240,00 mm

Sandini Bib

3.3.1 DTD-Kommentare In DTDs k=nnen sich Kommentare ber mehrere Zeilen erstrecken. In der DTD sind Kommentare durch ein Paar von „- -“-Marken begrenzt, z. B.

Hier erkl@rt der Kommentar „named property value“ die Verwendung des PARAM-Elementtyps. Kommentare in der DTD haben lediglich informellen Charakter.

Anmerkung der bersetzer: Diese Art des Kommentierens von DTDs ist mit XML nicht mehr m=glich. Folglich wird man eine Zeile wie die obige in der XHTMLDTD nicht mehr finden. Eine Alternative ist etwa:

3.3.2 Parameter-Entity-Definitionen Die HTML-DTD beginnt mit einer Serie von Parameter-Entity-Definitionen. Eine ParameterEntity-Definition definiert eine Art Makro, das irgendwo in der DTD angesprochen und referenziert werden kann. Diese Makros erscheinen nicht in HTML-Dokumenten, lediglich in der DTD. Andere Makrotypen, genannt Zeichenreferenzen, k=nnen im Text eines HTML-Dokuments oder in Attributwerten erscheinen. Wird das Parameter-Entity in der DTD ber den Namen angesprochen, so wird es in eine Zeichenkette (string) aufgel=st. Eine Parameter-Entity-Definition beginnt mit dem Schlsselwort . Die Benutzung eines Parameter-Entity in einer DTD beginnt mit „%“, gefolgt vom Parameter-Entity-Namen und optional dem abschließenden „;“. Das folgende Beispiel definiert die Zeichenkette, in die das „%fontstyle;“-Entity aufgel=st wird.

Die Zeichenkette, in die das Parameter-Entity aufgel=st wird, kann andere Parameter-EntityNamen enthalten. Diese Namen werden rekursiv aufgel=st. Im folgenden Beispiel ist das „%inline;“-Parameter-Entity so definiert, dass es die „%fontstyle;“-, „%phrase;“-, „%special;“- und „%formctrl;“- Parameter enth@lt.

Wie die HTML-DTD zu lesen ist

< 55 >

Die HTML 4.01- Spezifikation

zise Beschreibung der Eigenschaften eines Elements zu versuchen. Das folgende Tutorial sollte es mit SGML nicht vertrauten Lesern gestatten, die DTD zu lesen und die technischen Details der HTML-Spezifikation zu verstehen.

Page size: 168,00 x 240,00 mm

Sandini Bib

Die HTML 4.01- Spezifikation

Zwei DTD-Entities werden Ihnen h@ufig in der HTML-DTD begegnen: „%block;“ und „%inline;.“ Sie werden verwendet, wenn das Inhaltsmodell Block-Level- bzw. Inline-Elemente umfasst (definiert in Abschnitt 7, „Die globale Struktur eines HTML-Dokuments“).

3.3.3 Elementdeklarationen Der Hauptteil der HTML-DTD besteht aus den Deklarationen von Elementtypen und deren Attribute. Das -Zeichen beschließt sie. Dazwischen sind spezifiziert: 1. Der Name des Elements 2. Ob die Tags des Elements optional sind. Erscheinen zwei Bindestriche hinter dem Elementnamen, so heißt das, Start- und End-Tag sind vorgeschrieben. Ein Bindestrich, gefolgt vom Buchstaben „O“ bedeutet, der End-Tag kann weggelassen werden. Zwei „O“s zeigen an, dass sowohl Start- als auch End-Tag weggelassen werden k=nnen (o = omit). 3. Der Inhalt des Elements, so vorhanden. Der erlaubte Inhalt eines Elements wird dessen Inhaltsmodell genannt. Elementtypen, die dafr angelegt sind, keinen Inhalt zu haben, werden Leere Elemente genannt. Das Inhaltsmodell fr so ein Element ist durch die Verwendung des Schlsselwortes „EMPTY“ deklariert.

Anmerkung der bersetzer: Der zweite Punkt, der sich mit dem Weglassen von Start- und/oder End-Tags besch@ftigt, ist fr XML und damit XHTML nicht mehr relevant.

In diesem Beispiel:

·· ·

Der deklarierte Elementtyp ist UL. Die beiden Bindestriche bedeuten, dass sowohl der Start-Tag

als auch der End-Tag

fr dieses Element erforderlich sind. Das Inhaltsmodell fr diesen Elementtyp ist deklariert, „mindestens ein LI-Element“ zu sein. Weiter unten erkl@ren wir, wie Inhaltsmodelle zu spezifizieren sind.

Dieses Beispiel zeigt die Deklarierung eines leeren Elementtyps:

·· ·

Der Elementtyp, der deklariert wird, ist IMG. Der Bindestrich und das folgende „O“ geben an, dass der End-Tag weggelassen werden kann, aber zusammen mit dem Inhaltsmodell „EMPTY“ ist es verst@rkend fr die Regel, dass der End-Tag weggelassen werden muss. Das „EMPTY“-Schlsselwort besagt, dass die Instanz dieses Typs keinen Inhalt haben darf.

< 56 >

ber SGML und HTML

Page size: 168,00 x 240,00 mm

Sandini Bib

Das Inhaltsmodell beschreibt, was in einer Instanz eines Elementtyps enthalten sein kann. Inhaltsmodell-Definitionen k=nnen beinhalten: Die Namen von erlaubten oder verbotenen Elementtypen (z. B. enth@lt das UL-Element Instanzen des LI-Elementtyps, und der P-Elementtyp darf keine anderen P-Elemente enthalten) DTD-Entities (z. B. enth@lt das LABEL-Element Instanzen des „%inline;“-Parameter-Entities) Dokument-Text (angezeigt durch das SGML-Konstrukt „#PCDATA“). Text kann Zeichenreferenzen enthalten. Rufen Sie sich in Erinnerung, dass diese mit & beginnen und mit Semikolon enden (z. B. enth@lt „Hergé's adventures of Tintin“ die Zeichen-Entity-Referenz fr das „e acute“-Zeichen).

· ··

Das Inhaltsmodell eines Elements ist spezifiziert durch die folgende Syntax. Bitte beachten Sie, dass das Listing unten eine Vereinfachung der vollst@ndigen SGML-Syntax-Regeln ist und z. B. Pr@zedenzen nicht ausdrckt. ( ... ) begrenzt eine Gruppe. A A muss genau einmal vorkommen. A+ A muss einmal oder mehrmals vorkommen. A? A darf nicht oder muss einmal vorkommen. A* A kann nicht oder mehrmals vorkommen. +(A) A kann vorkommen. -(A) A darf nicht vorkommen. A|B Entweder A oder B muss vorkommen, aber nicht beide. A,B A und B mssen in dieser Reihenfolge vorkommen. A&B A und B mssen in beliebiger Reiehenfolge vorkommen.

Anmerkung der bersetzer: Die Exklusionen und Inklusionen (+(A) und -(A)) sowie der Ausdruck A & B sind in XML nicht mehr m=glich und finden sich folglich nicht mehr in den XHTML-DTDs.

Hier einige Beispiel aus der HTML-DTD:

Das UL-Element muss ein oder mehrere LI-Elemente enthalten.

Wie die HTML-DTD zu lesen ist

< 57 >

Die HTML 4.01- Spezifikation

Inhaltsmodell-Definitionen

Page size: 168,00 x 240,00 mm

Sandini Bib



Die HTML 4.01- Spezifikation

Das DL-Element muss ein oder mehrere DT- oder DD-Elemente in beliebiger Reihenfolge enthalten.

Das OPTION-Element kann nur Text und Entities wie & enthalten – dies wird durch den SGML-Daten-Typ #PCDATA angezeigt. Ein paar HTML-Elementtypen verwenden ein weiteres SGML-Feature, um Elemente von ihrem Inhaltsmodell auszuschließen. Ausgeschlossenen Elementen wird ein Bindestrich vorangestellt. Expliziter Ausschluss berschreibt erlaubte Elemente. In diesem Beispiel sagt -(A), dass das Element A nicht in einem anderen A-Element vorkommen kann (d. h., Anker k=nnen nicht verschachtelt werden).

Beachten Sie, dass der A-Elementtyp Teil des DTD-Parameter-Entities „%inline;“ ist, jedoch durch -(A) explizit ausgeschlossen wird.

Anmerkung der bersetzer: Da es diese Ausschlussm=glichkeit (-(A)) in XML und damit in XHTML nicht mehr gibt, msste, um die gleiche Definition des Inhaltsmodells zu erzielen, eine explizite Definition ohne das Element A erfolgen. Hierzu msste also das Parameter-Entity %inline; umdefiniert werden, oder es k=nnte hier nicht zum Einsatz kommen.

Enstprechend verbietet die folgende Elementtyp-Deklaration fr FORM verschachtelte Formulare:

3.3.4 Attributdeklarationen Mit dem . Jede Attributdefinition ist ein Triplet, das Folgendes definiert: Den Namen des Attributs. Den Typ des Attributwertes oder einen expliziten Satz m=glicher Werte. Explizit durch die DTD definierte Werte unterscheiden nicht zwischen Groß- und Kleinschreibung. Bitte konsultieren Sie den Abschnitt 6, „HTML-Grunddatentypen“ fr weitere Informationen zu Typen von Attributwerten. Ob der Standardwert des Attributs implizit ist (Schlsselwert „#IMPLIED“), in welchem Fall das Benutzerprogramm den Standardwert liefern muss (in einigen F@llen durch Ableitung von Eltern-Elementen), stets erforderlich ist (keyword „#REQUIRED“) oder auf den angegebenen Wert fixiert (keyword „#FIXED“) ist. Einige Attributdefinitionen spezifizieren explizit einen Standardwert fr die Attribute.

·· ·

< 58 >

ber SGML und HTML

Page size: 168,00 x 240,00 mm

Sandini Bib

In diesem Beispiel ist das name-Attribute fr das MAP-Element definiert. Das Attribut ist fr dieses Element optional.

#IMPLIED

Der Typ der erlaubten Werte ist als CDATA, einem SGML-Datentyp, angegeben. CDATA ist Text, der Zeichenreferenzen (siehe Abschnitt 5.3) enthalten kann. Fr weitere Informationen zu „CDATA“, „NAME“, „ID“ und andere Datentypen lesen Sie bitte im Abschnitt 6, „HTML-Grunddatentypen“ nach. Das folgende Beispiel zeigt mehrere Attributdefinitionen: rowspan http-equiv id valign

NUMBER 1 - - number of rows spanned by cell - NAME #IMPLIED - - HTTP response header name - ID #IMPLIED - - document-wide unique id - (top|middle|bottom|baseline) #IMPLIED

Das rowspan-Attribut verlangt Werte vom Typ NUMBER. Der Standardwert ist explizit als „1“ gegeben. Das optionale http-equiv-Attribut verlangt Werte vom Typ NAME. Das optionale idAttribut verlangt Werte vom Typ ID. Das optionale valign-Attribut ist gezwungen, Werte aus der Menge {top, middle, bottom, baseline} anzunehmen.

DTD-Entities in Attributdefinitionen Attributdefinitionen k=nnen auch Parameter-Entity-Referenzen enthalten. In diesem Beispiel sehen wir, dass die Attributdefinitionsliste fr das LINK-Element mit dem „%attrs;“-Parameter-Entity beginnt.

- - a media-independent link - ->

#IMPLIED #IMPLIED #IMPLIED #IMPLIED #IMPLIED #IMPLIED #IMPLIED

---------

%coreattrs, %i18n, %events - char encoding of linked resource - URI for linked resource - language code - advisory content type - forward link types - reverse link types - for rendering on these media - -

Start-Tag: erforderlich, End-Tag: verboten Das „%attrs;“-Parameter-Entity ist folgendermaßen definiert:

Wie die HTML-DTD zu lesen ist

< 59 >

Die HTML 4.01- Spezifikation

Anmerkung der bersetzer: Der Wert #IMPLIED bedeutet so viel wie „optional“.

Page size: 168,00 x 240,00 mm

Sandini Bib

Die HTML 4.01- Spezifikation

Das „%coreattrs;“-Parameter-Entity in der „%attrs;“-Definition wird wie folgt aufgel=st:

Wie dieses Beispiel zeigt, versorgt das Paramater-Entity „%URI;“ Leser der DTD mit mehr Information als fr ein Attribut zu dem Datentyp erwartet werden. Ohnlich wurden Entities fr „%Color;“, „%Charset;“, „%Length;“, „%Pixels;“ usw. definiert

Boolesche Attribute Einige Attribute spielen die Rolle boolescher Variablen (z. B. das selected-Attribut fr das OPTION-Element). Ihr Auftauchen im Start-Tag eines Elements impliziert, dass der Wert des Attributs „wahr“ (true) ist; ihr Fehlen impliziert den Wert „falsch“ (false). Boolesche Attribute k=nnen nur einen zul@ssigen Wert annehmen: den Namen des Attributs selbst (z. B. selected="selected"). Dieses Beispiel definiert das selected-Attribut als boolesches Attribut. selected

(selected) #IMPLIED

- - option is pre-selected - -

Das Attribut wird bei Auftauchen im Start-Tag des Elements auf „wahr“ gesetzt:

...Inhalt...

In HTML k=nnen boolesche Attribute in minimierter Form auftreten – der Wert des Attributs erscheint allein im Start-Tag des Elelements. So kann selected gesetzt werden, indem man schreibt:

anstatt:

< 60 >

ber SGML und HTML

Page size: 168,00 x 240,00 mm

Sandini Bib

Anmerkung der bersetzer: Die minimierte Form ist in XHTML nicht mehr zul@ssig.

4 Konformit.t: Anforderungen und Empfehlungen Mit diesem Abschnitt beginnen wir die HTML-Spezifikation anfangend mit der bereinkunft zwischen Autoren, Dokumenten, Benutzern und Benutzerprogrammen. Die Schlsselw=rter „MUSS“ („MUST“), „DARF NICHT“ („MUST NOT“), „ERFORDERLICH“ („REQUIRED“), „SOLL“ („SHALL“), „SOLL NICHT“ („SHALL NOT“), „SOLLTE“ („SHOULD“), „SOLLTE NICHT“ („SHOULD NOT“), „EMPFOHLEN“ („RECOMMENDED“), „KANN“ („MAY“) und „OPTIONAL“ in diesem Dokument sind, wie in [RFC2119] beschrieben, zu verstehen. Der besseren Lesbarkeit wegen erscheinen die W=rter in dieser Spezifikation jedoch nicht in Großbuchstaben. Gelegentlich geben die Autoren dieser Spezifikation praktische Empfehlungen fr Autoren und Benutzerprogramme. Diese Empfehlungen sind nicht normativ; die Konformit@t mit der Spezifikation ist nicht abh@ngig von ihrer Umsetzung. Diese Empfehlungen enthalten Formulierungen wie „Wir empfehlen ...“, „Diese Spezifikation empfiehlt ...“ oder verwenden einen @hnlichen Wortlaut.

4.1 Definitionen HTML-Dokument Ein HTML-Dokument ist ein SGML-Dokument, das den Beschr@nkungen dieser Spezifikation gerecht wird. Autor Ein Autor ist eine Person oder ein Programm, die/das HTML-Dokumente schreibt oder generiert. Bei einem Autorenwerkzeug handelt es sich um einen speziellen Autor, n@mlich um ein Programm, das HTML generiert. Wir empfehlen Autoren, lieber zur Strict-DTD konforme Dokumente zu schreiben als zu anderen durch diese Spezifikation definierten DTDs. Details ber die in HTML 4 definierten DTDs finden Sie im Abschnitt 7.2, „HTML-Versionsinformation“. Benutzer Ein Benutzer ist eine Person, die mit einem Benutzerprogramm interagiert, um ein dargestelltes HTML-Dokument zu sehen, zu h=ren oder auf andere Art zu nutzen.

Konformit,t: Anforderungen und Empfehlungen

< 61 >

Die HTML 4.01- Spezifikation

Autoren sollte bewusst sein, dass viele Benutzerprogramme nur die minimierte Form erkennen, nicht aber die vollst@ndige Form.

Page size: 168,00 x 240,00 mm

Sandini Bib

Die HTML 4.01- Spezifikation

HTML-Benutzerprogramm Ein HTML-Benutzerprogramm ist jede Vorrichtung, die HTML-Dokumente interpretiert. Zu den Benutzerprogrammen geh=ren visuelle Browser (Text- und graphische Browser), nicht-visuelle Browser (Audio, Braille), Suchmaschinen, Proxies und so weiter. Ein zu HTML 4 konformes Benutzerprogramm ist eines, das die in dieser Spezifikation dargelegten zwingenden Bedingungen („muss“) einschließlich der folgenden Punkte beachtet: Ein Benutzerprogramm sollte vermeiden, literalen Attributwerten irgendwelche L@ngenbeschr@nkungen aufzuerlegen (siehe Passage zu „Capacities“ in Abschnitt 20, „SGML-Deklaration“). Einfhrende Informationen zu SGML-Attributen sind im Abschnitt 3.3.4, „Attributdeklarationen“ zu finden. Ein Benutzerprogramm muss sicherstellen, dass die Darstellung nicht davon beeinflusst wird, ob Start- und End-Tags vorhanden oder nicht vorhanden sind, wenn die HTMLDTD diese als optional angibt. Einfhrende Informationen ber SGML-Elemente finden Sie im Abschnitt 3.3.3, „Elementdeklarationen“. Aus Grnden der Abw@rtskompatibilit@t empfehlen wir, dass Tools, die HTML 4 interpretieren, auch weiterhin HTML 3.2 (siehe [HTML32]) und HTML 2.0 (siehe [RFC1866]) untersttzen.

· · ·

Fehlerbedingungen Empfehlungen fr Reaktionen auf Fehler finden Sie in den „Anmerkungen zu ungltigen Dokumenten“ im Anhang B. Missbilligt Ein missbilligtes Element oder Attribut ist eines, das durch neuere Konstrukte berholt wurde. Missbilligte Elemente werden im Referenzhandbuch an den entsprechenden Stellen definiert, sind aber deutlich als missbilligt gekennzeichnet. Missbilligte Elemente k=nnen in zuknftigen Versionen von HTML obsolet sein. Aus Grnden der Abw@rtskompatibilit@t sollten Benutzerprogramme auch weiterhin missbilligte Elemente untersttzen. Die Definitionen von Elementen und Attributen bringen klar zum Ausdruck, welche von ihnen missbilligt werden. Diese Spezifikation enth@lt Beispiele, die zeigen, wie die Verwendung missbilligter Elemente vermieden werden kann. In den meisten F@llen setzt das Stylesheet-Untersttzung der Benutzerprogramme voraus. Um Stil- und Gestaltungseffekte zu erzielen, sollten Autoren im Allgemeinen eher Stylesheets verwenden als HTML-Pr@sentationsattribute. HTMLPr@sentationsattribute werden missbiligt seit Stylesheet-Alternativen existieren (s. z. B. [CSS1]). Obsolet Ein obsoletes Element oder Attribut ist eines, fr dessen Untersttzung durch ein Benutzerprogramm es keine Garantie gibt. Obsolete Elemente werden in dieser Spezifikation nicht mehr definiert, sind jedoch aus historischen Grnden in den „Onderungen“ im Anhang A des Referenzhandbuches aufgelistet.

< 62 >

Konformit,t: Anforderungen und Empfehlungen

Page size: 168,00 x 240,00 mm

Sandini Bib

HTML 4 ist eine zur internationalen Norm ISO 8879 – Standard Generalized Markup Language SGML (definiert in [ISO8879]) konforme SGML-Anwendung . Beispiele im Text sind konform zur Strict-Dokumenttyp-Definiton, es sei denn, das fragliche Beispiel bezieht sich auf Elemente oder Attribute, die nur in der Transitional-Dokumenttyp-Definiton oder der Frameset-Dokumenttyp-Definiton definiert sind. Um der Krze willen beginnen die meisten Beispiele nicht mit der am Anfang eines HTML-Dokuments vorgeschriebenen Dokumenttyp-Deklaration. DTD-Fagmente in Elementdefinitionen stammen mit Ausnahme der Elemente, die sich auf Frames beziehen, aus der Strict-Dokumenttyp-Definiton. Zu Details, wann die Strict-, Transitional- oder Frameset-DTD zu verwenden ist, lesen Sie bitte die HTML-Versionsinformation. In der HTML 4-DTD erscheinende Kommentare haben keine normative Bedeutung, sondern lediglich informellen Charakter. Benutzerprogramme drfen SGML-Verarbeitungsanweisungen (z. B.





Definieren des Namensraums f#r ein Modul

< 431 >

Modularisierung von XHTML

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib



]]>

Modularisierung von XHTML

]]>







D.2.2 Deklarationsteilmodul(e) Als n@chstes mssen Sie ein oder mehrere „Deklarationsteilmodule“ definieren. Der Zweck dieser Datei-Entities besteht in der Deklaration der XML-DTD-Elemente und -Attributlisten. Ein XHTML-Deklarationsteilmodul sollte wie folgt aufgebaut werden: 1. Definiere ein Parameter-Entity zur Verwendung innerhalb der ATTLIST jedes deklarierten Elements. Dieses Parameter-Entity sollte %NS.decl.attrib; enthalten, falls %MODULE.prefixed; auf INCLUDE gesetzt ist und %NS.decl.attrib; plus "xmlns %URI.datatype; #FIXED '%MODULE.xmlns;'", falls %MODULE.prefixed; auf IGNORE gesetzt ist. 2. Deklariere alle Elemente und Attribute des Moduls. Fge das oben definierte ParameterEntity zu jeder ATTLIST eines Elements, so dass alle erforderlichen xmlns-Attribute fr jedes Element des Moduls verfgbar sind. 3. Falls das Modul Attribute fr Elemente definiert, die in Modulen definiert sind, die sich nicht im selben Namensraum befinden, deklariere solche Attribute mit dem Pr@fix %MODULE.pfx. Zum Beispiel:

Dies wrde dem img-Element des Bildmoduls ein Attribut hinzufgen. Der Name des Attributs w@re der qualifizierte Name, einschließlich Pr@fix, sofern Pr@fixe fr eine Dokumentinstanz aktiviert w@ren. Es wrde zudem das Attribut xmlns:MODULE_PREFIX der Attributliste des img-Elements hinzufgen, so dass ein namensraumf@higer XML-Parser wissen wrde, wie er das Namensraumpr@fix aufzul=sen h@tte.

< 432 >

Erstellen von DTD-Modulen

Page size: 168,00 x 240,00 mm

Sandini Bib

Das folgende Beispiel zeigt ein Deklarationsteilmodul fr ein hypothetisches Inventarmodul:



]]>



Page size: 168,00 x 240,00 mm

Sandini Bib

| %List.class; | %Block.class; %Misc.class;" >

Modularisierung von XHTML





Schließlich verwenden wir ein vorgegebenes Muster (www.w3.org/TR/xhtml-modularization/ DTD/templates/template.dtd) fr eine neue DTD, so modifiziert, wie es fr unsere neue Auszeichnungssprache angebracht ist:







Entwickeln von DTDs

Page size: 168,00 x 240,00 mm

Sandini Bib

SYSTEM "myml-model-1.mod" >



%xhtml-framework.mod;

%xhtml-hypertext.mod;

%xhtml-list.mod;

%MyML-elements.mod;

%xhtml-image.mod;

%xhtml-meta.mod;

%xhtml-struct.mod;

Erstellen einer neuen DTD

< 449 >

Modularisierung von XHTML

%xhtml-text.mod;

Page size: 168,00 x 240,00 mm

Sandini Bib

E.5 Benutzen der neuen DTD

Modularisierung von XHTML

Wenn die DTD erst einmal fertig ist, kann sie in beliebigen Dokumenten benutzt werden. Die Benutzung besteht einfach aus dem Referenzieren in der DOCTYPE-Deklaration der Instanz:

An example using defaults

This is content in the XHTML namespace

This is content in the SimpleML namespace.

Das Dokument kann die Elemente außerhalb des XHTML-Namensraums auch mit Pr@fixen verwenden:

An example using defaults

This is content in the XHTML namespace

This is content in the myml namespace.

F Implementierungen von XHTML-Modulen mit DTDs Dieser Anhang ist normativ. Dieser Anhang enth@lt die DTD-Implementierungen der in Abschnitt 5 (Abstrakte XHTMLModule) definierten Module. Diese Modulimplementierungen k=nnen von jedem Dokumenttyp der XHTML-Familie benutzt werden.

< 450 >

Implementierungen von XHTML-Modulen mit DTDs

Page size: 168,00 x 240,00 mm

Sandini Bib

F.1 XHTML-Zeichen-Entities XHTML-DTDs stellen eine Sammlung von benannten Zeichen-Entities zur Verfgung; sie werden in diesem Abschnitt definiert.

Anmerkung der bersetzer: Beachten Sie bitte auch den Abschnitt 24 der kommentierten deutschen bersetzung von HTML 4. Dort finden Sie graphische Darstellungen der Zeichen-Entities im Web-Browser.



%xhtml-lat1; This DTD module is identified by the PUBLIC and SYSTEM identifiers: PUBLIC "-//W3C//ENTITIES Latin 1 for XHTML//EN" SYSTEM "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-lat1.ent" Revision: $Id: xhtml-lat1.ent,v 4.1 2001/04/10 09:34:14 altheim Exp $ SMI Portions (C) International Organization for Standardization 1986: Permission to copy in any form is granted for use with conforming SGML systems and applications as defined in ISO 8879, provided this notice is included in all copies. - ->

nbsp

" " > cent "¢" > pound "£" > curren "¤" > yen "¥" > brvbar "¦" > sect "§" > uml "¨" > copy "©" > ordf "ª" > laquo "«" > not "¬" > shy "­" >

Modularisierung von XHTML

F.1.1 XHTML-Latin 1-Zeichen-Entities

Page size: 168,00 x 240,00 mm

Sandini Bib

Modularisierung von XHTML





























< 452 >

Implementierungen von XHTML-Modulen mit DTDs

Page size: 168,00 x 240,00 mm

Sandini Bib

multiplication sign, U+00D7 ISOnum - -> latin capital O with stroke = latin capital O slash, latin latin latin latin latin latin latin latin

capital U with grave, U+00D9 ISOlat1 - -> capital U with acute, U+00DA ISOlat1 - -> capital U with circumflex, U+00DB ISOlat1 - -> capital U with diaeresis, U+00DC ISOlat1 - -> capital Y with acute, U+00DD ISOlat1 - -> capital THORN, U+00DE ISOlat1 - -> small sharp s = ess-zed, U+00DF ISOlat1 - -> small a with grave = latin small a grave,

latin latin latin latin latin

small small small small small

a a a a a

with with with with with

acute, U+00E1 ISOlat1 - -> circumflex, U+00E2 ISOlat1 - -> tilde, U+00E3 ISOlat1 - -> diaeresis, U+00E4 ISOlat1 - -> ring above = latin small a ring,

latin small ae = latin small ligature ae, U+00E6 latin small c with cedilla, U+00E7 ISOlat1 - -> latin small e with grave, U+00E8 ISOlat1 - -> latin small e with acute, U+00E9 ISOlat1 - -> latin small e with circumflex, U+00EA ISOlat1 - -> latin small e with diaeresis, U+00EB ISOlat1 - -> latin small i with grave, U+00EC ISOlat1 - -> latin small i with acute, U+00ED ISOlat1 - -> latin small i with circumflex, U+00EE ISOlat1 - -> latin small i with diaeresis, U+00EF ISOlat1 - -> latin small eth, U+00F0 ISOlat1 - -> latin small n with tilde, U+00F1 ISOlat1 - -> latin small o with grave, U+00F2 ISOlat1 - -> latin small o with acute, U+00F3 ISOlat1 - -> latin small o with circumflex, U+00F4 ISOlat1 - -> latin small o with tilde, U+00F5 ISOlat1 - -> latin small o with diaeresis, U+00F6 ISOlat1 - -> division sign, U+00F7 ISOnum - -> latin small o with stroke, = latin small o slash, latin latin latin latin latin latin latin

small small small small small small small

u with grave, U+00F9 ISOlat1 - -> u with acute, U+00FA ISOlat1 - -> u with circumflex, U+00FB ISOlat1 - -> u with diaeresis, U+00FC ISOlat1 - -> y with acute, U+00FD ISOlat1 - -> thorn with, U+00FE ISOlat1 - -> y with diaeresis, U+00FF ISOlat1 - ->

F.1.2 Sonderzeichen von XHTML



Modularisierung von XHTML





Page size: 168,00 x 240,00 mm

Sandini Bib

%xhtml-special; This DTD module is identified by the PUBLIC and SYSTEM identifiers: PUBLIC "-//W3C//ENTITIES Special for XHTML//EN" SYSTEM "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-special.ent"

Modularisierung von XHTML

Revision: $Id: xhtml-special.ent,v 4.1 2001/04/10 09:34:14 altheim Exp $ SMI Portions (C) International Organization for Standardization 1986: Permission to copy in any form is granted for use with conforming SGML systems and applications as defined in ISO 8879, provided this notice is included in all copies. Revisions: 2000-10-28: added ' and altered XML Predefined Entities for compatibility - ->

"&" > "&&" > "'" > """ >





a misnomer, this is a separate character in some languages - -> "Š" > "Ÿ" >



< 454 >

Implementierungen von XHTML-Modulen mit DTDs

Page size: 168,00 x 240,00 mm

Sandini Bib

thinsp zwnj zwj lrm rlm ndash mdash lsquo rsquo sbquo ldquo rdquo bdquo dagger Dagger permil

" " "‌" "‍" "‎" "‏" "–" "—" "‘" "’" "‚" "“" "”" "„" "†" "‡" "‰"

> zero width non-joiner, U+200C NEW RFC 2070 - -> zero width joiner, U+200D NEW RFC 2070 - -> left-to-right mark, U+200E NEW RFC 2070 - -> right-to-left mark, U+200F NEW RFC 2070 - -> en dash, U+2013 ISOpub - -> em dash, U+2014 ISOpub - -> left single quotation mark, U+2018 ISOnum - -> right single quotation mark, U+2019 ISOnum - -> single low-9 quotation mark, U+201A NEW - -> left double quotation mark, U+201C ISOnum - -> right double quotation mark, U+201D ISOnum - -> double low-9 quotation mark, U+201E NEW - -> dagger, U+2020 ISOpub - -> double dagger, U+2021 ISOpub - -> per mille sign, U+2030 ISOtech - ->





F.1.3 Mathematische, griechische und Symbolzeichen von XHTML

%xhtml-symbol; This DTD module is identified by the PUBLIC and SYSTEM identifiers: PUBLIC "-//W3C//ENTITIES Symbols for XHTML//EN" SYSTEM "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-symbol.ent" Revision: $Id: xhtml-symbol.ent,v 4.1 2001/04/10 09:34:14 altheim Exp $ SMI Portions (C) International Organization for Standardization 1986: Permission to copy in any form is granted for use with conforming SGML systems and applications as defined in ISO 8879, provided this notice is included in all copies. - ->

Modularisierung von XHTML

numbers are given for each character, in hex. Entity values are decimal conversions of the ISO 10646 values and refer to the document character set. Names are Unicode [UNICODE] names. - ->

Modularisierung von XHTML



"Β" > "Γ" > "Δ" > "Ε" > "Ζ" > "Η" > "Θ" > "Ι" > "Κ" > "Λ" > "Μ" > "Ν" > "Ξ" > "Ο" > "Π" > "Ρ" > Sigmaf, and no U+03A2 character either - -> "Σ" > "Τ" > "Υ" >

















< 456 >

Implementierungen von XHTML-Modulen mit DTDs

Page size: 168,00 x 240,00 mm

Sandini Bib

upsilon phi chi psi omega thetasym upsih piv

"υ" "φ" "χ" "ψ" "ω" "ϑ" "ϒ" "ϖ"

> small letter phi, U+03C6 ISOgrk3 - -> small letter chi, U+03C7 ISOgrk3 - -> small letter psi, U+03C8 ISOgrk3 - -> small letter omega, U+03C9 ISOgrk3 - -> small letter theta symbol, U+03D1 NEW - -> upsilon with hook symbol, U+03D2 NEW - -> pi symbol, U+03D6 ISOgrk3 - ->











upwards arrow, U+2191 ISOnum- -> rightwards arrow, U+2192 ISOnum - -> downwards arrow, U+2193 ISOnum - -> left right arrow, U+2194 ISOamsa - ->







XHTML-Zeichen-Entities

< 457 >

Modularisierung von XHTML































< 458 >

Implementierungen von XHTML-Modulen mit DTDs

Page size: 168,00 x 240,00 mm

Sandini Bib







opposed to hollow - -> club suit = shamrock, U+2663 ISOpub - -> heart suit = valentine, U+2665 ISOpub - -> diamond suit, U+2666 ISOpub - ->

F.2 Modulares Rahmenwerk von XHTML Damit DTD-Autoren Nutzen aus den XHTML-DTD-Modulen ziehen k=nnen, mssen sie die Inhaltsmodelle fr ihre DTD definieren. XHTML stellt eine Flle an Werkzeugen zur Verfgung, um diese Arbeit zu erleichtern. Sie sind in einem Satz untersttzender Module definiert und werden durch ein zentrales Rahmenwerkmodul instanziiert:



Modularisierung von XHTML



Page size: 168,00 x 240,00 mm

Sandini Bib

+ + + + + +

notations datatypes namespace-qualified names common attributes document model character entities

The Intrinsic Events module is ignored by default but occurs in this module because it must be instantiated prior to Attributes but after Datatypes.

Modularisierung von XHTML

- ->

%xhtml-arch.mod;]]>

%xhtml-notations.mod;]]>

%xhtml-datatypes.mod;]]>

%xhtml-xlink.mod;

%xhtml-qname.mod;]]>

%xhtml-events.mod;]]>

< 460 >

Implementierungen von XHTML-Modulen mit DTDs

Page size: 168,00 x 240,00 mm

Sandini Bib

%xhtml-attribs.mod;]]>

%xhtml-model.redecl;

%xhtml-charent.mod;]]>

Beachten Sie, dass das obige Modul ein Inhaltsmodellmodul referenziert. Dieses Modul wird „je Dokument“ zus@tzlich zum Dokumenttyp-Treiber definiert. Das modulare Rahmenwerk sttzt sich außerdem auf die folgenden Komponentenmodule:

F.2.1 XHTML-Basisarchitektur





Modulares Rahmenwerk von XHTML

< 461 >

Modularisierung von XHTML

%xhtml-model.mod;]]>

Page size: 168,00 x 240,00 mm

Sandini Bib

Modularisierung von XHTML



"-//W3C//NOTATION AFDR ARCBASE XHTML 1.1//EN" "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd" "html" "html" "htnames" "htsupp" "htign" "ArcAuto" "HtModReq HtModOpt" "Framework Text Hypertext Lists Structure" "Standard"

F.2.2 XHTML-Notationen





< 462 >

Implementierungen von XHTML-Modulen mit DTDs

Page size: 168,00 x 240,00 mm

Sandini Bib







Modularisierung von XHTML















Page size: 168,00 x 240,00 mm

Sandini Bib

PUBLIC "-//W3C//NOTATION XHTML Datatype: Charsets//EN" >



Modularisierung von XHTML







F.2.3 XHTML-Datentypen



< 464 >

Implementierungen von XHTML-Modulen mit DTDs

Page size: 168,00 x 240,00 mm

Sandini Bib







Modularisierung von XHTML



















Modulares Rahmenwerk von XHTML

< 465 >

Page size: 168,00 x 240,00 mm

Sandini Bib



F.2.4 Definition allgemeiner Attribute von XHTML





< 466 >

Implementierungen von XHTML-Modulen mit DTDs

Page size: 168,00 x 240,00 mm

Sandini Bib

]]>

Modularisierung von XHTML





F.2.5 Qualifizierte Namen von XHTML



Page size: 168,00 x 240,00 mm

Sandini Bib

Section A declares parameter entities to support namespacequalified names, namespace declarations, and name prefixing for XHTML and extensions. Section B declares parameter entities used to provide namespace-qualified names for all XHTML element types: %applet.qname; %base.qname; ...

the xmlns-qualified name for the xmlns-qualified name for

XHTML extensions would create a module similar to this one. Included in the XHTML distribution is a template module ('template-qname-1.mod') suitable for this purpose.

Modularisierung von XHTML

- ->







]]>

%xhtml-qname-extra.mod;

< 468 >

Implementierungen von XHTML-Modulen mit DTDs

Page size: 168,00 x 240,00 mm

Sandini Bib



Modularisierung von XHTML

]]>



]]>

%xhtml-qname.redecl;



Modulares Rahmenwerk von XHTML

< 469 >

Page size: 168,00 x 240,00 mm

Sandini Bib





Modularisierung von XHTML





























< 470 >

Implementierungen von XHTML-Modulen mit DTDs

Page size: 168,00 x 240,00 mm

Sandini Bib

"%XHTML.pfx;var" >









Modularisierung von XHTML





> > > > >













Modulares Rahmenwerk von XHTML

< 471 >

Page size: 168,00 x 240,00 mm

Sandini Bib

tfoot.qname "%XHTML.pfx;tfoot" > tbody.qname "%XHTML.pfx;tbody" > colgroup.qname "%XHTML.pfx;colgroup" > col.qname "%XHTML.pfx;col" > tr.qname "%XHTML.pfx;tr" > th.qname "%XHTML.pfx;th" > td.qname "%XHTML.pfx;td" >

Modularisierung von XHTML

"%XHTML.pfx;rbc" > "%XHTML.pfx;rtc" > "%XHTML.pfx;rb" > "%XHTML.pfx;rt" > "%XHTML.pfx;rp" >



F.2.6 Zeichen-Entities von XHTML



%xhtml-lat1;

< 472 >

Implementierungen von XHTML-Modulen mit DTDs

Page size: 168,00 x 240,00 mm

Sandini Bib

%xhtml-symbol;

%xhtml-special;

Dieser Abschnitt enth@lt die formalen Definitionen jedes der abstrakten XHTML-Module in Form eines DTD-Moduls. Die Listings, die sich an dieser Stelle in der englischen Online-Fassung befinden, sind vor allem in elektronischer Form interessant. Sie stehen deshalb auch in der deutschen Online-Fassung zur Verfgung. Zur leichteren Orientierung haben wir die Abschnittberschriften abgedruckt.

F.3.1 Kernmodule von XHTML F.3.1.1 Struktur F.3.1.2 Text F.3.1.3 Hypertext F.3.1.4 Listen F.3.2 Applet F.3.3 Text-Module F.3.3.1 Darstellung F.3.3.3 Bidirektionaler Text F.3.4 Formulare F.3.4.1 Basisformulare F.3.4.2 Formulare F.3.5 Tabellen F.3.5.1 Basistabellen F.3.5.2 Tabellen F.3.6 Bild

Implementierungen der XHTML-Module

< 473 >

Modularisierung von XHTML

F.3 Implementierungen der XHTML-Module

Page size: 168,00 x 240,00 mm

Sandini Bib

F.3.7 Client-seitige Image Maps F.3.8 Server-seitige Image Maps F.3.9 Objekt F.3.10 Frames F.3.11 Target F.3.12 Iframe F.3.13 Eingebaute Ereignisse

Modularisierung von XHTML

F.3.14 Metainformation F.3.15 Scripting F.3.16 Stylesheet F.3.17 Style-Attribut F.3.18 Link F.3.19 Base F.3.20 Name-Identifizierung F.3.21 Altlasten

F.4 Unterst-tzende Module der XHTML-DTD-Implementierung Die Module in diesem Abschnitt sind Teil der DTD-Implementierung von XHTML. W@hrend sie vor Gelegenheitsanwendern versteckt sind, ist ihr Verst@ndnis wichtig fr die Herstellung abgeleiteter Auszeichnungssprachen unter Verwendung der Modularisierungsarchitektur.

F.4.1 Ausdr-cke auf Blockebene



Module der XHTML-DTD-Implementierung

Page size: 168,00 x 240,00 mm

Sandini Bib

Revisions: (none) ....................................................................... - ->

Modularisierung von XHTML



]]>

]]>



]]>

]]>

#IMPLIED



Implementierungen der XHTML-Module

< 475 >

Page size: 168,00 x 240,00 mm

Sandini Bib

]]>

]]>

#FIXED 'preserve'

Modularisierung von XHTML



]]>

]]>

]]>

]]>

]]>

]]>

Module der XHTML-DTD-Implementierung

Page size: 168,00 x 240,00 mm

Sandini Bib

]]>

]]>

]]>

Modularisierung von XHTML

]]>

]]>

]]>

F.4.2 Darstellung auf Blockebene



Implementierungen der XHTML-Module

< 477 >

Page size: 168,00 x 240,00 mm

Sandini Bib



Modularisierung von XHTML



]]>

]]>

F.4.3 Strukturelle Blockelemente





Module der XHTML-DTD-Implementierung

Page size: 168,00 x 240,00 mm

Sandini Bib

"( #PCDATA | %Flow.mix; )*" >

]]>

]]>

Modularisierung von XHTML



]]>

]]>

F.4.4 Inzeilige Ausdr-cke



Page size: 168,00 x 240,00 mm

Sandini Bib

- ->

Modularisierung von XHTML



]]>

]]>



]]>

]]>



]]>

]]>



< 480 >

Module der XHTML-DTD-Implementierung

Page size: 168,00 x 240,00 mm

Sandini Bib

]]>

]]>

Modularisierung von XHTML



]]>

]]>



]]>

]]>



]]>

Implementierungen der XHTML-Module

< 481 >

Page size: 168,00 x 240,00 mm

Sandini Bib

]]>

Modularisierung von XHTML



]]>

]]>

#IMPLIED



]]>

]]>



]]>

]]>

< 482 >

Module der XHTML-DTD-Implementierung

Page size: 168,00 x 240,00 mm

Sandini Bib

]]>

]]>







]]>

]]>

Implementierungen der XHTML-Module

< 483 >

Modularisierung von XHTML

F.4.5 Inzeilige Darstellung

Page size: 168,00 x 240,00 mm

Sandini Bib



]]>

Modularisierung von XHTML

]]>



]]>

]]>



]]>

]]>



< 484 >

Module der XHTML-DTD-Implementierung

Page size: 168,00 x 240,00 mm

Sandini Bib

]]>

]]>

Modularisierung von XHTML



]]>

]]>



]]>

]]>

F.4.6 Inzeilige Strukturelemente



Page size: 168,00 x 240,00 mm

Sandini Bib

SMI This DTD module is identified by the PUBLIC and SYSTEM identifiers: PUBLIC "-//W3C//ELEMENTS XHTML Inline Structural 1.0//EN" SYSTEM "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-inlstruct-1.mod" Revisions: (none) ....................................................................... - ->



]]>

]]>



]]>

]]>

< 486 >

Module der XHTML-DTD-Implementierung

Page size: 168,00 x 240,00 mm

Sandini Bib

F.4.7 Param





]]>

]]>

#REQUIRED #IMPLIED 'data' #IMPLIED

Implementierungen der XHTML-Module

< 487 >

Modularisierung von XHTML

PUBLIC "-//W3C//ELEMENTS XHTML Param Element 1.0//EN" SYSTEM "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-param-1.mod"

Page size: 168,00 x 240,00 mm

Sandini Bib

F.4.8 Neudeklarierung von Altlasten





%xhtml-arch.mod;]]>

Module der XHTML-DTD-Implementierung

Page size: 168,00 x 240,00 mm

Sandini Bib

"xhtml-notations-1.mod" > %xhtml-notations.mod;]]>

%xhtml-datatypes.mod;]]>

Modularisierung von XHTML



%xhtml-qname.mod;]]>













%xhtml-events.mod;]]>

Implementierungen der XHTML-Module

< 489 >

Page size: 168,00 x 240,00 mm

Sandini Bib



%xhtml-attribs.mod;]]>

Modularisierung von XHTML

%xhtml-model.redecl;





%xhtml-model.mod;]]>

Module der XHTML-DTD-Implementierung

Page size: 168,00 x 240,00 mm

Sandini Bib

"( #PCDATA | %Flow.mix; )*" >

Modularisierung von XHTML

to allow for either body or frameset content. The SGML markup minimization features used in HTML 4 do not apply, so the ambiguity that necessitated separation into the separate Frameset and Transitional DTDs is eliminated. - ->



%xhtml-charent.mod;]]>

G Bibliographie Dieser Anhang ist normativ.

G.1 Normative Quellen [CSS2] "Cascading Style Sheets, level 2 (CSS2) Specification", W3C Recommendation, B. Bos, H. W. Lie, C. Lilley, I. Jacobs (Hrsg.), 12 May 1998. Verfgbar unter: http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512 [DOM] "Document Object Model (DOM) Level 1 Specification", L. Wood et al., 1 Oktober 1998. Verfgbar unter: http://www.edition-w3c.de/TR/1998/REC-DOM-Level-1-19981001 [HTML4] "HTML 4.01 Specification: W3C Recommendation", W3C Recommendation, D. Raggett, A. Le Hors, I. Jacobs (Hrsg.), 24 Dezember 1999. Verfgbar unter: http://www.edition-w3c.de/TR/1999/REC-html401-19991224

Bibliographie

< 491 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Modularisierung von XHTML

[ISO10646] "Information Technology – Universal Multiple-Octet Coded Character Set (UCS) – Part 1: Architecture and Basic Multilingual Plane", ISO/IEC 10646-1:2000. Diese Referenz verweist auf eine Menge von Codepunkten, die sich ver@ndern k=nnen, wenn ihnen neue Zeichen zugewiesen werden. Zudem nimmt diese Referenz an, dass die durch ISO 10646 und [UNICODE] definierten Zeichenmenge Zeichen-fr-Zeichen @quivalent bleiben. Des weiteren schließt diese Referenz zuknftige Ver=ffentlichungen anderer Teile von 10646 (das heißt, andere als Teil 1) ein, die Zeichen in den Ebenen 1-16 definieren. [RFC1808] "Relative Uniform Resource Locators", RFC 1808, R. Fielding, Juni 1995. Verfgbar unter: http://www.ietf.org/rfc/rfc1808.txt [RFC2045] "Multipurpose Internet Mail Extensions (MIME) Part One: Format of Internet Message Bodies", RFC 2045, N. Freed, N. Borenstein, November 1996. Verfgbar unter: http://www.ietf.org/rfc/rfc2045.txt [RFC2119] "Key words for use in RFCs to indicate requirement levels", RFC 2119, S. Bradner, M@rz 1997. Verfgbar unter: http://www.ietf.org/rfc/rfc2119.txt [RFC3066] "Tags for the Identification of Languages", RFC 3066, H. Alvestrand, Januar 2001. Verfgbar unter: http://www.ietf.org/rfc/rfc3066.txt [SGML] "Information Processing – Text and Office Systems – Standard Generalized Markup Language (SGML)", ISO 8879:1986. Unter http://www.iso.ch/cate/d16387.html finden Sie Informationen ber die Norm und unter http://www.oasis-open.org/cover/general.html#overview Allgemeines zu SGML. [SRGB] "A Standard Default Color Space for the Internet", version 1.10, M. Stokes, M. Anderson, S. Chandrasekar und R. Motta, 5 November 1996. Verfgbar unter: http://www.w3.org/ Graphics/Color/sRGB [UNICODE] "The Unicode Standard", The Unicode Consortium. Version 3.1 des Unicode-Standards besteht aus einem Buch, das Version 3.0 abdeckt, sowie aus einem Anhang zum UnicodeStandard, der die Onderungen und Erg@nzungen, die Version 3.1 ausmachen, dokumentiert. "The Unicode Standard – Version 3.0", The Unicode Consortium, Reading, Mass.: AddisonWesley Developers Press, 2000. ISBN 0-201-61633-5 (siehe http://www.unicode.org/ unicode/uni2book/u2.html fr eine Online-Ausgabe des Buches). "Unicode Standard Annex #27 – Unicode 3.1", Mark Davis, Michael Everson, Asmus Freytag, John H. Jenkins et al. (siehe http://www.unicode.org/unicode/reports/tr27/). Fr Weiteres ber Unicode siehe http://www.unicode.org. [URI] "Uniform Resource Identifiers (URI): Generic Syntax", RFC 2396, T. Berners-Lee, R. Fielding, L. Masinter, August 1998. Verfgbar unter: http://www.ietf.org/rfc/rfc2396.txt. Dieser RFC aktualisiert RFC 1738 [URL] und [RFC1808].

< 492 >

Bibliographie

Page size: 168,00 x 240,00 mm

[URL] "Uniform Resource Locators (URL)", RFC 1738, T. Berners-Lee, L. Masinter, M. McCahill, Dezember 1994. Verfgbar unter: http://www.ietf.org/rfc/rfc1738.txt [XHTML1] "XHTML 1.0: The Extensible HyperText Markup Language", W3C Recommendation, S. Pemberton et al., 26 Januar 2000. Verfgbar unter: http://www.edition-w3c.de/TR/2000/REC-xhtml1-20000126 [XML] "Extensible Markup Language (XML) 1.0 (Second Edition)", W3C Recommendation, T. Bray, J. Paoli, C. M. Sperberg-McQueen, E. Maler (Hrsg.), 6 Oktober 2000. Verfgbar unter: http://www.edition-w3c.de/TR/2000/REC-xml-20001006 [XMLNAMES] "Namespaces in XML", W3C Recommendation, T. Bray, D. Hollander, A. Layman (Hrsg.), 14 Januar 1999. Verfgbar unter: http://www.edition-w3c.de/TR/1999/REC-xml-names-19990114 [XMLSCHEMA] "XML Schema Part 1: Structures", W3C Proposed Recommendation, H. S. Thompson, D. Beech, M. Maloney, N. Mendelsohn (Hrsg.), 30 M@rz 2001. Verfgbar unter: http://www.edition-w3c.de/TR/2001/PR-xmlschema-1-20010330 Siehe auch "XML Schema Part 2: Datatypes", Verfgbar unter: http://www.edition-w3c.de/ TR/2001/PR-xmlschema-2-20010330

G.2 Informelle Quellen [MATHML] "Mathematical Markup Language (MathML) Version 2.0", W3C Recommendation, D. Carlisle, P. Ion, R. Miner, N. Poppelie (Hrsg.), 21 February 2001. Verfgbar unter: http://www.edition-w3c.de/TR/2001/REC-MathML2-20010221 [SMIL] "Synchronized Multimedia Integration Language (SMIL) 1.0 Specification", W3C Recommendation, P. Hoschka (Hrsg.), 15 Juni 1998. Verfgbar unter: http://www.edition-w3c.de/TR/1998/REC-smil-19980615 [XLINK] "XML Linking Language (XLink) Version 1.0", W3C Proposed Recommendation, S. DeRose, E. Maler, D. Orchard (Hrsg.), 20 Dezember 2000. Verfgbar unter: http://www.edition-w3c.de/TR/2000/PR-xlink-20001220 [XMLSTYLE] "Associating Style Sheets with XML documents Version 1.0", W3C Recommendation, J. Clark (Hrsg.), 29 Juni 1999. Verfgbar unter: http://www.edition-w3c.de/TR/1999/REC-xml-stylesheet-19990629

Informelle Quellen

< 493 >

Modularisierung von XHTML

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

Modularisierung von XHTML

H Entwurfsziele Dieser Anhang ist informell. In diesem Anhang sind Entwurfziele (Design Goals) mit der Markierung „Gn“ versehen und Anforderungen (Requirements) mit „Rn.n“. Es gibt vier Hauptziele fr das Modularisierungsrahmenwerk fr XHTML:: [G1] Semantisch verwandte Teile von XHTML zusammenzufassen. [G2] Einsatz von DTDs, um die Herstellung von verwandten Sprachen (Teilmengen, Obermengen) fr bestimmte Zwecke (kleine Ger@te, Spezialger@te) zu untersttzen und gleichzeitig Gemeinsamkeiten sich berlappender Teil zu gew@hrleisten. [G3] Zuknftige Entwicklungen dadurch zu f=rdern, dass Teile der Sprache durch verbesserte Module (Formulare zum Beispiel) ersetzt werden k=nnen, ohne den Rest der Sprache zu beeinflussen. [G4] Zur Wiederverwendung von Modulen in anderen Sprachen zu ermutigen und dies zu f=rdern.

·· · ·

H.1 Anforderungen Die Entwurfsziele des vorhergehenden Abschnitts fhren zu einer großen Zahl von Anforderungen fr das Modularisierungsrahmenwerk. Diese Anforderungen, in diesem Absschnitt zusammengefasst, k=nnen nach den zentralen Eigenschaften des Frameworks weiter klassifiziert werden.

H.1.1 Granularit.t Zusammengenommen drcken die Anforderungen in diesem Abschnitt das Verlangen aus, dass die im Rahmenwerk definierten Module den richtigen Grad der Granularit@t bekommen haben: [R1.1] Abstrakte Module sollten Portabilit@t des Inhalts f=rdern und erhalten. [R1.2] Abstrakte Module sollten die Normierung von Plattformprofilen f=rdern. [R1.3] Abstrakte Module sollten groß genug sein, um Interoperabilit@t zu f=rdern. [R1.4] Abstrakte Module sollten klein genung sein, um Bedarf fr Teilmengen zu vermeiden. [R1.5] Abstrakte Module sollten Elemente mit @hnlicher oder verwandter Bedeutung sammeln. [R1.6] Abstrakte Module sollten Elemente mit un@hnlicher oder nicht verwandter Bedeutung trennen. [R1.7] Module sollten klein genug sein, um einelementige Dokumenttyp-Module zu erlauben.

·· ·· · · ·

< 494 >

Entwurfsziele

Page size: 168,00 x 240,00 mm

Sandini Bib

H.1.2 Zusammensetzbarkeit Die hier aufgefhrten Anforderungen der Zusammensetzbarkeit sollen gew@hrleisten, dass das Modularisierungsrahmenwerk in der Lage ist, die richtige Menge von Zielmodulen auszudrcken, die von der Zielgruppe des Rahmenwerks ben=tigt werden: [R2.1] Das Rahmenwerk sollte die Herstellung abstrakter Module fr XHTML 1.0 erlauben. [R2.2] Das Rahmenwerk sollte die Herstellung abstrakter Module erlauben, die eine gute N@herung an HTML 4 sind. [R2.3] Das Rahmenwerk sollte die Herstellung abstrakter Module fr ander W3C Recommendations erlauben. [R2.4] Das Rahmenwerk sollte die Herstellung abstrakter Module fr andere XML-Dokumenttypen erlauben. [R2.5] Das Rahmenwerk sollte die Herstellung abstrakter Module fr ein breites Spektrum von Plattformprofilen erlauben.

H.1.3 Einfache Verwendbarkeit Das Modularisierungsrahmenwerk wird nur dann allgemein akzeptiert, wenn es die beschriebenen Mechanismen fr unsere Zielgruppe einfach gestalten, das Rahmenwerk zu benutzen: [R3.1] Das Rahmenwerk sollte es fr Dokumenttypentwickler einfach gestalten, abstrakte XHTML-Module einzuschr@nken und zu erweitern. [R3.2] Das Rahmenwerk sollte es fr Dokumenttypentwickler einfach gestalten, abstrakte Module fr andere XML-Dokumenttypen herzustellen. [R3.3] Das Rahmenwerk sollte es fr Dokumentautoren einfach gestalten, Elemente verschiedener abstrakter Module zu validieren.

· · ·

H.1.4 Kompatibilit.t Das hier beschriebene Modularisierungsrahmenwerk sollte gut mit XML und anderen, vom W3C entwickelten Standards zusammen arbeiten: [R4.1] Das Rahmenwerk sollte streng konform zur XML 1.0 Recommendation sein. [R4.2] Das Rahmenwerk sollte kompatibel mit der XML Linking Language (XLink) [XLINK] sein. [R4.3] Das Rahmenwerk sollte kompatibel mit „Associating Style Sheets with XML documents“ [XMLSTYLE] sein. [R4.4] Das Rahmenwerk sollte in der Lage sein, neue W3C Recommendations anzunehmen, soweit das sinnvoll ist. [R4.5] Das Rahmenwerk sollte keinesfalls von nicht abgeschlossenen W3C-Arbeiten abh@ngig sein. [R4.6] Das Rahmenwerk sollte nicht von Arbeiten außerhalb des W3C abh@ngig sein.

·· · · · ·

H.1.5 Konformit.t Die Effektivit@t des Rahmenwerks wird auch daran gemessen werden, wie einfach es ist, das Verhalten von Modulen zu prfen, die gem@ß dem Rahmenwerk entwickelt wurden, sowie die Gltigkeit von Dokumenten, die auf die Module zurckgreifen:

Anforderungen

< 495 >

Modularisierung von XHTML

·· · · ·

Page size: 168,00 x 240,00 mm

Sandini Bib

Modularisierung von XHTML

· · · · ·

[R5.1] Es sollte m=glich sein, Dokumente zu validieren, die aus Elementen und Attributen aus abstrakten Modulen aufgebaut sind. [R5.2] Es sollte m=glich sein, das Verhalten von Elementen und Attributen aus abstrakten Modulen explizit zu beschreiben. [R5.3] Es sollte m=glich sein, das Verhalten von Elementen und Attributen aus abstrakten Modulen zu berprfen. [R5.4] Es sollte m=glich sein, einen hybriden Dokumenttyp als einen XHTML-Dokumenttyp zu berprfen. [R5.5] Module, die in bereinstimmung mit den hier beschriebenen Methoden definiert werden, sollen die Namen von Elementen und Parameter-Entities, die in XHTML-Modulen definiert werden, nicht duplizieren.

J Danksagungen Dieser Anhang ist informell. Diese Spezifikation wurde von der W3C HTML Working Group erstellt. Zum Zeitpunkt der Publikation hatte die Gruppe folgende Mitglieder: Steven Pemberton, CWI (HTML Working Group Chair); Murray Altheim, Sun Microsystems; Daniel Austin, Mozquito Technologies;Jonny Axelsson, Opera Software; Mark Baker, Sun Microsystems; Wayne Carr, Intel; Tantek kelik, Microsoft;Doug Dominiak, Openwave Systems; Andrew W. Donoho, IBM; Herman Elenbaas, Philips Electronics;Beth Epperson, Netscape/AOL;Masayasu Ishikawa, W3C (HTML Activity Lead); Shin'ichi Matsui, Panasonic; Shane McCarron, Applied Testing and Technology; Ann Navarro, WebGeek, Inc.; Peter Stark, Ericsson; Michel Suignard, Microsoft; Jeremy Wadsworth, Quark Inc.; Malte Wedel, Mozquito Technologies; Ted Wugofski, Openwave Systems;

< 496 >

Danksagungen

Page size: 168,00 x 240,00 mm

Sandini Bib

D

< XHTML Basic >

Page size: 168,00 x 240,00 mm

Sandini Bib

XHTML Basic Deutsche bersetzung Diese Version: http://www.edition-w3c.de/TR/2000/REC-xhtml-basic-20001219 Aktuelle Version: http://www.edition-w3c.de/TR/xhtml-basic bersetzer: Stefan Schumacher

XHTML Basic

Bei diesem Dokument handelt es sich um eine bersetzung eines W3C-Textes. Dieser Text ist urheberrechtlich geschtzt; bitte beachten Sie die nachfolgenden Hinweise des Originaldokuments. Die Rechte an der bersetzung liegen bei den bersetzern und dem Verlag Addison-Wesley. Die bersetzung hat keine durch das W3C legitimierte, normative Wirkung. Das einzige maßgebliche Dokument ist das englische Original. Bitte senden Sie Fehler und Korrekturen zur deutschen Fassung an die bersetzer. Kommentare der bersetzer, die als solche gekennzeichnet sind, unterliegen dem Urheberrecht der bersetzer. Sie sind nicht Bestandteil des Ursprungsdokuments.

XHTMLZ Basic W3C Recommendation vom 19. Dezember 2000 Diese Version: http://www.w3.org/TR/2000/REC-xhtml-basic-20001219 Aktuelle Version: http://www.w3.org/TR/xhtml-basic Vorherige Version: http://www.w3.org/TR/2000/PR-xhtml-basic-20001103 Editoren: Mark Baker, Sun Microsystems Masayasu Ishikawa, W3C Shinichi Matsui, Panasonic Peter Stark, Ericsson Ted Wugofski, Openwave Systems Toshihiko Yamakami, ACCESS Co., Ltd. Copyright L 1999-2000 W3CM (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.

< 498 >

XHTML Basic

Page size: 168,00 x 240,00 mm

Sandini Bib

Zusammenfassung Der XHTML-Basic-Dokumenttyp schließt die Module ein, die mindestens erforderlich sind, um ein Dokumenttyp einer XHTML Host Language zu sein. Zus@tzlich beinhaltet er Graphiken, Formulare, grundlegende Tabellen und Objektuntersttzung. Er ist fr Web-Clients geschaffen worden, die nicht alle XHTML-Eigenschaften untersttzen; zum Beispiel Web-Clients wie Mobiltelefone, PDAs, Pager oder Settop-Boxen. Dieser Dokumenttyp ist ausreichend fr Inhaltserstellung ausgestattet. XHTML Basic ist als allgemeine Grundlage entworfen worden, die erweitert werden kann. Zum Beispiel kann ein Event-Modul, das umfassender ist als das traditionelle HTML-4-EventSystem, eingefgt werden, oder es kann um zus@tzliche Module der XHTML-Modularisierung, wie das Scripting-Modul, erweitert werden. Das Ziel von XHTML Basic ist es, eine allgemeine Sprache vorzulegen, die von verschiedensten Benutzerschnittstellen untersttzt wird. Die Dokumenttyp-Definition ist auf Grundlage der XHTML-Module implementiert, wie in „Modularisierung von XHTML“ [XHTMLMOD] beschrieben.

Dieser Abschnitt beschreibt den Status dieses Dokuments zur Zeit seiner Publikation. Andere Dokumente k=nnen dieses Dokument ersetzen. Der letzte Status dieser Dokumentenreihe wird vom W3C gepflegt. Dieses Dokument wurde von Mitgliedern des W3C und anderen interessierten Gruppen berprft und vom Direktor als W3C Recommendation anerkannt. Es ist ein stabiles Dokument und darf als Referenzmaterial verwendet werden oder als normative Referenz von anderen Dokumenten zitiert werden. Die Rolle des W3C bei der Erstellung dieser Recommendation ist es, die Spezifikation bekannt zu machen und ihre weite Verbreitung zu f=rdern. Dies erh=ht die Funktionalit@t und die Interoperabilit@t des Webs. Dieses Dokument wurde von den Mitgliedern der W3C HTML Working Group (nur fr Mitglieder) als Teil der W3C HTML Activity" erstellt. Es bercksichtigt das Feedback des WAP-Forums und der Mitglieder der W3C Mobile Access Interest Group (nur fr Mitglieder). Dieses Dokument wird von der W3C HTML Working Group und der W3C Mobile Access Interest Group verwendet, um gemeinsame Grundlagen fr zuknftige Auszeichnungssprachen zu finden, die auf den Inhalt kleiner Informationsapplikationen ausgerichtet sind. "Modularisierung von XHTML" [XHTMLMOD] definiert die XHTML-Module im XHTML-Basic-Dokumenttyp. Zur Zeit dieser Publikation wurde die berprfungsperiode fr die Candidate Recommendation "Modularisierung von XHTML" beendet. Von dieser berprfung ausgehend, glaubt die "W3C HTML Working Group", dass die Definition der Module in XHTML Basic stabil ist, und die Working Group erwartet nicht, dass Onderungen an der "Modularisierung von XHTML" vorgenommen werden, die inkompatibel zu XHTML Basic sein werden. Die =ffentliche Diskussion um HTML findet auf der Mailing-Liste [email protected] statt (Archiv). Um der Mailing-Liste beizutreten, schreiben Sie eine Mail an [email protected] mit dem Wort subscribe in der Betreffzeile. Bitte senden Sie Mitteilungen ber Fehler in diesem Dokument an [email protected]. Die Liste bekannter Fehler in diesem Dokument ist unter http://www.w3.org/2000/12/RECxhtml-basic-20001219-errata verfgbar.

0ieses Dokuments

< 499 >

XHTML Basic

Status dieses Dokuments

Page size: 168,00 x 240,00 mm

Sandini Bib

Die englische Version dieser Spezifikation ist die einzige normative Version. Informationen zu bersetzungen dieses Dokuments sind unter http://www.w3.org/MarkUp/translations verfgbar. Eine Liste der aktuellen W3C Recommendations und anderen technischen Dokumenten ist unter http://www.w3.org/TR verfgbar.

1 Einleitung

XHTML Basic

1.1 XHTML f-r Kleinstinformationsger.te HTML 4 ist eine m@chtige Sprache fr das Verfassen von Webinhalten, aber das Design passt nicht zu den Anforderungen kleiner Benutzerschnittstellen, etwa der Implementierungsaufwand (Prozessortakt, Speicher und so weiter) bei Verwendung aller Eigenschaften. Benutzerschnittstellen mit begrenzten Ressourcen k=nnen eine volle Implementierung der HTML-4-Eigenschaften im Allgemeinen nicht untersttzen. Da nur mit einem voll ausgersteten Computer der Zugang zum World Wide Web m=glich ist, ist eine große Personengruppe vom Zugang zu Online-Informationen und Online-Diensten ausgeschlossen. Da es viele M=glichkeiten gibt, HTML einzuschr@nken, existieren viele fast identische Teilmengen, die von Organisationen und Gesellschaften definiert wurden. Ohne eine gemeinsame Grundlage wird es schwierig, Applikationen fr eine große Zahl verschiedener Web-Clients zu entwickeln. Die Motivation fr XHTML Basic besteht darin, einen XHTML-Dokumenttyp bereitzustellen, der von Gemeinschaften gemeinsam verwendet werden kann, (zum Beispiel von Desktops, TV und Mobiltelefonen) und der reich genug ist fr einfache Inhaltserstellung. Neue gemeinschaftsweite Dokumenttypen k=nnen durch die Erweiterung von XHTML Basic in der Weise definiert werden, dass XHTML-Basic-Dokumente innerhalb des gltigen Bereichs des neuen Dokumenttyps liegen. So kann ein XHTML-Basic-Dokument von m=glichst vielen Web-Clients angezeigt werden. Die Dokumenttyp-Definition fr XHTML Basic ist auf Grundlage der XHTML-Module, wie in „Modularisierung von XHTML“ [XHTMLMOD] beschrieben, implementiert.

1.2 Hintergrund und Voraussetzungen Informationsger@te sind auf einen bestimmten Gebrauch hin ausgelegt. Sie untersttzen die Eigenschaften, die sie fr die Funktionen ben=tigen, die sie ausfhren sollen. Im Folgenden einige Beispiele fr verschiedenartige Informationsger@te: Mobiltelefone Fernsehger@te Taschencomputer (PDAs) Verkaufsautomaten Pager KFZ-Navigationssysteme Mobile Spielger@te Digitale Buchleseger@te Multifunktionale Uhren

·· ·· ·· ·· ·

< 500 >

Einleitung

Page size: 168,00 x 240,00 mm

Sandini Bib

Existierende Teilmengen und Varianten von HTML fr diese Clients schließen „Compact HTML“ [CHTML], die „Wireless Markup Language“ [WML] und die „HTML 4.0 Guidelines for Mobile Access“ [GUIDELINES] ein. Die gemeinsamen Eigenschaften in diesen Dokumenttypen beinhalten: Grundlegenden Text (einschließlich berschriften, Abs@tze und Listen) Hyperlinks und Verweise zu verwandten Dokumenten Grundlegende Formulare Grundlegende Tabellen Graphiken Meta-Informationen

Diese HTML-Eigenschaften waren der Ausgangspunkt fr das Design von XHTML Basic. Weil sich viele Autoren mit den Eigenschaften von HTML auskennen, bildet sie eine ntzliche Ausgangssprache, die mit Modulen anderer Sprachen kombiniert werden kann, entsprechend den Methoden, die in "Modularisierung von XHTML" [XHTMLMOD] beschrieben sind. Zum Beispiel kann XHTML Basic mit einem Event-Modul erweitert werden, das umfassender als ein traditionelles HTML 4 Event-System ist, oder es kann durch zus@tzliche Module der XHTMLModularisierung wie dem Scripting-Modul erweitert werden. Die Intention von XHTML Basic ist es nicht, zuknftige Sprachen zu limitieren. Weil aber die Charakteristiken von HTML 4 (Rahmen, komplexe Tabellen, bestimmte Attribut-Event-Handler usw.) fr Clients wie Desktop-Computer entwickelt wurden, hat sich gezeigt, dass sie nicht fr kleinere Ger@te geeignet sind. XHTML Basic wird erweitert und ausgebaut werden. XHTML von gemeinsamen und grundlegenden Eigenschaften aus zu erweitern, anstatt von fast identischen Teilmengen oder zu umfangreichen Funktionen in HTML 4, wird sowohl fr die Interoperabilit@t im Web als auch fr die Skalierbarkeit von Vorteil sein. Verglichen mit der reichhaltigen Funktionalit@t von HTML 4, sieht XHTML Basic vielleicht wie ein Rckschritt aus, aber in der Tat sind es zwei Schritte nach vorn: Auf der einen Seite fr Clients, die viele Eigenheiten von HTML 4 nicht ben=tigen, und auf der anderen Seite fr Entwickler, die nur eine XHTML-Teilmenge anstatt viele bekommen.

1.3 Gr-nde f-r Entwurfsentscheidungen Dieser Abschnitt erkl@rt, warum bestimmte HTML-Eigenschaften nicht Teil von XHTML Basic sind.

1.3.1 Stylesheets Das style-Element wird nicht untersttzt. Externe Stylesheets sind erforderlich. Das linkElement kann zum Aufruf von externen Stylesheets verwendet werden. Die Elemente div, span und class werden untersttzt, um Style-Informationen mit der Struktur zu verbinden. Die Trennung zwischen Struktur und Darstellung erlaubt Benutzerschnittstellen, Stylesheets herunterzuladen, falls sie Stylesheets untersttzen. Benutzerschnittstellen, die keine Stylesheets untersttzen, k=nnen das externe Stylesheet ignorieren. Das media-Attribut kann zur Auswahl des geeigneten Stylesheets verwendet werden. Fr weitere Details konsultieren Sie den Abschnitt ber „Medientypen“ in der „HTML 4.01-Spezifikation“ ([HTML4], Abschnitt 14.2.4).

Gr#nde f#r Entwurfsentscheidungen

< 501 >

XHTML Basic

·· ·· ··

Page size: 168,00 x 240,00 mm

Sandini Bib

1.3.2 Skripte und Ereignisse Die Elemente script und noscript werden nicht untersttzt. Normalerweise haben kleine Endger@te begrenzten Speicher und begrenzte Rechenleistung. Die Ausfhrung von Skriptprogrammen wird eventuell nicht untersttzt. Der Inhalt sollte auch lesbar sein, wenn Skripte nicht ausgefhrt werden. Event-Handler-Attribute zur Einbindung von Script-Programmen werden nicht untersttzt. Events sind ger@teabh@ngig. Ein „Eingehender Anruf“-Event ist nicht fr die Ausfhrung in einem Fernsehger@t bestimmt. Ein bergreifender Event-Handling-Mechanismus wird angemessener sein, als die Event-Namen in der Dokumenttyp-Definition festzuschreiben.

1.3.3 Darstellung Viele einfache Web-Clients k=nnen nur Nicht-Proportionalschrift (Monospace) anzeigen. Bidirektionaler Text, fettgedruckte Schrift und andere erweiterte Schriftelemente werden nicht untersttzt. Es wird empfohlen, dass Stylesheets fr eine Darstellung benutzt werden, die fr das Endger@t angemessen ist.

XHTML Basic

1.3.4 Formulare Grundlegende XHTML-Formulare ([XHTMLMOD], Abschnitt 5.5.1) werden untersttzt. Weil nur Ger@te mit einem lokalen Dateisystem Vorteile aus Datei- oder Graphikeingabetypen in Formularen ziehen k=nnen, sind sie nicht Teil der Grundformulare. Ebenso sollten Autoren daran denken, dass die Benutzer vielleicht nicht in der Lage sind, viele Zeichen in einige Ger@te einzugeben (z. B. in Mobiltelefonen).

1.3.5 Tabellen Grundlegende XHTML-Tabellen ([XHTMLMOD], Abschnitt 5.6.1) werden untersttzt, aber Tabellen k=nnen auf kleinen Ger@ten schwer darstellbar sein. Es ist erforderlich, dass Autoren den „Web Content Accessibility Guidelines 1.0“ zur Erzeugung zug@nglicher Tabellen ([WCAG10], Guideline 5) folgen. Beachten Sie, dass in grundlegenden Tabellenmodulen das Verschachteln von Tabellen verboten ist.

1.3.6 Frames Frames werden nicht untersttzt. Frames h@ngen von der Bildschirmschnittstelle ab und sind eventuell auf einigen kleine Endger@te wie Telefonen, Pagern und Uhren nicht anwendbar.

< 502 >

Einleitung

Page size: 168,00 x 240,00 mm

Sandini Bib

2 Konformit.t Dieser Abschnitt ist normativ.

2.1 Konformit.t der Dokumente Ein Dokument, das konform zu XHTML Basic ist, muss nur die Eigenschaften, die in dieser Spezifikation als zwingend erforderlich beschrieben werden, besitzen. Solch ein Dokument muss jedem einzelnen der folgenden Kriterien entsprechen: 1. Das Dokument muss den Anforderungen im Anhang B entsprechen. 2. Das Wurzelelement des Dokuments muss sein. 3. Der Name des voreingestellten Namensraums des Wurzelelements muss der XHTMLNamensraumname sein, http://www.w3.org/1999/xhtml. 4. Es muss eine DOCTYPE-Deklaration im Dokument vor dem Wurzelelement existieren. Wenn vorhanden, muss der Public Identifier in der DOCTYPE-Deklaration auf die DTD verweisen, die im Anhang B zu finden ist, unter Verwendung seines Formal Public Identifiers. Der System Identifier darf geeignet angepasst werden.

5. Die interne DTD-Teilmenge darf keine Parameter-Entities der DTD berschreiben.

2.2 Konformit.t der Benutzerschnittstelle Die Benutzerschnittstelle muss dem Abschnitt „Konforme Benutzerprogramme“ der "XHTML 1.0 Spezifikation" ([XHTML1], Abschnitt 3.2) folgen.

3 Der XHTML-Basic-Dokumenttyp Dieser Abschnitt ist normativ. Der XHTML-Basic-Dokumenttyp ist definiert als eine Zusammenstellung von XHTML-Modulen. Alle XHTML-Module sind in der Spezifikation „Modularisierung von XHTML“ [XHTMLMOD] definiert. XHTML Basic besteht aus den folgenden XHTML-Modulen: Strukturmodule* body, head, html, title

Textmodule* abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var

Hypertext Module* a

Konformit,t

< 503 >

XHTML Basic

Page size: 168,00 x 240,00 mm

Sandini Bib

Listenmodule* dl, dt, dd, ol, ul, li

Grundlegende Formularmodule form, input, label, select, option, textarea

Grundlegende Tabellenmodule caption, table, td, th, tr

Graphikmodule img

Objektmodule object, param

Metainformationsmodule meta

Verweismodule link

Base-Module base

XHTML Basic

(*) = Dieses Modul ist ein erforderliches „XHTML Host Language“-Modul. Eine XML 1.0 DTD ist im Anhang B verfgbar. Anmerkung: Weil die „HTML Event Handler“-Attribute nicht Teil von XHTML Basic sind, funktionieren Formularkontrollelemente außerhalb von Formularen eventuell nicht, wie vom Benutzer erwartet. n

4 Wie XHTML Basic verwendet wird Obwohl die Sprache XHTML Basic so verwendet werden kann, wie sie ist – als eine einfache XHTML-Sprache mit Text, Verweisen und Graphiken – ist die Intention der einfachen Gestaltung die Verwendung als Host Language. Eine Host Language kann verschiedenartige Vokabeln, alle zusammengewrfelt in einem Dokument, enthalten. Es ist natrlich, das XHTML die Host Language ist, weil die meisten Web-Entwickler an sie gew=hnt sind. Wenn Auszeichnungen aus anderen Sprachen zu XHTML Basic hinzugefgt werden, wird der resultierende Dokumenttyp eine Erweiterung von XHTML Basic sein. Autoren k=nnen fr XHTML Basic entwickeln, oder sie nutzen den Vorteil der Erweiterungen. Das Ziel von XHTML Basic ist es, eine allgemeine Sprache vorzulegen, die von verschiedensten Benutzerschnittstellen untersttzt wird.

< 504 >

Wie XHTML Basic verwendet wird

Page size: 168,00 x 240,00 mm

Sandini Bib

5 Danksagung

XHTML Basic

Diese Spezifikation wurde von der W3C HTML Working Group erarbeitet. Die Mitglieder waren: Steven Pemberton, CWI (HTML Working Group Chair); Robert Adams, Intel (bis November 2000); Murray Altheim, Sun Microsystems; Takuya Asada, W3C (bis Oktober 2000); Daniel Austin, Mozquito Technologies; Mark Baker, Sun Microsystems; Wayne Carr, Intel; Tantek kelik, Microsoft; Andrew W. Donoho, IBM; Herman Elenbaas, Philips Electronics; Beth Epperson, Netscape/AOL; Masayasu Ishikawa, W3C (HTML Activity Lead); Shin'ichi Matsui, Panasonic; Shane McCarron, Applied Testing and Technology; Ann Navarro, WebGeek, Inc.; Dave Raggett, W3C/Openwave Systems; Sebastian Schnitzenbaumer, Mozquito Technologies (bis September 2000); Peter Stark, Ericsson; Michel Suignard, Microsoft; Markku Vartiainen, Openwave Systems; Jeremy Wadsworth, Quark Inc.; Malte Wedel, Mozquito Technologies; Linda Welsh, Intel; Ted Wugofski, Openwave Systems Dank an Gary Adams (Sun Microsystems), Jonny Axelsson (Metastasis design), Peter Chen (Philips), Dan Connolly (W3C), John Cowan (Reuters), Martin J. Drst (W3C), Johan Hjelm (Ericsson), Ian Jacobs (W3C), Susan Lesch (W3C), Louis Theran (Nokia), Quinton Zondervan (Lotus), Mitglied der „W3C Mobile Access Interest Group“, der „W3C Synchronized Multimedia Working Group“, der „W3C WAI Protocols and Formats Working Group“ und dem WAP-Forum, fr die Beitr@ge, die berprfung und die Kommentare zu diesem Dokument.

A Referenzen A.1 Normative Referenzen [HTML4] "HTML 4.01 Spezifikation", W3C Recommendation, D. Raggett, A. Le Hors, I. Jacobs, Editoren, 24. Dezember 1999. Verfgbar unter: http://www.edition-w3c.de/TR/1999/REChtml401-19991224 Die aktuelle Version ist verfgbar unter: http://www.edition-w3c.de/TR/html4 [XHTML1] "XHTML 1.0: The Extensible HyperText Markup Language - A Reformulation of HTML 4 in XML 1.0", W3C Recommendation, Steven Pemberton et al., 26. Januar 2000. Verfgbar unter: http://www.edition-w3c.de/TR/2000/REC-xhtml1-20000126 Die aktuelle Version ist verfgbar unter: http://www.edition-w3c.de/TR/xhtml1 [XHTMLMOD] "Modularisierung von XHTML", W3C Candidate Recommendation, R. Adams, M. Altheim, F. Boumphrey, S. Dooley, S. McCarron, S. Schnitzenbaumer, T. Wugofski, Editoren, 20. Oktober 2000. Verfgbar unter: http://www.edition-w3c.de/TR/2000/CR-xhtmlmodularization-20001020 Die aktuelle Version ist verfgbar unter: http://www.edition-w3c.de/TR/xhtml- modularization

Danksagung

< 505 >

Page size: 168,00 x 240,00 mm

Sandini Bib

[XML] "Extensible Markup Language (XML) 1.0 (Zweite Ausgabe)", W3C Recommendation, T. Bray, J. Paoli, C. M. Sperberg-McQueen, E. Maler, Editoren, 6. Oktober 2000. Verfgbar unter: http://www.edition-w3c.de/TR/2000/REC-xml-20001006 Die aktuelle Version ist verfgbar unter: http://www.edition-w3c.de/TR/REC-xml

XHTML Basic

A.2 Informelle Referenzen [CHTML] "Compact HTML fr Kleinstinformationsger@te", W3C Note, T. Kamada, 9. Februar 1998. Verfgbar unter: http://www.w3.org/TR/1998/NOTE-compactHTML-19980209 [GUIDELINES] "HTML 4.0 Guidelines for Mobile Access, W3C Note, T. Kamada, T. Asada, M. Ishikawa, S. Matsui, Editoren, 15. M@rz 1999. Verfgbar unter: http://www.w3.org/TR/1999/NOTEhtml40-mobile-19990315 Die aktuelle Version ist verfgbar unter: http://www.w3.org/TR/NOTE-html40-mobile [WCAG10] "Web Content Accessibility Guidelines 1.0", W3C Recommendation, W. Chisholm, G. Vanderheiden, I. Jacobs, Editoren, 5. Mai 1999. Verfgbar unter: http://www.edition-w3c.de/ TR/1999/WAI-WEBCONTENT-19990505 Die aktuelle Version ist verfgbar unter: http://www.edition-w3c.de/TR/WCAG10 [WML] "Wireless Markup Language Specification", WAP-Forum Ltd. Verfgbar unter: http://www.wapforum.org/what/technical.htm

B XHTML-BasicDokumenttyp-Definition Dieser Anhang ist normativ.

B.1 "SGML Open Catalog Entry" f-r XHTML Basic Dieser Abschnitt enth@lt die "SGML Open Catalog-format Definition" der "XHTML Basic FPI". - - .......................................................................... - - - File catalog ............................................................ - - - XHTML Basic Catalog Data File Revision: $Id: xhtml-basic10.cat,v 2.4 2000/12/18 21:42:58 mimasa Exp $ SMI See "Entity Management", SGML Open Technical Resolution 9401 for detailed information on supplying and using catalog data. This document is available from OASIS at URL:

< 506 >

XHTML-Basic- Dokumenttyp-Definition

Page size: 168,00 x 240,00 mm

Sandini Bib

-- - .......................................................................... - - - SGML declaration associated with XML .................................... - OVERRIDE YES SGMLDECL "xml1.dcl" - - :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: - - - XHTML Basic DTD modular driver file ..................................... - PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"

"xhtml-basic10.dtd"

- - XHTML Basic framework module ............................................. - PUBLIC "-//W3C//ENTITIES XHTML Basic 1.0 Document Model 1.0//EN" "xhtml-basic10-model-1.mod"

- - End of catalog data ..................................................... - - - .......................................................................... - -

Dieser Abschnitt enth@lt den Treiber fr die XHTML-Basic-Dokumenttyp-Implementation in Form einer XML-DTD. Sie unterliegt den XHTML-Modul-Implementationen, definiert in [XHTMLMOD].



XHTML Basic

B.2 XHTML Basic-Treiber

Page size: 168,00 x 240,00 mm

Sandini Bib

Editors: Revision:

Murray M. Altheim Peter Stark

$Id: xhtml-basic10.dtd,v 2.13 2000/12/18 12:56:23 mimasa Exp $

SMI - ->









< 508 >

XHTML-Basic- Dokumenttyp-Definition

Page size: 168,00 x 240,00 mm

Sandini Bib

"%XHTML.bidi;" >

%xhtml-framework.mod;

%xhtml-text.mod;

XHTML Basic

%xhtml-hypertext.mod;

%xhtml-list.mod;



%xhtml-image.mod;]]>

%xhtml-table.mod;]]>



Page size: 168,00 x 240,00 mm

Sandini Bib

PUBLIC "-//W3C//ELEMENTS XHTML Basic Forms 1.0//EN" "xhtml-basic-form-1.mod" > %xhtml-form.mod;]]>

%xhtml-link.mod;]]>

XHTML Basic



%xhtml-meta.mod;]]>

%xhtml-base.mod;]]>

%xhtml-param.mod;]]>

%xhtml-object.mod;]]>

%xhtml-struct.mod;

< 510 >

XHTML-Basic- Dokumenttyp-Definition

Page size: 168,00 x 240,00 mm

Sandini Bib

B.3 XHTML-Basic-Anpassungen Ein Dokumenttyp der XHTML-Familie (so wie XHTML Basic) muss das Inhaltsmodell definieren, das er benutzt. Das wird durch ein seperates "Content Model"-Modul verwirklicht, das durch das "XHTML Modular Framework" instantisiert wird. Das "Content Model"-Modul und der XHTML-Basic-Treiber arbeiten zusammen, um die Modulimplementationen an die spezifischen Erfordernisse des Dokumenttyps anzupassen. Das "Content Model"-Modul fr XHTML Basic ist wie folgt definiert:









XHTML-Basic-Anpassungen

< 511 >

XHTML Basic

PUBLIC "-//W3C//ENTITIES XHTML Basic 1.0 Document Model 1.0//EN" SYSTEM "http://www.w3.org/TR/xhtml-basic/xhtml-basic10-model-1.mod"

Page size: 168,00 x 240,00 mm

Sandini Bib





XHTML Basic









< 512 >

XHTML-Basic- Dokumenttyp-Definition

Page size: 168,00 x 240,00 mm

Sandini Bib





XHTML Basic



XHTML-Basic-Anpassungen

< 513 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

E

< XHTML 1.1 Modulbasiertes XHTML >

Page size: 168,00 x 240,00 mm

Sandini Bib

XHTML 1.1 - Modulbasiertes XHTML Deutsche bersetzung 7. Januar 2003 Diese Version: http://www.edition-w3c.de/TR/2001/REC-xhtml11-20010531 Aktuelle Version: http://www.edition-w3c.de/TR/xhtml11 bersetzer: Stefan Mintert, mintert.com

XHTML 1.1 - Modulbasiertes XHTML

Bei diesem Dokument handelt es sich um eine bersetzung eines W3C-Textes. Dieser Text ist urheberrechtlich geschtzt; bitte beachten Sie die nachfolgenden Hinweise des Originaldokuments. Die Rechte an der bersetzung liegen bei den bersetzern und dem Verlag Addison-Wesley. Die bersetzung hat keine durch das W3C legitimierte, normative Wirkung. Das einzige maßgebliche Dokument ist das englische Original. Bitte senden Sie Fehler und Korrekturen zur deutschen Fassung an die bersetzer. Kommentare der bersetzer, die als solche gekennzeichnet sind, unterliegen dem Urheberrecht der bersetzer. Sie sind nicht Bestandteil des Ursprungsdokuments.

XHTML 1.1 – Modulbasiertes XHTML W3C Recommendation 31. Mai 2001 Diese Version: http://www.w3.org/TR/2001/REC-xhtml11-20010531 (Einzelne Datei, PostScript-Version, PDF-Version, ZIP-Archiv, Gzip/TAR-Archiv) Aktuellste Version: http://www.w3.org/TR/xhtml11 Vorherige Version: http://www.w3.org/TR/2001/PR-xhtml11-20010406 Herausgeber: Murray Altheim, Sun Microsystems Shane McCarron, Applied Testing and Technology Copyright L 2001 W3CM (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.

< 516 >

XHTML 1.1 - Modulbasiertes XHTML

Page size: 168,00 x 240,00 mm

Sandini Bib

Zusammenfassung Diese Empfehlung definiert einen neuen XHTML-Dokumenttyp, der auf dem Modulrahmenwerk und den Modulen basiert, die in „Modularisierung von XHTML“ [XHTMLMOD] definiert sind. Der Zweck dieses Dokumenttyps besteht darin, als Basis fr zuknftige, erweiterte Dokumenttypen der XHTML-Familie zu dienen. Zudem soll er einen konsistenten, nach vorne gerichteten Dokumenttyp darstellen, der sauber von den missbilligten Altlasten aus HTML 4 [HTML4] getrennt ist, die in die Dokumenttypen von XHTML 1.0 [XHTML1] bernommen wurden. Der hier definierte Dokumenttyp ist im Wesentlichen eine Neuformulierung von XHTML 1.0 Strict unter Verwendung von XHTML-Modulen. Das bedeutet, dass viele F@higkeiten, die in anderen Dokumenttypen der XHTML-Familie verfgbar sind (zum Beispiel XHTMLFrames), hier fehlen. Diese anderen F@higkeiten sind als Module verfgbar, die in der Modularisierung von XHTML definiert sind. Es steht Dokumentautoren frei, Dokumenttypen auf Basis von XHTML 1.1 zu bilden, die diese F@higkeiten besitzen (siehe [XHTMLMOD], um zu erfahren, wie man neue Dokumenttypen erstellt).

Dieser Abschnitt beschreibt den Status dieses Dokuments zum Zeitpunkt seiner Ver=ffentlichung. Andere Dokumente k=nnen dieses Dokument ersetzen. Der aktuelle Status dieser Dokumentreihe wird vom W3C betreut. Dieses Dokument wurde von W3C-Mitglieder und anderen Interessierten begutachtet, und es wurde vom Direktor als W3C Recommendation gebilligt. Es handelt sich um ein stabiles Dokument und kann als Referenzmaterial verwendet oder als normative Referenz in anderen Dokumenten zitiert werden. Bei der Herstellung der Recommendation ist es die Rolle des W3C, die Aufmerksamkeit auf diese Spezifikation zu lenken und ihre Verbreitung zu f=rdern. Das verbessert die Funktionsweise und Interoperabilit@t des Web. Dieses Dokument wurde von der W3C HTML Working Group (www.w3.org/MarkUp/ Group/; nur fr Mitglieder: cgi.w3.org/MemberAccess/AccessRequest) als Teil der W3C HTML Activity produziert. Die Ziele der HTML Working Group werden in der HTML Working Group charter (www.w3.org/MarkUp/2000/Charter) diskutiert. Der W3C-Kontakt fr HTML ist Masayasu Ishikawa ([email protected]). Die =ffentliche Diskussion von HTML findet auf [email protected] statt (Archiv: lists.w3.org/ Archives/Public/www-html/). Zur Anmeldung schicken Sie bitte eine Mail mit dem Wort subscribe im Subject an [email protected]. Bitte berichten Sie Fehler in diesem Dokument an [email protected] (Archiv: lists.w3.org/Archives/Public/www-html-editor/). Die Liste der bekannten Fehler in dieser Spezifikation steht unter http://www.w3.org/2001/05/REC-xhtml11-20010531-errata zur Verfgung. Die englische Version dieser Spezifikation ist die einzige normative Version. Informationen ber bersetzungen von diesem Text sind unter http://www.w3.org/MarkUp/translations zu finden. Eine Liste aktueller W3C Recommendations und anderer technischer Dokumente befindet sich unter http://www.w3.org/TR.

Zusammenfassung

< 517 >

XHTML 1.1 - Modulbasiertes XHTML

Status dieses Dokuments

Page size: 168,00 x 240,00 mm

Sandini Bib

1 Einf-hrung

XHTML 1.1 - Modulbasiertes XHTML

Dieser Abschnitt ist normativ. Mit der Einfhrung der XHTML-Familie aus Modulen und Dokumenttypen, hat das W3C der Gemeinschaft der Inhalteschaffenden geholfen, aus den Tagen der verstmmelten, nicht standardkonformen Auszeichnungen in die wohlgeformte, gltige Welt von XML [XML] voranzuschreiten. In XHTML 1.0 war dieser Schritt dadurch beschr@nkt, dass es eine einfache Migration von bestehenden, auf HTML 4 (oder frheren Versionen) basierenden Inhalten hin zu XHTML und XML geben sollte. Mit dem Auftauchen der in Modularisierung von XHTML definierten XHTML-Module hat das W3C die missbilligten Elemente und Attribute aus der XHTML-Familie entfernt. Diese Elemente und Attribute dienten vor allem der Darstellung, die besser durch Stylesheet oder client-spezifisches Verhalten geregelt wird. In der Zukunft werden Dokumenttypen der XHTML-Familie auf dieser neuen, auf strukturelle Funktionen ausgelegten Sammlung basieren. In dieser Spezifikation hat die HTML-Arbeitsgruppe des W3C einen ersten Dokumenttyp definiert, der auf Modulen allein aufsetzt. Er ist entworfen, um auf ein breites Spektrum von Ger@ten bertragbar zu sein und um auf den Großteil des Internetinhalts anwendbar zu sein. Autoren, die ihren Inhalt auf den in dieser Spezifikation formulierten Funktionsumfang sttzen, k=nnen sicher sein, dass er auf alle zur XHTML-Familie konformen Benutzerprogramme bertragbar ist.

2 Definition der Konformit.t Dieser Abschnitt ist normativ. Die Worte „muss“, „darf nicht“, „erforderlich“ (required), „soll“, „soll nicht“, „sollte“, „empfohlen“, „darf“ und „optional“ in diesem Dokument sind so zu interpretieren, wie es in [RFC2119] beschrieben ist.

2.1 Dokumentkonformit.t Diese Version von XHTML gibt die Definition fr streng konforme XHTML-Dokumente. Dokumente sind auf Elemente und Attribute aus dem XHTML-Namensraum beschr@nkt.

2.1.1 Streng konforme Dokumente Ein streng konformes XHTML 1.1-Dokument ist ein Dokument, fr das nur solche Eigenschaften erforderlich sind, die in dieser Spezifikation als zwingend beschrieben sind. Ein solches Dokument muss allen folgenden Kriterien gengen: 1. Das Dokument muss konform zu den in Anhang C formulierten Beschr@nkungen sein. 2. Das Wurzelelement des Dokuments muss lauten. 3. Das Wurzelelement des Dokuments muss den XHTML-Namensraum im xmlns-Attribut angeben [XMLNAMES]. Der Namensraumbezeichner fr XHTML lautet http://www.w3.org/ 1999/xhtml.

< 518 >

Einf#hrung

Page size: 168,00 x 240,00 mm

Sandini Bib

4. Es muss im Dokument vor dem Wurzelelement eine DOCTYPE-Deklaration geben. Falls vorhanden, muss der Public Identifier in der DOCTYPE-Deklaration die in Anhang C enthaltene DTD ber deren Formal Public Identifier referenzieren. Der System Identifier darf geeignet modifiziert werden.

Hier ist ein Beispiel eines XHTML 1.1-Dokuments:

Beachten Sie, dass in diesem Beispiel die XML-Deklaration enthalten ist. Eine XML-Deklaration, wie die obige, ist nicht in allen XML-Dokumenten erforderlich. Autoren von XHTML-Dokumenten sind nachdrcklich dazu aufgefordert, XML-Deklarationen in all ihren Dokumenten zu verwenden. Eine solche Deklaration ist erforderlich, falls die Zeichenkodierung des Dokuments eine andere als die vorgegebenen UTF-8 oder UTF-16 sind.

2.2 Konformit.t eines Benutzerprogramms Ein konformes Benutzerprogramm muss alle Konformit@tsanforderungen fr Benutzerprogramme erfllen, die in [XHTMLMOD] definiert sind.

3 Der XHTML 1.1-Dokumenttyp Dieser Abschnitt ist normativ. Der XHTML 1.1-Dokumenttyp ist ein voll funktionsf@higer Dokumenttyp mit umfangreichen semantischen Eigenschaften. Er ist in seinem Funktionsumfang jedoch nicht so variantenreich wie die Transitional- und Frameset-Dokumenttypen von XHTML 1.0. Diese beiden Dokumenttypen definieren viele pr@sentationsorientierte Aspekte, die durch Stylesheets oder @hnliche Mechanismen besser abgedeckt werden. Da der XHTML 1.1-Dokumenttyp ausschließlich auf den F@higkeiten der XHTML-Module [XHTMLMOD] fußt, enth@lt er außerdem keine der missbilligten Funktionen von XHTML 1.0 oder HTML 4. Trotz (oder vielleicht wegen) diesen Einschr@nkungen stellt der XHTML 1.1-Dokumenttyp eine solide Grundlage fr zuknftige Dokumenttypen dar, die sich an Umgebungen mit variantenreichen Benutzerprogrammen richten.

Konformit,t eines Benutzerprogramms

< 519 >

XHTML 1.1 - Modulbasiertes XHTML



Virtual Library

Moved to vlib.org.

Page size: 168,00 x 240,00 mm

Sandini Bib

Der XHTML 1.1-Dokumenttyp besteht aus den folgenden XHTML-Modulen. Die zu den Modulen geh=renden Elemente, Attribute und minimalen Inhaltsmodelle sind in „Modularisierung von XHTML“ [XHTMLMOD]) definiert. Die Elemente sind hier nur zur Information aufgefhrt; maßgeblich sind die Definitionen in „Modularisierung von XHTML“. In der Online-Version dieses Dokuments sind die Modulnamen in der nachfolgenden Aufstellung mit den Definitionen der Module in der aktuellen Version von „Modularisierung von XHTML“ verlinkt. Strukturmodul* body, head, html, title

Textmodul* abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var

Hypertext-Modul* a

Listenmodul* dl, dt, dd, ol, ul, li

Objektmodul object, param

Darstellungsmodul b, big, hr, i, small, sub, sup, tt

Edit-Modul

XHTML 1.1 - Modulbasiertes XHTML

del, ins

Modul f-r bidirektionalen Text bdo

Formularmodul button, fieldset, form, input, label, legend, select, optgroup, option, textarea

Tabellenmodul caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr

Bildmodul img

Modul f-r client-seitige Image Maps area, map

Modul f-r server-seitige Image Maps Attribute ismap on img Modul f-r eingebaute Ereignisse Events attributes Metainformationsmodul meta

Scripting-Modul noscript, script

Stylesheet-Modul style element Style-Attributmodul Deprecated style attribute

< 520 >

Der XHTML 1.1-Dokumenttyp

Page size: 168,00 x 240,00 mm

Sandini Bib

Link-Modul link

Base-Modul base

XHTML benutzt auch das „Ruby Annotation“-Modul gem@ß Definition in [RUBY]: Ruby Annotation-Modul ruby, rbc, rtc, rb, rt, rp

Es gibt keine zus@tzlichen Definitionen, die fr diesen Dokumenttyp erforderlich w@ren. Eine Implementierung dieses Dokumenttyps in Form einer XML-DTD ist in Anhang C definieren.

Dieser Anhang ist informell. Dieser Anhang beschreibt Unterschiede zwischen XHTML 1.1 und XHTML 1.0 Strict. XHTML 1.1 stellt eine Abkehr sowohl von HTML 4 als auch von XHTML 1.0 dar. Am auff@lligsten ist das Entfernen von missbilligten Eigenschaften. Im Allgemeinen besteht die Strategie darin, eine Auszeichnungssprache zu definieren, die umfangreiche strukturierende Eigenschaften besitzt, sich zur Darstellung aber auf Stylesheets verl@sst. Die Unterschiede k=nnen wie folgt zusammengefasst werden: 1. Von jedem Element wurde das lang-Attribut zugunsten des xml:lang-Attributs (gem@ß Definition in [XHTMLMOD]) entfernt. 2. Von den Elementen a und map wurde das name-Attribut zugunsten des id-Attributs (gem@ß Definition in [XHTMLMOD]) entfernt. 3. Die ruby-Elementsammlung (gem@ß Definition in [RUBY]) wurde hinzugefgt.

B Bibliographie Dieser Anhang ist normativ.

B.1 Normative Quellen [HTML4] HTML 4.01 Specification, W3C Recommendation, Dave Raggett, Arnaud Le Hors, Ian Jacobs, 24. Dezember 1999. Siehe: http://www.edition-w3c.de/TR/1999/REC-html401-19991224

Bnderungen gegen#ber XHTML 1.0 Strict

< 521 >

XHTML 1.1 - Modulbasiertes XHTML

A Xnderungen gegen-ber XHTML 1.0 Strict

Page size: 168,00 x 240,00 mm

Sandini Bib

[XHTML1] XHTML 1.0: The Extensible HyperText Markup Language, W3C Recommendation, Steven Pemberton et al., 26. Januar 2000. Siehe: http://www.edition-w3c.de/TR/2000/REC-xhtml1-20000126 [XHTMLMOD] Modularization of XHTML, W3C Recommendation, Murray Altheim et al., 10. April 2001 Siehe: http://www.edition-w3c.de/TR/2001/REC-xhtml-modularization-20010410 [XML] Extensible Markup Language (XML) 1.0 (Second Edition), W3C Recommendation, Tim Bray, Jean Paoli, C. M. Sperberg-McQueen, Eve Maler, 6. Oktober 2000. Siehe: http://www.edition-w3c.de/TR/2000/REC-xml-20001006 [RUBY] Ruby Annotation, W3C Recommendation, Marcin Sawicki et al., 31. Mai 2001. Siehe: http://www.edition-w3c.de/TR/2001/REC-ruby-20010531

XHTML 1.1 - Modulbasiertes XHTML

B.2 Informelle Quellen [CATALOG] Entity Management: OASIS Technical Resolution 9401:1997 (Amendment 2 to TR 9401), Paul Grosso, Chair, Entity Management Subcommittee, SGML Open, 10. September 1997. Siehe: http://www.oasis-open.org/html/a401.htm [RFC2119] "Key words for use in RFCs to indicate requirement levels", RFC 2119, S. Bradner, M@rz 1997. Available at: http://www.ietf.org/rfc/rfc2119.txt [XMLNAMES] "Namespaces in XML", W3C Recommendation, Tim Bray, Dave Hollander, Andrew Layman, 14. Januar 1999. Available at: http://www.edition-w3c.de/TR/1999/REC-xml-names-19990114

C XHTML 1.1-Dokumenttyp-Definition Dieser Anhang ist normativ.

C.1 SGML Open Catalog-Eintrag f-r XHTML 1.1 Dieser Abschnitt enth@lt die SGML Open Catalog-Definition [CATALOG] fr den XHTML 1.1 FPI. - - .......................................................................... - - - File catalog ............................................................ - - - XHTML 1.1 Catalog Data File

< 522 >

XHTML 1.1-Dokumenttyp-Definition

Page size: 168,00 x 240,00 mm

Sandini Bib

Revision: @(#)xhtml11.cat 1.9 2001/04/04 SMI See "Entity Management", SGML Open Technical Resolution 9401 for detailed information on supplying and using catalog data. This document is available from OASIS at URL:

-- - .......................................................................... - - - SGML declaration associated with XHTML .................................. - OVERRIDE YES SGMLDECL "xml1.dcl" - - :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: - - - XHTML 1.1 DTD modular driver file ....................................... - - - note that this uses the local, flattened version of the DTD. If you want your catalog to use the master version of the XHTML Modules, change the entry to reference xhtml11.dtd instead of xhtml11-flat.dtd -"xhtml11-flat.dtd"

- - XHTML 1.1 framework modules .............................................. - PUBLIC "-//W3C//ENTITIES XHTML 1.1 Document Model 1.0//EN" "xhtml11-model-1.mod" - - End of catalog data ..................................................... - - - .......................................................................... - -

C.2 XHTML 1.1-Treiber Dieser Abschnitt enth@lt den Treiber fr die XML-DTD-Implementation des XHTML 1.1Dokumenttyps. Sie basiert auf den XHTML-Modulimplementierungen gem@ß Definition in [XHTMLMOD] und in [RUBY].



XHTML 1.1 - Modulbasiertes XHTML

PUBLIC "-//W3C//DTD XHTML 1.1//EN"

Page size: 168,00 x 240,00 mm

Sandini Bib

Recherche en Informatique et en Automatique, Keio University). All Rights Reserved. Permission to use, copy, modify and distribute the XHTML DTD and its accompanying documentation for any purpose and without fee is hereby granted in perpetuity, provided that the above copyright notice and this paragraph appear in all copies. The copyright holders make no representation about the suitability of the DTD for any purpose. It is provided \;as is\( without expressed or implied warranty. Author: Revision:

Murray M. Altheim $Id: xhtml11.dtd,v 1.21 2001/05/29 16:37:01 ahby Exp $

- ->







< 524 >

XHTML 1.1-Dokumenttyp-Definition

Page size: 168,00 x 240,00 mm

Sandini Bib





]]>



%xhtml-inlstyle.mod;]]>



%xhtml-framework.mod;]]>

]]>



XHTML 1.1 - Modulbasiertes XHTML

Page size: 168,00 x 240,00 mm

Sandini Bib

PUBLIC "-//W3C//ELEMENTS XHTML Text 1.0//EN" "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-text-1.mod" > %xhtml-text.mod;]]>

%xhtml-hypertext.mod;]]>

%xhtml-list.mod;]]>

XHTML 1.1 - Modulbasiertes XHTML



%xhtml-edit.mod;]]>

%xhtml-bdo.mod;]]>



%xhtml-ruby.mod;]]>

%xhtml-pres.mod;]]>

< 526 >

XHTML 1.1-Dokumenttyp-Definition

Page size: 168,00 x 240,00 mm

Sandini Bib



%xhtml-link.mod;]]>

%xhtml-meta.mod;]]>



%xhtml-script.mod;]]>

%xhtml-style.mod;]]>

%xhtml-image.mod;]]>

%xhtml-csismap.mod;]]>

XHTML 1.1-Treiber

< 527 >

XHTML 1.1 - Modulbasiertes XHTML



%xhtml-base.mod;]]>

Page size: 168,00 x 240,00 mm

Sandini Bib



%xhtml-ssismap.mod;]]>

%xhtml-param.mod;]]>

XHTML 1.1 - Modulbasiertes XHTML



%xhtml-object.mod;]]>

%xhtml-table.mod;]]>

%xhtml-form.mod;]]>

%xhtml-legacy.mod;]]>



XHTML 1.1-Dokumenttyp-Definition

Page size: 168,00 x 240,00 mm

Sandini Bib

%xhtml-struct.mod;]]>

C.3 Anpassung f-r XHTML 1.1 Ein Dokumenttyp der XHTML-Familie (so wie XHTML 1.1) muss das von ihm verwendete Inhaltsmodell definieren. Dies geschieht mit einem eigenen Inhaltsmodellmodul, das durch das XHTML-Modulrahmenwerk instanziiert wird. Das Inhaltsmodellmodul und der XHTML 1.1-Treiber (siehe oben) arbeiten zusammen, um die Modulimplementierungen an die dokumenttypspezifischen Erfordernisse anzupassen. Das Inhaltsmodellmodul fr XHTML 1.1 ist im Folgenden definiert:

This is XHTML 1.1, a reformulation of HTML as a modular XML application. Copyright 1998-2001 W3C (MIT, INRIA, Keio), All Rights Reserved. Revision: $Id: xhtml11-model-1.mod,v 1.13 2001/05/29 16:37:01 ahby Exp $ SMI This DTD module is identified by the PUBLIC and SYSTEM identifiers: PUBLIC "-//W3C//ENTITIES XHTML 1.1 Document Model 1.0//EN" SYSTEM "http://www.w3.org/TR/xhtml11/DTD/xhtml11-model-1.mod" Revisions: (none) ....................................................................... - ->

Anpassung f#r XHTML 1.1

< 529 >

XHTML 1.1 - Modulbasiertes XHTML



XHTML 1.1 - Modulbasiertes XHTML









< 530 >

XHTML 1.1-Dokumenttyp-Definition

Page size: 168,00 x 240,00 mm

Sandini Bib







XHTML 1.1 - Modulbasiertes XHTML



Anpassung f#r XHTML 1.1

< 531 >

Page size: 168,00 x 240,00 mm

Sandini Bib



XHTML 1.1 - Modulbasiertes XHTML









< 532 >

XHTML 1.1-Dokumenttyp-Definition

Page size: 168,00 x 240,00 mm

Sandini Bib







.................. - ->



Anpassung f#r XHTML 1.1

< 533 >

Page size: 168,00 x 240,00 mm

Sandini Bib

D Danksagungen

XHTML 1.1 - Modulbasiertes XHTML

Dieser Anhang ist informell. Diese Spezifikation wurde von der HTML Working Group des W3C erstellt. Die Mitglieder dieser Gruppe zum Zeitpunkt der Ver=ffentlichung waren: Steven Pemberton, CWI (HTML Working Group Chair);Murray Altheim, Sun Microsystems; Daniel Austin, Mozquito Technologies; Jonny Axelsson, Opera Software;Mark Baker, Sun Microsystems; Tantek kelik, Microsoft; Doug Dominiak, Openwave Systems; Herman Elenbaas, Philips Electronics; Beth Epperson, Netscape/AOL; Masayasu Ishikawa, W3C (HTML Activity Lead); Shin'ichi Matsui, Panasonic; Shane McCarron, Applied Testing and Technology; Ann Navarro, WebGeek, Inc.; Peter Stark, Ericsson;Michel Suignard, Microsoft;Jeremy Wadsworth, Quark Inc.; Malte Wedel, Mozquito Technologies; Ted Wugofski, Openwave Systems;

< 534 >

Danksagungen

Page size: 168,00 x 240,00 mm

Sandini Bib

F

< Cascading Style Sheets, Level 2 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

Cascading Style Sheets, Level 2

Deutsche bersetzung Diese Version: http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512 Aktuelle Version: http://www.edition-w3c.de/TR/REC-CSS2 bersetzer: Judith Muhr ( bersetzung) Stefan Mintert (Fachlektorat und Kommentierung), mintert.com

Bei diesem Dokument handelt es sich um eine bersetzung eines W3C-Textes. Dieser Text ist urheberrechtlich geschtzt; bitte beachten Sie die nachfolgenden Hinweise des Originaldokuments. Die Rechte an der bersetzung liegen bei den bersetzern und dem Verlag Addison-Wesley. Die bersetzung hat keine durch das W3C legitimierte, normative Wirkung. Das einzige maßgebliche Dokument ist das englische Original. Bitte senden Sie Fehler und Korrekturen zur deutschen Fassung an die bersetzer. Kommentare der bersetzer, die als solche gekennzeichnet sind, unterliegen dem Urheberrecht der bersetzer. Sie sind nicht Bestandteil des Ursprungsdokuments. Diese Ver=ffentlichung ist eine Vorver ffentlichung. Kein Teil dieses Textes darf kopiert werden. Alle Rechte vorbehalten. Nach Abschluss der Arbeit wird das endgltige Dokument unter der oben angegebenen Adresse ver=ffentlicht. Die jetzige Ver=ffentlichung w@hrend der laufenden Arbeit dient zur Information von Interessierten und zur Prfung durch die Fach=ffentlichkeit. Sollten Sie Fehler finden oder Verbesserungsvorschl@ge haben, schicken Sie diese bitte per Mail an Stefan Mintert.

Cascading Style Sheets, Level 2 CSS2-Spezifikation W3C Recommendation 12-May-1998 Diese Version http://www.w3.org/TR/1998/REC-CSS2-19980512 Aktuelle Version http://www.w3.org/TR/REC-CSS2 Vorhergehende Version http://www.w3.org/TR/1998/PR-CSS2-19980324 Herausgeber Bert Bos Hakon Wium Lie Chris Lilley Ian Jacobs

< 536 >

Cascading Style Sheets, Level 2

Page size: 168,00 x 240,00 mm

Sandini Bib

Zusammenfassung Diese Spezifikation definiert Cascading Style Sheets, level 2 (CSS2). CSS2 ist eine Formatierungssprache, die es Autoren und Benutzern gestattet, Formatierungen (zum Beispiel Schriften, Abst@nde und akustische Aspekte) von strukturierten Dokumenten (zum Beispiel HTML-Dokumente und XML-Instanzen) durchzufhren. Mit der Trennung der Pr@sentation eines Dokuments vom Inhalt des Dokuments vereinfacht CSS2 die Erfassung von Web-Dokumenten und die Verwaltung von Sites. CSS2 basiert auf CSS1 (siehe [CSS1]) und mit sehr wenigen Ausnahmen sind alle gltigen CSS1-Stylesheets auch gltige CSS2-Stylesheets. CSS2 untersttzt medienspezifische Stylesheets, so dass Autoren die Darstellung ihrer Dokumente auf visuelle Browser, akustische Ger@te, Drucker, Braille-Ger@te, Handhelds und so weiter zuschneiden k=nnen. Diese Spezifikation untersttzt zudem die Positionierung von Inhalt, herunterladbare Schriften, TabellenLayout, Internationalisierung, automatische Z@hler und Nummerierung, sowie einige Eigenschaften, die mit der Benutzerschnittstelle zu tun haben. Status dieses Dokuments Dieses Dokument wurde von W3C-Mitglieder und anderen Interessierten begutachtet, und es wurde vom Direktor als W3C Recommendation gebilligt. Es handelt sich um ein stabiles Dokument und kann als Referenzmaterial verwendet oder als normative Referenz in anderen Dokumenten zitiert werden. Bei der Herstellung der Recommendation ist es die Rolle des W3C, die Aufmerksamkeit auf diese Spezifikation zu lenken und ihre Verbreitung zu f=rdern. Das verbessert die Funktionsweise und Interoperabilit@t des Web. Eine Liste aktueller W3C Recommendations und anderer technischer Dokumente steht unter http://www.w3.org/TR zur Verfgung. Die =ffentliche Diskussion von CSS-Eigenschaften findet auf [email protected] statt.

Cascading Style Sheets, Level 2

Verf-gbare Formate Die CSS2-Spezifikation steht in folgenden Formaten zur Verfgung: HTML: http://www.w3.org/TR/1998/REC-CSS2-19980512 Textdatei: http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.txt, HTML (gzip/tar-Datei): http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.tgz, HTML (zip-Datei; dies ist eine '.zip'-Datei, keine '.exe'): http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.zip, PostScript-Datei (gzip): http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.ps.gz, PDF-Datei: http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.pdf.

Cascading Style Sheets, Level 2

< 537 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Anmerkung der bersetzer: Die deutsche bersetzung der Spezifikation steht online unter http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512 zur Verfgung. In gedruckter Form ist CSS2 als Teil der edition W3C.de bei Addison-Wesley erschienen. Informationen ber dieses und weitere Bcher der edition W3C.de erhalten Sie unter http://www.edition-w3c.de/.

Im Falle von Abweichungen zwischen den diversen Formen der Spezifikation ist http://www.w3.org/ TR/1998/REC-CSS2-19980512 die maßgebliche Version.

Verf-gbare Sprachen Die englische Version dieser Spezifikation ist die einzige normative Version. bersetzung in andere Sprachen erreichen Sie ber http://www.w3.org/Style/css2-updates/translations.html.

Errata Die Liste bekannter Fehler in dieser Spezifikation steht unter http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html zur Verfgung. Bitte berichten Sie Fehler in diesem Dokument an [email protected].

Anmerkung der bersetzer: Bitte berichten Sie Fehler in dieser bersetzung an

Cascading Style Sheets, Level 2

die bersetzer.

1 Informationen zur CSS2-Spezifikation 1.1 Wie Sie die Spezifikation lesen Diese Spezifikation richtet sich haupts@chlich an zwei Lesergruppen: CSS-Autoren und CSS-Implementierer. Wir hoffen, die Spezifikation versorgt die Autoren mit dem Werkzeug, das sie brauchen, um effiziente, attraktive Dokumente zu erstellen, auf die ein einfacher Zugriff m=glich ist, ohne sie zu sehr mit den Implementierungsdetails von CSS zu belasten. Die Implementierer hingegen sollen hier alles finden, was sie brauchen, um konforme Benutzerprogramme (User Agents) zu schreiben. Die Spezifikation beginnt mit einer allgemeinen Einfhrung in CSS und wird zum Ende hin immer technischer und spezifischer. Damit Sie alle wichtigen Informationen m=glichst schnell finden, wird die einfache Navigation sowohl in der elektronischen als auch in der gedruckten Version durch ein allgemeines Inhaltsverzeichnis, spezielle Inhaltsverzeichnisse am Anfang eines jeden Abschnitts sowie einen Index sichergestellt.

< 538 >

Informationen zur CSS2-Spezifikation

Page size: 168,00 x 240,00 mm

Sandini Bib

Diese Spezifikation wird in zwei Formen bereitgestellt: elektronisch und gedruckt. Obwohl die beiden Darstellungen zweifellos sehr @hnlich sind, werden die Leser einige Unterschiede erkennen. In der gedruckten Version funktionieren beispielsweise (offensichtlich) keine Links, und in der elektronischen Version gibt es keine Seitenzahlen. Bei inhaltlichen Abweichungen ist die elektronische Version die ausschlaggebende.

1.2 Der Aufbau der Spezifikation Die Spezifikation ist in die folgenden Abschnitte unterteilt:

1.2.1 Abschnitt 2: Eine Einf-hrung in CSS2 Die Einfhrung enth@lt einen kurzen berblick ber CSS2 sowie eine Beschreibung der Entwurfsgrundlagen, die hinter CSS2 stehen.

1.2.2 Abschnitt 3 – 20: CSS2-Referenzhandbuch Die CSS-Sprachreferenz bildet einen Großteil des Referenzhandbuchs. Diese Referenz definiert, was in einem CSS2-Stylesheet enthalten sein darf (Syntax, Eigenschaften und Eigenschaftswerte) und wie die Benutzerprogramme diese Stylesheets interpretieren mssen, um konform zur Spezifikation zu sein.

Der Aufbau der Spezifikation

< 539 >

Cascading Style Sheets, Level 2

Anmerkung der bersetzer: An dieser Stelle taucht zum ersten Mal der Begriff „User Agent“ auf. Nach reiflicher berlegung und Abw@gung haben wir uns entschieden, im Deutschen dafr den Begriff „Benutzerprogramm“ zu verwenden. Da unserer Auffassung nach kein deutscher Begriff existiert, der das Bedeutungsspektrum des „User Agent“ besitzt, ist eine Erkl@rung notwendig: Der bekannteste Programmtyp, mit denen Menschen das WWW nutzen und auf Inhalte zugreifen, ist der Web-Browser. Der Browser ist ein Beispiel fr einen User Agent. Der „User Agent“ ist die Verallgemeinerung davon. Ein User Agent ist die Software, die als Vertreter eines menschlichen Benutzers auf die Daten im Web zugreift. Der User Agent kann die Suchmaschine sein, die Daten aus dem Web l@dt, um sie zu indexieren. Damit kommt der „User Agent“ dem Begriff „Client“ sehr nah. W@hrend der „Client“ jedoch auf einen technischen Aspekt abzielt, beschreibt der Begriff „User Agent“ eine Funktion; n@mlich die, dass er im Namen des Benutzers t@tig wird. Im Englischen wird der „Agent“ allgemeiner als im Deutschen benutzt. Aber auch in der deutschen Sprache haben wir Beispiele fr eine Begriffsbedeutung, die mit diesem Fall vergleichbar ist: Wir kennen Agenturen und Theateragenten, die als Vertreter des Knstlers und in seinem Namen t@tig werden. Die gleiche Rolle bernimmt der User Agent im WWW. Da aber die erste Assoziation zum Agenten die des Spions ist, haben wir uns fr den neutralen Begriff „Benutzerprogramm“ entschieden. Dabei sollten Sie als Leser nicht vergessen, dass das Benutzerprogramm auch ein Programm sein kann, dass automatisch im Web nach Daten sucht, oder auch irgendeine Software, die auf die Daten zugreift.

Page size: 168,00 x 240,00 mm

Sandini Bib

1.2.3 Anh.nge Die Anh@nge beschreiben ein Beispiel-Stylesheet fr HTML 4.0, Onderungen im Vergleich zu CSS1, Anmerkungen zu Implementierung und Leistung, die Grammatik von CSS2, eine Liste normativer und informativer Literaturhinweise sowie drei Indizes: einen fr Eigenschaften, einen fr Deskriptoren und einen allgemeinen Gesamtindex.

1.3 Konventionen 1.3.1 Elemente und Attribute der Dokumentsprache

· ·· ·

Namen von CSS-Eigenschaften, Deskriptoren und Pseudo-Klassen sind in einfache Anfhrungszeichen eingeschlossen. CSS-Werte sind in einfache Anfhrungszeichen eingeschlossen. Namen von Elementen der Dokumentsprache sind in Großbuchstaben dargestellt. Namen von Attributen der Dokumentsprache sind in Kleinbuchstaben dargestellt und in doppelte Anfhrungszeichen eingeschlossen.

1.3.2 CSS-Eigenschaftsdefinitionen Jede CSS-Eigenschaftsdefinition beginnt mit einem der etwa wie folgt aussieht:

berblick ber die Schlsselinformationen,

Cascading Style Sheets, Level 2

'eigenschaftsname' Wert:

erlaubte Werte & Syntax

Ausgangswert:

Ausgangswert

Angewendet auf:

Elemente, auf die sich diese Eigenschaft bezieht

Vererbt:

Gibt an, ob diese Eigenschaft vererbt wird

Prozentwerte:

Gibt an, wie Prozentwerte interpretiert werden

Medium

Gibt an, auf welche Mediengruppe sich die Eigenschaft bezieht

Anmerkung der bersetzer: Wie die Syntax von erlaubten Werten aussieht, erkl@rt der nachfolgende Abschnitt zwar sehr pr@zise, aber nicht unbedingt bei der ersten Lektre verst@ndlich. Es bietet sich an, zun@chst einige Beispiele in sp@teren Teilen der CSS2-Spezifikation zu lesen. Sollten dabei Fragen auftauchen, kann man an dieser Stelle nachsehen, was die Wertangabe genau bedeutet.

< 540 >

Informationen zur CSS2-Spezifikation

Page size: 168,00 x 240,00 mm

Sandini Bib

Wert

Andere W=rter in diesen Definitionen sind Schlsselw=rter und mssen dort w=rtlich und ohne Anfhrungszeichen erscheinen (z. B. red). Der Schr@gstrich (/) und das Komma (,) mssen ebenfalls exakt erscheinen. Werte k=nnen wie folgt angeordnet werden: Mehrere nebeneinander gestellte W=rter bedeuten, dass sie alle in der vorgegebenen Reihenfolge erscheinen mssen. Ein L@ngsstrich (|) trennt zwei oder mehr Alternativen voneinander ab: genau eine von ihnen muss erscheinen. Ein doppelter L@ngsstrich (||) trennt zwei oder mehr Optionen voneinander ab: eine oder mehrere davon mssen in beliebiger Reihenfolge erscheinen. Eckige Klammern ([ ]) dienen der Gruppierung.

· · · ·

Das Nebeneinanderstellen bedeutet eine st@rkere Gewichtung als der doppelte L@ngsstrich, und der doppelte L@ngsstrich ist st@rker als der einfache L@ngsstrich. Die nachfolgenden Zeilen sind also @quivalent: a b | c || d e [ a b ] | [ c || [ d e ]]

Jedem Typ, jedem Schlsselwort und jeder in eckigen Klammern platzierten Gruppe kann einer der folgenden Modifizierer folgen: Ein Stern (*) legt fest, dass der vorhergehende Typ, das vorhergehende Wort oder die vorhergehende Gruppe null Mal oder =fter vorkommt. Ein Plus-Zeichen (+) legt fest, dass der vorhergehende Typ, das vorhergehende Wort oder die vorhergehende Gruppe einmal oder mehrmals vorkommen. Ein Fragezeichen (?) legt fest, dass der vorhergehende Typ, das vorhergehende Wort oder die vorhergehende Gruppe optional sind.

· · ·

Konventionen

< 541 >

Cascading Style Sheets, Level 2

Dieser Teil listet die gltigen Werte fr die Eigenschaft auf. Es gibt mehrere M=glichkeiten, Werttypen anzugeben: 1. Schlsselwortwerte (z. B. auto, disc usw.) 2. Grundlegende Datentypen, die zwischen "" stehen (z. B. , usw.). In der elektronischen Version des Dokuments verweist jede Instanz eines grundlegenden Datentyps mit Hilfe eines Links auf ihre Definition. 3. Typen, die denselben Wertebereich haben wie eine Eigenschaft mit demselben Namen (z. B. , usw.). In diesem Fall ist der Typname der Eigenschaftsname (einschließlich Anfhrungszeichen) zwischen "" (z. B. ). In der elektronischen Version des Dokuments verweist jede Instanz dieser Art von Nicht-Terminal-Symbolen mit Hilfe eines Links auf die entsprechende Eigenschaftsdefinition. 4. Nicht-Terminal-Symbole, die nicht denselben Namen wie eine Eigenschaft haben. In diesem Fall erscheint der Name des Nicht-Terminal-Symbols zwischen "", wie in . Beachten Sie die Unterscheidung zwischen und ; Letzteres wird relativ zu Ersterem definiert. Die Definition eines NichtTerminal-Symbols befindet sich in der N@he des ersten Auftretens in der Spezifikation. In der elektronischen Version des Dokuments verweist jede Instanz dieses Werttyps mit Hilfe eines Links auf die entsprechende Wertdefinition.

Page size: 168,00 x 240,00 mm

Sandini Bib

·

Ein Zahlenpaar in geschweiften Klammern ({A,B}) legt fest, dass der vorhergehende Typ, das vorhergehende Wort oder die vorhergehende Gruppe mindestens A-mal und h=chstens B-mal vorkommen.

Die nachfolgenden Beispiele demonstrieren die verschiedenen Werttypen: Wert: Wert: Wert: Wert: Wert:

N | NW | NE [ | thick | thin ]{1,4} [ , ]* ? [ / ]? ||

Ausgangswert Dieser Teil spezifiziert den Ausgangswert der Eigenschaft. Falls die Eigenschaft vererbt ist, ist dies der Wert, den das Wurzelelement des Dokumentbaums aufweist. Weitere Informationen finden Sie im Abschnitt ber die Kaskade, wo Sie auch mehr ber die im Stylesheet spezifizierten Werte, geerbte Werte und Ausgangswerte erfahren.

Angewendet auf Dieser Teil listet die Elemente auf, auf die sich die Eigenschaft bezieht. Man geht davon aus, dass alle Elemente alle Eigenschaften besitzen, aber einige Eigenschaften haben keine Auswirkung auf die Darstellung bestimmter Elementtypen. Beispielsweise bezieht sich 'white-space' nur auf Elemente auf Blockebene.

Cascading Style Sheets, Level 2

Vererbt Dieser Teil gibt an, ob der Eigenschaftswert von einem Vorfahrenelement geerbt wurde. Lesen Sie bitte im Abschnitt ber die Kaskade nach, wo Sie weitere Informationen ber das Zusammenspiel zwischen im Stylesheet spezifizierten Werten, geerbten Werten und Ausgangswerten finden.

Prozentwerte Dieser Teil gibt an, wie Prozentwerte interpretiert werden sollen, wenn sie im Wert der Eigenschaft auftreten. Ist hier "N/A" angegeben, heißt das, die Eigenschaft akzeptiert keine Prozentwerte als Wert.

Mediengruppen Dieser Teil gibt die Mediengruppen an, auf die sich die Eigenschaft bezieht. Die Konformit@tsbedingungen sagen aus, dass Benutzerprogramme diese Eigenschaft untersttzen mssen, wenn sie die Darstellung der in diesen Mediengruppen enthaltenen Medientypen untersttzen wollen.

1.3.3 Zusammenfassende Eigenschaften Einige Eigenschaften sind zusammenfassende Eigenschaften, die es den Autoren erlauben, die Werte mehrerer Eigenschaften innerhalb einer einzigen Eigenschaft anzugeben.

< 542 >

Informationen zur CSS2-Spezifikation

Page size: 168,00 x 240,00 mm

Sandini Bib

Die Eigenschaft 'font' beispielsweise ist eine zusammenfassende Eigenschaft fr die gleichzeitige Einstellung von 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' und 'font-family'. Werden in einer zusammenfassenden Form Werte weggelassen, wird diesen „fehlenden“ Eigenschaften ihr Ausgangswert zugewiesen (lesen Sie dazu auch den Abschnitt ber die Kaskade). Die Stilregeln des folgenden Beispiels: H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none }

k=nnten auch innerhalb einer einzigen zusammenfassenden Eigenschaft geschrieben werden: H1 { font: bold 12pt/14pt Helvetica }

In diesem Beispiel nehmen 'font-variant', 'font-stretch', 'font-size-adjust' und 'font-style' ihre Ausgangswerte an.

Alle Beispiele, die eine falsche Verwendung demonstrieren, sind als „FEHLERHAFTES BEISPIEL“ gekennzeichnet. Alle HTML-Beispiele sind konform zur strengen HTML 4.0 DTD (die in [HTML40] definiert ist), es sei denn, es wird durch eine Dokumenttypdeklaration etwas anderes angegeben. Anmerkungen dienen nur zu Ihrer Information.

Anmerkung der bersetzer: Bei den HTML-Beispielen ist Folgendes zu beachten: Nach der Verabschiedung von HTML und CSS2 wurde eine neue Fassung von HTML unter dem Namen XHTML verabschiedet. Das X deutet darauf hin, dass XHTML auf Grundlage von XML definiert wurde. HTML basiert hingegen auf SGML. XML verlangt nun, dass die Groß/Kleinschreibung von Element- und Attributnamen zu bercksichtigen ist. Das heißt, dass der Elementtypename h1 von H1 verschieden ist. In XHTML sind Elementnamen nur in Kleinschreibweise definiert. Des Weiteren muss es zu jedem Start-Tag ein korrespondierendes End-Tag geben. Es ist nicht mehr erlaubt, Tags wegzulassen. Es gibt noch weitere Unterschiede dieser Art. Im Zweifelsfall finden Sie in der Spezifikation von XHTML verl@ssliche Informationen. Beim Lesen der CSS2-Spezifikation sollten Sie aber daran denken, dass es sich empfiehlt, alle Elementnamen klein zu schreiben und keine Tags wegzulassen. Dies gilt selbst dann, wenn die Web-Browser eine Seite dennoch wie gewnscht darstellen, denn es wird ein bergang von HTML zu XHTML erleichtert.

Konventionen

< 543 >

Cascading Style Sheets, Level 2

1.3.4 Anmerkungen und Beispiele

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiele und Anmerkungen sind innerhalb der HTML-Quellen fr die Spezifikation gekennzeichnet, und CSS1-Benutzerprogramme stellen sie auf spezielle Weise dar.

1.3.5 Bilder und ausf-hrliche Beschreibungen Die meisten Bilder in der elektronischen Version dieser Spezifikation werden von einer „ausfhrlichen Beschreibung“ begleitet, die den Bildinhalt zusammenfasst. Ein Link zu der ausfhrlichen Beschreibung wird durch ein „[D]„ am rechten Bildrand gekennzeichnet. Bilder und ausfhrliche Beschreibungen haben nur informativen Charakter.

Cascading Style Sheets, Level 2

1.4 Danksagungen Diese Spezifikation entstand in der W3C-Arbeitsgruppe zu Cascading Style Sheets und Formatierungseigenschaften. Neben den Herausgebern dieser Spezifikation sind die Mitglieder dieser Arbeitsgruppe: Brad Chase (Bitstream), Chris Wilson (Microsoft), Daniel Glazman (ElectricitW de France), Dave Raggett (W3C/HP), Ed Tecot (Microsoft), Jared Sorensen (Novell), Lauren Wood (SoftQuad), Laurie Anna Kaplan (Microsoft), Mike Wexler (Adobe), Murray Maloney (Grif), Powell Smith (IBM), Robert Stevahn (HP), Steve Byrne (JavaSoft), Steven Pemberton (CWI), Thom Phillabaum (Netscape), Douglas Rand (Silicon Graphics), Robert Pernett (Lotus), Dwayne Dicks (SoftQuad) und Sho Kuwamoto (Macromedia). Wir danken ihnen fr ihre stetigen Bemhungen. Einige der in die Arbeitsgruppe eingeladenen Experten haben ebenfalls Beitr@ge geleistet: George Kersher, Glenn Rippel (Bitstream), Jeff Veen (HotWired), Markku T. Hakkinen (The Productivity Works), Martin Drst (W3C, frher Universit@t Zrich), Roy Platon (RAL), Todd Fahrner (Verso), Tim Boland (NIST), Eric Meyer (Case Western Reserve University) und Vincent Quint (W3C). Der Abschnitt ber Web-Schriften wurde stark gepr@gt durch Brad Chase (Bitstream), David Meltzer (Microsoft Typography) und Steve Zilles (Adobe). Die folgenden Leute haben ebenfalls auf die unterschiedlichsten Arten zu dem Abschnitt ber Schriften beigetragen: Alex Beamon (Apple), Ashok Saxena (Adobe), Ben Bauermeister (HP), Dave Raggett (W3C/HP), David Opstad (Apple), David Goldsmith (Apple), Ed Tecot (Microsoft), Erik van Blokland (LettError), Franlois Yergeau (Alis), Gavin Nicol (Inso), Herbert van Zijl (Elsevier), Liam Quin, Misha Wolf (Reuters), Paul Haeberli (SGI) und Phil Karlton (Netscape). Der Abschnitt ber Seitenmedien wurde gr=ßtenteils von Robert Stevahn (HP) und Stephen Waters (Microsoft) geschrieben. Robert Stevahn (HP), Scott Furman (Netscape) und Scott Isaacs (Microsoft) haben wichtige Beitr@ge zur CSS-Positionierung geleistet. Mike Wexler (Adobe) war Herausgeber des tempor@ren Arbeitsentwurfs, der viele der neuen Funktionsmerkmale von CSS2 beschrieb.

< 544 >

Informationen zur CSS2-Spezifikation

Page size: 168,00 x 240,00 mm

T.V. Raman (Adobe) leistete wesentliche Beitr@ge zu ACSS (Aural Cascading Style Sheets) und den Konzepten der akustischen Darstellung, basierend auf seiner Arbeit ber AsTeR (Audio System For Technical Readings). Er brachte eine erste Skizze der ACSS-Spezifikation ein, die die Form der aktuellen Spezifikation wesentlich gepr@gt hat. Werte fr akustische Eigenschaften im HTML 4.0 Beispiel-Stylesheet stammen aus dieser Quelle; momentan verwendet er sie t@glich auf seinem Audio-Desktop in Kombination mit Emacspeak und dem Emacs W3-Browser (von William Perry, der auch die akustischen Erweiterungen auf der W3-Seite des Zauns implementiert hat). Todd Fahrner (Verso) untersuchte aktuelle und @ltere Browser, um das Beispiel-Stylesheet im Anhang zu entwickeln. Unser Dank gilt Jan K@rrman, Autor von html2ps, der uns tatkr@ftig dabei half, die PostScriptVersion der Spezifikation zu erstellen. In elektronischer und physischer Form haben die folgenden Leute zur Entwicklung von CSS2 beigetragen: Alan Borning, Robert Cailliau, Liz Castro, James Clark, Dan Connolly, Donna Converse, Daniel Dardailler, Al Gilman, Daniel Greene, Scott Isaacs, Geir Ivarsøy, Vincent Mallet, Kim Marriott, Brian Michalowski, Lou Montulli, Henrik Frystyk Nielsen, Jacob Nielsen, Eva von Pepel, William Perry, David Siegel, Peter Stuckey und Jason White. Die Diskussionen ber [email protected] haben viele Schlsselaspekte von CSS beeinflusst. Insbesondere danken wir Bjorn Backlund, Todd Fahrner, Lars Marius Garshol, Sue Jordan, Ian Hickson, Susan Lesch, Andrew Marshall, MegaZone, Eric Meyer, Russell O’Connor, David Perrell, Liam Quinn, Jon Seymour, Neil St. Laurent, Taylor, Brian Wilson und Chris Wilson fr ihre Teilnahme. Unser Dank geht an die WAI PF-Arbeitsgruppe (Web Accessibility Inititaive Protocols and Formats Technical Review), die uns geholfen hat, Aspekte der Zug@nglichkeit fr CSS2 zu verbessern. Dank an Philippe Le HWgaret, dessen CSS-Validator uns geholfen hat, korrekte Beispiele und eine sensible Grammatik sicherzustellen. Besonderer Dank gilt Arnaud Le Hors, dessen Engineering-Beitr@ge dafr gesorgt haben, dass dieses Dokument funktioniert. Adam Costello hat diese Spezifikation verbessert, indem er sie detailliert berprft hat. Und schließlich geht unser Dank an Tim Berners-Lee, ohne den nichts von alledem m=glich gewesen w@re.

1.5 Copyright-Hinweis Copyright L 1997 World Wide Web Consortium (Massachusetts Institute of Technology, Insitut National de Recherche en Informatique et en Automatique, Keio University). Alle Rechte vorbehalten. Dokumente auf der Site des W3C werden von den Copyright-Inhabern unter der nachfolgenden Lizenz bereitgestellt. Durch das Herunterladen, Verwenden und/oder Kopieren dieses Dokuments oder des W3C-Dokuments, aus dem der Link fr diese Aussage stammt, best@tigen Sie, dass Sie die folgenden Bestimmungen und Bedingungen gelesen und verstanden haben und dass Sie sich entsprechend verhalten: Die Berechtigung fr die Verwendung, das Kopieren und die Weitergabe des Inhalts dieses Dokuments oder des entsprechenden W3C-Dokuments auf jedem Medium fr jeden Zweck und ohne Gebhr oder Tantiemen wird hiermit erteilt, vorausgesetzt, Sie nehmen Folgendes in ALLE Kopien des Dokuments oder Teile davon, die Sie verwenden, auf:

Copyright-Hinweis

< 545 >

Cascading Style Sheets, Level 2

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

1. Einen Link oder die URI zum Original-W3C-Dokument. 2. Die oben aufgefhrte Copyright-Notiz des Originalautors, und falls diese nicht existiert, einen Hinweis der folgenden Form: „Copyright L World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). Alle Rechte vorbehalten.“ 3. Falls existent, den STATUS des W3C-Dokuments.

Cascading Style Sheets, Level 2

Falls der Platz es erlaubt, sollte der vollst@ndige Text dieses HINWEISES bereitgestellt werden. Darber hinaus sollten die Copyright-Inhaber aller Software, Dokumente oder anderer Dinge oder Produkte, die Sie der Implementierung dieses Dokuments oder eines Teils davon folgend erstellen, erw@hnt werden. Diese Lizenz berechtigt Sie nicht, Onderungen oder Ableitungen zu erstellen. DIESES DOKUMENT WIRD „ALS SOLCHES“ BEREITGESTELLT, UND DIE COPYRIGHT-INHABER BERNEHMEN KEINE GARANTIEN, WEDER AUSDR CKLICH NOCH IMPLIZIT, INKLUSIVE ABER NICHT BEGRENZT AUF GARANTIEN DER HANDELBARKEIT, DER EIGNUNG F R EINEN BESTIMMTEN ZWECK, DIE NICHT BERTRETUNG GELTENDER GESETZE ODER TITEL, DASS DER INHALT DES DOKUMENTS F R EINEN BESTIMMTEN ZWECK GEEIGNET IST, UND AUCH NICHT, DASS DIE IMPLEMENTIERUNG DIESES INHALTS KEINE GELTENDEN RECHTE ODER PATENTE DRITTER, COPYRIGHTS, WARENZEICHEN ODER ANDERE RECHTE VERLETZT. DIE COPYRIGHT-INHABER SIND NICHT F R DIREKTE, INDIREKTE, SPEZIELLE ODER FOLGESCHODEN, DIE AUS DER NUTZUNG DES DOKUMENTS ENTSTEHEN, HAFTBAR, UND AUCH NICHT F R DIE LEISTUNG ODER IMPLEMENTIERUNG SEINES INHALTS. Die Namen und Warenzeichen der Copyright-Inhaber drfen NICHT in der Werbung oder anderen Ver=ffentlichungen genutzt werden, was dieses Dokument betrifft, ebenso wenig wie sein Inhalt, wenn nicht vorab eine spezielle schriftliche Genehmigung dafr eingeholt wurde. Das in diesem Dokument genannte Copyright bleibt immer den Copyright-Inhabern vorbehalten.

2 Einf-hrung in CSS2 2.1 Ein kurzer CSS2-berblick f-r HTML In diesem berblick zeigen wir, wie einfach es sein kann, einfache Stylesheets zu entwerfen. Dazu ben=tigen Sie Grundkenntnisse in HTML (siehe [HTML40]), und Sie sollten die wichtigsten Begriffe aus dem Desktop-Publishing kennen. Wir beginnen mit einem kleinen HTML-Dokument:

Bachs Homepage

Bachs Homepage

Johann Sebastian Bach war ein

< 546 >

Einf#hrung in CSS2

Page size: 168,00 x 240,00 mm

Sandini Bib

begnadeter Komponist.

Um die Textfarbe der H1-Elemente auf Blau zu setzen, schreiben Sie die folgende CSS-Regel: H1 { color: blue }



Bachs Homepage

Bachs Homepage

Johann Sebastian Bach war ein begnadeter Komponist.

Einer maximalen Flexibilit@t halber empfehlen wir Autoren, externe Stylesheets zu verwenden; diese k=nnen ver@ndert werden, ohne dass das HTML-Quelldokument ver@ndert werden muss, und sie k=nnen zudem von mehreren Dokumenten gemeinsam genutzt werden. Fr die Verknpfung mit einem externen Stylesheet verwenden Sie das LINK-Element:

Bachs Homepage

Bachs Homepage

Johann Sebastian Bach war ein begnadeter Komponist.

Ein kurzer CSS2-berblick f#r HTML

< 547 >

Cascading Style Sheets, Level 2

Eine CSS-Regel besteht aus zwei Hauptteilen: Selektor ('H1') und Deklaration ('color: blue'). Die Deklaration setzt sich aus zwei Teilen zusammen: Eigenschaft ('color') und Wert ('blue'). Obwohl das obige Beispiel nur versucht, eine einzige der fr die Darstellung eines HTML-Dokuments ben=tigte Eigenschaft zu steuern, qualifiziert es sich selbst als Stylesheet. Kombiniert mit anderen Stylesheets (ein grundlegendes Funktionsmerkmal von CSS ist, dass Stylesheets kombiniert werden k=nnen) legt es die endgltige Darstellung des Dokuments fest. Die HTML 4.0-Spezifikation definiert, wie Stylesheet-Regeln fr HTML-Dokumente angegeben werden k=nnen: entweder innerhalb des HTML-Dokuments oder ber ein externes Stylesheet. Um das Stylesheet in das Dokument einzufgen, verwenden Sie das STYLE-Element:

Page size: 168,00 x 240,00 mm

Sandini Bib

Das LINK-Element gibt Folgendes an: den Typ des Links: zu einem "Stylesheet". die Position des Stylesheets: ber das Attribut 'href'. den Typ des zu verknpfenden Stylesheets: "text/css".

·· ·

Um die enge Beziehung zwischen einem Stylesheet und der strukturierten Auszeichnungsprache zu zeigen, verwenden wir in diesem berblick ebenfalls das STYLE-Element. Jetzt fgen wir mehr Farben ein:

Cascading Style Sheets, Level 2



Bachs Homepage

Bachs Homepage

Johann Sebastian Bach war ein begnadeter Komponist.

Jetzt enth@lt das Stylesheet zwei Regeln: die erste setzt die Farbe des BODY-Elements auf 'red', w@hrend die zweite die Farbe des H1-Elements auf 'blue' setzt. Weil fr das P-Element kein Farbwert angegeben wurde, erbt es die Farbe von seinem bergeordneten Element, BODY. Das H1-Element ist ebenfalls ein untergeordnetes Element von BODY, aber die zweite Regel berschreibt den geerbten Wert. In CSS gibt es h@ufig solche Konflikte zwischen unterschiedlichen Werten, und diese Spezifikation beschreibt, wie sie aufgel=st werden. CSS2 untersttzt mehr als 100 verschiedene Eigenschaften, unter anderem 'color'. Jetzt betrachten wir einige der anderen:

Bachs Homepage

Bachs Homepage

Johann Sebastian Bach war ein begnadeter Komponist.

< 548 >

Einf#hrung in CSS2

Page size: 168,00 x 240,00 mm

Sandini Bib

Als Erstes bemerken Sie, dass mehrere Deklarationen innerhalb eines Blocks gruppiert sind, der in geschweifte Klammern ({...}) eingeschlossen ist, und dass diese Deklarationen durch Semikolons voneinander getrennt sind. Auch der letzten Deklaration kann ein Semikolon folgen. Die erste Deklaration des BODY-Elements setzt die Schriftfamilie auf „Gill Sans“. Falls diese Schrift nicht verfgbar ist, verwendet das Benutzerprogramm (h@ufig auch als „Browser“ bezeichnet) die Schriftfamilie 'sans-serif', eine der fnf abstrakten Schriftfamilien, die alle Benutzerprogramme kennen. Untergeordnete Elemente von BODY erben den Wert der Eigenschaft 'font-family'.

Anmerkung der bersetzer: Schriften im Web sind keine einfache Sache. Sie k=nnen sich nicht darauf verlassen, dass auf dem Computer, auf dem eine Webseite angezeigt wird, genau die Schrift vorhanden ist, die Sie angeben. Auch die Namen von Schriften k=nnen variieren. Deshalb ist unbedingt zu empfehlen, mehrere alternative Schriften anzugeben und zuletzt immer einen der gezeigten abstrakten Namen zu benutzen. Im gezeigten Beispiel k=nnte es sein, dass bei einem Leser nicht Gill Sans verwendet wird (weil sie nicht vorhanden ist), sondern Helvetica oder Arial (beides sind serifenlose (sans serif) Schriften).

2.2 Ein kurzer CSS2-berblick f-r XML CSS kann fr beliebige strukturierte Dokumentformate verwendet werden, beispielsweise in Anwendungen von XML (eXtensible Markup Language, [XML10]). Tats@chlich ist XML mehr von Stylesheets abh@ngig als HTML, weil Autoren ihre eigenen Elemente kreieren k=nnen, von denen die Benutzerprogramme nicht automatisch wissen, wie sie anzuzeigen sind. Nachfolgend sehen Sie einen einfachen XML-Ausschnitt:

Friedrich der Große trifft Bach Johann Nikolaus Forkel

Eines Abends, als er gerade seine Fl^te vorbereitete und seine Musiker versammelt waren, brachte ihm ein Offizier eine Liste aller angekommenen Fremden.

Ein kurzer CSS2-berblick f#r XML

< 549 >

Cascading Style Sheets, Level 2

Die zweite Deklaration setzt die Schriftgr=ße des BODY-Elements auf 12 Punkte. Die Einheit „Punkt“ wird im Schriftsatz h@ufig verwendet, um Schriftgr=ßen und andere L@ngenwerte anzugeben. Es handelt sich dabei um ein Beispiel fr eine absolute Einheit, die nicht relativ zur Umgebung skaliert wird. Die dritte Deklaration verwendet eine relative Einheit, die in Hinblick auf ihre Umgebung skaliert wird. Die Einheit „em“ bezieht sich auf die Schriftgr=ße des Elements. In diesem Fall sind die R@nder um das BODY-Element dreimal breiter als die Schriftgr=ße.

Page size: 168,00 x 240,00 mm

Sandini Bib

Um diesen Ausschnitt als Dokument anzuzeigen, mssen wir zuerst deklarieren, welche Elemente inzeilig sind (das heißt, es werden keine Leerzeilen eingefgt) und welche sich auf Blockebene befinden (das heißt, es werden Leerzeilen zwischen ihnen eingefgt). INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

Die erste Regel deklariert INSTRUMENT als inline, und die zweite Regel, die eine Liste durch Kommas voneinander getrennten Selektoren angibt, deklariert alle anderen Elemente als auf Blockebene befindlich. Ein Vorschlag fr die Verknpfung eines Stylesheets mit einem XML-Dokument ist die Verwendung einer Verarbeitungsanweisung:

Friedrich der Große trifft Bach Johann Nikolaus Forkel

Eines Abends, als er gerade seine Fl^te vorbereitete und seine Musiker versammelt waren, brachte ihm ein Offizier eine Liste aller angekommenen Fremden.

Cascading Style Sheets, Level 2

Ein visuelles Benutzerprogramm k=nnte das obige Beispiel wie folgt formatieren:

Beachten Sie, dass das Wort „Fl=te„ innerhalb des Absatzes bleibt, weil es sich dabei um den Inhalt des inzeiligen Elements INSTRUMENT handelt. Dennoch ist der Text immer noch nicht so formatiert, wie Sie das erwarten wrden. Beispielsweise sollte die Schriftgr=ße fr die berschrift gr=ßer sein als fr den restlichen Text, und man k=nnte den Namen des Autors kursiv darstellen: INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block } HEADLINE { font-size: 1.3em } AUTHOR { font-style: italic } ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

< 550 >

Einf#hrung in CSS2

Page size: 168,00 x 240,00 mm

Sandini Bib

Ein visuelles Benutzerprogramm k=nnte das obige Beispiel wie folgt formatieren:

Anmerkung der bersetzer: Fr die deutsche Fassung dieses Textes wurde das obige Beispiel wie folgt behandelt: Offensichtlich wurde der Text ins Deutsche bersetzt. Da das Resultat Umlaute sowie das ß enth@lt, mussten diese Zeichen im XML-Dokument in geeigneter Weise behandelt werden. Dies w@re durch Deklaration entsprechender Zeichen-Entities m=glich gewesen. Wir haben uns hier jedoch dafr entschieden, die Zeichen direkt einzutippen, die XML-Datei in der Zeichenkodierung ISO-8859-1 abzuspeichern und diese Kodierung in der XML-Deklaration (erste Zeile) anzugeben. Das so enstandene Beispiel wurde im Mozilla 1.1 ausprobiert. Das Ergebnis sehen Sie in den Abbildungen.

2.3 Das CSS2-Verarbeitungsmodell Anmerkung der bersetzer: Beim ersten Lesen der Spezifikation und, wenn es darum geht, CSS nur anzuwenden, kann dieser Abschnitt getrost bersprungen werden.

Dieser Abschnitt stellt ein m=gliches Modell vor, wie Benutzerprogramme funktionieren, die CSS untersttzen. Dabei handelt es sich nur um ein konzeptuelles Modell; reale Implementierungen k=nnen davon abweichen. In diesem Modell verarbeitet ein Benutzerprogramm eine Quelle, indem es die folgenden Schritte durchl@uft: 1. Parsing des Quelldokuments und Anlegen eines Dokumentbaums. 2. Identifizieren des Ziel-Medientyps.

Das CSS2-Verarbeitungsmodell

< 551 >

Cascading Style Sheets, Level 2

Durch zus@tzliche Regeln, die Sie dem Stylesheet hinzufgen, k=nnen Sie die Darstellung des Dokuments weiter verbessern.

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

3. Laden aller dem Dokument zugeordneten Stylesheets, die fr den Ziel-Medientyp angegeben sind. 4. Vorbereitung jedes Elements des Dokumentbaums, indem jeder Eigenschaft, die auf den Ziel-Medientyp anzuwenden ist, ein einziger Wert zugewiesen wird. Eigenschaften werden entsprechend den im Abschnitt ber Kaskaden und Vererbung beschriebenen Mechanismen Werte zugewiesen. Die Berechnung von Werten ist teilweise von dem fr den Ziel-Medientyp geeigneten Formatierungsalgorithmus abh@ngig. Ist das Zielmedium beispielsweise der Bildschirm, wenden Benutzerprogramme das visuelle Formatierungsmodell an. Handelt es sich bei dem Zielmedium um eine gedruckte Seite, wenden Benutzerprogramme das Seitenmodell an. Handelt es sich bei dem Zielmedium um ein akustisches Darstellungsger@t (z. B. Sprachsynthesizer), wenden Benutzerprogramme das akustische Darstellungsmodell an. 5. Aus dem vorbereiteten Dokumentbaum wird eine Formatierungsstruktur erzeugt. H@ufig erinnert die Formatierungsstruktur stark an den Dokumentbaum, sie kann sich aber auch wesentlich davon unterscheiden, insbesondere, wenn Autoren Pseudo-Elemente und erzeugten Inhalt verwenden. Erstens muss die Formatierungsstruktur berhaupt keine Baumform aufweisen – welche Form die Struktur hat, ist von der Implementierung abh@ngig. Zweitens kann die Formatierungsstruktur mehr oder weniger Information enthalten als der Dokumentbaum. Hat beispielsweise ein Element im Dokumentbaum den Wert 'none' fr die 'display'-Eigenschaft, erzeugt dieses Element nichts in der Formatierungsstruktur. Ein Listenelement hingegen kann in der Formatierungsstruktur mehr Informationen erzeugen: den Inhalt des Listenelements und die Listenstilinformation (z. B. ein Bild von einem Markierungspunkt). Beachten Sie, dass das CSS-Benutzerprogramm den Dokumentbaum w@hrend dieser Phase nicht ver@ndert. Insbesondere wird der durch Stylesheets erzeugte Inhalt nicht an den Dokumentsprachprozessor zurckgemeldet (z. B. fr ein erneutes Parsing). 6. bertragen der Formatierungsstruktur an das Zielmedium (z. B. Ausdrucken der Ergebnisse, Anzeige auf dem Bildschirm, sprachliche Darstellung usw.). Schritt 1 liegt außerhalb des Gltigkeitsbereichs dieser Spezifikation (siehe z. B. [DOM]). Die Schritte 2 bis 5 werden in dieser Spezifikation behandelt. Schritt 6 liegt außerhalb des Gltigkeitsbereichs dieser Spezifikation.

2.3.1 Die Zeichenfl.che Der Begriff Zeichenfl,che (Canvas) beschreibt fr alle Medien den „Bereich, wo die Formatierungsstruktur dargestellt wird“. Die Zeichenfl@che ist fr jede Dimension des Raums unendlich, aber die Darstellung erfolgt normalerweise innerhalb eines endlichen Bereichs der Zeichenfl@che, der dem Zielmedium entsprechend durch das Benutzerprogramm eingerichtet wird. Beispielsweise geben Benutzerprogramme, die etwas auf einem Bildschirm darstellen, eine Mindestbreite vor und w@hlen eine Ausgangsbreite, die auf den Maßen des Viewports basiert. Benutzerprogramme, die etwas auf einer gedruckten Seite anzeigen, geben Beschr@nkungen fr Breite und H=he vor. Akustische Benutzerprogramme k=nnen Beschr@nkungen im Audioraum vorgeben, nicht aber hinsichtlich der Zeit.

< 552 >

Einf#hrung in CSS2

Page size: 168,00 x 240,00 mm

Sandini Bib

2.3.2 CSS2-Adressierungsmodell CSS2-Selektoren und Eigenschaften erlauben, dass sich Stylesheets auf die folgenden Teile eines Dokuments oder Benutzerprogramms beziehen: Elemente im Dokumentbaum und bestimmte Beziehungen zwischen ihnen (siehe Abschnitt ber Selektoren). Attribute von Elementen im Dokumentbaum sowie Werte dieser Attribute (siehe Abschnitt ber Attributselektoren). Einige Teile des Elementinhalts (siehe Pseudo-Elemente :first-line und :first-letter). Elemente des Dokumentbaums, wenn sie sich in einem bestimmten Status befinden (siehe Abschnitt ber Pseudo-Klassen). Einige Aspekte der Zeichenfl@che, auf der das Dokument dargestellt wird. Einige Systeminformationen (siehe den Abschnitt ber die Benutzeroberfl@che).

· · ·· ··

2.4 CSS-Entwurfskonzepte CSS2 basiert wie auch CSS1 auf bestimmten Entwurfsgrundlagen: Aufw.rts- und Abw.rtskompatibilit.t. CSS2-Benutzerprogramme verstehen CSS1Stylesheets. CSS1–Benutzerprogramme k=nnen CSS2-Stylesheets lesen und verwerfen alle Teile, die sie nicht verstehen. Außerdem k=nnen Benutzerprogramme ohne CSS-Untersttzung Stil-erweiterte Dokumente anzeigen. Natrlich k=nnen die durch CSS erm=glichten stilistischen Erweiterungen nicht dargestellt werden, aber der gesamte Inhalt wird angezeigt.

Anmerkung der bersetzer: Dieser Punkt ist fr HTML-Dokumente uneingeschr@nkt richtig. Der Grund dafr ist, dass ein Browser HTML grunds@tzlich darstellen kann. Das Stylesheet kann diese Vorgaben ver@ndern. Bei der Anwendung von CSS auf XML-Dokumente sieht es anders aus: In diesem Fall gibt es keine „normale“ Darstellung ohne Stylesheet.

· · ·

Erg.nzung strukturierter Dokumente. Stylesheets erg@nzen strukturierte Dokumente (z. B. HTML- und XML-Applikationen) und stellen dafr stilistische Informationen fr den mit Markup gekennzeichneten Text bereit. Es sollte ganz einfach sein, das Stylesheet zu @ndern, und zwar mit wenig oder ohne Einfluss auf das Markup. Unabh.ngigkeit von Hersteller, Plattform und Ger.t. Stylesheets er=ffnen die M=glichkeit, dass Dokumente unabh@ngig vom Hersteller, von der Plattform und vom Ger@t werden. Stylesheets als solche sind ebenfalls unabh@ngig von Hersteller und Plattform, aber CSS2 erm=glicht es Ihnen, ein Stylesheet fr eine bestimmte Gruppe von Ger@ten (z. B. Drucker) anzulegen. Wartbarkeit. Webmaster k=nnen die Wartbarkeit ihrer Site verbessern und ein konsistentes Look&Feel fr eine gesamte Site schaffen, indem sie von Dokumenten aus auf Stylesheets verweisen. Ondert sich beispielsweise die Hintergrundfarbe fr ein Unternehmen, muss nur eine einzige Datei ge@ndert werden.

CSS-Entwurfskonzepte

< 553 >

Cascading Style Sheets, Level 2

·

Page size: 168,00 x 240,00 mm

Sandini Bib

· · · ·

Cascading Style Sheets, Level 2

·

Einfachheit. CSS2 ist komplexer als CSS1, bleibt aber eine einfache Stilsprache, die vom Menschen lesbar und schreibbar ist. Die CSS-Eigenschaften werden so weit m=glich voneinander unabh@ngig verwaltet, und es gibt im Allgemeinen jeweils nur eine einzige Methode, um einen bestimmten Effekt zu erzielen. Netzwerkleistung. CSS untersttzt kompakte Codierungen fr die Darstellung von Inhalt. Verglichen mit Bildern oder Audiodateien, die von Autoren oft verwendet werden, um bestimmte Darstellungseffekte zu erzielen, verringern Stylesheets h@ufig die Inhaltsgr=ße. Darber hinaus mssen weniger Netzwerkverbindungen ge=ffnet werden, wodurch die Netzwerkleistung weiter gesteigert wird. Flexibilit.t. CSS kann auf mehrere Arten auf Inhalt angewendet werden. Das Schlsselkonzept ist es, Stilinformationen zu kaskadieren, die im Standard-Stylesheet (des Benutzerprogramms), in Benutzer-Stylesheets, in verknpften Stylesheets, im Dokumentkopf und in Attributen fr die Elemente, die den Dokumentrumpf bilden, enthalten sind. Reichhaltigkeit. Den Autoren steht eine umfassende Menge an Darstellungseffekten zur Verfgung, die die Reichhaltigkeit des Web als Ausdrucksmedium vergr=ßern. Die Designer haben lange auf die Funktionalit@t gewartet, die man h@ufig im Desktop-Publishing und in Diashow-Applikationen findet. Einige der geforderten Darstellungseffekte stehen in Konflikt mit der Ger@teunabh@ngigkeit, aber CSS2 ist auf dem besten Weg, die Anforderungen der Designer zu erfllen. Alternative Sprachbindungen. Die Menge der in dieser Spezifikation beschriebenen CSS-Eigenschaften bildet ein konsistentes Formatierungsmodell fr visuelle und akustische Darstellungen. Der Zugriff auf dieses Formatierungsmodell kann ber die Sprache CSS erfolgen, aber es sind auch Bindungen zu anderen Sprachen m=glich. Beispielsweise k=nnte ein JavaScript-Programm den Wert der 'color'-Eigenschaft eines bestimmten Elements @ndern.

Anmerkung der bersetzer: Dieser Punkt beschreibt, was sich hinter dem Schlagwort „Dynamic HTML“ verbirgt: HTML, CSS und JavaScript. Mit JavaScript lassen sich z. B. einzelne Seitenelemente, die per CSS positioniert wurden, verschieben.

· · · · · · ·

Zug.nglichkeit. Einige Funktionsmerkmale von CSS bieten behinderten Benutzern einen verbesserten Zugriff auf das Web: Eigenschaften zur Steuerung der Schriftdarstellung erlauben den Autoren, Bitmap-Textbilder zu vermeiden, die z. B. fr Blinde nicht zug@nglich sind. Positionierungseigenschaften erlauben Autoren, Markup-Tricks zu vermeiden (z. B. unsichtbare Bilder), um ein Layout zu erzwingen. Die Semantik von !important-Regeln bedeutet, dass Benutzer mit bestimmten Anforderungen an die Darstellung die Stylesheets des Autors berschreiben k=nnen. Der neue 'inherit'-Wert fr alle Eigenschaften verbessert die Allgemeinheit der Kaskadierung und erlaubt eine einfachere und konsistentere Einstellung der Formatierung. Eine verbesserte Medienuntersttzung, unter anderem Mediengruppen, Braille und TTYMedientypen, erlaubt Benutzern und Autoren, Seiten auf diese Ger@te zuzuschneiden. Akustische Eigenschaften bieten Kontrolle ber Sprach- und Audioausgabe.

< 554 >

Einf#hrung in CSS2

Page size: 168,00 x 240,00 mm

Sandini Bib

· ·

Die Attributselektoren, die 'attr()'-Funktion und die 'content'-Eigenschaft bieten Zugriff auf alternativen Inhalt. Z@hler und Abschnitt/Absatz-Nummerierung k=nnen die Navigation im Dokument verbessern und Einrckungen ersparen (wichtig fr Braille-Ger@te). Die Eigenschaften 'word-spacing' und 'text-independent' vermeiden darber hinaus den Bedarf an zus@tzlichem Leerraum im Dokument.

Hinweis: Weitere Informationen zum Entwurf zug@nglicher Dokumente mit CSS und HTML finden Sie in [WAI-PAGEAUTH]. n

3 Konformit.t: Anforderungen und Empfehlungen In diesem Abschnitt beginnen wir mit der formalen Spezifikation von CSS. Wir beginnen mit einer Begriffskl@rung zwischen Autoren, Benutzern und Implementierern. Die Schlsselw=rter „M SSEN“, „D RFEN NICHT“, „GEFORDERT“, „SOLLEN“, „SOLLEN NICHT“, „SOLLTEN“, „SOLLTEN NICHT“, „EMPFOHLEN“, „D RFEN“ und „OPTIONAL“ in diesem Dokument sollten, wie in RFC 2119 beschrieben, interpretiert werden (siehe [RFC2119]). Der Lesbarkeit halber erscheinen diese W=rter in dieser Spezifikation jedoch nicht immer in Großbuchstaben. Manchmal empfiehlt diese Spezifikation eine sinnvolle Vorgehensweise fr Autoren und Benutzerprogramme. Diese Empfehlungen sind nicht normativ, und die Konformit@t zu dieser Spezifikation ist nicht davon abh@ngig, dass sie befolgt werden. Diese Empfehlungen enthalten den Ausdruck „Wir empfehlen...“, „Diese Spezifikation empfiehlt...“ oder einen @hnlichen Wortlaut. Stylesheet Mehrere Anweisungen, die die Darstellung eines Dokuments spezifizieren. Stylesheets k=nnen unterschiedliche Ursprnge haben: Autor, Benutzer und Benutzerprogramm. Das Zusammenspiel dieser Quellen ist im Abschnitt ber Kaskaden und Vererbung beschrieben. G-ltiges Stylesheet Die Gltigkeit eines Stylesheets ist von dem dafr verwendeten CSS-Level abh@ngig. Alle gltigen CSS1-Stylesheets sind auch gltige CSS2-Stylesheets. Bestimmte Mnderungen gegenber CSS1 fhren jedoch dazu, dass einige CSS1-Stylesheets in CSS2 eine etwas andere Semantik haben. Ein gltiges CSS2-Stylesheet muss entsprechend der CSS2-Grammatik geschrieben sein. Darber hinaus darf es nur at-Regeln, Eigenschaftsnamen und Eigenschaftswerte enthalten, die in dieser Spezifikation definiert wurden. Nicht erlaubte (ungltige) at-Regeln, Eigenschaftsnamen oder Eigenschaftswerte sind solche, die nicht gltig sind.

Konformit,t: Anforderungen und Empfehlungen

< 555 >

Cascading Style Sheets, Level 2

3.1 Definitionen

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

Quelldokument Das Dokument, auf das ein oder mehrere Stylesheets verweisen. Es ist in irgendeiner Sprache codiert, die das Dokument als Elementbaum darstellt. Jedes Element besteht aus einem Namen, der den Typ des Elements identifiziert, optional mehreren Attributen und einem (m=glicherweise leeren) Inhalt. Dokumentsprache Die Codiersprache des Quelldokuments (z. B. HTML oder eine XML-Applikation). Element (Ein SGML-Begriff, siehe [ISO8879].) Elemente sind die prim@ren syntaktischen Konstrukte der Dokumentsprache. Die meisten CSS-Stylesheet-Regeln verwenden die Namen dieser Elemente (wie beispielsweise „P“, „TABLE“ und „OL“ fr HTML), um Darstellungsinformationen fr sie anzugeben. Ersetztes Element Ein Element, fr das der CSS-Formatierer nur dessen eigene Gr=ße kennt. In HTML sind IMG-, INPUT-, TEXTAREA-, SELECT- und OBJECT-Elemente Beispiele fr ersetzte Elemente. Beispielsweise wird der Inhalt des IMG-Elements h@ufig durch das Bild ersetzt, das im "src"-Attribut angegeben ist. CSS definiert nicht, wie die eigenen Gr=ßen ermittelt werden. Eigene GrUße Die Breite und die H=he, wie sie durch das eigentliche Element definiert sind, nicht wie sie durch das Umfeld vorgegeben werden. In CSS2 wird vorausgesetzt, dass alle ersetzten Elemente – und nur ersetzte Elemente – eigene Gr=ßen besitzen. Attribut Ein Wert, der einem Element zugeordnet wird, bestehend aus einem Namen und einem zugeordneten (Text-)Wert. Inhalt Der Inhalt eines Elements im Quelldokument. Nicht alle Elemente haben Inhalt; in diesem Fall werden sie leer genannt. Der Inhalt eines Elements kann Text enthalten und es kann eine Reihe von Unterelementen enthalten; in diesem Fall wird das Element Elternelement dieser Unterelemente genannt. Dargestellter Inhalt Der Inhalt eines Elements, nachdem die entsprechenden Stylesheets fr seine Darstellung darauf angewendet wurden. Der dargestellte Inhalt eines ersetzten Elements kommt von außerhalb des Quelldokuments. Dargestellter Inhalt kann auch alternativer Text fr ein Element sein (z. B. der Wert des "alt"-Attributs in HTML) und Dinge enthalten, die implizit oder explizit durch das Stylesheet eingefgt wurden, wie beispielsweise Markierungen, Nummerierungen usw. Dokumentbaum Der Baum der im Quelldokument codierten Elemente. Jedes Element in diesem Baum hat genau ein bergeordnetes Element, mit Ausnahme des Wurzel-Elements (root), das keines hat. Untergeordnetes Element („Kind“) Ein Element A wird als untergeordnetes Element oder Kind von Element B bezeichnet, dann und nur dann, wenn B das bergeordnete Element („Elternelement“) von A ist.

< 556 >

Konformit,t: Anforderungen und Empfehlungen

Page size: 168,00 x 240,00 mm

Nachkomme Ein Element A wird als Nachkomme von Element B bezeichnet, wenn (1) A ein untergeordnetes Element von B ist, oder (2) A das untergeordnete Element eines Elements C ist, das Nachkomme von B ist. Vorfahre Ein Element A wird als Vorfahre von Element B bezeichnet, dann und nur dann, wenn B ein Nachkomme von A ist. Gleichrangiges oder Geschwisterelement Ein Element A wird als gleichrangiges oder Geschwisterelement eines Elements B bezeichnet, dann und nur dann, wenn B und A dasselbe bergeordnete Element haben. Element A ist ein vorhergehendes gleichrangiges Element, wenn es im Elementbaum vor B steht. Element B ist ein nachfolgendes gleichrangiges Element, wenn es im Elementbaum nach A steht. Vorhergehendes Element Ein Element A wird als vorhergehendes Element eines Elements B bezeichnet, dann und nur dann, wenn (1) A ein Vorfahre von B ist, oder (2) A ein vorhergehendes gleichrangiges Element von B ist. Nachfolgendes Element Ein Element A wird als nachfolgendes Element eines Elements B bezeichnet, dann und nur dann, wenn B ein vorhergehendes Element von A ist. Autor Ein Autor ist eine Person, die Dokumente und zugeh=rige Stylesheets schreibt. Ein Autorenwerkzeug erzeugt Dokumente und zugeordnete Stylesheets. Benutzer Ein Benutzer ist eine Person, die mit einem Benutzerprogramm arbeitet, um ein Dokument und das ihm zugeordnete Stylesheet anzusehen, anzuh=ren oder es anderweitig zu nutzen. Der Benutzer kann ein pers=nliches Stylesheet bereitstellen, das seine pers=nlichen Vorlieben codiert. Benutzerprogramm (User Agent, UA) Ein Benutzerprogramm ist ein beliebiges Programm, das ein in der Dokumentsprache geschriebenes Dokument interpretiert und ein zugeordnetes Stylesheet gem@ß den Vorgaben dieser Spezifikation darauf anwendet. Ein Benutzerprogramm kann ein Dokument anzeigen, es laut vorlesen, seinen Ausdruck veranlassen, es in ein anderes Format umwandeln usw.

Anmerkung der bersetzer: Zu den Begriffen „User Agent“ und „Benutzerprogramm“ beachten Sie bitte die Anmerkung im ersten Kapitel.

Beispiel Nachfolgend sehen Sie ein Beispiel fr ein in HTML codiertes Quelldokument:

Meine Homepage

Definitionen

< 557 >

Cascading Style Sheets, Level 2

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

Meine Homepage

Willkommen auf meiner Homepage. Ich will Ihnen etwas Uber meine Lieblingskomponisten erz]hlen:

• Elvis Costello
• Johannes Brahms
• Georges Brassens

Daraus ergibt sich der folgende Baum:

HTML HEAD TITLE

BODY H1

P

UL LI LI LI

Cascading Style Sheets, Level 2

Gem@ß der HTML-Definition werden HEAD-Elemente w@hrend des Parsings abgeleitet und werden Teil des Dokumentbaums, selbst wenn die HEAD-Tags nicht in der Dokumentquelle enthalten sind. Analog dazu erkennt der Parser, wo P und LIs enden, obwohl es in der Quelle keine

- und -Tags gibt.

Anmerkung der bersetzer: Hier ist zu beachten, dass das obige Beispiel und die nachfolgende Bemerkung mit XHTML nicht mehr gltig ist. Als Anwendung von SGML ist das obige HTML-Beispiel korrekt. Im Gegensatz dazu ist das Weglassen von Tags (Start-, End-Tags) bei XHTML nicht mehr m=glich. Der Ursache liegt darin, dass XML als Grundlage von XHTML diese Freiheit nicht mehr erlaubt. Nicht-leere Elemente mssen dann immer vollst@ndig (mit Start- und End-Tag) geschrieben werden.

3.2 Konformit.t Dieser Abschnitt definiert nur die Konformit@t mit der CSS2-Spezifikation. In der Zukunft wird es m=glicherweise noch andere CSS-Levels geben, fr die es unter Umst@nden erforderlich ist, dass ein Benutzerprogramm andere Funktionsmerkmale definiert, um Konformit@t zu erzielen. Im Allgemeinen muss ein Benutzerprogramm, das konform zu dieser Spezifikation arbeiten will, die folgenden Aspekte bercksichtigen:

< 558 >

Konformit,t: Anforderungen und Empfehlungen

Page size: 168,00 x 240,00 mm

Sandini Bib

1. Es muss einen oder mehrere der CSS2-Medientypen untersttzen. 2. Es muss fr jedes Quelldokument versuchen, alle zugeordneten Stylesheets zu laden, die fr die untersttzten Medientypen geeignet sind. Falls es nicht alle zugeordneten Stylesheets laden kann (m=glicherweise aufgrund von Netzwerkfehlern), muss es das Dokument unter Verwendung der gefundenen Stylesheets anzeigen. 3. Es muss die Stylesheets gem@ß dieser Spezifikation auswerten. Insbesondere muss es alle atRegeln, Bl=cke, Deklarationen und Selektoren (siehe CSS2-Grammatik) erkennen. Trifft ein Benutzerprogramm auf eine Eigenschaft, die fr einen untersttzten Medientyp angewendet werden soll, muss es den Wert gem@ß der Eigenschaftsdefinition auswerten. Das bedeutet, das Benutzerprogramm muss alle gltigen Werte akzeptieren und Deklarationen mit ungltigen Werten ignorieren. Benutzerprogramme mssen Regeln ignorieren, die sich auf nicht untersttzte Medientypen beziehen. 4. Fr jedes Element in einem Dokumentbaum muss es fr jede anwendbare Eigenschaft einen Wert zuweisen, und zwar gem@ß der Eigenschaftsdefinition und den Regeln von Kaskadierung und Vererbung. 5. Falls das Quelldokument alternative Stylesheets enth@lt (wie beispielsweise durch das Schlsselwort ‘alternate’ in HTML 4.0 gekennzeichnet, [HTML40]), muss das Benutzerprogramm dem Benutzer erlauben, eines dieser Stylesheets auszuw@hlen, und dann das ausgew@hlte anwenden. Es muss jedoch nicht jeder Benutzerprogramm jeden Punkt beachten: Ein Benutzerprogramm, das Stylesheets eingibt, muss die Punkte 1 – 3 bercksichtigen. Von einem Autorenwerkzeug wird nur verlangt gltige Stylesheets auszugeben. Ein Benutzerprogramm, das ein Dokument mit einem zugeh=rigen Stylesheet darstellt, muss die Punkte 1 – 5 bercksichtigen und das Dokument gem@ß den medienspezifischen Anforderungen darstellen, die in dieser Spezifikation festgelegt werden. Die Werte k=nnen angen@hert werden, wenn das Benutzerprogramm sie ben=tigt.

Wenn ein Benutzerprogramm einen Teil dieser Spezifikation nicht implementieren kann, weil beispielsweise ein bestimmtes Ger@t keine entsprechenden Funktionen aufweist (z. B. kann ein Benutzerprogramm keine Farben auf einem Schwarzweißmonitor oder auf einer Schwarzweißseite darstellen), bedeutet das nicht, dass die Konformit@t verletzt ist. Diese Spezifikation empfiehlt, dass ein Benutzerprogramm dem Benutzer erlaubt, benutzerdefinierte Stylesheets anzugeben.

Anmerkung der bersetzer: Aufgrund der letzten Empfehlung sollte Autoren bewusst sein, dass es – wie im Web blich – keine Garantie dafr gibt, dass ein Dokument so dargestellt wird, wie vom Autor vorgegeben. Der Benutzer kann in der Lage sein, Stylesheets auszuschalten oder eigene auf das Dokument anzuwenden. Neben einem eigenen @sthetischen Empfinden kann es ganz rationale Grnde dafr geben: Benutzer mit Sehbehinderungen m=chten eventuell große Schriften einstellen, damit Seiten berhaupt lesbar sind. Ein benutzerorientiertes (kundenorientiertes) CSS-Design sollte solche F@lle bercksichtigen.

Konformit,t

< 559 >

Cascading Style Sheets, Level 2

·· ·

Page size: 168,00 x 240,00 mm

Sandini Bib

3.3 Fehlerbedingungen Im Allgemeinen spezifiziert dieses Dokument keine Verhaltensweisen fr die Fehlerverarbeitung durch Benutzerprogramme (z. B. wie sie sich verhalten, wenn sie eine durch eine URI angegebene Ressource nicht finden). Die Benutzerprogramme mssen jedoch den Regeln fr die Verarbeitung von Parsing-Fehlern gehorchen. Weil sich die Vorgehensweise der Benutzerprogramme bei der Verarbeitung von Fehlerbedingungen unterscheiden kann, drfen sich Autoren und Benutzer nicht auf ein bestimmtes Verhalten bei der Fehlerverarbeitung verlassen.

3.4 Der text/css-Inhaltstyp CSS-Stylesheets, die in separaten Dateien vorliegen, werden als Bytefolge ber das Internet geschickt, begleitet von Codierungsinformationen (siehe [HTML40], Kapitel 5). Die Struktur der bertragung, auch als Nachrichteneinheit bezeichnet, ist in RFC 2045 und RFC 2068 definiert (siehe [RFC2045] und [RFC2068]). Eine Nachrichteneinheit mit dem Inhaltstyp ‘text/ css’ stellt ein unabh@ngiges CSS-Dokument dar. Der Inhaltstyp ‘text/css’ wurde in RFC 2318 ([RFC2318]) registriert.

4 CSS2-Syntax und grundlegende Datentypen Cascading Style Sheets, Level 2

4.1 Syntax Dieser Abschnitt beschreibt eine Grammatik (sowie vorw,rts-kompatible Parsing-Regeln), die fr jede CSS-Version gltig sind (auch fr CSS2). Zuknftige CSS-Versionen werden dieser Kernsyntax entsprechen, fhren aber m=glicherweise zus@tzliche syntaktische Einschr@nkungen ein. Diese Beschreibungen sind normativ. Sie werden erg@nzt durch die normativen Grammatikregeln, die Sie in Anhang D finden.

4.1.1 Token-Bildung Alle CSS-Level – Level 1, Level 2 und alle zuknftigen Level – verwenden dieselbe Kernsyntax. Auf diese Weise ist es m=glich, dass ein Benutzerprogramm auch Stylesheets in CSS-Levels parst (auch wenn er sie nicht vollst@ndig versteht), die noch gar nicht existiert haben, als das Benutzerprogramm entwickelt wurde. Die Designer k=nnen dieses Funktionsmerkmal nutzen, um Stylesheets anzulegen, die auch mit @lteren Benutzerprogrammen eingesetzt werden k=nnen, w@hrend sie gleichzeitig alle M=glichkeiten der neuesten CSS-Level aussch=pfen. Auf der lexikalischen Ebene bestehen CSS-Stylesheets aus einer Folge von Token. Diese Token-Liste fr CSS2 sieht wie im Folgenden gezeigt aus. Die Definitionen verwenden regul@re Ausdrcke im Stil von Lex. Bytecodes beziehen sich auf ISO 10646 ([ISO10646]). Wie in Lex legt im Fall von mehreren bereinstimmungen die l@ngste bereinstimmung das Token fest.

< 560 >

CSS2-Syntax und grundlegende Datentypen

Page size: 168,00 x 240,00 mm

Sandini Bib

Token

Definition

IDENT

{ident}

ATKEYWORD

@{ident}

STRING

{string}

HASH

#{name}

NUMBER

{num}

PERCENTAGE

{num}%

DIMENSION

{num}{ident}

URI

url\({w} {string} {w}\) | url\ ([!#$%&*-~]| {escape})*{w})

UNICODE-RANGE

U\+[0-9-F?]{1,6}(-[0-9A-F]{1,6})?

CDO

;

;

{

\{

}

\}

(

\(

)

\)

[

\[

]

\]

S

[ \t\r\n\f]+

COMMENT

\/\*[^*]*\*+([^/][^*]*\*+)*\/

FUNCTION

{ident}\(

INCLUDES

~=

DASHMATCH

|=

DELIM

Ein beliebiges anderes Zeichen, das in den oben beschriebenen Regeln nicht verwendet wird, sowie keine einfachen oder doppelten Anfhrungszeichen.

Syntax

< 561 >

Cascading Style Sheets, Level 2

Anmerkung der bersetzer: Lex ist ein auf Unix-Systemen verbreitetes Werkzeug, das dazu dient, Programme zum Parsing einer Sprache zu generieren.

Page size: 168,00 x 240,00 mm

Sandini Bib

Die Makros in den geschweiften Klammern ({}) sind wie folgt definiert: Makro

Definition

ident

{nmstart}{nmchar}*

name

{nmchar}+

nmstart

[a-zA-Z_]|{nonascii}|{escape}

nonascii

[^\0-\177]

unicode

\\[0-9a-f]{1,6}[ \n\r\t\f]?

escape

\\[0-9a-f]{1,6}[ \n\r\t\f]?

nmchar

[a-zA-Z0-9-_]|{nonascii}|{escape}

num

[0-9]+|[0-9]*\.[0-9]+

string

{string1}|{string2}

nl

\n|\r\n|\r|\f

w

[ \t\r\n\f]*

Cascading Style Sheets, Level 2

Nachfolgend sehen Sie die Kernsyntax fr CSS. Die folgenden Abschnitte beschreiben, wie sie zu verwenden ist. Anhang D beschreibt eine einschr@nkendere Grammatik, die n@her an der CSS Level 2-Sprache ist. stylesheet statement at-rule block ruleset selector declaration property value any

: : : : : : : : : :

[ CDO | CDC | S | statement ]*; ruleset | at-rule; ATKEYWORD S* any* [ block | ';' S* ]; '{' S* [ any | block | ATKEYWORD S* | ';' ]* '}' S*; selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*; any+; property ':' S* value; IDENT S*; [ any | block | ATKEYWORD S* ]+; [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES | FUNCTION '(' any* ')' | DASHMATCH | '(' any* ')' | '[' any* ']' ]

S*;

In der Grammatik treten (der Lesbarkeit halber) keine COMMENT-Token auf, zwischen den anderen Token sind jedoch an beliebiger Stelle beliebig viele solcher Token erlaubt.

Das Token S in der obigen Grammatik steht fr Leerraum. In Leerraum k=nnen nur die Zeichen „Leerzeichen“ (Unicode-Code 32), „Tabulator“ (9), „Line Feed“ (10, Zeilenvorschub), „Carriage Return“ (13, Wagenrcklauf) und „Form Feed“ (12, Seitenvorschub) auftreten. Andere leerzeichen@hnliche Zeichen, wie beispielsweise das „em-Leerzeichen“ (8195) und das „ideographische Leerzeichen“ (12288), sind niemals Teil eines Whitespace. 4.1.2 Schl-sselwUrter Schlsselw=rter haben die Form von Bezeichnern. Schlsselw=rter drfen nicht zwischen Anfhrungszeichen ("..." oder '...') stehen. Damit ist

< 562 >

CSS2-Syntax und grundlegende Datentypen

Page size: 168,00 x 240,00 mm

Sandini Bib

red

ein Schlsselwort, "red"

dagegen nicht. (Es handelt sich um eine Zeichenkette.) Weitere fehlerhafte Beispiele: width: "auto"; border: "none"; font-family: "serif"; background: "red";

4.1.3 Zeichen und Groß-/Kleinschreibung Die folgenden Regeln gelten immer: In CSS-Stylesheets wird die Groß-/Kleinschreibung grunds@tzlich nicht bercksichtigt, außer in Teilen, die nicht unter der Kontrolle von CSS stehen. Die Groß-/Kleinschreibung von Werten der HTML-Attribute "id" und "class", von Schriftnamen und URIs liegen außerhalb des Gltigkeitsbereichs dieser Spezifikation. Beachten Sie insbesondere, dass fr Elementnamen in HTML die Groß-/Kleinschreibung nicht bercksichtigt wird, in XML dagegen schon.

·

·

Folglich wird Groß-/Kleinschreibung auch in

In CSS2 drfen Bezeichner (inklusive Elementnamen, Klassen und IDs in Selektoren) nur die Zeichen [A-Za-z0-9_] und ISO 10646-Zeichen 161 und h=her enthalten, ebenso wie den Trennstrich (-); sie drfen nicht mit einem Trennstrich oder einer Ziffer beginnen. Außerdem drfen sie geschtzte Zeichen („escaped characters“) enthalten, ebenso wie beliebige ISO 10646-Zeichen als numerischen Code (siehe n@chsten Punkt). Beispielsweise k=nnte der Bezeichner "B&W?" als "B\&W\?" oder "B\26 W\3F"geschrieben werden. Beachten Sie, dass Unicode Code-zu-Code-@quivalent zu ISO 10646 ist (siehe [UNICODE] und [ISO10646]).

Anmerkung der bersetzer: Praktisch bedeutet das, dass berall wo „ISO 10646“ steht, auch „UNICODE“ gelesen werden kann.

·

In CSS2 kennzeichnet ein Backslash (\) drei Arten von Zeichen-Escapefolgen.

Erstens, innerhalb eines Strings wird ein Backslash gefolgt von einem Neuezeilezeichen ignoriert (das heißt, der String wird so interpretiert, als enthielte er weder den Backslash noch das Neuezeilezeichen).

Syntax

< 563 >

Cascading Style Sheets, Level 2

Anmerkung der bersetzer: XHTML unterschieden.

Page size: 168,00 x 240,00 mm

Sandini Bib

Zweitens, er verwirft die Bedeutung spezieller CSS-Zeichen. Alle Zeichen (außer einer hexadezimalen Ziffer) k=nnen mit einem Backslash gekennzeichnet („escaped“) werden, um ihre spezielle Bedeutung aufzuheben. Beispielsweise ist "\"" ein String, der aus einem doppelten Anfhrungszeichen besteht. Stylesheet-Pr@prozessoren drfen diese Backslashes nicht aus einem Stylesheet entfernen, weil das die Bedeutung des Stylesheets ver@ndern wrde. Drittens, die Backslash-Escapes erlauben den Autoren, Zeichen zu verwenden, die nicht ganz einfach in ein Dokument aufgenommen werden k=nnen. In diesem Fall folgen dem Backslash h=chstens sechs hexadezimale Ziffern (0..9A..F), was fr die ISO 10646-Zeichen ([ISO10646]) mit der jeweiligen Nummer steht. Wenn der hexadezimalen Nummer eine Ziffer oder ein Buchstabe folgt, muss das Ende der Nummer erkennbar sein. Dazu gibt es zwei M=glichkeiten: 1. Durch Einfgen eines Leerzeichens (oder eines anderen Leerraum-Zeichens): "\26 B" ("&B") 2. Durch die Angabe von genau 6 hexadezimalen Ziffern: "\000026B" ("&B") Diese beiden Methoden k=nnen auch kombiniert werden. Hinter einem hexadezimalen Escape wird nur ein Leerraum-Zeichen ignoriert. Beachten Sie, dass das bedeutet, dass ein „reales“ Leerzeichen hinter der Escape-Folge mit Escape gekennzeichnet oder verdoppelt werden muss. Backslash-Escapes werden immer als Teil eines Bezeichners oder eines Strings betrachtet (z. B. ist "\7B" kein Interpunktionszeichen, obwohl "{" das ist, und "\32" darf am Anfang eines Klassennamens stehen, obwohl "2" nicht dort stehen darf).

·

Cascading Style Sheets, Level 2

4.1.4 Anweisungen Ein CSS-Stylesheet besteht in jeder CSS-Version aus einer Liste mit Anweisungen (siehe nachfolgende Grammatik). Es gibt zwei Arten von Anweisungen: at-Regeln und Regelmengen. Um die Anweisungen herum darf Whitespace stehen. In dieser Spezifikation bedeuten die Ausdrcke „unmittelbar vor“ oder „unmittelbar hinter“, dass keine Whitespaces oder Kommentare dazwischen stehen.

4.1.5 At-Regeln At-Regeln beginnen mit einem At-Schlsselwort, einem '@'-Zeichen, unmittelbar gefolgt von einem Bezeichner (z. B. '@import', '@page'). Eine At-Regel umfasst alles bis und inklusive des n@chsten Semikolons (;) oder dem n@chsten Block, abh@ngig davon, was zuerst kommt. Ein CSS-Benutzerprogramm, das auf eine nicht erkannte At-Regel trifft, muss die gesamte At-Regel ignorieren und das Parsing hinter dieser At-Regel fortsetzen. CSS2-Benutzerprogramme mssen jede @import-Regel ignorieren, die innerhalb eines Blocks steht oder die nicht vor allen anderen Regelmengen steht.

< 564 >

CSS2-Syntax und grundlegende Datentypen

Page size: 168,00 x 240,00 mm

Sandini Bib

Angenommen, ein CSS2-Parser trifft auf das folgende Stylesheet: @import "subs.css"; H1 { color: blue } @import "list.css";

Das zweite '@import' ist gem@ß CSS2 nicht erlaubt. Der CSS2-Parser ignoriert die gesamte AtRegel, wodurch das Stylesheet letztlich auf Folgendes reduziert wird: @import "subs.css"; H1 { color: blue }

Im folgenden Beispiel ist die zweite '@import'-Regel ungltig, weil sie innerhalb eines '@media'-Blocks steht. @import "subs.css"; @media print { @import "print-main.css"; BODY { font-size: 10pt } } H1 {color: blue }

Ein Block beginnt mit einer =ffnenden geschweiften Klammer ({) und endet mit der zugeh=rigen schließenden geschweiften Klammer (}). Innerhalb der geschweiften Klammern drfen beliebige Zeichen stehen. Klammern (()), eckige Klammern ([ ]) und geschweifte Klammern ({}) mssen immer paarweise auftreten und drfen verschachtelt werden. Einfache (') und doppelte Anfhrungszeichen (") mssen ebenfalls paarweise auftreten, und die Zeichen zwischen ihnen werden als Zeichenkette („String“) geparst. Die Definition eines Strings finden Sie im Abschnitt ber die Tokenbildung, am Anfang dieses Kapitels. Nachfolgend sehen Sie ein Beispiel fr einen Block. Beachten Sie, dass die schließende geschweifte Klammer innerhalb der doppelten Anfhrungszeichen nicht zu der =ffnenden geschweiften Klammer des Blockes geh=rt und dass das zweite einfache Anfhrungszeichen ein mit Escape gekennzeichnetes Zeichen ist und damit nicht zum ersten einfachen Anfhrungszeichen geh=rt: { causta: "}" + ({7} * '\'') }

Beachten Sie, dass die obige Regel kein gltiges CSS2 ist, aber nach der obigen Definition dennoch einen Block darstellt.

Syntax

< 565 >

Cascading Style Sheets, Level 2

4.1.6 BlUcke

Page size: 168,00 x 240,00 mm

Sandini Bib

4.1.7 Regelmengen, DeklarationsblUcke und Selektoren Eine Regelmenge (auch als „Regel “ bezeichnet) besteht aus einem Selektor gefolgt von einem Deklarationsblock. Ein Deklarationsblock (im Folgenden auch als {}-Block bezeichnet) beginnt mit einer =ffnenden geschweiften Klammer ({) und endet mit einer paarweise dazugeh=rigen schließenden geschweiften Klammer (}). Zwischen diesen Klammern muss sich eine Liste mit null oder mehr durch Semikolons (;) voneinander abgetrennten Deklarationen befinden. Der Selektor besteht aus allem bis (aber nicht inklusive) zu der ersten =ffnenden geschweiften Klammer ({). Ein Selektor existiert immer in Kombination mit einem {}-Block. Wenn ein Benutzerprogramm den Selektor nicht parsen kann (wenn es sich dabei beispielsweise nicht um gltiges CSS2 handelt), muss er den {}-Block ebenfalls ignorieren. In CSS2 hat das Komma (,) in Selektoren eine spezielle Bedeutung. Weil jedoch nicht bekannt ist, ob dem Komma in zuknftigen Versionen von CSS eine andere Bedeutung zuteil wird, sollte die gesamte Anweisung ignoriert werden, falls sich irgendwo im Selektor ein Fehler befindet, auch wenn der restliche Selektor CSS2 entsprechend korrekt aussieht. Beispiel Weil beispielsweise "&" kein gltiges Token in einem CSS2-Selektor ist, muss ein CSS2-Benutzerprogramm die gesamte zweite Zeile ignorieren und darf die Farbe von H3 nicht auf rot setzen:

Cascading Style Sheets, Level 2

H1, H2 {color: green } H3, H4 & H5 {color: red } H6 {color: black }

Nachfolgend sehen Sie ein komplexeres Beispiel. Die beiden ersten Paare geschweifter Klammern befinden sich innerhalb einer Zeichenkette und markieren nicht das Ende des Selektors. Dies ist eine gltige CSS2-Anweisung. P[example="public class foo\ {\ private int x;\ \ foo(int x) {\ this.x = x;\ }\ \ }"] { color: red }

4.1.8 Deklarationen und Eigenschaften Eine Deklaration ist entweder leer oder besteht aus einer Eigenschaft gefolgt von einem Doppelpunkt (:) gefolgt von einem Wert. Vor und hinter diesen Bestandteilen k=nnen sich beliebige Leerraum-Zeichen befinden. Aufgrund der Arbeitsweise von Selektoren k=nnen mehrere Deklarationen fr denselben Selektor in durch Semikolons (;) voneinander getrennten Gruppen angeordnet werden.

< 566 >

CSS2-Syntax und grundlegende Datentypen

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Die folgenden Regeln: H1 H1 H1 H1 H1 H1

{ { { { { {

font-weight: bold } font-size: 12pt } line-height: 14pt } font-family: Helvetica } font-variant: normal } font-style: normal }

sind also @quivalent zu:

Eine Eigenschaft ist ein Bezeichner. Innerhalb des Wertes drfen beliebige Zeichen auftreten, wobei jedoch Klammern ("()"), eckige Klammern ("[ ]"), geschweifte Klammern ("{}"), einfache Anfhrungszeichen (') und doppelte Anfhrungszeichen (") nur paarweise auftreten drfen. Semikolons, die sich nicht innerhalb von Strings befinden, mssen mit dem Escape-Zeichen gekennzeichnet werden. Klammern, eckige Klammern und geschweifte Klammern drfen verschachtelt werden. Innerhalb der Anfhrungszeichen werden Zeichen als String geparst. Die Syntax von Werten wird fr jede Eigenschaft separat angegeben, aber in jedem Fall werden Werte aus Bezeichnern, Strings, Zahlen, L@ngen, Prozentwerten, URIs, Farben, Winkeln, Zeiten und Frequenzen zusammengesetzt. Beispiel Angenommen, ein CSS2-Parser trifft auf das folgende Stylesheet: H1 { color: red; font-style: 12pt } /* UngUltiger Wert: 12pt */ P { color: blue; font-vendor: any; /* UngUltige Eigenschaft: font-vendor */ font-variant: small-caps } EM EM { font-style: normal }

Die zweite Deklaration der ersten Zeile enth@lt den ungltigen Wert '12pt'. Die zweite Deklaration in der zweiten Zeile enth@lt eine undefinierte Eigenschaft 'font-vendor'. Der CSS2-Parser ignoriert diese Deklarationen, wodurch er das Stylesheet letztlich auf Folgendes reduziert: H1 { color: red; } P { color: blue; font-variant: small-caps } EM EM { font-style: normal }

Syntax

< 567 >

Cascading Style Sheets, Level 2

H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal }

Page size: 168,00 x 240,00 mm

Sandini Bib

Anmerkung der bersetzer: Der Wert '12pt' ist zwar syntaktisch korrekt, jedoch nicht fr die Eigenschaft 'font-style' gltig.

4.1.9 Kommentare Kommentare beginnen mit den Zeichen "/*" und enden mit den Zeichen "*/". Sie k=nnen berall zwischen Token stehen, und ihr Inhalt hat keinerlei Einfluss auf die Darstellung. Kommentare drfen nicht verschachtelt werden. CSS erlaubt an einigen Stellen auch die SGML-Kommentarkennzeichner (""), aber sie kennzeichnen keine CSS-Kommentare. Sie sind erlaubt, damit Formatierungsregeln, die in einem HTML-Quelldokument (im STYLE-Element) enthalten sind, vor Benutzerprogrammen, die @lter als HTML 3.2 sind, verborgen werden k=nnen. Weitere Informationen finden Sie in der HTML 4.0-Spezifikation ([HTML40]).

Cascading Style Sheets, Level 2

Anmerkung der bersetzer: Es ist zu beachten, dass gltige SGMLKommentare sind – wie oben gesagt –, dass SGML aber eine allgemeinere Form der Kommentare kennt (fr Fachkundige: - - ... - - innerhalb einer Markup-Deklaration). Es ist blich, den Inhalt des STYLE-Elements in einzuschließen. Diese Form der Kommentierung ist heute kaum mehr relevant, da praktisch alle g@ngigen WebBrowser das STYLE-Element kennen und nicht auf die Idee kommen, den Inhalt anzuzeigen.

4.2 Regeln f-r die Verarbeitung von Parser-Fehlern In einigen F@llen mssen Benutzerprogramme Teile eines fehlerhaften Stylesheets ignorieren. Diese Spezifikation definiert ignorieren so, dass das Benutzerprogramm den fehlerhaften Teil parst (um seinen Anfang und sein Ende zu ermitteln), sich aber ansonsten so verh@lt, als g@be es ihn nicht. Um sicherzustellen, dass in der Zukunft neue Eigenschaften und neue Werte fr existierende Eigenschaften hinzugefgt werden k=nnen, mssen Benutzerprogramme die folgenden Regeln beachten, wenn sie auf die nachfolgenden Szenarien treffen: Unbekannte Eigenschaften Benutzerprogramme mssen eine Deklaration mit einer unbekannten Eigenschaft ignorieren. Fr das folgende Stylesheet beispielsweise: H1 { color: red; rotation: 70minutes }

verh@lt sich der Benutzerprogramm genau so, als l@ge das folgende Stylesheet vor: H1 { color: red }

< 568 >

CSS2-Syntax und grundlegende Datentypen

Page size: 168,00 x 240,00 mm

Sandini Bib

Fehlerhafte Werte Benutzerprogramme mssen eine Deklaration mit fehlerhaftem Wert ignorieren. Beispiel: IMG { float: left } /* korrektes CSS2 */ IMG { float: left here } /* "here" ist kein Wert von 'float' */ IMG { background: "red" } /* SchlUsselw^rter dUrfen in CSS2 nicht in doppelten AnfUhrungszeichen stehen */ IMG { border-width: 3 } /* fUr L]ngenangaben muss eine Einheit angegeben werden */

Ein CSS2-Parser wrde die erste Regel bercksichtigen, den Rest aber ignorieren, als s@he das Stylesheet wie folgt aus: IMG { float: left } IMG { } IMG { } IMG { }

Ein Benutzerprogramm, das zu einer zuknftigen CSS-Spezifikation konform ist, kann m=glicherweise eine oder mehrere der anderen Regeln ebenfalls akzeptieren. Ung-ltige At-Schl-sselworte Benutzerprogramme mssen ein ungltiges At-Schlsselwort mit allem Folgenden bis und einschließlich dem n@chsten Semikolon (;) oder Block ({...}) ignorieren – je nach dem, was zuerst kommt. Betrachten Sie zum Beispiel Folgendes:

Die At-Regel '@three-dee' ist nicht Teil von CSS2. Deshalb wird die gesamte At-Regel ignoriert (bis zur dritten schließenden geschweiften Klammer inklusive). Ein CSS2-Benutzerprogramm ignoriert sie, so dass das Stylesheet letztlich reduziert wird auf: H1 { color: blue }

4.3 Werte 4.3.1 Integer und reelle Zahlen Einige Wertetypen k=nnen ganzzahlige Werte aufnehmen (gekennzeichnet durch ), oder reelle Zahlenwerte (gekennzeichnet durch ). Reelle Zahlen und ganze Zahlen werden nur in dezimaler Notation angegeben. Ein besteht aus einer oder mehreren Ziffern, „0“ bis „9“. Eine kann ein sein, oder sie kann null oder mehr Ziffern gefolgt von einem Punkt (.) gefolgt von einer oder mehreren Ziffern sein. Sowohl ganzen als auch reellen Zahlen kann ein „-“ oder ein „+“ vorausgehen, die das Vorzeichen darstellen.

Werte

< 569 >

Cascading Style Sheets, Level 2

@three-dee { @background-lighting { azimuth: 30deg; elevation: 190deg; } H1 { color: red } } H1 { color: blue }

Page size: 168,00 x 240,00 mm

Sandini Bib

Beachten Sie, dass viele Eigenschaften, fr die eine ganze oder eine reelle Zahl als Wert angegeben werden kann, einen bestimmten Wertebereich vorgeben, h@ufig einen nicht negativen Wert.

4.3.2 L.ngen L@ngen stellen horizontale oder vertikale Maße dar. Das Format eines L@ngenwertes (in dieser Spezifikation durch gekennzeichnet) ist ein optionales Vorzeichen ('+' oder '-', wobei '+' den Standardwert darstellt), unmittelbar gefolgt von einer (mit oder ohne Dezimalpunkt), unmittelbar gefolgt von einem Einheitenbezeichner (z. B. px, deg usw.). Hinter der L@nge '0' ist die Angabe eines Einheitenbezeichners optional.

Cascading Style Sheets, Level 2

Anmerkung der bersetzer: In diesen Abschnitt hat sich in mehreren Unterabschnitten ein Fehler eingeschlichen, der in den CSS2-Errata wie folgt behandelt wird: „Mehrere Werte, die in den Unterabschnitten dieses Abschnitts beschrieben werden, erlauben unkorrekterweise zwei ‚+‘- oder ‚-‘-Zeichen am Anfang. [...] [Mit Bezug auf :] Da bereits ein ‚+‘- oder ‚-‘-Zeichen erlaubt, bedeutet die obige Definition [von ], dass zwei Zeichen vorkommen k=nnen. Die folgenden Wertetypen erlauben zwei Zeichen, sollten jedoch nur eines erlauben: L@ngen, Prozentwerte, Winkel.“

Einige Eigenschaften erlauben die Angabe negativer L@ngenwerte, aber das kann das Formatierungsmodell verkomplizieren, und es kann von der jeweiligen Implementierung abh@ngige Beschr@nkungen geben. Wenn kein negativer Wert untersttzt werden kann, sollte er in den n@chsten Wert umgewandelt werden, der untersttzt werden kann. Es gibt zwei Arten L@ngeneinheiten: relative und absolute. Relative L,ngeneinheiten geben eine L@nge relativ zu einer anderen L@ngeneigenschaft an. Stylesheets, die relative Einheiten verwenden, k=nnen einfacher von einem Medium auf ein anderes skaliert werden (z. B. von einer Bildschirmanzeige auf einen Laserdrucker). Relative Einheiten sind: em : die 'font-size' der betreffenden Schrift ex : die 'x-height' der betreffenden Schrift. px : Pixel, relativ zum Anzeigeger@t

·· ·

H1 { margin: 0.5em } H1 { margin: 1ex } P { font-size: 12px }

/* em */ /* ex */ /* px */

Anmerkung der bersetzer: Dass em und ex relative Einheiten sind, ist offensichtlich, da ihre Gr=ße von der aktuellen Schrift abh@ngt. Sie stellen also gute M=glichkeiten zur Verfgung, den Benutzer die Gr=ße w@hlen zu lassen (ber die Schriftgr=ße) und andere Werte (z. B. R@nder) davon abh@ngig zu machen. Im Gegensatz dazu ist ein Pixel im allgemeinen Verst@ndnis keine relative Gr=ße. Im Folgenden wird beschrieben,

< 570 >

CSS2-Syntax und grundlegende Datentypen

Page size: 168,00 x 240,00 mm

Sandini Bib

was es damit auf sich hat. Ob die g@ngigen Ausgabeger@te ein Pixel als relative Gr=ße ansehen, darf jedoch zumindest bezweifelt werden. Aus praktischer Sicht sind deshalb em und ex zu empfehlen.

Die Einheit 'em' ist gleich dem berechneten Wert der Eigenschaft 'font-size' des Elements, auf das sie angewendet wird. Die Ausnahme ist, wenn 'em' im Wert der Eigenschaft 'font-size' selbst vorkommt, dann bezieht es sich auf die Schriftgr=ße des bergeordneten Elements. Sie kann fr vertikale oder horizontale Maße verwendet werden. (Diese Einheit wird in typographischen Texten manchmal auch als die „Geviert-Breite“ bezeichnet.) Die Einheit 'ex' ist durch die 'x-height' der Schrift definiert. Die x-H=he wird so bezeichnet, weil sie h@ufig gleich der H=he des kleinen „x“ ist. 'ex' ist jedoch selbst fr Schriften definiert, in denen kein „x“ enthalten ist. Beispiel Die Regel H1 { line-height: 1.2em }

bedeutet, dass die Zeilenh=he von H1-Elementen 20% gr=ßer als die Schriftgr=ße von H1-Elementen ist. Andererseits bedeutet

dass die Schriftgr=ße von H1-Elementen um 20% gr=ßer als die von H1-Elementen geerbte Schriftgr=ße ist. Wenn 'em' und 'ex' fr die Wurzel (Root) des Dokumentbaums (z. B. "HTML" in HTML) angegeben werden, beziehen sie sich auf den Ausgangswert der Eigenschaft. Pixeleinheiten sind relativ zur Aufl=sung des Anzeigeger@ts, wobei es sich gr=ßtenteils um eine Bildschirmanzeige handelt. Wenn die Pixeldichte des Ausgabeger@ts sich stark von der eines typischen Computerbildschirms unterscheidet, sollte das Benutzerprogramm die Pixelwerte neu skalieren. Es wird empfohlen, dass das Referenzpixel der Sichtwinkel eines Pixels auf einem Ger@t mit einer Pixeldichte von 90dpi und einem Abstand vom Leser von einer Arml@nge ist. Fr eine Arml@nge von beispielsweise 70 cm w@re der Sichtwinkel damit etwa 0,0227 Grad. Fr das Lesen in Arml@ngenabstand entspricht 1px also etwa 0,28 mm (1/90 Zoll). Beim Ausdruck auf einem Laserdrucker, der zum Lesen bei etwas weniger als Arml@nge vorgesehen ist (55 cm), betr@gt 1px etwa 0,21 mm. Auf einem 300dpi-Drucker („dots per inch“, Punkte pro Zoll) kann dafr auf 3 Punkte (0,25mm) aufgerundet werden; auf einem 600dpi-Drucker auf 5 Punkte. Die beiden nachfolgenden Bilder demonstrieren den Effekt des Ansichtabstands fr die Gr=ße eines Pixels sowie den Effekt der Aufl=sung eines Ger@ts. Im ersten Bild fhrt ein Leseabstand von 71 cm (28 Zoll) zu einem px-Wert von 0,28 mm, w@hrend ein Leseabstand von 3,5 m (12 Fuß) zu einem px-Wert von 1,4 mm fhrt.

Werte

< 571 >

Cascading Style Sheets, Level 2

H1 { font-size: 1.2em }

Page size: 168,00 x 240,00 mm

Sandini Bib

Anmerkung der bersetzer: Die CSS2-Errata korrigieren: „Der empfohlene Referenzpixel basiert auf einem 96dpi-Ger@t, nicht 90dpi. Der Sichtwinkel betr@gt folglich ungef@hr 0,0213 Grad anstatt 0,0227 und ein Pixel auf Arml@nge ist ungef@hr 0,26 mm statt 0,28.“

1.4 mm 0.28 mm

viewer 28 inch 71 cm 140 inch 3.5 m

Im zweiten Bild wird ein Bereich von 1px mal 1px durch einen einzigen Punkt auf einem gering aufl=senden Ger@t (einem Computerbildschirm) abgedeckt, w@hrend derselbe Bereich auf einem h=her aufl=senden Ger@t (wie beispielsweise einem 400dpi-Laserdrucker) von 16 Punkten abgedeckt wird.

Cascading Style Sheets, Level 2

laserprint monitor screen 1px 1px

= 1 device pixel

Untergeordnete Elemente erben nicht die fr ihre bergeordneten Elemente angegebenen relativen Werte; sie erben (im Allgemeinen) die berechneten Werte.

< 572 >

CSS2-Syntax und grundlegende Datentypen

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel In den folgenden Regeln ist der berechnete Wert von 'text-indent' fr H1-Elemente gleich 36pt, nicht 45pt, falls H1 ein untergeordnetes Element des BODY-Elements ist. BODY { font-size: 12pt; text-indent: 3em; /* z. B. 36pt */ } H1 { font-size: 15pt }

Absolute L,ngeneinheiten sind nur dann sinnvoll, wenn die physischen Eigenschaften des Ausgabemediums bekannt sind. Die absoluten Einheiten sind: in : Inch (Zoll) – 1 Zoll ist gleich 2,54 Zentimeter. cm : Zentimeter mm : Millimeter pt : Punkte – die in CSS2 verwendeten Punkte entsprechen 1/72 Zoll. pc : Picas – 1 Pica entspricht 12 Punkten.

·· ·· ·

H1 H2 H3 H4 H4

{ { { { {

margin: 0.5in } line-height: 3cm } word-spacing: 4mm } font-size: 12pt } font-size: 1pc }

/* /* /* /* /*

Zoll */ Zentimeter */ Millimeter */ Punkte */ Picas */

In F@llen, in denen die angegebene L@nge nicht untersttzt werden kann, mssen Benutzerprogramme den tats@chlichen Wert approximieren.

Das Format eines Prozentwerts (in dieser Spezifikation als gekennzeichnet) ist ein optionales Vorzeichen ('+' oder '-', wobei '+' der Standard ist, unmittelbar gefolgt von einer , unmittelbar gefolgt von '%'. Prozentwerte sind immer relativ zu einem anderen Wert, z. B. einer L@nge. Jede Eigenschaft, die Prozentwerte untersttzt, definiert auch den Wert, auf den sich der Prozentwert bezieht. Der Wert kann der Wert einer anderen Eigenschaft fr dasselbe Element sein, eine Eigenschaft fr ein Vorg@ngerelement oder ein Wert des Formatierungskontexts (z. B. die Breite eines umschließenden Blocks). Wenn ein Prozentwert fr eine Eigenschaft des Wurzel-Elements angegeben wird und so definiert ist, dass er auf den geerbten Wert einer Eigenschaft verweist, ist der resultierende Wert der Prozentwert multipliziert mit dem Ausgangswert dieser Eigenschaft. Beispiel Weil untergeordnete Elemente (im Allgemeinen) die berechneten Werte ihres bergeordneten Elements erben, erben im folgenden Beispiel die untergeordneten Elemente des P-Elements einen Wert von 12pt fr 'line-height', nicht etwa den Prozentwert (120%): P { font-size: 10pt } P { line-height: 120% } /* 120% von 'font-size' */

Werte

< 573 >

Cascading Style Sheets, Level 2

4.3.3 Prozentwerte

Page size: 168,00 x 240,00 mm

Sandini Bib

4.3.4 URL + URN = URI URLs (Uniform Resource Locators, siehe [RFC1738] und [RFC1808]) stellen die Adresse einer Ressource im Web bereit. Eine voraussichtlich neue Methode, Ressourcen zu identifizieren, ist URN (Uniform Resource Name). Zusammen werden sie als URIs (Uniform Resource Identifiers, siehe [URI]) bezeichnet. In dieser Spezifikation wird der Begriff URI verwendet. URI-Werte in dieser Spezifikation werden als gekennzeichnet. Die funktionale Notation zur Angabe von URIs in Eigenschaftswerten ist ‘url()’, wie in: BODY { background: url("http://www.bg.com/pinkish.gif") }

Das Format eines URI-Wertes ist 'url(', gefolgt von optionalem Leerraum, gefolgt von einem optionalen einfachen Anfhrungszeichen (') oder doppelten Anfhrungszeichen ("), gefolgt von dem eigentlichen URI, gefolgt von einem optionalen einfachen Anfhrungszeichen (') oder doppelten Anfhrungszeichen ("), gefolgt von optionalem Whitespace, gefolgt von ')'. Die beiden Anfhrungszeichen mssen gleich sein. Beispiel Ein Beispiel ohne Anfhrungszeichen:

Cascading Style Sheets, Level 2

LI { list-style: url(http://www.redballs.com/redball.png) disc }

Klammern, Kommas, Whitespace-Zeichen, einfache Anfhrungszeichen (') und doppelte Anfhrungszeichen (") in einer URI mssen durch einen Backslash als Escape gekennzeichnet werden: '\(', '\)', '\,'. Abh@ngig vom Typ des URI kann es auch m=glich sein, die oben gezeigten Zeichen als URI-Escapes zu schreiben (wobei "(" = %28, ")" = %29 usw.), wie in [URI] beschrieben. Um modulare Stylesheets zu erzeugen, die nicht von der absoluten Position einer Ressource abh@ngig sind, k=nnen die Autoren relative URIs verwenden. Relative URIs (wie in [RFC1808] definiert) werden unter Verwendung eines Basis-URI zu vollst@ndigen URIs aufgel=st. RFC 1808 Abschnitt 3 definiert den normativen Algorithmus fr diesen Prozess. Fr CSS-Stylesheets ist der Basis-URI der des Stylesheets, nicht der des Quelldokuments. Beispiel Angenommen, die folgende Regel: BODY { background: url("yellow") }

befindet sich in einem Stylesheet, das durch die folgende URI angegeben wird: http://www.myorg.org/style/basic.css

Der Hintergrund des BODY des Quelldokuments wird kachelartig mit dem Bild gefllt, das in der durch den folgenden URI angegebenen Ressource bereitgestellt ist: http://www.myorg.org/style/yellow

Benutzerprogramme k=nnen dahingehend variieren, wie sie URIs verarbeiten, die nicht verfgbare oder nicht anwendbare Ressourcen bezeichnen.

< 574 >

CSS2-Syntax und grundlegende Datentypen

Page size: 168,00 x 240,00 mm

Sandini Bib

4.3.5 Z.hler Z@hler werden durch Bezeichner gekennzeichnet (siehe die Eigenschaften 'counter-increment' und 'counter-reset'). Um auf den Wert eines Z@hlers zu verweisen, wird die Notation 'counter()' oder 'counter(, )' verwendet. Der Standardstil ist 'decimal'. Um auf eine Folge verschachtelter Z@hler desselben Namens zu verweisen, wird die Notation 'counters(, )' oder 'counters(, , )' verwendet. Weitere Informationen finden Sie im Abschnitt „Verschachtelte Z@hler und Gltigkeitsbereich“ im Kapitel ber den erzeugten Inhalt. In CSS2 kann ein Verweis auf die Werte von Z@hlern nur aus der Eigenschaft 'content' erfolgen. Beachten Sie, dass 'none' ein m=glicher ist: 'counter(x, none)' ergibt einen leeren String. Beispiel Nachfolgend sehen Sie ein Stylesheet, das die Abs@tze (P) fr jedes Kapitel (H1) nummeriert. Die Abs@tze werden mit r=mischen Zahlen nummeriert, gefolgt von einem Punkt und einem Leerzeichen: P {counter-increment: par-num} H1 {counter-reset: par-num} P:before {content: counter(par-num, upper-roman) ". "}

Fr Z@hler, die nicht im Gltigkeitsbereich eines 'counter-reset' liegen, nimmt man an, dass sie durch einen 'counter-reset' fr das Wurzel-Element auf 0 zurckgesetzt wurden.

Eine ist entweder ein Schlsselwort oder eine numerische RGB-Angabe.

Anmerkung der bersetzer: In der RGB-Angabe werden die Rot-, Grn- und Blau-Anteile (RGB) der gewnschten Farbe genannt.

Die Liste der Schlsselwort-Farbnamen ist: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white und yellow (aquamarinblau, schwarz, blau, fuchsia, grau, grn, limonengelb, kastanienbraun, navygrn, olivgrn, violett, rot, silber, (blau-grn (teal), weiß und gelb). Diese 16 Farben sind in HTML 4.0 ([HTML40]) definiert. Neben diesen Farbschlsselw=rtern k=nnen Benutzer auch Schlsselw=rter angeben, die den von bestimmten Objekten in der Benutzerumgebung verwendeten Farben entsprechen. Weitere Informationen finden Sie im Abschnitt ber Systemfarben. Beispiel BODY {color: black; background: white } H1 { color: maroon } H2 { color: olive }

Werte

< 575 >

Cascading Style Sheets, Level 2

4.3.6 Farben

Page size: 168,00 x 240,00 mm

Sandini Bib

Das RGB-Farbmodell wird in numerischen Farbspezifikationen verwendet. Die folgenden Beispiele geben alle dieselbe Farbe an: Beispiel

Cascading Style Sheets, Level 2

EM EM EM EM

{ { { {

color: color: color: color:

#f00 } #ff0000 } rgb(255,0,0) } rgb(100%, 0%, 0%) }

/* /* /* /*

#rgb */ #rrggbb */ Integer-Bereich 0 - 255 */ Float-Bereich 0.0% - 100.0% */

Das Format eines RGB-Werts in hexadezimaler Notation ist ein '#', unmittelbar gefolgt von drei oder sechs hexadezimalen Zeichen. Die dreistellige RGB-Notation (#rgb) wird in eine sechsstellige Form (#rrggbb) umgewandelt, indem die Ziffern repliziert werden, nicht, indem Nullen hinzugefgt werden. Beispielsweise wird #fb0 zu #ffbb00 expandiert. Damit wird sichergestellt, dass weiß (#ffffff) mit der Kurznotation (#fff) dargestellt werden kann, und es werden alle Abh@ngigkeiten von der Farbtiefe der Anzeige ausgeschlossen. Das Format eines RGB-Wertes in der funktionalen Notation ist 'rgb(' gefolgt von einer Liste mit durch Kommas voneinander getrennten Eintr@gen der drei numerischen Werte (entweder drei ganzzahlige Werte oder drei Prozentwerte), gefolgt von ')'. Der ganzzahlige Wert 255 entspricht 100%, und F oder FF in der hexadezimalen Notation: rgb(255,255,255) = rgb(100%, 100%, 100%) = #FFF. Leerraum-Zeichen um die numerischen Werte herum sind erlaubt. Alle RGB-Farben werden im sRGB-Farbraum angegeben (siehe [SRGB]). Benutzerprogramme k=nnen sich darin unterscheiden, in welcher Farbtreue sie diese Farben darstellen, aber die Verwendung von sRGB stellt eine eindeutige und objektiv messbare Definition dessen dar, wie die Farbe aussehen soll, was mit internationalen Standards in Verbindung gebracht werden kann (siehe [COLORIMETRY]). Konforme Benutzerprogramme k=nnen ihre Bemhungen zur Farbanzeige darauf begrenzen, eine Gammakorrektur darauf auszufhren. sRGB gibt ein Anzeigegamma von 2.2 unter vorgegebenen Anzeigebedingungen. Benutzerprogramme sollten die in CSS angegebenen Farben so anpassen, dass in Kombination mit dem „natrlichen“ Anzeigegamma eines Ausgabeger@ts ein effektives Anzeigegamma von 2.2 erzielt wird. Weitere Informationen finden Sie im Abschnitt ber Gammakorrektur. Beachten Sie, dass nur die in CSS angegebenen Farben betroffen sind; bei Bildern beispielsweise geht man davon aus, dass sie ihre eigenen Farbinformationen beinhalten. Werte außerhalb der Ger@teskala sollten ausgeschlossen werden: die Rot-, Grn- und Blauwerte mssen so ge@ndert werden, dass sie innerhalb des von dem Ger@t untersttzten Bereichs liegen. Fr einen typischen CRT-Bildschirm, dessen Ger@teskala dieselbe wie sRGB ist, sind die drei folgenden Regeln @quivalent: EM EM EM EM

{ { { {

color: color: color: color:

rgb(255,0,0) } rgb(300,0,0) } rgb(255,-10,0) } rgb(110%, 0%, 0%) }

/* /* /* /*

Integer-Bereich 0 zugeschnitten auf zugeschnitten auf zugeschnitten auf

- 255 */ rgb(255,0,0) */ rgb(255,0,0) */ rgb(100%,0%,0%) */

Andere Ger@te wie beispielsweise Drucker haben andere Skalen fr sRGB; einige Farben außerhalb des sRGB-Bereichs 0..255 sind darstellbar (innerhalb der Ger@teskala), w@hrend andere Farben innerhalb des sRGB-Bereichs 0..255 außerhalb der Ger@teskala liegen und damit ausgeschlossen werden.

< 576 >

CSS2-Syntax und grundlegende Datentypen

Page size: 168,00 x 240,00 mm

Sandini Bib

Hinweis: Obwohl Farben einem Dokument wesentliche Informationen hinzufgen k=nnen und es lesbarer machen, sollten Sie beachten, dass bestimmte Farbkombinationen Probleme fr farbenblinde Benutzer verursachen k=nnen. Wenn Sie ein Hintergrundbild verwenden oder die Hintergrundfarbe setzen, sollten Sie die Vordergrundfarben entsprechend anpassen. n

4.3.7 Winkel Winkelwerte (im Text als angegeben) werden in Kombination mit akustischen Stylesheets verwendet. Ihr Format ist ein optionales Vorzeichen ('+'oder '-', wobei '+' der Standard ist), unmittelbar gefolgt von einer , unmittelbar gefolgt von einem Winkeleinheitenbezeichner. Winkeleinheitenbezeichner sind: deg : Grad grad : Gradienten rad : Bogenmaß

·· ·

Winkelwerte k=nnen negativ sein. Sie sollten vom Benutzerprogramm in den Bereich 0-360deg normalisiert werden. Beispielsweise sind –10deg und 350deg @quivalent. Beispielsweise ist ein rechter Winkel '90deg' oder '100grad' oder '1.570796326794897rad'.

4.3.8 Zeiten

··

Zeitwerte k=nnen nicht negativ sein.

4.3.9 Frequenzen Frequenzwerte (im Text durch gekennzeichnet) werden in Kombination mit akustischen kaskadierenden Stylesheets verwendet. Ihr Format ist eine , unmittelbar gefolgt von einem Frequenzeinheitenbezeichner. Frequenzeinheitenbezeichner sind: Hz : Hertz kHz : Kilo Hertz

··

Frequenzwerte drfen nicht negativ sein. 200Hz (oder 200hz) beispielsweise ist ein Basston, 6kHz (oder 6khz) ist ein hoher Ton.

Werte

< 577 >

Cascading Style Sheets, Level 2

Zeitwerte (im Text durch gekennzeichnet) werden in Kombination mit akustischen Stylesheets verwendet. Ihr Format ist eine unmittelbar gefolgt von einem Zeiteinheitenbezeichner. Zeiteinheitenbezeichner sind: ms : Millisekunden s : Sekunden

Page size: 168,00 x 240,00 mm

Sandini Bib

4.3.10 Zeichenketten Zeichenketten („Strings“) k=nnen in doppelten oder einfachen Anfhrungszeichen angegeben werden. Doppelte Anfhrungszeichen drfen nicht innerhalb von doppelten Anfhrungszeichen vorkommen, es sei denn, es wird ihnen ein Escape vorangestellt (wie etwa '\"' oder '\22'). Gleiches gilt fr einfache Anfhrungszeichen ("\'") oder "\27"). "Dies "Dies 'Dies 'Dies

ist ist ist ist

ein ein ein ein

'String'" \"String\"" "String"' \'String\''

Eine Zeichenkette darf nicht direkt ein Neuezeile-Zeichen enthalten. Um ein Neuezeile-Zeichen in einen String aufzunehmen, verwenden Sie das Escape-Zeichen ‘\A’ (hexadezimal A ist das Zeilenvorschub-Zeichen in Unicode, stellt aber in CSS das allgemeine Konzept von „Neue Zeile“ dar). Ein Beispiel dafr finden Sie in der Beschreibung der Eigenschaft 'content'. Es ist m=glich, Zeichenketten aus @sthetischen oder anderen Grnden ber mehrere Zeilen zu umbrechen, aber in diesem Fall muss das eigentliche Neuezeile-Zeichen mit einem Backslash (\) als Escape gekennzeichnet werden. Die beiden folgenden Selektoren beispielsweise sind identisch: A[TITLE="ein nicht s\ o sehr langer Titel"] {/*...*/} A[TITLE="ein nicht so sehr langer Titel"] {/*...*/}

Cascading Style Sheets, Level 2

4.4 CSS-Dokumentdarstellung Ein CSS-Stylesheet ist eine Zeichenfolge aus dem Universal Character Set (siehe [ISO10646]). Zur bertragung und Speicherung mssen diese Zeichen durch eine Zeichencodierung codiert werden, die den in US-ASCII verfgbaren Zeichensatz untersttzt (z. B. ISO 8859-x, SHIFT JIS usw.). Eine gute Einfhrung in Zeichens@tze und Zeichencodierungen finden Sie in der HTML 4.0-Spezifikation ([HTML40], Kapitel 5), und auch in der XML 1.0-Spezifikation ([XML10]), Abschnitte 2.2 und 4.3.3 und in Anhang F. Wenn ein Stylesheet in ein anderes Dokument eingebettet wird, wie beispielsweise in das STYLE-Element oder „style“-Attribut von HTML, verwendet das Stylesheet dieselbe Zeichencodierung wie das gesamte Dokument. Wenn sich ein Stylesheet in einer separaten Datei befindet, mssen Benutzerprogramme die nachfolgend aufgelisteten Priorit@ten befolgen, wenn die Zeichencodierung eines Dokuments festgelegt werden soll (angeordnet von der h=chsten zur geringsten Priorit@t): 1. Ein HTTP-‘charset’-Parameter in einem ‘Content-Type’-Feld. 2. Die At-Regel @charset. 3. Mechanismen der Sprache des referenzierenden Dokuments (z. B. in HTML das "charset"-Attribut des LINK-Elements). In einem externen Stylesheet darf h=chstens eine @charset-Regel erscheinen – sie darf nicht in einem eingebetteten Stylesheet erscheinen –, und sie muss ganz am Anfang des Dokuments stehen, und es drfen ihr keine Zeichen vorangehen. Nach "@charset" geben Autoren den

< 578 >

CSS2-Syntax und grundlegende Datentypen

Page size: 168,00 x 240,00 mm

Sandini Bib

Namen einer Zeichencodierung an. Bei dem Namen muss es sich um einen Zeichensatznamen handeln, wie in der IANA-Registrierung beschrieben (siehe [IANA]; eine vollst@ndige Liste der Zeichens@tze finden Sie in [CHARSETS]. Beispiel: @charset "ISO-8859-1";

Diese Spezifikation schreibt nicht vor, welche Zeichencodierungen ein Benutzerprogramm untersttzen muss. Beachten Sie, dass ein Vertrauen auf das @charset-Konstrukt theoretisch ein Problem aufwirft, weil es keine a priori-Information darber gibt, wie es codiert wird. In der Praxis basieren die allgemein im Internet verwendeten Codierungen entweder auf ASCII, UTF-16, UCS-4 oder (selten) EBCDIC. Das bedeutet im allgemeinen, das Benutzerprogramm kann anhand der ersten Bytewerte eines Dokuments die Codierungsfamilie zuverl@ssig erkennen, wodurch ausreichend viele Informationen bereitgestellt werden, um die @charset-Regel zu decodieren, wodurch wiederum die genaue Zeichencodierung festgelegt wird.

Ein Stylesheet kann auf Zeichen verweisen, die nicht in der aktuellen Zeichencodierung dargestellt werden k=nnen. Diese Zeichen mssen als durch Escape gekennzeichnete Verweise auf ISO 10646-Zeichen geschrieben werden. Diese Escapes dienen demselben Zweck wie numerische Zeichenverweise in HTML- oder XML-Dokumenten (siehe [HTML40], Kapitel 5 und 25). Die Zeichen-Escape-Mechanismen sollten verwendet werden, wenn nur ein paar wenige Zeichen auf diese Weise dargestellt werden sollen. Wenn fr einen Großteil eines Dokuments eine Escape-Kennzeichnung erforderlich ist, sollten die Autoren es mit einer geeigneteren Codierung darstellen (z. B. wenn das Dokument sehr viele griechische Zeichen enth@lt, k=nnten Autoren "ISO-8859-7" oder "UTF-8" verwenden). Zwischengeschaltete Prozessoren, die eine andere Zeichencodierung verwenden, k=nnen diese mit Escape gekennzeichneten Folgen in Bytefolgen dieser Codierung bersetzen. Sie drfen jedoch keine Escape-Folgen ver@ndern, die die spezielle Bedeutung eines ASCII-Zeichens aufheben. Konforme Benutzerprogramme mssen alle Zeichen in allen von ihnen erkannten Zeichencodierungen auf Unicode abbilden (oder sie mssen sich zumindest verhalten, als ob sie das t@ten). Ein Dokument beispielsweise, das als ISO-8859-1 (Latin-1) bertragen wird, darf keine direkten griechischen Buchstaben enthalten: "Koupos" (griechisch: "kouros") muss geschrieben werden als "\3BA\3BF\3C5\3C1\3BF\3C2". Hinweis: In HTML 4.0 werden numerische Zeichenverweise in „style“-Attributwerten interpretiert, nicht aber im Inhalt des STYLE-Elements. Aufgrund dieser Asymmetrie empfehlen wir Autoren, den CSS-Zeichen-Escape-Mechanismus statt numerischer Zeichenverweise sowohl fr das „style“-Attribut als auch fr das STYLE-Element zu verwenden. Beispielsweise empfehlen wir ...

statt ...

CSS-Dokumentdarstellung

< 579 >

Cascading Style Sheets, Level 2

4.4.1 Verweise auf Zeichen, die nicht in einer Zeichencodierung dargestellt sind

Page size: 168,00 x 240,00 mm

Sandini Bib

5 Selektoren 5.1 Mustervergleich In CSS legen die Regeln fr den Mustervergleich fest, welche Stilregeln auf die Elemente im Dokumentbaum angewendet werden. Diese Muster, die so genannten Selektoren, k=nnen von einfachen Elementnamen bis hin zu umfassenden Kontextmustern reichen. Wenn alle Bedingungen eines Musters fr ein bestimmtes Element zutreffen, stimmt der Selektor mit dem Element berein.

Anmerkung der bersetzer: CSS bestehen (einfach ausgedrckt) aus Anweisungen, die eine linke und eine rechte Seite haben: was { wie }

Das was beschreibt welche Elemente gemeint sind. Das wie beschreibt wie sie dargestellt werden. In diesem Kapitel geht es um das was, die so genannten Selektoren. Bei der Darstellung einer Webseite mit CSS sucht der Web-Browser zu jedem Element den passenden Selektor. Wenn er einen findet, wendet er das wie darauf an. Die nachfolgenden Abschnitte beschreiben die Selektoren zum Teil sehr formal. Das gilt besonders fr den Abschnitt ber die Selektorsyntax. Sp@tere Teile sind leichter verst@ndlich. Es wird empfohlen, den Beispielen besondere Aufmerksamkeit zu schenken. Sie tragen am besten zum Verst@ndnis bei.

Cascading Style Sheets, Level 2

Ob fr die Elementnamen einer Dokumentsprache die Groß-/Kleinschreibung bercksichtigt wird, ist von der Dokumentsprache abh@ngig. In HTML beispielsweise wird in Dokumentnamen die Groß-/Kleinschreibung nicht bercksichtigt, in XML dagegen sehr wohl.

Anmerkung der bersetzer: Wie schon erw@hnt: Die Bercksichtigung der Groß/Kleinschreibung in XML wirkt sich auch auf XHTML aus.

Die folgende Tabelle bietet einen berblick ber die Syntax fr CSS-Selektoren: Muster

Beschreibung

Beschrieben in Abschnitt

*

Stimmt mit jedem Element berein.

Universeller Selektor

E

Stimmt mit jedem E-Element berein (d. h. ein Element des Typs E).

Typselektoren

EF

Stimmt mit jedem F-Element berein, das ein Nachfahre eines E-Elements ist.

Selektoren fr Nachfahren

E>F

Stimmt mit allen F-Elementen berein, die Kindelemente eines Elements E sind.

Kindselektoren

< 580 >

Selektoren

Page size: 168,00 x 240,00 mm

Sandini Bib

Stimmt mit Element E berein, wenn E das erste Kindelement des bergeordneten Elements ist.

Die Pseudoklasse :first-child

E:link E:visited

Stimmt mit dem Element E berein, wenn E der Quellanker eines Hyperlinks ist, dessen Ziel noch nicht besucht wurde (:link), oder dessen Ziel bereits besucht wurde (:visited).

Die Link-Pseudoklassen

E:active E:hover E:focus

Stimmt w@hrend bestimmter Benutzeraktionen mit E berein.

Die Dynamic-Pseudoklassen

E:lang(c)

Stimmt mit einem Element des Typs E berein, wenn dieses sich in der (menschlichen) Sprache c befindet (die Dokumentsprache gibt an, wie die Sprache ermittelt wird).

Die Sprach-Pseudo-Klasse :lang

E+F

Stimmt mit jedem F-Element berein, dem unmittelbar ein Element E vorausgeht.

Benachbarte Selektoren

E[foo]

Stimmt mit jedem E-Element berein, dessen Attribut „foo“ gesetzt ist (ganz gleich, welchen Wert es hat).

Attribut-Selektoren

E[foo= "warning"]

Stimmt mit jedem E-Element berein, dessen Attribut „foo“ genau den Wert von „warning“ hat.

Attribut-Selektoren

E[foo~= "warning"]

Stimmt mit jedem E-Element berein, dessen Attribut „foo“ eine Liste von durch Kommas voneinander getrennten Werten enth@lt, und einer dieser Werte gleich „warning“ ist.

Attribut-Selektoren

E[lang|= "en"]

Stimmt mit jedem E-Element berein, dessen Attribut „lang“ eine Liste mit durch Trennstriche voneinander getrennten Werten enth@lt, die (von links) mit „en“ beginnen.

Attribut-Selektoren

DIV.warning

Nur HTML. Dasselbe wie DIV[class~="warning"].

Klassen-Selektoren

E#myid

Stimmt mit jedem E-Element berein, dessen ID gleich „myid“ ist.

ID-Selektoren

Mustervergleich

Cascading Style Sheets, Level 2

E:firstchild

< 581 >

Page size: 168,00 x 240,00 mm

Sandini Bib

5.2 Selektorsyntax Ein einfacher Selektor ist entweder ein Typselektor oder ein universeller Selektor, unmittelbar gefolgt von null oder mehr Attribut-Selektoren, ID-Selektoren oder Pseudo-Klassen in beliebiger Reihenfolge. Der einfache Selektor bringt eine bereinstimmung, wenn alle seine Komponenten bereinstimmen. Ein Selektor ist eine Verkettung aus einem oder mehreren einfachen Selektoren, durch Kombinatorzeichen voneinander getrennt. Kombinatorzeichen sind: Leerraum, „>“ und „+“. Leerraum kann zwischen einem Kombinatorzeichen und den umgebenden einfachen Selektoren stehen. Die Elemente des Dokumentbaums, die mit einem Selektor bereinstimmen, werden als Subjekte des Selektors bezeichnet. Ein Selektor, der aus einem einzigen einfachen Selektor besteht, stimmt mit jedem Element berein, das seine Anforderungen erfllt. Das Vorschalten eines einfachen Selektors und eines Kombinatorzeichens vor eine Kette bewirkt zus@tzliche bereinstimmungsbeschr@nkungen, so dass die Subjekte eines Selektors immer eine Untermenge der Elemente sind, die mit dem ganz rechts stehenden einfachen Selektor bereinstimmen. Ein Pseudo-Element kann an den letzten einfachen Selektor in einer Kette angeh@ngt werden. In diesem Fall gilt die Stilinformation fr eine Unterkomponente eines jeden Subjekts.

5.2.1 Gruppierung Wenn mehrere Selektoren dieselben Deklarationen haben, k=nnen sie in einer Liste gruppiert werden, deren Eintr@ge durch Kommas voneinander getrennt sind.

Cascading Style Sheets, Level 2

Beispiel In diesem Beispiel fassen wir drei Regeln mit identischen Deklarationen zu einer einzigen Regel zusammen. Damit gilt: H1 { font-family: sans-serif } H2 { font-family: sans-serif } H3 { font-family: sans-serif }

ist @quivalent zu: H1, H2, H3 { font-family: sans-serif }

CSS untersttzt außerdem weitere „abkrzende“ Mechanismen, unter anderem Mehrfachdeklarationen und zusammenfassende Eigenschaften.

5.3 Universeller Selektor Der universelle Selektor, auch als „*“ angegeben, stimmt mit dem Namen jedes Elementtyps berein. Er stimmt mit jedem einzelnen Element im Dokumentbaum berein. Falls es sich beim universellen Selektor nicht um die einzige Komponente in einem einfachen Selektor handelt, kann der „*“ weggelassen werden. Beispiel: *[LANG=fr] und [LANG=fr] sind @quivalent. *.warning und .warning sind @quivalent. *#myid und #myid sind @quivalent.

·· ·

< 582 >

Selektoren

Page size: 168,00 x 240,00 mm

Sandini Bib

5.4 Typselektoren Ein Typselektor stimmt mit dem Namen eines Elementtyps der Dokumentsprache berein. Ein Typselektor stimmt mit jeder Instanz des Elementtyps im Dokumentbaum berein. Beispiel Die folgende Regel stimmt mit allen H1-Elementen im Dokumentbaum berein: H1 { font-family: sans-serif }

5.5 Selektoren f-r Nachfahren Manchmal wollen Autoren, dass Selektoren mit einem Element bereinstimmen, das ein Nachfahre eines anderen Elements im Dokumentbaum darstellt (z. B. „Stimme mit den EM-Elementen berein, die in einem H1-Element enthalten sind"). Selektoren fr Nachfahren drcken eine solche Beziehung in einem Muster aus. Ein Selektor fr Nachfahren besteht aus zwei oder mehr Selektoren, die durch Leerraum voneinander getrennt sind. Ein Nachfahren-Selektor der Form „A B“ erzeugt eine bereinstimmung, wenn ein Element B eine beliebiger Nachfahre eines Vorfahrenelements A ist. Beispiel Betrachten Sie beispielsweise die folgenden Regeln: H1 { color: red } EM { color: red }

Diese dberschrift ist sehr wichtig

Wir bercksichtigen diesen Fall, indem wir die obigen Regeln durch eine Regel erg@nzen, die die Textfarbe auf blau setzt, wenn irgendwo in einem H1-Element ein EM auftritt: H1 { color: red } EM { color: red } H1 EM { color: blue }

Die dritte Regel bringt eine bereinstimmung mit dem EM im folgenden Ausschnitt: Diese dberschrift ist sehr wichtig

Der folgende Selektor: DIV * P

Typselektoren

< 583 >

Cascading Style Sheets, Level 2

Obwohl diese Regeln beabsichtigen, den Text zus@tzlich zu betonen, indem sie die Textfarbe @ndern, geht der Effekt in einem Fall wie dem folgenden verloren:

Page size: 168,00 x 240,00 mm

Sandini Bib

stimmt mit einem P-Element berein, das ein Nachkomme zweiter Generation oder sp@ter eines DIV-Elements ist. Beachten Sie den Leerraum auf jeder Seite des „*“. Der Selektor in der folgenden Regel, die abgeleitete und Attributselektoren kombiniert, stimmt mit jedem Element berein, fr das (1) das Attribut „href“ gesetzt ist, und das sich (2) in einem P befindet, das sich wiederum in einem DIV befindet: DIV P *[href]

Anmerkung der bersetzer: Bei den Nachfahren ist wichtig, dass sie beliebig tief in den bergeordneten Elementen verschachtelt sein k=nnen. Wie man nur direkte Nachfahren anspricht, erkl@rt der n@chste Abschnitt.

5.6 Kind-Selektoren Ein Kind-Selektor erzeugt eine bereinstimmung, wenn ein Element ein direkt untergeordnetes Element eines anderen Elements ist. Ein Kind-Selektor besteht aus einem oder mehreren Selektoren, die durch „>“ voneinander getrennt sind. Beispiel Die folgende Regel bestimmt den Stil aller P-Elemente, die Kindelemente von BODY sind: BODY > P { line-height: 1.3 }

Cascading Style Sheets, Level 2

Das folgende Beispiel kombiniert Nachfahren-Selektoren und Nachfahren-Selektoren: DIV OL>LI P

Es stimmt mit einem P-Element berein, das ein Nachfahre von einem LI ist; das LI-Element muss ein Kind-Element eines OL-Elements sein; das OL-Element muss ein Nachfahre eines DIV sein. Beachten Sie, dass der optionale Leerraum um das Kombinatorzeichen „>“ weggelassen wurde. Weitere Informationen ber die Auswahl des ersten untergeordneten Elements eines Elements finden Sie im Abschnitt ber die Pseudoklasse :first-child sp@ter in diesem Kapitel.

5.7 Selektoren f-r benachbarte Elemente Selektoren fr benachbarte Elemente haben die folgende Syntax: E1 + E2. Dabei ist E2 das Subjekt des Selektors. Der Selektor erzeugt eine bereinstimmung, wenn E1 und E2 dasselbe bergeordnete Element im Dokumentbaum haben und E1 E2 unmittelbar vorausgeht. In einigen Kontexten erzeugen benachbarte Elemente Formatierungsobjekte, deren Darstellung automatisch verarbeitet wird (z. B. das Zusammenfallen vertikaler R@nder zwischen benachbarten Boxen). Der Selektor „+“ erlaubt Autoren, zus@tzliche Stile fr benachbarte Elemente anzugeben.

< 584 >

Selektoren

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Die folgende Regel gibt demnach an, dass ein P-Element nicht eingerckt werden soll, wenn es unmittelbar einem MATH-Element folgt: MATH + P { text-indent: 0 }

Das n@chste Beispiel reduziert den vertikalen Abstand zwischen einem H1- und einem unmittelbar darauffolgenden H2-Element: H1 + H2 { margin-top: -5mm }

Die folgende Regel ist der aus dem vorhergehenden Beispiel @hnlich, fgt aber einen AttributSelektor hinzu. Die spezielle Formatierung findet damit nur dann statt, wenn H1 die Klasse class="opener" hat: H1.opener + H2 { margin-top: -5mm }

5.8 Attribut-Selektoren CSS2 erlaubt Autoren, Regeln anzugeben, die mit im Quelldokument definierten Attributen bereinstimmen.

5.8.1 Attribute und Attributwerte vergleichen

[att] Erzielt eine bereinstimmung, wenn das Element das Attribut „att“ gesetzt hat, egal mit welchem Wert. [att=val] Erzielt eine bereinstimmung, wenn das Attribut „att“ des Elements genau den Wert „val“ hat. [att~=val] Erzielt eine bereinstimmung, wenn es sich beim Wert des Attributs „att“ um eine Liste mit durch Leerzeichen voneinander getrennten „W=rtern“ handelt, von denen eines genau mit „val“ bereinstimmt. Falls dieser Selektor verwendet wird, drfen die W=rter im Wert keine Leerzeichen enthalten (weil sie durch Leerzeichen voneinander getrennt sind). [att|=val] Erzielt eine bereinstimmung, wenn der Wert des Attributs „att“ fr das Element eine Liste von durch Trennstriche voneinander getrennten „W=rtern“ ist, beginnend mit „val“. Der Vergleich beginnt immer am Anfang des Attributwerts. Er ist haupts@chlich dafr vorgesehen, Sprach-Teilcode- bereinstimmungen zu erlauben (z. B. das Attribut „lang“ in HTML), wie in RFC 1766 ([RFC1766]) beschrieben.

Attribut-Selektoren

< 585 >

Cascading Style Sheets, Level 2

Attributwerte k=nnen auf viererlei Arten eine bereinstimmung erzielen:

Page size: 168,00 x 240,00 mm

Sandini Bib

Anmerkung der bersetzer: Der letzte Fall bezieht sich auf die Angabe von Sprachen. Sprachen werden in der Form de-DE, de-CH, en-US (hier Angaben der Sprachen fr Deutschland, Schweiz und USA) usw. bezeichnet.

Attributwerte mssen Bezeichner oder Zeichenketten sein. Ob fr Attributnamen und Werte in Selektoren die Groß-/Kleinschreibung bercksichtigt wird, ist von der Dokumentsprache abh@ngig. Beispiel Der folgende Attribut-Selektor beispielsweise stimmt mit allen H1-Elementen berein, die das Attribut „title“ angeben, unabh@ngig davon, welchen Wert es enth@lt: H1[title] { color: blue; }

Im folgenden Beispiel stimmt der Selektor mit allen SPAN-Elementen berein, deren „class“-Attribut genau den Wert „example“ hat: SPAN[class=example] { color: blue; }

Cascading Style Sheets, Level 2

Mehrere Attribut-Selektoren k=nnen genutzt werden, um auf mehrere Attributwerte eines Elements zu verweisen, oder auch mehrfach auf dasselbe Attribut. Beispiel Hier stimmt der Selektor mit allen SPAN-Elementen berein, deren „hello“-Attribut genau den Wert „Cleveland“ hat, und deren „goodbye“-Attribut genau den Wert „Columbus“ hat: SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Die folgenden Selektoren zeigen die Unterschiede zwischen „=“ und „~=“. Der erste Selektor beispielsweise erzielt eine bereinstimmung mit dem Wert „copyright copyleft copyeditor“ fr das Attribut „rel“. Der zweite Selektor erzielt nur eine bereinstimmung, wenn das „href“Attribut den Wert „http://www.edition-w3c.de/“ hat. A[rel~="copyright"] A[href="http://www.edition-w3c.de/"]

Die folgende Regel verbirgt alle Werte, fr die der Wert des Attributs „lang“ gleich „fr“ ist (d. h. die Sprache ist Franz=sisch). *[LANG=fr] { display : none }

< 586 >

Selektoren

Page size: 168,00 x 240,00 mm

Sandini Bib

Die folgende Regel erzielt eine bereinstimmung fr Werte des Attributs „lang“, das mit „en“ beginnt, inklusive „en“, „en-US“ und „en-cockney“: *[LANG|="en"] { color : red }

Analog dazu erlauben die folgenden Regeln fr ein akustisches Stylesheet, dass ein Skript laut mit unterschiedlichen Stimmen fr jede Rolle gelesen wird: DIALOGUE[character=romeo] { voice-family: "Lawrence Olivier", charles, male } DIALOGUE[character=juliet] { voice-family: "Vivien Leigh", victoria, female }

5.8.2 Standardattributwerte in DTDs Der Vergleich erfolgt fr Attributwerte im Dokumentbaum. Fr andere Dokumentsprachen als HTML k=nnen Standardattributwerte in einer DTD oder an anderer Stelle definiert werden. Stylesheets sollten so entworfen werden, dass sie auch dann funktionieren, wenn die Standardwerte nicht im Dokumentbaum enthalten sind.

Beispiel Betrachten Sie beispielsweise ein EXAMPLE-Element mit einem Attribut „notation“, das den Standardwert „decimal“ hat. Das DTD-Fragment k=nnte wie folgt aussehen:

Wenn das Stylesheet die folgenden Regeln enth@lt: EXAMPLE[notation=decimal] { /*... Standardeigenschaftseinstellungen ...*/ } EXAMPLE[notation=octal] { /*... andere Einstellungen...*/ }

und man will alle F@lle auffangen, in denen dieses Attribut standardm@ßig und nicht explizit gesetzt ist, k=nnte man die folgende Regel einfgen: EXAMPLE { /*... Standardeigenschaftseinstellungen...*/ }

Attribut-Selektoren

< 587 >

Cascading Style Sheets, Level 2

Anmerkung der bersetzer: Mittlerweile wird CSS auch zur Formatierung von beliebigen XML-Sprachen benutzt. Zum Beispiel setzt der Editor XMetal CSS fr die Bildschirmdarstellung ein. Der hier gegebene Hinweis, an Vorgabewerte in einer DTD zu denken, ist also heute noch sinnvoller als zur Zeit, zu der die CSS-Spezifikation geschrieben wurde.

Page size: 168,00 x 240,00 mm

Sandini Bib

Weil dieser Selektor weniger spezifisch ist als ein Attribut-Selektor, wird er nur fr den Standardfall verwendet. Es muss darauf geachtet werden, dass alle anderen Attributwerte, die nicht denselben Stil wie der Standard erhalten sollen, explizit abgedeckt werden.

5.8.3 Klassen-Selektoren Fr Stylesheets, die in Kombination mit HTML eingesetzt werden, k=nnen Autoren die Punktnotation (.) als Alternative zur „~=„-Notation verwenden, wenn mit dem „class“-Attribut verglichen wird. Fr HTML haben also „DIV.value“ und „DIV[class~=value]“ dieselbe Bedeutung. Der Attributwert muss dem „.“ unmittelbar folgen. Beispiel Beispielsweise k=nnen wir folgendermaßen allen Elementen mit class~="pastoral" eine Stilinformation zuweisen: *.pastoral { color: green }

/* alle Elemente mit class~=pastoral */

oder einfach .pastoral { color: green }

/* alle Elemente mit class~=pastoral */

Die folgende Regel weist nur H1-Elementen mit class~="pastoral" einen Stil zu:

Cascading Style Sheets, Level 2

H1.pastoral { color: green }

/* H1-Elemente mit class~=pastoral */

Mit diesen Regeln wrde die erste folgende H1-Instanz nicht mit grnem Text dargestellt, die zweite dagegen sehr wohl: Nicht grUn Sehr grUn

Um eine bereinstimmung mit einer Untermenge der „class“-Werte zu erzielen, muss jedem Wert ein „.“ vorausgehen, in beliebiger Reihenfolge. Beispiel Die folgende Regel beispielsweise erzielt eine bereinstimmung mit einem beliebigen P-Element, dessen „class“-Attribut eine Liste mit durch Leerzeichen voneinander abgetrennten Werten zugewiesen wurde, die „pastoral“ und „marine“ enthalten: P.pastoral.marine { color: green }

Diese Regel erzielt eine bereinstimmung, wenn class="pastoral blue aqua marine" ist, aber nicht fr class="pastoral blue".

< 588 >

Selektoren

Page size: 168,00 x 240,00 mm

Sandini Bib

Hinweis: CSS stattet das „class“-Attribut mit so viel Leistungsf@higkeit aus, dass Autoren ganz bequem ihre eigene „Dokumentsprache“ entwickeln k=nnten, die auf Elementen basiert, die fast keine zugeh=rigen Darstellung besitzen (wie beispielsweise DIV und SPAN in HTML), und die Stilinformation ber das „class“-Attribut zuweisen. Autoren sollten diese Vorgehensweise jedoch vermeiden, weil die strukturellen Elemente einer Dokumentsprache h@ufig bekannte und anerkannte Bedeutungen haben, vom Autor definierte Klassen dagegen m=glicherweise nicht. n

Anmerkung der bersetzer: Es ist durchaus m=glich, nur mit einem einzigen Elementtyp, etwa p auszukommen. In der Form

...

usw. k=nnten dann die Elemente beginnen. Ihre Darstellung wrde vollst@ndig ber CSS gesteuert. Diese Verwendung von HTML kann wohl mit Recht als unsinnig bezeichnet werden, da HTML keine Rolle mehr spielt. Hier bietet es sich an, auf XML umzusteigen, einen eigenen Dokumenttyp zu definieren und die neuen Elementtypen in einer eigenen DTD zu deklarieren. In der Folge wrden die Elemente dann etwa so beginnen: ... ... Die Modularisierung von XHTML erlaubt auch, eigene Elementtypen mit vorhandenen XHTML-Modulen zu kombinieren.

Dokumentsprachen k=nnen Attribute enthalten, die als vom Typ ID deklariert sind. Was Attribute vom Typ ID so besonders macht, ist die Tatsache, dass keine zwei solchen Attribute denselben Wert haben k=nnen; unabh@ngig davon, um welche Dokumentsprache es sich handelt – ein ID-Attribut kann genutzt werden, um sein Element eindeutig zu identifizieren. In HTML werden alle ID-Attribute als „id“ bezeichnet; XML-Applikationen benennen ID-Attribute m=glicherweise anders, aber es gelten dieselben Beschr@nkungen. Das ID-Attribut einer Dokumentsprache erlaubt Autoren, einer Elementinstanz im Dokumentbaum eine ID zuzuweisen. Die ID-Selektoren von CSS erzielen dieser ID entsprechend eine bereinstimmung fr eine Elementinstanz. Ein ID-Selektor in CSS enth@lt ein „#“ gefolgt von dem ID-Wert. Beispiel Der folgende ID-Selektor erzielt eine ID-Attribut den Wert „Kapitel1“ hat:

bereinstimmung mit dem H1-Element, dessen

H1#Kapitel1 { text-align: center }

ID-Selektoren

< 589 >

Cascading Style Sheets, Level 2

5.9 ID-Selektoren

Page size: 168,00 x 240,00 mm

Sandini Bib

Im folgenden Beispiel erzeugt die Stilregel eine bereinstimmung mit dem Element, das den IDWert „z98y“ hat. Die Regel erzeugt damit eine bereinstimmung fr das P-Element:

dbereinstimmung mit P

Breiter Text

Im n@chsten Beispiel erzeugt die Stilregel jedoch nur eine bereinstimmung fr ein H1-Element, das den ID-Wert „z98y“ hat. Die Regel erzeugt in diesem Beispiel keine bereinstimmung mit dem P-Element:

dbereinstimmung nur mit H1

Breiter Text

Cascading Style Sheets, Level 2

ID-Selektoren haben eine h=here Spezifit@t als Attribut-Selektoren. In HTML beispielsweise ist der Selektor #p123 spezifischer als [ID=p123], was die Kaskade betrifft. In XML 1.0 [XML10] ist die Information darber, welches Attribut die ID eines Elements enth@lt, in einer DTD enthalten. Beim Parsen von XML lesen Benutzerprogramme nicht immer die DTD und wissen damit m=glicherweise nicht, um welches Element es sich bei der DTD handelt. Wenn ein Stylesheet-Designer weiß oder vermutet, dass dies der Fall ist, sollte er stattdessen normale Attribut-Selektoren verwenden: [name=p371] statt #p371. Die kaskadierende Reihenfolge normaler Attribut-Selektoren unterscheidet sich jedoch von ID-Selektoren. Es kann erforderlich sein, den Deklarationen eine „!important“-Priorit@t hinzuzufgen: [name=p371] {color: red ! important}. Natrlich haben Elemente in XML 1.0-Dokumenten ohne eine DTD berhaupt keine IDs. n

5.10 Pseudo-Elemente und Pseudo-Klassen In CSS2 wird der Stil normalerweise Elementen abh@ngig von ihrer Position im Dokumentbaum zugeordnet. Dieses einfache Modell ist fr viele F@lle ausreichend, aber einige gebr@uchliche Publikationsszenarien k=nnen durch die Struktur des Dokumentbaums m=glicherweise nicht realisiert werden. In HTML 4.0 beispielsweise (siehe [HTML40]) verweist kein Element auf die erste Zeile eines Absatzes, und deshalb kann auch kein einfacher CSS-Selektor darauf verweisen. CSS fhrt das Konzept der Pseudo-Elemente und Pseudo-Klassen ein, um eine Formatierung abh@ngig von Informationen zu erlauben, die außerhalb des Dokumentbaums liegen.

< 590 >

Selektoren

Page size: 168,00 x 240,00 mm

Sandini Bib

·

·

Pseudo-Elemente erzeugen Abstraktionen zum Dokumentbaum, die ber die von der Dokumentsprache spezifizierten hinausgehen. Beispielsweise untersttzen Dokumentsprachen keinen Mechanismus, um auf den ersten Buchstaben oder die erste Zeile eines Elementinhalts zuzugreifen. CSS-Pseudo-Elemente erlauben es Stylesheet-Entwicklern, auf diese anderweitig nicht verfgbare Information zu verweisen. Pseudo-Elemente k=nnen außerdem eine M=glichkeit fr Stylesheet-Entwickler darstellen, Inhalt Stil zuzuweisen, der im Quelldokument nicht existiert (z. B. die Pseudo-Elemente :before und :after erm=glichen erzeugten Inhalt). Pseudo-Klassen klassifizieren Elemente nach Charakteristika neben ihrem Namen, Attributen oder Inhalten; im Allgemeinen solche Charakteristika, die nicht vom Dokumentbaum abgeleitet werden k=nnen. Pseudo-Klassen k=nnen dynamisch sein, das heißt, ein Element kann eine Pseudo-Klasse erhalten oder verlieren, w@hrend der Benutzer mit dem Dokument arbeitet. Die Ausnahme dazu ist ':first-child', das vom Dokumentbaum abgeleitet werden kann. Die Pseudo-Klasse ':lang' kann in einigen F@llen vom Dokumentbaum abgeleitet werden.

5.11 Pseudo-Klassen 5.11.1 Die Pseudo-Klasse :first-child Die Pseudo-Klasse :first-child erzielt eine bereinstimmung mit einem Element, welches das erste Kindelement eines anderen Elements ist. Beispiel Im folgenden Beispiel erzeugt der Selektor eine bereinstimmung mit jedem P-Element, welches das erste Kindelement eines DIV-Elements ist. Die Regel unterdrckt die Einrckung fr den ersten Absatz eines DIV: DIV > P:first-child { text-indent: 0 }

Pseudo-Klassen

< 591 >

Cascading Style Sheets, Level 2

Weder Pseudo-Elemente noch Pseudo-Klassen erscheinen in der Dokumentquelle oder im Dokumentbaum. Pseudo-Klassen k=nnen berall in Selektoren auftreten, w@hrend Pseudo-Elemente nur nach dem Subjekt des Selektors auftreten k=nnen. Fr die Namen von Pseudo-Elementen und Pseudo-Klassen wird die Groß-/Kleinschreibung nicht bercksichtigt. Einige Pseudo-Klassen schließen sich wechselseitig aus, w@hrend andere gleichzeitig auf dasselbe Element angewendet werden k=nnen. Falls Regeln einen Konflikt erzeugen, bestimmt die normale Kaskadenreihenfolge das Ergebnis. Konforme HTML-Benutzerprogramme drfen alle Regeln mit :first-line oder :first-letter im Selektor ignorieren oder alternativ nur eine Untermenge der Eigenschaften dieser Pseudo-Elemente untersttzen.

Page size: 168,00 x 240,00 mm

Sandini Bib

Dieser Selektor wrde mit dem P innerhalb des DIV des folgenden Ausschnitts bereinstimmen:

Das letzte P vor dem Hinweis.

Das erste P im Hinweis.

aber nicht mit dem zweiten P im folgenden Ausschnitt:

Das letzte P vor dem Hinweis.

Hinweis

Das erste P in dem Hinweis.

Die folgende Regel setzt die Schriftgewichtung fr jedes EM-Element, das irgendein Nachfahre eines P-Elements ist, das ein erstes untergeordnetes Element ist, auf 'bold': P:first-child EM { font-weight : bold }

Beachten Sie, dass anonyme Boxen nicht Teil des Dokumentbaums sind und deshalb nicht bercksichtigt werden, wenn das erste untergeordnete Element berechnet wird. Beispiel Beispielsweise ist das EM in

Cascading Style Sheets, Level 2

abc default

das erste untergeordnete Element von P. Die beiden folgenden Selektoren sind @quivalent: * > A:first-child A:first-child

/* A ist das erste untergeorndete Element eines beliebigen Elements */ /* Wie oben */

5.11.2 Die Link-Pseudo-Klassen :link und :visited Benutzerprogramme zeigen normalerweise nicht besuchte Links anders an als bereits besuchte. CSS untersttzt die Pseudo-Klassen ':link' und ':visited', um sie voneinander zu unterscheiden: Die Pseudo-Klasse :link gilt fr Links, die noch nicht besucht wurden. Die Pseudo-Klasse :visited gilt fr einen Link, nachdem er vom Benutzer besucht wurde.

··

Hinweis: Nach einer bestimmten Zeit k=nnen Benutzerprogramme einen bereits besuchten Link wieder in den unbesuchten Status versetzen, ':link'. n

< 592 >

Selektoren

Page size: 168,00 x 240,00 mm

Sandini Bib

Die beiden Status schließen sich wechselseitig aus. Die Dokumentsprache legt fest, welche Elemente Hyperlink-Quellanker sind. In HTML 4.0 beispielsweise beziehen sich die Link-Pseudo-Klassen auf A-Elemente mit einem „href“-Attribut. Die beiden folgenden CSS2-Deklarationen haben also eine @hnliche Wirkung: A:link { color: red } :link { color: red }

Beispiel Wenn der folgende Link external link

besucht wurde, bewirkt die folgende Regel A.external:visited { color: blue }

dass er blau dargestellt wird.

Pseudo-Klassen

< 593 >

Cascading Style Sheets, Level 2

Anmerkung der bersetzer: Die meisten Browser versetzen einen Link nicht willkrlich in den Zustand „unbesucht“. In der Regel kann der Benutzer selbst bestimmen, wann dies geschehen soll. Im Mozilla sieht der entsprechende Dialog zum Beispiel wie folgt aus:

Page size: 168,00 x 240,00 mm

Sandini Bib

5.11.3 Die dynamischen Pseudo-Klassen :hover, :active und :focus Interaktive Benutzerprogramme @ndern manchmal die Darstellung, um damit auf Aktionen der Benutzer zu reagieren. CSS untersttzt drei Pseudo-Klassen fr allgemeine F@lle: Die Pseudo-Klasse :hover wird angewendet, wenn der Benutzer ein Element zwar markiert (mit irgendeinem Zeigeger@t), es aber nicht aktiviert. Beispielsweise k=nnte ein Benutzerprogramm diese Pseudo-Klasse anwenden, wenn der Cursor (Mauszeiger) ber eine von einem Element erzeugte Box geschoben wird. Benutzerprogramme, die keine interaktiven Medien untersttzen, untersttzen auch diese Pseudo-Klasse nicht. Einige konforme Benutzerprogramme, die interaktive Medien untersttzen sind m=glicherweise ebenfalls nicht in der Lage, diese Pseudo-Klasse zu untersttzen (z. B. ein Stiftger@t). Die Pseudo-Klasse :active gilt, w@hrend ein Element vom Benutzer aktiviert wird. Beispielsweise k=nnte das zwischen den Zeitpunkten sein, wo der Benutzer die Maustaste drckt und sie wieder losl@sst. Die Pseudo-Klasse :focus gilt, w@hrend ein Element den Fokus hat (es akzeptiert Tastaturereignisse oder andere Arten der Texteingabe).

·

Cascading Style Sheets, Level 2

· ·

Diese Pseudo-Klassen schließen sich nicht wechselseitig aus. Ein Element kann mit mehreren davon gleichzeitig bereinstimmen. CSS definiert nicht, welche Elemente sich in den oben beschriebenen Status befinden k=nnen, oder wie man in einen der Status gelangt oder ihn verl@sst. Mit Hilfe von Skripting kann bestimmt werden, ob Elemente auf Benutzerereignisse reagieren oder nicht, und unterschiedliche Ger@te und Benutzerprogramme k=nnen unterschiedliche Methoden aufweisen, wie auf Elemente gezeigt wird bzw. wie diese aktiviert werden. Benutzerprogramme mssen bei berg@ngen zwischen den einzelnen Pseudo-Klassen ein aktuell angezeigtes Dokument nicht unbedingt neu aufbauen. Beispielsweise k=nnte ein Stylesheet angeben, dass die 'font-size' eines :active-Links gr=ßer sein soll als die eines nicht aktiven Links. Weil das jedoch zur Folge haben kann, dass die Buchstaben ihre Position ver@ndern, wenn der Benutzer den Link ausw@hlt, kann das Benutzerprogramm die entsprechende Stilregel ignorieren. Beispiel A:link A:visited A:hover A:active

{ { { {

color: color: color: color:

red } /* blue } /* yellow } /* lime } /*

nicht besuchte Links besuchte Links Benutzer selektiert Aktive Links

*/ */ */ */

Beachten Sie, dass die Regel A:hover nach den Regeln fr A:link und A:visited platziert werden muss, weil die kaskadierenden Regeln sonst die 'color'-Eigenschaft der Regel fr A:hover verbergen. Weil A:active hinter A:hover platziert ist, wird analog dazu die aktive Farbe (lime) angewendet, wenn der Benutzer das A-Element markiert und aktiviert. Ein Beispiel fr die Kombination dynamischer Pseudo-Klassen: A:focus { background: yellow } A:focus:hover { background: white }

Der letzte Selektor erzielt bereinstimmungen mit A-Elementen, die sich in den Pseudo-Klassen :focus und :hover befinden.

< 594 >

Selektoren

Page size: 168,00 x 240,00 mm

Sandini Bib

Weitere Informationen ber die Darstellung von Fokusumrissen finden Sie im Abschnitt ber dynamische fokussierte Umrisse. Hinweis: In CSS1 war die Pseudo-Klasse ':active' wechselseitig ausschließend zu ':link' und ':visited'. Das ist jetzt nicht mehr der Fall. Ein Element kann sowohl ':visited' als auch ':active' (oder ':link' und ':active' sein), und die normalen Kaskadenregeln bestimmen, welche Eigenschaften gelten. n

5.11.4 Die Sprach-Pseudo-Klasse :lang Wenn die Dokumentsprache angibt, wie die menschliche Sprache eines Elements ermittelt wird, ist es m=glich, Selektoren in CSS zu schreiben, die eine bereinstimmung fr ein Element abh@ngig von seiner Sprache erzielen. In HTML [HTML40] beispielsweise wird die Sprache durch eine Kombination des Attributs „lang“, das META-Element und m=glicherweise Protokollinformationen (wie beispielsweise HTTP-Header) ermittelt. XML verwendet das Attribut xml:lang, und es kann andere von der Dokumentsprache abh@ngige Methoden geben, um die Sprache zu ermitteln. Die Pseudo-Klasse ':lang(C)' erzielt eine bereinstimmung, wenn das Element in der Sprache C geschrieben ist. Hier ist C ein Sprachcode, wie in HTML 4.0 [HTML40] und RFC 1766 [RFC1766] angegeben. Er wird genau so verglichen wie fr den '|='-Operator. Beispiel Die folgenden Regeln setzen die Anfhrungszeichen fr ein HTML-Dokument, das entweder in Franz=sisch oder in Deutsch verfasst ist: { { { {

quotes: quotes: quotes: quotes:

'\( ' ' \;' } '\;' '\(' '\2039' '\203A' } '\( ' ' \;' } '\;' '\(' '\2039' '\203A' }

Das zweite Regelpaar setzt die 'quotes'-Eigenschaft fr Q-Elemente entsprechend der Sprache seines bergeordneten Elements. Das geschieht, weil die Auswahl der Anfhrungszeichen normalerweise auf dem Element basiert, das das Anfhrungszeichen umschließt, und nicht auf dem eigentlichen Zitat: wie hier das franz=sische Wort, „t l‘improvisite“ inmitten eines deutschen Texts deutsche Anfhrungszeichen verwendet.

5.12 Pseudo-Elemente 5.12.1 Das Pseudo-Element :first-line Das Pseudo-Element :first-line wendet spezielle Stile auf die erste formatierte Zeile eines Absatzes an. Ein Beispiel: P:first-line { text-transform: uppercase }

Die obige Regel bedeutet, „tausche die Buchstaben der ersten Zeile jedes Absatzes in Großbuchstaben“. Der Selektor „P:first-line“ erzielt keine bereinstimmung mit einem realen

Pseudo-Elemente

< 595 >

Cascading Style Sheets, Level 2

HTML:lang(fr) HTML:lang(de) :lang(fr) > Q :lang(de) > Q

Page size: 168,00 x 240,00 mm

Sandini Bib

HTML-Element. Sie erzielt eine bereinstimmung mit einem Pseudo-Element, das konforme Benutzerprogramme am Anfang jedes Absatzes einfgen. Beachten Sie, dass die L@nge der ersten Zeile von verschiedenen Faktoren abh@ngig ist, unter anderem der Seitenbreite, der Schriftgr=ße usw. Damit muss ein gew=hnlicher HTML-Absatz, wie beispielsweise

Dies ist ein relativ langer HTML-Absatz, der in mehrere Zeilen umbrochen wird. Die erste Zeile wird durch eine fiktive Tag-Folge identifiziert. Die anderen Zeilen werden wie normale Zeilen im Absatz behandelt.

dessen Zeilen wie folgt umbrochen werden DIES IST EIN RELATIV LANGER HTML-ABSATZ, der in mehrere Zeilen umbrochen wird. Die erste Zeile wird durch eine fiktive Tag-Folge identifiziert. Die anderen Zeilen werden wie normale Zeilen im Absatz behandelt.

wie folgt von Benutzerprogrammen „umgeschrieben“ werden, um die fiktive Tag-Folge fr :first-line einzufgen. Diese fiktive Tag-Folge hilft zu zeigen, wie Eigenschaften vererbt werden.

Cascading Style Sheets, Level 2

Dies ist ein relativ langer HTMLAbsatz, der in mehrere Zeilen umbrochen wird. Die erste Zeile wird durch eine fiktive Tag-Folge identifiziert. Die anderen Zeilen werden wie normale Zeilen im Absatz behandelt.

Wenn ein Pseudo-Element ein reales Element durchbricht, kann der gewnschte Effekt h@ufig durch eine fiktive Tag-Folge beschrieben werden, die das Element schließt und dann erneut =ffnet. Wenn wir also den obigen Absatz mit einem SPAN-Element versehen:

Dies ist ein relativ langer HTML-Absatz, der in mehrere Zeilen umbrochen wird. Die erste Zeile wird durch eine fiktive Tag-Folge identifziert. Die anderen Zeilen werden wienormale Zeilen im Absatz behandelt.

k=nnte das Benutzerprogramm geeignete Start- und Ende-Tags fr SPAN erzeugen, wenn es die fiktive Tag-Folge fr :first-line einfgt.

Dies ist ein relativ langer HTML-Absatz, der in mehrere Zeilen umbrochen wird. Die erste Zeile wird durch eine fiktive Tag-Folge identifziert. Die anderen Zeilen werden wie normale Zeilen im Absatz behandelt.

Das Pseudo-Element :first-line kann nur einem Element auf Blockebene zugeordnet werden.

< 596 >

Selektoren

Page size: 168,00 x 240,00 mm

Sandini Bib

Das Pseudo-Element :first-line ist @hnlich einem Element auf Inline-Ebene, aber mit einigen Einschr@nkungen. Nur die folgenden Eigenschaften gelten fr ein :first-line-Pseudo-Element: Schrifteigenschaften, Farbeigenschaften, Hintergrundeigenschaften, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' und 'clear' .

Anmerkung der bersetzer: Folgendes ist eine Erg@nzung aus den CSS2-Errata: Im Fall, dass eine bestimmte erste Zeile sowohl die erste Zeile eines Block-Elements A als auch die erste Zeil des Vorfahren B von A ist, sieht die fiktive Tag-Folge so aus: ...... This is the first line

Alle fiktiven Tags fr die erste Zeile befinden sich innerhalb des kleinsten, umgebenden Block-Elements. Des Weiteren ist die Verschachtelungsreihenfolge der fiktiven Tags A:first-line und B-first-line die gleiche wie die der Elemente A und B. Die „erste formatierte Zeile“ eines Elements auf Blockebene ist die erste Zeile im Elementfluss, das heißt, gleitende oder absolut positionierte Elemente werden diesbezglich ignoriert. Zum Beispiel wirkt sich in

Floating paragraph...

First line starts here...

der Selektor 'div:first-line' auf die erste Zeile des zweiten p aus, weil das erste p aus dem Fluss genommen ist (ein gleitendes Element).

Das Pseudo-Element :first-letter kann fr Kapit@lchen am Anfang oder Großbuchstaben, die sich ber die Zeile hinaus nach unten erstrecken, verwendet werden. Beides sind gebr@uchliche typographische Effekte. Diese Art Anfangsbuchstabe ist @hnlich einem Element auf Inline-Ebene, wenn seine 'float'-Eigenschaft gleich 'none' ist, andernfalls ist es @hnlich einem Floating-Element. Die folgenden Eigenschaften gelten fr das Pseudo-Element :first-letter: Schrifteigenschaften, Farbeigenschaften, Hintergrundeigenschaften, 'text-decoration', 'vertical-align' (nur, wenn 'float' gleich 'none' ist), 'text-transform', 'line-height', Randeigenschaften, Aufflleigenschaften, Rahmeneigenschaften, 'float', 'text-shadow' und 'clear'. Beispiel Das folgende CSS2 erzeugt ein Kapit@lchen als Anfangsbuchstaben, der sich ber zwei Zeilen nach unten erstreckt:

Anfangsbuchstabe, der sich Uber die Zeile nach unten erstreckt

Die ersten paar W^rter eines Artikels in der Wochenzeitschrift.

Dieses Beispiel k=nnte wie folgt formatiert werden:

Die fiktive Tag-Folge sieht wie folgt aus:

Cascading Style Sheets, Level 2

D ie ersten paar W^rter eines Artikels in der Wochenzeitschrift.

Beachten Sie, dass die Pseudo-Element-Tags fr :first-letter an den Inhalt (d. h. den Anfangsbuchstaben) angrenzen, w@hrend das Start-Tag fr das Pseudo-Element :first-line unmittelbar hinter dem Start-Tag des Elements eingefgt wird, dem es zugeordnet ist.

Anmerkung der bersetzer: Die obige Abbildung zeigt die Darstellung des Beispiels im Mozilla 1.1.

Um eine Formatierung mit traditionellen Kapit@lchen ber Zeilen nach unten zu erzielen, k=nnen Benutzerprogramme Schriftgr=ßen ann@hern, beispielsweise zur Ausrichtung von Grundlinien. Außerdem kann der Glyphenumriss fr die Formatierung bercksichtigt werden. Die Interpunktion (also die Zeichen, die in Unicode [UNICODE] in den Interpunktionsklassen „open“ (Ps), „close“ (Pe) und „other“ (Po) definiert sind), die dem ersten Buchstaben vorausgeht, sollte bercksichtigt werden, beispielsweise wie folgt:

< 598 >

Selektoren

Page size: 168,00 x 240,00 mm

Sandini Bib

Das Pseudo-Element :first-letter erzielt eine bereinstimmung nur mit Teilen der Elemente auf Blockebene.

Anmerkung der bersetzer: Fr die oben gezeigte Abbildung wurden die gleichen Formatierungsregeln benutzt, wie fr das vorherige Beispiel. Die relevante HTMLZeile sieht wie folgt aus:

"Lieber einen Spatz in der Hand als eine Taube auf dem Dach", sagt ein altes Sprichwort

Auf den ersten Blick funktioniert die Bercksichtigung von Interpunktionszeichen gut. Ersetzt man jedoch die englischen Anfhrungszeichen durch andere, sieht das Ergebnis wie folgt aus: Die Zeile

\;Lieber einen Spatz in der Hand als eine Taube auf dem Dach\(, sagt ein altes Sprichwort

Hier hat also die Erkennung des Anfhrungszeichens nicht funktioniert. Dabei blieb es auch nach dem Umstieg auf XHTML und ordentlicher Deklarierung sowohl der Zeichenkodierung als auch der Sprache.

Einige Sprachen haben m=glicherweise spezifische Regeln, wie bestimmte Buchstabenkombinationen zu behandeln sind. Im Niederl@ndischen beispielsweise sollten bei der Buchstabenkombination „ij“ am Anfang eines Wortes innerhalb des Pseudo-Eements :first-letter beide Buchstaben bercksichtigt werden.

Pseudo-Elemente

< 599 >

Cascading Style Sheets, Level 2

produziert im Mozilla 1.1 die nachfolgende Darstellung.

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Das folgende Beispiel zeigt, wie berlappende Pseudo-Elemente zusammenarbeiten k=nnen. Der erste Buchstabe jedes P-Elements wird grn mit einer Schriftgr=ße von '24pt' dargestellt. Die restliche erste formatierte Zeile ist 'blue', w@hrend der restliche Absatz 'red' ist. P { color: red; font-size: 12pt } P:first-letter { color: green; font-size: 200% } P:first-line { color: blue }

Text, der in zwei Zeilen angezeigt wird

Angenommen, vor dem Wort „Zeilen“ erfolgt ein Zeilenumbruch, dann k=nnte die fiktive TagFolge fr diesen Abschnitt wie folgt aussehen:

T ext, der in zwei

Zeilen angezeigt wird

Beachten Sie, dass sich das Element :first-letter innerhalb des Elements :first-line befindet. Eigenschaften, die fr :first-line gesetzt werden, werden von :first-letter geerbt, aber berschrieben, wenn dieselbe Eigenschaft fr :first-letter gesetzt ist.

Cascading Style Sheets, Level 2

5.12.3 Die Pseudo-Elemente :before und :after Die Pseudo-Elemente ':before' und ':after' k=nnen genutzt werden, um erzeugten Inhalt vor oder hinter dem Inhalt eines Elements einzufgen. Sie werden im Abschnitt ber erzeugten Text erkl@rt. H1:before {content: counter(chapno, upper-roman) ". "}

Wenn die Pseudo-Elemente :first-letter und :first-line mit :before und :after kombiniert werden, beziehen sie sich auf den ersten Buchstaben oder die erste Zeile des Elements, inklusive des eingefgten Texts. Beispiel P.special:before {content: "Special! "} P.special:first-letter {color: #ffd800}

Damit wird das „S“ von „Special!“ in Gold dargestellt.

< 600 >

Selektoren

Page size: 168,00 x 240,00 mm

Sandini Bib

6 Eigenschaftswerte zuweisen, Kaskaden und Vererbung 6.1 Spezifizierte, berechnete und tats.chliche Werte Nachdem ein Benutzerprogramm ein Dokument geparst und einen Dokumentbaum aufgebaut hat, muss es fr jedes Element in dem Baum jeder Eigenschaft einen Wert zuweisen, die sich auf den Ziel-Medientyp bezieht. Der endgltige Wert einer Eigenschaft ist das Ergebnis einer dreistufigen Berechnung: Der Wert wird ber die Spezifizierung ermittelt (der „spezifizierte Wert“), dann gegebenenfalls in einen absoluten Wert aufgel=st (den „berechneten Wert“) und schließlich entsprechend der Einschr@nkungen der lokalen Umgebung umgewandelt (der „tats@chliche Wert“).

6.1.1 Spezifizierte Werte Benutzerprogramme mssen einer Eigenschaft zun@chst einen spezifizierten Wert zuweisen, basierend auf den folgenden Mechanismen (in der Priorit@t ihrer Reihenfolge): 1. Falls die Kaskade einen Wert ergibt, wird dieser verwendet. 2. Wird die Eigenschaft dagegen geerbt, wird der Wert des bergeordneten Elements verwendet, im allgemeinen der berechnete Wert. 3. Andernfalls wird der Ausgangswert der Eigenschaft verwendet. Der Ausgangswert einer Eigenschaft ist in der Eigenschaftsdefinition festgelegt.

Anmerkung der bersetzer: Da der Begriff der Kaskade erst sp@ter erkl@rt wird, soll noch eine andere Umschreibung erkl@ren, was hier gemeint ist: Der Wert, den eine Eigenschaft bekommt (z. B. die Eigenschaft Schriftgr=ße), wird bestimmt durch die Angabe im Stylesheet (1); gibt es fr ein Element keinen Wert, wird der Wert des ersten bergeordneten Elements benutzt, fr den ein Wert angegeben wurde (2); falls auch dort kein Wert gefunden wird, gilt der Wert, der in dieser Spezifikation festgelegt wird (3).

6.1.2 Berechnete Werte Angegebene Werte k=nnen absolut sein (das heißt, sie werden nicht relativ zu einem anderen Wert angegeben, wie beispielsweise in 'red' oder '2mm') oder relativ sein (das heißt, sie sind relativ zu anderen Werten spezifiziert, wie beispielsweise 'auto', '2em' und '12%'). Fr absolute Werte ist keine Verarbeitung erforderlich, um den berechneten Wert zu ermitteln.

Eigenschaftswerte zuweisen, Kaskaden und Vererbung

< 601 >

Cascading Style Sheets, Level 2

Weil die Wurzel des Dokumentbaums kein bergeordnetes Element hat, kann sie keine Werte von einem bergeordneten Element verwenden; in diesem Fall wird gegebenenfalls der Ausgangswert verwendet.

Page size: 168,00 x 240,00 mm

Sandini Bib

Relative Werte dagegen mssen in berechnete Werte umgewandelt werden: Prozentwerte mssen mit einem Referenzwert multipliziert werden (wobei jede Eigenschaft genau definiert, worum es sich dabei handelt), Werte mit relativen Einheiten (em, ex, x), mssen absolut gemacht werden, indem sie anhand der entsprechenden Schrift- oder Pixelgr=ße berechnet werden, 'auto'-Werte mssen berechnet werden, indem die fr jede Eigenschaft angegebenen Formeln ausgewertet werden, bestimmte Schlsselw=rter ('smaller', 'bolder', 'inherit') mssen durch ihre entsprechenden Definitionen ersetzt werden. In den meisten F@llen erben Elemente berechnete Werte. Es gibt jedoch einige Eigenschaften, deren spezifizierte Werte geerbt werden k=nnen (z. B. der Zahlenwert fr die Eigenschaft 'lineheight'). Wenn untergeordnete Elemente den berechneten Wert nicht erben, dann ist dies in der Eigenschaftsdefinition beschrieben.

6.1.3 Tats.chliche Werte Ein berechneter Wert kann im Prinzip sofort verwendet werden, aber m=glicherweise kann ein Benutzerprogramm den Wert in einer bestimmten Umgebung nicht nutzen. Beispielsweise kann es sein, dass ein Benutzerprogramm Rahmen nur mit ganzzahligen Pixelbreiten darstellen kann und deshalb einen ann@hernden Wert fr die berechnete Breite verwenden muss. Der tats@chliche Wert ist der berechnete Wert, nachdem die Ann@herung darauf angewendet wurde.

6.2 Vererbung Einige Werte werden von den untergeordneten Elementen eines Elements im Dokumentbaum geerbt. Jede Eigenschaft definiert, ob sie geerbt wird oder nicht. Angenommen, es gibt ein H1-Element mit einem darin enthaltenen Betonungselement (EM):

Cascading Style Sheets, Level 2

Die dberschrift ist wichtig!

Wurde dem EM-Element keine Farbe zugeordnet, erbt das betonte „ist“ die Farbe des bergeordneten Elements, wenn also H1 die Farbe blau hat, ist das EM-Element auch blau. Um eine „Standard“-Stileigenschaft fr ein Dokument einzurichten, k=nnen die Autoren die Eigenschaft in der Wurzel des Dokumentbaums festlegen. In HTML beispielsweise k=nnen die HTML- oder BODY-Elemente diese Funktion bernehmen. Beachten Sie, dass das auch dann funktioniert, wenn der Autor das BODY-Tag in der HTML-Quelle wegl@sst, weil der HTMLParser das fehlende Tag einfgt.

Anmerkung der bersetzer: Das Weglassen von Start- oder End-Tags (oder von beiden) ist eine Eigenschaft, die HTML dank seiner SGML-Abstammung besitzt; dort heißt die M=glichkeit „Tag-Minimierung“. Die Tag-Minimierung ist wohldefiniert und in der HTML-DTD festgehalten. In der Praxis ist es oft vorgekommen, dass Autoren irgendwelche Tags weggelassen haben. Da die bekannten Web-Browser kein wirkliches Parsing „gegen die DTD“ machen, tolerieren sie fast jeden Fehler; der Qualit@t des im Web zu findenden HTML hat das nicht gedient. Seit XML und damit auch XHTML geh=rt die Tag-Minimierung der Vergangenheit an: Bei XHTML mssen alle Tags angegeben werden.

< 602 >

Eigenschaftswerte zuweisen, Kaskaden und Vererbung

Page size: 168,00 x 240,00 mm

Sandini Bib

Weil beispielsweise die Eigenschaft 'color' geerbt ist, erben alle Ableitungen des BODY-Elements die Farbe 'black': BODY { color: black; }

Angegebene Prozentwerte werden nicht vererbt, berechnete Werte dagegen schon. Betrachten Sie beispielsweise das folgende Stylesheet: BODY { font-size: 10pt } H1 { font-size: 120% }

und diesen Ausschnitt aus einem Dokument:

Eine große dberschrift

Anmerkung der bersetzer: Wrde statt des berechneten Werts doch der angegebene Prozentwert vererbt, h@tte das EM-Element ebenfalls den Wert 120%. Diese 120% beziehen sich auf die aktuelle Schriftgr=ße, das sind hier 12pt. Folglich wrde die Schriftgr=ße des EM-Inhalts bei 1,2 · 12pt = 14,4pt liegen. Der Inhalt von eingebetteten Elementen wrde also fortlaufend gr=ßer dargestellt. Es macht daher nur Sinn, den berechneten absoluten Wert zu vererben.

6.2.1 Der Wert 'inherit' Jede Eigenschaft kann außerdem einen angegebenen Wert von 'inherit' haben, das heißt, fr ein bestimmtes Element verwendet die Eigenschaft denselben berechneten Wert wie die Eigenschaft fr das bergeordnete Element des Elements. Der geerbte Wert, der normalerweise nur als Fallback-Wert verwendet wird, kann erzwungen werden, indem 'inherit' explizit gesetzt wird.

Anmerkung der bersetzer: In den Errata ist zu lesen: „Der Wert 'inherit' sorgt dafr, dass der Eigenschaftswert vererbt wird. Dies gilt auch fr Eigenschaften, deren Werte normalerweise nicht vererbt werden.“

Vererbung

< 603 >

Cascading Style Sheets, Level 2

Die Eigenschaft 'font-size' fr das H1-Element hat den berechneten Wert '12 pt' (120% von 10 pt, dem Wert des bergeordneten Elements). Weil der berechnete Wert von 'font-size' geerbt ist, hat das EM-Element ebenfalls den berechneten Wert '12pt'. Falls dem Benutzerprogramm die Schrift nicht in12pt zur Verfgung steht, k=nnte der tats@chliche Wert sowohl fr H1 als auch fr EM beispielsweise '11pt' sein.

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Im nachfolgenden Beispiel sind die Eigenschaften 'color' und 'background' auf das BODY-Element gesetzt. Fr alle anderen Elemente wird der Wert von 'color' geerbt und der Hintergrund ist transparent. Sind diese Regeln Teile des Stylesheets des Benutzers, wird im gesamten Dokument schwarzer Text auf weißem Hintergrund erzwungen. BODY { color: black !important; background: white !important; } * { color: inherit !important; background: transparent; }

6.3 Die @import-Regel Die '@import'-Regel erlaubt den Benutzern, Formatierungsregeln aus anderen Stylesheets zu importieren. Alle @import-Regeln mssen allen anderen Regelmengen im Stylesheet vorausgehen. Dem Schlsselwort '@import' muss der URI des einzubindenden Stylesheets folgen. Auch eine Zeichenkette ist erlaubt; sie wird interpretiert, als w@re sie in url(...) eingeschlossen. Die nachfolgenden Zeilen sind @quivalent und demonstrieren beide '@import'-Syntaxformen (eine mit „url()“, die andere mit einer Zeichenkette):

Cascading Style Sheets, Level 2

@import "mystyle.css"; @import url("mystyle.css");

Damit Benutzerprogramme vermeiden k=nnen, Ressourcen fr nicht untersttzte Medientypen zu laden, k=nnen Autoren medienabh@ngige @import-Regeln angeben. Diese bedingten Importe listen hinter dem URI die durch Kommas voneinander getrennten Medientypen auf. Die nachfolgenden Regeln haben dieselbe Wirkung, als w@re das importierte Stylesheet in eine @media-Regel fr dasselbe Medium eingepackt, sie ersparen dem Benutzerprogramm jedoch einen sinnlosen Download. @import url("fineprint.css") print; @import url("bluish.css") projection, tv;

Wenn berhaupt keine Medientypen angegeben sind, ist der Import unbedingt. Die Angabe von 'all' fr das Medium hat dieselbe Wirkung.

< 604 >

Eigenschaftswerte zuweisen, Kaskaden und Vererbung

Page size: 168,00 x 240,00 mm

Sandini Bib

6.4 Die Kaskade Stylesheets k=nnen drei verschiedene Ursprnge haben: Autor, Benutzer und Benutzerprogramm.

Stylesheets aus diesen drei Ursprngen berlappen sich im Gltigkeitsbereich und arbeiten gem@ß der Kaskade zusammen. Die CSS-Kaskade ordnet jeder Stilregel eine Gewichtung zu. Gelten mehrere Regeln, setzt sich diejenige mit der h=chsten Gewichtung durch. Standardm@ßig haben Regeln in Autoren-Stylesheets mehr Gewicht als Regeln in BenutzerStylesheets. Priorit@t haben jedoch immer „!important“-Regeln. Alle Benutzerregeln und Autorenregeln haben mehr Gewicht als die Regeln im Standard-Stylesheet des Benutzerprogramms. Importierte Stylesheets sind ebenfalls kaskadenartig angeordnet, und ihre Gewichtung ist von ihrer Import-Reihenfolge abh@ngig. Regeln, die in einem bestimmten Stylesheet angegeben sind, berschreiben Regeln des gleichen Gewichts, die aus anderen Stylesheets importiert werden. Importierte Stylesheets k=nnen wiederum selbst importieren und andere Stylesheets berschreiben, was rekursiv erfolgt, und wofr dieselben Priorit@tsregeln gelten.

6.4.1 Kaskaden-Reihenfolge Um den Wert fr eine Element/Eigenschaft-Kombination zu ermitteln, wenden die Benutzerprogramme die folgende Sortierreihenfolge an: 1. Es werden alle Deklarationen ermittelt, die sich auf das betreffende Element und die Eigenschaft fr den Ziel-Medientyp beziehen. Deklarationen werden angewendet, wenn der entsprechenden Selektor mit dem betreffenden Element bereinstimmt.

Die Kaskade

< 605 >

Cascading Style Sheets, Level 2

Autor Der Autor gibt Stylesheets fr ein Quelldokument gem@ß den Konventionen der Dokumentsprache an. In HTML beispielsweise k=nnen Stylesheets in das Dokument aufgenommen oder extern verknpft werden. Benutzer Der Benutzer kann Stilinformationen fr ein bestimmtes Dokument angeben. Beispielsweise kann der Benutzer eine Datei angeben, die ein Stylesheet enth@lt, oder das Benutzerprogramm kann eine Schnittstelle bereitstellen, die ein Benutzer-Stylesheet erzeugt (oder sich so verh@lt, als t@te sie das). Benutzerprogramm Konforme Benutzerprogramme mssen vor allen anderen Stylesheets fr ein Dokument ein Standard-Stylesheet anwenden (oder sich so verhalten, als ob sie das t@ten). Das Standard-Stylesheet eines Benutzerprogramms sollte die Elemente der Dokumentsprache so pr@sentieren, dass sie den allgemeinen Darstellungserwartungen fr die Dokumentsprache entsprechen (z. B. wird das EM-Element in HTML bei visuellen Browsern unter Verwendung einer kursiven Schrift dargestellt). Ein empfohlenes Standard-Stylesheet fr HTML 4.0-Dokumente finden Sie unter „Ein Beispiel-Stylesheet fr HTML 4.0“ (Anhang A). Beachten Sie, dass sich das Standard-Stylesheet @ndern kann, wenn der Benutzer die Systemeinstellungen ver@ndert (z. B. die Systemfarben) Aufgrund der Einschr@nkungen der internen Implementierung des Benutzerprogramms ist es jedoch unter Umst@nden nicht m=glich, die Werte im Standard-Stylesheet zu @ndern.

Page size: 168,00 x 240,00 mm

Sandini Bib

2. Prim@r werden die Deklarationen nach Gewichtung und Ursprung sortiert: Fr normale Deklarationen berschreiben Autor-Stylesheets die Benutzer-Stylesheets, die wiederum das Standard-Stylesheet berschreiben. Fr „!important“-Deklarationen berschreiben Benutzer-Stylesheets Autor-Stylesheets, die wiederum das Standard-Stylesheet berschreiben. Eine „!important“-Deklaration berschreibt normale Deklarationen. Ein importiertes Stylesheet hat denselben Ursprung wie das Stylesheet, von dem es importiert wurde. 3. Die zweite Sortierung erfolgt nach der Spezifit@t des Selektors: Spezifischere Selektoren berschreiben allgemeinere Selektoren. Pseudo-Elemente und Pseudo-Klassen werden als normale Elemente bzw. Klassen betrachtet. 4. Schließlich werden sie nach der vorgegebenen Reihenfolge sortiert: Haben zwei Regeln dieselbe Gewichtung, denselben Ursprung und dieselbe Spezifit@t, erh@lt die jeweils zuletzt angegebene den Vorrang. Regeln in importierten Stylesheets werden als vor allen anderen Regeln im eigentlichen Stylesheet befindlich betrachtet. Neben der Einstellung „!important“ fr einzelne Deklarationen erteilt diese Strategie den Stylesheets des Autors eine h=here Gewichtung als denen des Lesers. Deshalb ist es wichtig, dass das Benutzerprogramm dem Benutzer die M=glichkeit gibt, die Beeinflussung durch ein bestimmtes Stylesheet zu deaktivieren, beispielsweise in einem Pulldown-Men.

Cascading Style Sheets, Level 2

6.4.2 !important-Regeln CSS versucht, einen Leistungsausgleich zwischen Stylesheets des Autors und des Benutzers herzustellen. Standardm@ßig berschreiben die Regeln im Stylesheet eines Autors diejenigen aus dem Stylesheet eines Benutzers (siehe Kaskadenregel 3). Des Ausgleichs halber erh@lt jedoch eine „!important“-Deklaration (die Schlsselw=rter „!“ und „important“ folgen der Deklaration) Priorit@t gegenber einer normalen Deklaration. Sowohl Autor- als auch Benutzer-Stylesheets k=nnen „!important“-Deklarationen enthalten, und die „!important“-Regeln des Benutzers berschreiben die „!important“-Regeln des Autors. Dieses Funktionsmerkmal von CSS verbessert den Zugriff auf Dokumente, indem es Benutzern mit speziellen Anforderungen (große Schriften, Farbkombinationen usw.) die Kontrolle ber die Darstellung erteilt. Hinweis: Dies ist eine semantische Onderung gegenber CSS1. In CSS1 hatten die „!important“-Regeln des Autors Priorit@t gegenber den „!important“-Regeln des Benutzers. n

Anmerkung der bersetzer: Die Festlegung der Semantik in der oben beschriebenen Form ist sinnvoll: Beispielsweise k=nnte ein Benutzer mit Sehschw@chen die Schriftgr=ße auf einen sehr großen Wert setzen, damit er den Text berhaupt lesen kann. H@tte das Stylesheet des Autors trotz einer !important-Regel des Benutzers Vorrang, so w@re eine Seite in diesem Fall gar nicht mehr zu gebrauchen. Autoren sollten deshalb die Formatierung ihrer Seiten sehr flexibel zum Beispiel mit relativen CSS-Werten steuern. Es ist niemals ausgeschlossen, dass Einstellungen des Benutzers diejenigen des Autors berschreiben. Auch wenn es hier um CSS2 geht und derzeit die Browser noch keine vollst@ndige Untersttzung anbieten, hat diese Empfehlung bestand. Denn tats@chlich k=nnen Benutzer ja schon seit langem in ihren Browsern einstellen, ob Schriftangaben des Autors bercksichtigt werden sollen oder nicht. Ebenso kann das automatische Laden von Bildern unterdrckt werden usw.

< 606 >

Eigenschaftswerte zuweisen, Kaskaden und Vererbung

Page size: 168,00 x 240,00 mm

Sandini Bib

Im Internet Explorer kann man darber hinaus ein pers=nliches Stylesheet (BenutzerStylesheet) angeben, das fr die Darstellung von Web-Seiten verwendet werden soll:

Beispiel Im folgenden Beispiel zeigt die erste Regel im Stylesheet des Benutzers eine „!important“-Deklaration, die die entsprechende Deklaration im Stylesheet des Autors berschreibt. Die zweite Deklaration setzt sich ebenfalls durch, weil sie als „!important“ markiert ist. Die dritte Regel im Stylesheet des Benutzers jedoch ist nicht „!important“ und wird deshalb durch die zweite Regel im Stylesheet des Autors berschrieben (die den Stil auf eine zusammenfassende Eigenschaft setzt). Darber hinaus ist die dritte Regel des Autors der zweiten Regel des Autors unterlegen, weil die zweite Regel als „!important“ gekennzeichnet ist. Das zeigt, dass „!important“-Deklarationen auch innerhalb von Autor-Stylesheets eine Funktion haben. /* Aus dem Stylesheet des Benutzers */ P { text-indent: 1em ! important } P { font-style: italic ! important } P { font-size: 18pt } /* Aus dem Stylesheet des Autors */ P { text-indent: 1.5em !important } P { font: 12pt sans-serif !important } P { font-size: 24pt }

6.4.3 Berechnung der Spezifit.t eines Selektors Die Spezifit@t eines Selektors wird wie folgt berechnet: Z@hlen Sie die Anzahl der ID-Attribute im Selektor (= a) Z@hlen Sie die Anzahl der anderen Attribute und Pseudo-Klassen im Selektor (= b)

··

Die Kaskade

< 607 >

Cascading Style Sheets, Level 2

Die Deklaration einer zusammenfassenden Eigenschaft (z. B. 'background') als „!important“ ist @quivalent zur Deklaration aller ihrer untergeordneten Eigenschaften als „!important“.

Page size: 168,00 x 240,00 mm

Sandini Bib

··

Z@hlen Sie die Anzahl der Elementnamen im Selektor (= c) Pseudo-Elemente werden ignoriert.

Durch die Verknpfung der drei Zahlen a, b und c (in einem Zahlensystem mit einer großen Basis) ergibt sich die Spezifit@t. Beispiel Einige Beispiele: * {} LI {} UL LI {} UL OL+LI {} H1 + *[REL=up]{} UL OL LI.red {} LI.red.level {} #x34y {}

/* /* /* /* /* /* /* /*

a=0 a=0 a=0 a=0 a=0 a=0 a=0 a=1

b=0 b=0 b=0 b=0 b=1 b=1 b=2 b=0

c=0 c=1 c=2 c=3 c=1 c=3 c=1 c=0

-> -> -> -> -> -> -> ->

Spezifit]t Spezifit]t Spezifit]t Spezifit]t Spezifit]t Spezifit]t Spezifit]t Spezifit]t

= = = = = = = =

0 1 2 3 11 13 21 100

*/ */ */ */ */ */ */ */

In HTML sind die Werte eines „style“-Attributs fr ein Element Stylesheet-Regeln. Diese Regeln haben keine Selektoren, aber fr die Ausfhrung von Schritt 3 des Kaskadenalgorithmus werden sie behandelt, als h@tten sie einen ID-Selektor (Spezifit@t: a=1, b=0, c=0). Fr die Ausfhrung von Schritt 4 werden sie behandelt, als stnden sie hinter allen anderen Regeln.

Cascading Style Sheets, Level 2

Beispiel

Im obigen Beispiel w@re die Farbe des P-Elements rot. Obwohl die Spezifit@t fr beide Deklarationen dieselbe ist, berschreibt die Deklaration im „style“-Attribut diejenige im STYLE-Element, und zwar aufgrund von Kaskadenregel 4.

Anmerkung der bersetzer: Die Errata erg@nzen folgende Erkl@rung: „Die Spezifit@t wird ausschließlich auf Basis der Gestalt des Selektors bestimmt. Beispielsweise wird ein Selektor der Form [id=p33] als Attributselektor gewertet (a=0, b=1, c=0), selbst wenn das id-Attribut in der DTD den Typ ID zugewiesen bekam.“ Des Weiteren erkl@ren die CSS2-Errata aber auch den gesamten Abschnitt fr ungltig und ersetzen ihn durch den nachfolgend angegebenen Text.

< 608 >

Eigenschaftswerte zuweisen, Kaskaden und Vererbung

Page size: 168,00 x 240,00 mm

Sandini Bib

Die Spezifit@t eines Selektors wird wie folgt berechnet: Z@hle 1, falls der Selektor ein 'style'-Attribut statt eines Selektors ist, sonst 0 (=a). (In HTML sind die style-Attribute eines Elements Stylesheet-Regeln. Diese Regeln haben keine Selektoren, so dass a=1, b=0, c=0 und d=0.) Z@hle die Anzahl der ID-Attribute im Selektor (=b). Z@hle die Anzahl anderer Attribute und Pseudoklassen im Selektor (=c). Z@hle die Anzahl der Element im Selektor (=d). Ignoriere Pseudoelemente

· ·· ··

Durch die Verknpfung der vier Zahlen a, b, c und d (in einem Zahlensystem mit einer großen Basis) ergibt sich die Spezifit@t. Beispiel Einige Beispiele, nach steigender Spezifit@t geordnet: /* /* /* /* /* /* /* /* /*

a=0 a=0 a=0 a=0 a=0 a=0 a=0 a=0 a=1

b=0 b=0 b=0 b=0 b=0 b=0 b=0 b=1 b=0

c=0 c=0 c=0 c=0 c=1 c=1 c=2 c=0 c=0

d=0 d=1 d=2 d=3 d=1 d=3 d=1 d=0 d=0

-> -> -> -> -> -> -> -> ->

Spezifit]t Spezifit]t Spezifit]t Spezifit]t Spezifit]t Spezifit]t Spezifit]t Spezifit]t Spezifit]t

= = = = = = = = =

0,0,0,0 0,0,0,1 0,0,0,2 0,0,0,3 0,0,1,1 0,0,1,3 0,0,2,1 0,1,0,0 1,0,0,0

*/ */ */ */ */ */ */ */ */

Specificity Example

Im obigen Beispiel w@re die Farbe des P-Elements grn. Die Deklaration im style-Attribut hat eine h=here Spezifit@t und berschreibt die Deklaration im STYLE-Element aufgrund der Kaskadenregel 3.

6.4.4 Priorit.t von Darstellungsanweisungen, die nicht Teil von CSS sind Das Benutzerprogramm kann festlegen, dass Darstellungsanweisungen aus anderen Quellen als Stylesheets bercksichtigt werden sollen, beispielsweise das FONT-Element oder das „align“-Attribut in HTML. In diesem Fall muss die Darstellungsanweisung, die nicht aus CSS stammt, in die entsprechenden CSS-Regeln bersetzt werden, und zwar mit einer Spezifit@t gleich 0. Man geht davon aus, dass sich die Regeln ganz am Anfang des Autor-Stylesheets befinden, und sie k=nnen von nachfolgenden Stylesheet-Regeln berschrieben werden.

Die Kaskade

< 609 >

Cascading Style Sheets, Level 2

* {} LI {} UL LI {} UL OL+LI {} H1 + *[REL=up]{} UL OL LI.red {} LI.red.level {} #x34y {} style=""

Page size: 168,00 x 240,00 mm

Sandini Bib

Hinweis: In einer bergangsphase wird es durch diese Vorgehensweise einfacher, stilistische Attribute in Kombination mit Stylesheets einzusetzen. n Hinweis: In CSS1 erhielten die Darstellungsanweisungen, die nicht aus CSS stammten, die Spezifit@t 1, nicht 0. Diese Onderung erfolgte aufgrund der Einfhrung des universellen Selektors, der die Spezifit@t 0 hat. n

7 Medientypen 7.1 Einf-hrung in Medientypen

Cascading Style Sheets, Level 2

Eines der wichtigsten Funktionsmerkmale von Stylesheets ist, dass sie angeben, wie ein Dokument auf unterschiedlichen Medien ausgegeben wird: auf dem Bildschirm, auf Papier, mit einem Sprachsynthesizer, mit einem Braille-Ger@t usw. Bestimmte CSS-Eigenschaften sind nur fr bestimmte Medien vorgesehen (z. B. die 'cue-before'-Eigenschaft fr akustische Benutzerprogramme). Manchmal k=nnen Stylesheets fr unterschiedliche Medientypen dieselbe Eigenschaft einsetzen, allerdings unterschiedliche Werte dafr fordern. Beispielsweise ist die Eigenschaft 'font-size' sowohl fr Bildschirm- als auch fr Druckmedien sinnvoll. Die beiden Medien sind jedoch unterschiedlich genug, um unterschiedliche Werte fr die gemeinsame Eigenschaft zu fordern; ein Dokument ben=tigt auf einem Computerbildschirm normalerweise eine gr=ßere Schrift als auf Papier. Die Erfahrung hat außerdem gezeigt, dass serifenlose Schriften auf dem Bildschirm einfacher zu lesen sind, w@hrend Serifenschriften auf Papier besser lesbar sind. Aus diesen Grnden ist es notwendig, auszudrcken, dass sich ein Stylesheet – oder ein Teil eines Stylesheets – auf bestimmte Medientypen bezieht.

7.2 Angabe medienabh.ngiger Stylesheets Momentan gibt es zwei M=glichkeiten, Medienabh@ngigkeiten fr Stylesheets anzugeben: Die Angabe des Zielmediums in einem Stylesheet mit Hilfe der At-Regeln @media oder @import.

·

@import url("lautestimme.css") aural; @media print { /* Stylesheet fUr den Druck steht hier */ }

·

Die Angabe des Zielmediums innerhalb der Dokumentsprache. In HTML 4.0 ([HTML40]) beispielsweise gibt das „media“-Attribut fr das LINK-Element das Zielmedium eines externen Stylesheets an:

Link zu einem Zielmedium

Medientypen

Page size: 168,00 x 240,00 mm

Sandini Bib

media="print, handheld" href="foo.css">

Der Rumpf...

Die @import-Regel ist im Kapitel 6 ber die Kaskadierung beschrieben.

7.2.1 Die @media-Regel Eine @media-Regel gibt durch Kommas voneinander getrennt die Ziel-Medientypen einer Menge von Regeln (in geschweifte Klammern eingeschlossen) an. Das @media-Konstrukt gestattet den Gebrauch von Stylesheet-Regeln fr verschiedene Medien in ein und demselben Stylesheet: @media print { BODY { font-size: 10pt } } @media screen { BODY { font-size: 12pt } } @media screen, print { BODY { line-height: 1.2 } }

Ein CSS-Medientyp gibt eine Menge von CSS-Eigenschaften an. Ein Benutzerprogramm, das angibt, einen Medientyp dem Namen nach zu untersttzen, muss alle Eigenschaften implementieren, die sich auf diesen Medientyp beziehen. Die fr CSS-Medientypen gew@hlten Namen reflektieren Zielger@te, fr die die betreffenden Eigenschaften Sinn machen. In der folgenden Liste der CSS-Medientypen sind die Beschreibungen in Klammern nicht normativ. Sie sollen ihnen nur einen Hinweis darauf geben, auf welches Ger@t sich der Medientyp beziehen soll. all Fr alle Ger@te geeignet. aural Fr Sprachsynthesizer vorgesehen. Weitere Informationen finden Sie im Abschnitt ber akustische Stylesheets. braille Fr Braille-Ger@te mit taktilem Feedback vorgesehen. embossed Fr Braille-Seitendrucker vorgesehen. handheld Fr Handheld-Ger@te vorgesehen (normalerweise mit kleinem Schwarzweißbildschirm und begrenzter Bandbreite).

Erkannte Medientypen

< 611 >

Cascading Style Sheets, Level 2

7.3 Erkannte Medientypen

Page size: 168,00 x 240,00 mm

Sandini Bib

print Fr ausgedrucktes, undurchsichtiges Material vorgesehen, ebenso wie fr Dokumente, die im Druckvorschaumodus auf dem Bildschirm angezeigt werden. Weitere Informationen ber Formatierungsaspekte, die spezifisch fr Druckmedien sind, finden Sie im Abschnitt ber Seitenmedien. projection Fr projizierte Pr@sentationen vorgesehen, wie zum Beispiel Projektoren oder den Ausdruck auf Folien. Weitere Informationen ber Formatierungsaspekte, die spezifisch fr Druckmedien sind, finden Sie im Abschnitt ber Seitenmedien. screen Haupts@chliche fr Computer-Farbbildschirme vorgesehen. tty Fr Medien vorgesehen, die ein festes Zeichenraster verwenden, wie beispielsweise Fernschreiber, Terminals oder portable Ger@te mit begrenzten Anzeigem=glichkeiten. Autoren sollten keine Pixeleinheiten verwenden, wenn sie den Medientyp „tty“ einsetzen. tv Fr fernsehartige Ger@te vorgesehen (geringe Aufl=sung, Farbe, begrenzt rollbare Bildschirme, mit Sound). Bei der Angabe der Medientypnamen wird die Groß-/Kleinschreibung nicht bercksichtigt. Weil sich die Technologien so schnell @ndern, gibt CSS2 keine definitive Liste der Medientypen an, die als Werte fr @media verwendet werden k=nnten.

Cascading Style Sheets, Level 2

Hinweis: Zuknftige Versionen von CSS werden diese Liste m=glicherweise erweitern. Die Autoren sollten sich nicht auf Medientypnamen verlassen, die noch nicht von einer CSS-Spezifikation definiert sind. n

Anmerkung der bersetzer: Der Opera-Browser versteht den Medientypnamen „projection“ und erlaubt es damit, HTML-Seiten fr Vortr@ge im Stil von MS PowerPoint zu verwenden.

7.3.1 Mediengruppen Jede CSS-Eigenschaftsdefinition gibt die Medientypen an, fr die die Eigenschaft durch ein konformes Benutzerprogramm implementiert werden muss. Weil sich die Eigenschaften im Allgemeinen auf mehrere Medien beziehen, gibt der Abschnitt „Anwendung auf Medien“ Mediengruppen statt einzelner Medientypen an. Jede Eigenschaft gilt fr alle Medientypen in den in ihrer Definition aufgelisteten Mediengruppen. CSS2 definiert die folgenden Mediengruppen: continuous oder paged (endlos oder seitenorientiert). „Both“ bedeutet, dass die betreffende Eigenschaft fr beide Mediengruppen gilt. visual, aural oder tactile (visuell, akustisch und taktil). grid (fr Ger@te mit einem Zeichenraster) oder bitmap. „Both“ bedeutet, dass die betreffende Eigenschaft fr beide Mediengruppen gilt.

· ··

< 612 >

Medientypen

Page size: 168,00 x 240,00 mm

Sandini Bib

· ·

interactive (fr Ger@te, die eine Interaktion mit dem Benutzer erlauben) oder static (fr solche, die keine Interaktion zulassen). „Both“ bedeutet, dass die betreffende Eigenschaft fr beide Mediengruppen gilt. all (beinhaltet alle Medientypen).

Die folgende Tabelle zeigt die Beziehungen zwischen Mediengruppen und Medientypen: Beziehung zwischen Mediengruppen und Medientypen Mediengruppen continuous/ paged

visual/aural/ tactile

grid/ bitmap

interactive/ static

aural

continuous

aural

N/A

both

braille

continuous

tactile

grid

both

emboss

paged

tactile

grid

both

handheld

both

visual

both

both

print

paged

visual

bitmap

static

projection

paged

visual

bitmap

static

screen

continuous

visual

bitmap

both

tty

continuous

visual

grid

both

tv

both

visual, aural

bitmap

both

8 Das Box-Modell Das Box-Modell von CSS beschreibt die rechteckigen K@sten, die fr die Elemente eines Dokumentbaums erzeugt werden, und die gem@ß dem visuellen Formatierungsmodell ausgelegt werden. Die Seiten-Box ist eine spezielle Box, die detailliert im Abschnitt ber Seitenmedien besprochen wird.

8.1 Maße der Boxen Jede Box hat einen Inhaltsbereich (content) (z. B. Text, ein Bild usw.) und optional Polsterung (padding), Rahmen (border) sowie Randbereiche (margin); die Gr=ße der einzelnen Bereiche wird durch die nachfolgend definierten Eigenschaften angegeben. Die folgende Zeichnung zeigt, in welchem Zusammenhang diese Bereiche stehen und welche Terminologie verwendet wird, um auf Teile von Rand, Rahmen und Polsterung zu verweisen:

Das Box-Modell

< 613 >

Cascading Style Sheets, Level 2

Medientypen

Page size: 168,00 x 240,00 mm

Sandini Bib

Top

Left

LM LB

TM

Margin (Transparent)

TB

Border

TP

Padding

LP

Content

RP RB

RM

Right

BP BB BM Bottom Margin edge Border edge Padding edge Content edge

Cascading Style Sheets, Level 2

Rand, Rahmen und Polsterung k=nnen in linke (left), rechte (right), obere (top) und untere (bottom) Segmente unterteilt werden (z. B. in der Zeichnung „LM“ fr „Left Margin“, „RP“ fr „Right Padding“, „TB“ fr „Top Border“ usw.). Der Abschluss jedes der vier Bereiche (Inhalt, Polsterung, Rahmen und Rand) wird auch als „Kante“ bezeichnet, jede Box hat also vier Kanten: Inhaltskante oder innere Kante (content edge) Die Inhaltskante umschließt den dargestellten Inhalt des Elements. Kante der Polsterung (padding edge) Die Kante der Polsterung umschließt die Polsterung der Box. Hat die Polsterung die Breite 0, f@llt die Kante der Polsterung mit der Inhaltskante zusammen. Rahmenkante (border edge) Die Rahmenkante umschließt den Rahmen der Box. Hat der Rahmen die Breite 0, f@llt die Rahmenkante mit der Kante der Polsterung zusammen. Randkante oder .ußere Kante (margin edge) Die Randkante umschließt den Rand der Box. Hat der Rand die Breite 0, f@llt die Randkante mit der Rahmenkante zusammen. Jede Kante kann in eine linke, rechte, untere und obere Kante zerlegt werden. Die Ausmaße des Inhaltsbereichs einer Box – die Inhaltsbreite und Inhaltsh he – sind von mehreren Faktoren abh@ngig: ob fr das Element, das die Box erzeugt, die Eigenschaften 'width' oder 'height' gesetzt sind, ob die Box Text oder andere Boxen enth@lt, ob es sich bei der Box um eine Tabelle handelt usw. Die H=he und die Breite von Boxen werden im Kapitel ber die Details zu visuellen Formatmodellen beschrieben. Die Box-Breite ist die Summe der linken und rechten R@nder, Rahmen und Polsterung sowie der Inhaltsbreite. Die H he ergibt sich aus den unteren und oberen R@ndern, Rahmen und Polsterung sowie der Inhaltsh=he.

< 614 >

Das Box-Modell

Page size: 168,00 x 240,00 mm

Sandini Bib

Der Hintergrundstil von Inhalt, Polsterung und Rahmen einer Box wird durch die Eigenschaft 'background' des erzeugenden Elements bestimmt. R@nder haben immer einen transparenten Hintergrund.

8.2 Beispiele f-r R.nder, Polsterung und Rahmen



Beispiele fUr R]nder, Polsterung und Rahmen

• First element of list
• Second element of list is longer to illustrate wrapping.

Daraus ergibt sich ein Dokumentbaum u. a. mit einem UL-Element, das zwei untergeordnete LIElemente aufweist. Die erste der nachfolgenden Abbildungen zeigt die Ausgabe dieses Beispiels. Die zweite Abbildung zeigt die Beziehung zwischen den R@ndern, der Polsterung und den Rahmen des UL-Elements sowie die seiner untergeordneten LI-Elemente.

Beispiele f#r R,nder, Polsterung und Rahmen

< 615 >

Cascading Style Sheets, Level 2

Dieses Beispiel zeigt, wie R@nder, Polsterung und Rahmen zusammenspielen. Nachfolgend sehen Sie das HTML-Dokument fr dieses Beispiel:

Page size: 168,00 x 240,00 mm

Sandini Bib

First element of list

Second element of list is longer to illustrate wrapping

Content width of LI

First element of list LI padding Collapsed margin is max(12px, 12px)=12px

Second element of list is longer to illustrate wrapping LI padding LI margins UL padding UL margins

Cascading Style Sheets, Level 2

Content width of UL Box width of UL

Beachten Sie die Folgendes: Die Inhaltsbreite fr jede LI-Box wird von oben nach unten berechnet; der umschließende Block fr jede LI-Box wird durch das UL-Element eingerichtet. Die H=he jeder LI-Box wird durch ihre Inhaltsh=he festgelegt, plus der oberen und unteren Polsterung, Rahmen und R@nder. Beachten Sie, dass die vertikalen R@nder zwischen den LIBoxen zusammenfallen . Die rechte Polsterung der LI-Boxen wurde auf die Breite 0 gesetzt (die 'padding'-Eigenschaft). Der Effekt wird in der zweiten Abbildung deutlich. Die R@nder der LI-Boxen sind transparent – R@nder sind immer transparent –, so dass die Hintergrundfarbe (#ffc500) der UL-Polsterung- und Inhaltsbereiche durch sie durchscheint. Das zweite LI-Element gibt einen gestrichelten Rahmen an (die 'border-style'-Eigenschaft).

· · · · ·

< 616 >

Das Box-Modell

Page size: 168,00 x 240,00 mm

Sandini Bib

8.3 Randeigenschaften: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' und 'margin' Die Randeigenschaften legen die Breite des Randbereichs einer Box fest. Die zusammenfassende Eigenschaft 'margin' setzt den Rand fr alle vier Seiten, w@hrend die anderen Randeigenschaften jeweils nur den Rand fr die betreffende Seite setzen. Die in diesem Abschnitt definierten Eigenschaften beziehen sich auf den Wertetyp , der einen der folgenden Werte annehmen kann:

Gibt eine feste Breite an.

Der Prozentsatz wird relativ zur Breite des umschließenden Blocks der erzeugenden Box berechnet. Das gilt fr 'margin-top' und 'margin-bottom', außer im Seitenkontext, wo sich Prozentwerte auf die H=he des Seitenrahmens beziehen. auto Weitere Informationen ber die Verhaltensweise finden Sie im Abschnitt 10.3 ber die Berechnung von Breiten und R,ndern. Negative Werte fr Randeigenschaften sind erlaubt, aber es kann von der jeweiligen Implementierung abh@ngige Obergrenzen geben.

Wert:

| inherit

Ausgangswert:

0

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

Beziehen sich auf die Breite des umschließenden Blocks.

Medium:

Visual

Diese Eigenschaften legen den oberen, rechten, unteren und linken Rand einer Box fest. Beispiel H1 { margin-top: 2em }

Randeigenschaften

< 617 >

Cascading Style Sheets, Level 2

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'

Page size: 168,00 x 240,00 mm

Sandini Bib

'margin' Wert:

{1,4} | inherit

Ausgangswert:

Fr zusammenfassende Eigenschaften nicht definiert.

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

Beziehen sich auf die Breite des umschließenden Blocks.

Medium:

Visual

Die Eigenschaft 'margin' ist eine zusammenfassende Eigenschaft fr die Zuordnung der Einstellungen fr 'margin-top', 'margin-right', 'margin-bottom' und 'margin-left' an einer einzigen Stelle im Stylesheet. Falls nur ein Wert angegeben ist, gilt dieser fr alle Seiten. Sind zwei Werte angegeben, werden der obere und der untere Rand auf den ersten Wert, der rechte und der linke Rand auf den zweiten Wert gesetzt. Sind drei Werte angegeben, wird der obere Rand auf den ersten Wert, der linke und der rechte Rand auf den zweiten Wert und der untere Rand auf den dritten Wert gesetzt. Sind alle vier Werte angegeben, beziehen sie sich auf den oberen, rechten, unteren bzw. linken Rand. Beispiel BODY { margin: 2em } /* alle R]nder auf 2em gesetzt */ BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */ BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

Cascading Style Sheets, Level 2

Die letzte Regel des obigen Beispiels ist @quivalent zum nachfolgenden Beispiel: BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; }

/* von der entgegengesetzten Seite (rechts) kopiert */

8.3.1 Zusammenfallende R.nder In dieser Spezifikation bedeutet der Ausdruck zusammenfallende R,nder, dass benachbarte R@nder (die durch keine Polsterungs- oder Rahmenbereiche voneinander getrennt sind) von zwei oder mehr Boxen (die nebeneinander liegen oder verschachtelt sein k=nnen) so zusammenfallen k=nnen, dass sie einen einzigen Rand bilden. In CSS2 kann es nicht vorkommen, dass horizontale R@nder zusammenfallen.

< 618 >

Das Box-Modell

Page size: 168,00 x 240,00 mm

Sandini Bib

Vertikale R@nder k=nnen zwischen bestimmten Boxen zusammenfallen: Zwei oder mehr benachbarte R@nder von Block-Boxen im normalen Darstellungsfluss fallen zusammen. Die resultierende Randbreite ist das Maximum der benachbarten Randbreiten. Bei negativen R@ndern wird das absolute Maximum der negativen benachbarten R@nder von dem Maximum der positiven benachbarten R@nder abgezogen. Gibt es keine positiven R@nder, wird das absolute Maximum der negativen benachbarten R@nder von 0 abgezogen. Vertikale R@nder zwischen einer Floating-Box und einer anderen Box fallen nicht zusammen. R@nder von absolut und relativ positionierten Boxen fallen nicht zusammen.

· ··

Betrachten Sie bitte die Beispiele fr R,nder, Polsterung und Rahmen in Abschnitt 8.2. Dort finden Sie auch eine Darstellung zusammenfallender R@nder.

8.4 Polstereigenschaften: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' und 'padding' Die Polsterungseigenschaften geben die Breite des Polsterbereichs einer Box an. Die zusammenfassende Eigenschaft 'padding' setzt die Polsterung fr alle vier Seiten, w@hrend die anderen Polsterungseigenschaften nur die Polsterung fr ihre jeweilige Seite festlegen. Die in diesem Abschnitt definierten Eigenschaften beziehen sich auf den Wertetyp , der einen der folgenden Werte annehmen kann:

Anders als die Randeigenschaften k=nnen die Werte fr die Polsterung nicht negativ sein. Wie bei den Randeigenschaften beziehen sich die Prozentwerte fr die Polsterungseigenschaften auf die Breite des umschließenden Blocks der erzeugenden Box.

'padding-top', 'padding-right', 'padding-bottom', 'padding-left' Wert:

| inherit

Ausgangswert:

0

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

Beziehen sich auf die Breite des umschließenden Blocks

Medium:

Visual

Diese Eigenschaften setzen die obere, rechte, untere und linke Polsterung einer Box. Beispiel BLOCKQUOTE { padding-top: 0.3em }

Polstereigenschaften

< 619 >

Cascading Style Sheets, Level 2

Gibt eine feste Breite an.

Der Prozentsatz wird relativ zur Breite des umschließenden Blocks der erzeugenden Box berechnet, sogar fr 'padding-top' und 'padding-bottom'.

Page size: 168,00 x 240,00 mm

Sandini Bib

'padding' Wert:

{1,4} | inherit

Ausgangswert:

0

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

Beziehen sich auf die Breite des umschließenden Blocks

Medium:

Visual

Die Eigenschaft 'padding' ist eine zusammenfassende Eigenschaft fr die Einstellung von 'padding-top', 'padding-right', 'padding-bottom' und 'padding-left' an einer einzigen Stelle im Stylesheet. Ist nur ein einziger Wert angegeben, gilt er fr alle Seiten. Sind zwei Werte angegeben, werden die untere und die obere Polsterung auf den ersten Wert, die rechte und die linke Polsterung auf den zweiten Wert gesetzt. Sind drei Werte angegeben, wird die obere Polsterung auf den ersten Wert, die linke und die rechte Polsterung auf den zweiten Wert, und die untere Polsterung auf den dritten Wert gesetzt. Sind vier Werte angegeben, gelten sie fr die obere, rechte, untere bzw. linke Polsterung. Die Oberfl@chenfarbe oder das Bild des Polsterbereichs werden mit der Eigenschaft 'background' angegeben:

Cascading Style Sheets, Level 2

Beispiel H1 { background: white; padding: 1em 2em; }

Das obige Beispiel gibt eine vertikale Polsterung ('padding-top' und 'padding-bottom') von '1em' sowie eine horizontale Polsterung ('padding-right' und 'padding-left') von '2em' an. Die Einheit 'em' ist relativ zur Schriftgr=ße des Elements: '1em' entspricht der Gr=ße der verwendeten Schrift.

Anmerkung der bersetzer: CSS-Errata: Die in diesem Abschnitt beschriebenen Eigenschaften sind nicht gltig fr: Tabellenzeilen, Zeilengruppen, Kopfgruppen, Fußgruppen, Spalten und Spaltengruppen. In HTML sind dies die Elemente tr, mit tbody gruppierte tr, thead, tfoot, col, colgroup.

< 620 >

Das Box-Modell

Page size: 168,00 x 240,00 mm

Sandini Bib

8.5 Rahmeneigenschaften (border) Die Rahmeneigenschaften geben die Breite, die Farbe und den Stil des Rahmenbereichs einer Box an. Diese Eigenschaften gelten fr alle Elemente. Insbesondere fr HTML k=nnen Benutzerprogramme Rahmen fr bestimmte Elemente (z. B. Schaltfl@chen, Mens usw.) anders darstellen als fr „normale“ Elemente. n

8.5.1 Rahmenbreite: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' und 'border-width' Die Eigenschaften fr die Rahmenbreite geben die Breite des Rahmenbereichs an. Die in diesem Abschnitt definierten Eigenschaften beziehen sich auf den Wertetyp , der einen der folgenden Werte annehmen kann:

Die Interpretation der ersten drei Werte ist vom Benutzerprogramm abh@ngig. Es mssen jedoch die folgenden Beziehungen gelten: 'thin'

Das Box-Modell

Page size: 168,00 x 240,00 mm

Sandini Bib

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' Wert:

| inherit

Ausgangswert:

Der Wert der 'color'-Eigenschaft.

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual

'border-color' Wert:

{1,4} | transparent | inherit

Ausgangswert:

Siehe einzelne Eigenschaften

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual

[ | transparent ]{1,4} | inherit

Die Eigenschaft 'border-color' legt die Farbe der vier Rahmen fest. Die Werte haben die folgenden Bedeutungen:

Gibt einen Farbwert an. transparent Der Rahmen ist transparent (kann aber eine Breite haben). Die Eigenschaft 'border-color' kann einen bis vier Werte haben, und die Werte werden fr die verschiedenen Seiten wie fr 'border-width' gesetzt. Wenn die Rahmenfarbe eines Elements nicht mit einer Rahmeneigenschaft angegeben wird, mssen Benutzerprogramme den Wert der 'color'-Eigenschaft des Elements als berechneten Wert der Rahmenfarbe verwenden.

Rahmeneigenschaften (border)

< 623 >

Cascading Style Sheets, Level 2

Anmerkung der bersetzer: Fr 'border-color' muss der Wert korrekt wie folgt lauten:

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel In diesem Beispiel ist der Rahmen eine durchgezogene schwarze Linie. P { color: black; background: white; border: solid; }

8.5.3 Rahmenstil: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' und 'border-style'

Cascading Style Sheets, Level 2

Die Rahmenstileigenschaften geben den Linienstil fr den Rahmen einer Box an (durchgezogen, doppelt, gestrichelt usw.). Die in diesem Abschnitt definierten Eigenschaften beziehen sich auf den Wertetyp , der einen der folgenden Werte annehmen kann: none Kein Rahmen. Dieser Wert erzwingt, dass der berechnete Wert von 'border-width' gleich '0' ist. hidden (versteckt) Wie 'none', außer in Hinblick auf Rahmenkonfliktaufl=sung fr Tabellenelemente. dotted Der Rahmen wird als punktierte Linie dargestellt. dashed Der Rahmen wird als gestrichelte Linie dargestellt. solid Der Rahmen wird als durchgezogene Linie dargestellt. double Der Rahmen besteht aus zwei durchgezogenen Linien. Die Summe der beiden Linien und der Abstand zwischen ihnen ist gleich dem Wert von 'border-width'. groove (Rille) Der Rahmen sieht aus, als w@re er in die Zeichenfl@che eingemeißelt. ridge (Grat) Das Gegenteil von 'groove': der Rahmen sieht aus, als k@me er aus der Zeichenfl@che hervor. inset Der Rahmen bewirkt, dass die gesamte Box aussieht, als w@re sie in die Zeichenfl@che eingebettet. outset Das Gegenteil von 'inset': Der Rahmen bewirkt, dass die gesamte Box aussieht, als k@me sie aus der Zeichenfl@che heraus. Alle Rahmen werden auf dem Hintergrund der Box gezeichnet. Die Farbe fr Rahmen, die mit den Werten 'groove', 'ridge', 'inset' und 'outset' gezeichnet werden, sind von der Eigenschaft 'color' des Elements abh@ngig.

< 624 >

Das Box-Modell

Page size: 168,00 x 240,00 mm

Sandini Bib

Anmerkung der bersetzer: Die CSS2-Errata korrigieren den vorhergehenden Satz wie folgt: „Die Farbe fr Rahmen, die mit den Werten 'groove', 'ridge', 'inset' und 'outset' gezeichnet werden, sollte auf der Eigenschaft 'border-color' des Elements basieren. Benutzerprogramme k=nnen einen eigenen Algorithmus w@hlen, mit dem sie die tats@chlichen Farben ermitteln. Wenn 'border-color' zum Beispiel den Wert 'silver' hat, kann ein Benutzerprogramm Farbabstufungen von Weiß bis Dunkelgrau w@hlen, um einen abgeschr@gten Rahmen darzustellen.“

Konforme HTML-Benutzerprogramme drfen 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' und 'outset' als 'solid' interpretieren.

Wert:

| inherit

Ausgangswert:

Keiner

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

N/A

Medium:

Visual

'border-style' Wert:

{1,4} | inherit

Ausgangswert:

Siehe einzelne Eigenschaften

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

N/A

Medium:

Visual

Die Eigenschaft 'border-style' legt den Stil der vier Rahmen fest. Sie kann einen von vier Werten annehmen, und die Werte werden auf die verschiedenen Seiten, wie oben, gezeigt fr 'border-width' angewendet. Beispiel #xy34 { border-style: solid dotted }

Rahmeneigenschaften (border)

< 625 >

Cascading Style Sheets, Level 2

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'

Page size: 168,00 x 240,00 mm

Sandini Bib

In diesem Beispiel sind die horizontalen Rahmen 'solid' (durchgezogen), die vertikalen Rahmen sind 'dotted' (punktiert). Weil der Ausgangswert der Rahmenstile 'none' ist, sind keine Rahmen sichtbar, wenn der Rahmenstil nicht explizit festgelegt wird.

8.5.4 Zusammenfassende Rahmeneigenschaften: 'border-top', border-bottom', 'border-right', 'border-left' und 'border' 'border-top', border-bottom', 'border-right', 'border-left' Wert:

[ | | | | ] | inherit

Ausgangswert:

Siehe einzelne Eigenschaften.

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

N/A

Medium:

Visual

Dies ist eine zusammenfassende Eigenschaft fr die Einstellung von Breite, Stil und Farbe des oberen, rechten, unteren und linken Rahmen einer Box.

Anmerkung der bersetzer: In der obigen bersicht und in der nachfolgenden bersicht der Rahmeneigenschaften sind die Angaben fr Wert fehlerhaft. Sie mssen in beiden F@llen lauten:

Cascading Style Sheets, Level 2

[ || || [ | transparent] | inherit

Beispiel H1 { border-bottom: thick solid red }

Die oben gezeigte Regel setzt die Breite, den Stil und die Farbe des Rahmens unterhalb des H1-Elements. Weggelassene Werte werden auf ihre Ausgangswerte gesetzt. Weil die nachfolgende Regel keine Rahmenfarbe angibt, erh@lt der Rahmen die in der 'color'-Eigenschaft festgelegte Farbe: H1 { border-bottom: thick solid }

< 626 >

Das Box-Modell

Page size: 168,00 x 240,00 mm

Sandini Bib

'border' Wert:

[ | | | | ] | inherit

Ausgangswert:

Siehe einzelne Eigenschaften.

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

N/A

Medium:

Visual

Die Eigenschaft 'border' ist eine zusammenfassende Eigenschaft, mit der dieselbe Breite, dieselbe Farbe und derselbe Stil fr alle vier Rahmen einer Box festgelegt werden. Anders als die zusammenfassenden Eigenschaften 'margin' und 'padding', kann die Eigenschaft 'border' keine unterschiedlichen Werte fr die vier Rahmen festlegen. Dazu mssen eine oder mehrere der anderen Rahmeneigenschaften verwendet werden. Beispiel Beispielsweise ist die erste nachfolgende Regel @quivalent zu den vier anschließend gezeigten Regeln:

Weil die Eigenschaften in gewissem Ausmaß eine berlappende Funktionalit@t aufweisen, ist die Reihenfolge von Bedeutung, in der die Regeln angegeben werden. Beispiel Betrachten Sie das folgende Beispiel: BLOCKQUOTE { border-color: red; border-left: double; color: black }

In diesem Beispiel ist die Farbe des linken Rahmens schwarz, w@hrend die anderen Rahmen rot sind. Das liegt daran, dass 'border-left' die Breite, den Stil und die Farbe festgelegt hat. Weil der Farbwert durch die Eigenschaft 'border-left' nicht angegeben ist, wird er aus der Eigenschaft 'color' bernommen. Die Tatsache, dass die Eigenschaft 'color' nach der Eigenschaft 'borderleft' gesetzt wird, ist nicht relevant.

Rahmeneigenschaften (border)

< 627 >

Cascading Style Sheets, Level 2

P { border: solid red } P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red }

Page size: 168,00 x 240,00 mm

Sandini Bib

9 Visuelles Formatierungsmodell 9.1 Einf-hrung in das visuelle Formatierungsmodell Dieses und das n@chste Kapitel beschreiben das visuelle Formatierungsmodell: wie Benutzerprogramme den Dokumentbaum fr visuelle Medien verarbeiten. Beim visuellen Formatierungsmodell erzeugt jedes Element im Dokumentbaum gem@ß dem Box-Modell null oder mehr Boxen. Das Layout dieser Boxen wird bestimmt durch: Gr=ße und Typ der Box Positionierungsschema (normaler Fluss, Floating und absolute Positionierung) Beziehungen zwischen Elementen im Dokumentbaum Externe Information (z. B. Viewport-Gr=ße, eigene Gr=ße von Bildern usw.)

·· ··

Die in diesem und dem n@chsten Kapitel definierten Eigenschaften beziehen sich sowohl auf Endlosmedien als auch auf Seitenmedien. Die Bedeutung der Randeigenschaften variiert jedoch bei Anwendung auf Seitenmedien (weitere Informationen finden Sie bei der Beschreibung des Seitenmodells, Kapitel 13). Das visuelle Formatierungsmodell spezifiziert nicht alle Aspekte der Formatierung (z. B. keinen Algorithmus fr den Buchstabenabstand). Konforme Benutzerprogramme k=nnen fr die von dieser Spezifikation nicht abgedeckten Aspekte unterschiedliche Verhaltensweisen zeigen.

Cascading Style Sheets, Level 2

9.1.1 Der Viewport Benutzerprogramme fr Endlosmedien bieten den Benutzern normalerweise einen Viewport (ein Fenster oder einen anderen Anzeigebereich auf dem Bildschirm), durch den die Benutzer ein Dokument betrachten k=nnen. Benutzerprogramme @ndern das Layout des Dokuments m=glicherweise, wenn der Viewport eine neue Gr=ße erh@lt (siehe umschließender Ausgangsblock, unten). Ist der Viewport kleiner als der umschließende Ausgangsblock des Dokuments, sollte das Benutzerprogramm einen Mechanismus zum Bl@ttern bereitstellen. Es gibt h=chstens einen Viewport pro Zeichenfl@che, aber die Benutzerprogramme k=nnen mehrere Zeichenfl@chen anzeigen (und damit unterschiedliche Ansichten desselben Dokuments bieten).

9.1.2 Umschließende BlUcke In CSS2 werden viele Positionen und Gr=ßen von Boxen relativ zu den Kanten einer rechteckigen Box berechnet, dem so genannten umschließenden Block. Im Allgemeinen dienen erzeugte Boxen als umschließende Boxen fr abgeleitete Boxen; wir sagen, eine Box „richtet den umschließenden Block fr ihre Nachkommen ein“. Die Formulierung „der umschließende Block einer Box“ bedeutet „der umschließende Block, in dem sich die Box befindet“, und bezeichnet nicht den Block, den eine Box erzeugt. Jede Box erh@lt eine Position relativ zu ihrem umschließenden Block, ist jedoch nicht auf diesen umschließenden Block begrenzt; sie kann berlaufen. Die Wurzel (Root) des Dokumentbaums erzeugt eine Box, die als umschließender Ausgangsblock fr ein nachfolgendes Layout dient.

< 628 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

Die Breite des anf@nglichen umschließenden Blocks kann mit Hilfe der 'width'-Eigenschaft fr das Wurzelelement angegeben werden. Hat diese Eigenschaft den Wert 'auto', gibt das Benutzerprogramm die Ausgangsbreite vor (zum Beispiel verwendet er dazu die aktuelle Breite des Viewports). Die H=he des umschließenden Ausgangsblocks kann mit der 'height'-Eigenschaft fr das Wurzelelement angegeben werden. Hat diese Eigenschaft den Wert 'auto', vergr=ßert sich die H=he des umschließenden Blocks, um dem Dokumentinhalt zu gengen. Der umschließende Ausgangsblock kann nicht positioniert oder gefloatet werden (das heißt, Benutzerprogramme ignorieren die 'position'- und 'float'-Eigenschaften fr das Wurzelelement). Detaillierte Informationen darber, wie die Gr=ße des umschließenden Blocks berechnet wird, sind im n@chsten Kapitel zu finden.

9.2 Kontrolle -ber das Erstellen von Boxen Die folgenden Abschnitte beschreiben, welche Box-Typen in CSS2 erzeugt werden k=nnen. Der Typ einer Box beeinflusst teilweise ihr Verhalten im visuellen Formatierungsmodell. Die nachfolgend beschriebene 'display'-Eigenschaft gibt den Box-Typ an.

Elemente auf Blockebene sind die Elemente des Quelldokuments, die visuell als Bl=cke (z. B. Abs@tze) formatiert sind. Verschiedene Werte der 'display'-Eigenschaft machen ein Element zu einem Element auf Blockebene: 'block', 'list-item', 'compact' und 'run-in' (teilweise; siehe Compact- und Run-in-Boxen) sowie 'table'. Elemente auf Blockebene erzeugen eine Hauptblock-Box, die nur Block-Boxen enth@lt. Die Hauptblock-Box richtet den umschließenden Block fr abgeleitete Boxen und erzeugten Inhalt ein und stellt außerdem die in jedem Positionierungsschema beteiligte Box dar. Hauptblock-Boxen werden im Blockformatierungskontext bercksichtigt. Einige Elemente auf Blockebene erzeugen zus@tzliche Boxen außerhalb der Haupt-Box: 'listitem'-Elemente und solche mit Markierungen (siehe Abschnitt 12.6.1). Diese zus@tzlichen Boxen werden relativ zur Haupt-Box positioniert.

Anonyme Block-Boxen In einem Dokument wie dem Folgenden

Some Text

More Text

(und vorausgesetzt, fr DIV und P ist 'display: block' vorgegeben), scheint DIV sowohl Inline-Inhalt als auch Blockinhalt zu haben. Um die Definition der Formatierung zu vereinfachen, setzen wir voraus, dass es einen anonymen Block um „Some Text“ herum gibt.

Kontrolle #ber das Erstellen von Boxen

< 629 >

Cascading Style Sheets, Level 2

9.2.1 Elemente auf Blockebene und Block-Boxen

Page size: 168,00 x 240,00 mm

Sandini Bib

DIV box anonymous box

Some text More text P box

Abbildung 9.1: Diese Skizze fr das obige Beispiel zeigt drei Boxen, von denen eine anonym ist. Mit anderen Worten: wenn eine Block-Box (wie beispielsweise die oben fr DIV erzeugte) eine weitere Block-Box enth@lt (wie oben beispielsweise P), erzwingen wir, dass sie nur Block-Boxen enth@lt, indem wir alle Inline-Boxen in eine anonyme Block-Box einhllen. Beispiel Dieses Modell wrde fr das folgende Beispiel gelten, wenn die folgenden Regeln: /* Hinweis: HTML-Benutzerprogramme berUcksichtigen diese Regeln m^glicherweise nicht */ BODY { display: inline } P { display: block }

Cascading Style Sheets, Level 2

auf das folgende HTML-Dokument angewendet werden:

durch einen Block



Das BODY-Element enth@lt ein Stck (S1) anonymen Text, gefolgt von einem Element auf Blockebene, gefolgt von einem weiteren Stck (S2) anonymem Text. Daraus resultieren eine anonyme Block-Box fr BODY, die eine anonyme Block-Box um S1 herum enth@lt, die P-BlockBox sowie eine weitere anonyme Block Box um S2 herum. Die Eigenschaften anonymer Boxen werden von der umschließenden nicht anonymen Box geerbt (in diesem Beispiel ist das die Box fr DIV). Nicht vererbte Eigenschaften haben ihren Ausgangswert. Beispielsweise wird die Schrift der anonymen Box von DIV geerbt, die R@nder dagegen sind 0.

< 630 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

9.2.2 Inzeilige Elemente und inzeilige Boxen (Elemente auf Inline-Ebene und Inline-Boxen) Inzeilige Elemente sind die Elemente des Quelldokuments, die keine neuen Inhaltsbl=cke bilden; der Inhalt ist auf Zeilen verteilt (z. B. betonte Teile eines Texts innerhalb eines Abschnittes, inzeilige Bilder usw.). Verschiedene Werte der 'display'-Eigenschaft machen ein Element inzeilig: 'inline', 'inline-table', 'compact' und 'run-in' (teilweise; lesen Sie dazu auch im Abschnitt ber Compact- und Run-in-Boxen nach). Inzeilige Elemente erzeugen inzeilige Boxen. Inzeilige Boxen k=nnen an mehreren Formatierungskontexten beteiligt sein: Innerhalb einer Block-Box befinden sich inzeilige Boxen in einem inzeiligen Formatierungskontext. Eine kompakte inzeilige Box erh@lt eine Position im Rand einer Block-Box. Markierungs-Boxen erhalten immer Positionen außerhalb einer Block-Box.

· ··

Anmerkung der bersetzer: Hier wurde der englische Begriff „inline“ mit „inzeilig“ bersetzt, was im Deutschen eine dafr bliche bersetzung ist. Dennoch kann „inline“ nicht durchg@ngig bersetzt werden. berall dort, wo die entsprechende Angabe in einem CSS auftaucht, muss natrlich „inline“ stehen. Aus diesem Grund tauchen beide Worte hier und im Folgenden gemischtsprachig auf; und deshalb wurden bereits in der berschrift beide Formen genannt.

Anonyme Inline-Boxen In einem Dokument wie dem Folgenden

erzeugt P eine Block-Box mit mehreren darin enthaltenen Inline-Boxen. Die Box fr eine „Betonung“ ist eine inzeilige Box, die von einem inzeiligen Element (EM) erzeugt wurde, aber die anderen Boxen („Irgendein“ und „Text“) sind inzeilige Boxen, die von einem Element auf Blockebene erzeugt wurden (P). Die letzteren werden auch als anonyme Inline-Boxen bezeichnet, weil ihnen kein entsprechendes Element auf Inline-Ebene zugeordnet ist. Solche anonyme Inline-Boxen erben vererbbare Eigenschaften von ihrer bergeordneten Block-Box. Nicht vererbte Eigenschaften behalten ihren Ausgangswert. In unserem Beispiel wird die Farbe der anonymen Ausgangsboxen von P geerbt, der Hintergrund jedoch ist transparent. Geht aus dem Kontext hervor, welcher Typ anonymer Box gemeint ist, werden sowohl anonyme Inline-Boxen als auch anonyme Block-Boxen in dieser Spezifikation einfach als anonyme Boxen bezeichnet. Bei der Formatierung von Tabellen gibt es noch mehr Typen von anonymen Boxen.

Kontrolle #ber das Erstellen von Boxen

< 631 >

Cascading Style Sheets, Level 2

Irgendein betonter Text

Page size: 168,00 x 240,00 mm

Sandini Bib

9.2.3 Kompakte Boxen (Compact-Box) Eine kompakte Box verh@lt sich wie folgt: Folgt der Compact-Box eine Block-Box (die nicht gefloatet und nicht absolut positioniert ist), wird die Compact-Box wie eine einzeilige Inline-Box formatiert. Die resultierende BoxBreite wird mit einem der Seitenr@nder der Block-Box verglichen (links oder rechts). Die Auswahl von linkem oder rechtem Rand wird durch die 'direction' bestimmt, die fr das Element angegeben ist, das den umschließenden Block fr die Compact-Box und die folgende Box erzeugt. Ist die Breite der Inline-Box kleiner oder gleich dem Rand, erh@lt die Inline-Box eine Position im Rand, wie nachfolgend beschrieben. Andernfalls wird die Compact-Box zu einer Block-Box.

· ·

Anmerkung der bersetzer: Hier sei darauf hingewiesen, dass der Rand keine Linie, sondern eine Fl@che ist. Deshalb k=nnen Boxen im Rand platziert werden.

Cascading Style Sheets, Level 2

Die Compact-Box erh@lt wie folgt eine Position im Rand: Sie liegt außerhalb (links oder rechts) der ersten Zeilen-Box des Blocks, wird aber in der Berechnung der H=he dieser Zeilen-Box bercksichtigt. Die 'vertical-align'-Eigenschaft der Compact-Box bestimmt die vertikale Position der Compact-Box relativ zu dieser Zeilen-Box. Die horizontale Position der Compact-Box ist immer der Rand der Block-Box. Ein Element, das nicht innerhalb einer Zeile formatiert werden kann, kann nicht im Rand des folgenden Blocks platziert werden. Beispielsweise wird ein 'compact'-Element in HTML, das ein BR-Element enth@lt, immer als Block-Box formatiert (die Standardformatierung fr BR vorausgesetzt, die einen Zeilenumbruch einfgt). Fr die Platzierung von mehrzeiligem Text im Rand ist die 'float'-Eigenschaft h@ufig besser geeignet. Beispiel Das folgende Beispiel zeigt eine Compact-Box:

A compact box example



Kurz

Beschreibung steht hier Zu lang fUr den Rand

Beschreibung steht hier



< 632 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

Dieses Beispiel k=nnte wie folgt formatiert werden: Kurz Beschreibung steht hier Zu lang fBr den Rand Beschreibung steht hier

Die 'text-align'-Eigenschaft kann verwendet werden, um das Kompaktelement innerhalb des Randes auszurichten: an der linken Kante des Randes ('left'), an der rechten Kante des Randes ('right') oder zentriert im Rand ('center'). Der Wert 'justify' findet keine Anwendung und wird als 'left' oder 'right' interpretiert, abh@ngig von der 'direction' des Elements auf Blockebene, in dessen Rand das Kompaktelement formatiert wird ('left', wenn die Schreibrichtung 'ltr' ist, 'right', wenn sie 'rtl' ist.) Weitere Informationen, wie Kompaktboxen mit erzeugtem Inhalt zusammenspielen, finden Sie im Abschnitt ber erzeugten Inhalt (12.3).

9.2.4 Run-in-Boxen Eine Run-in-Box verh@lt sich wie folgt: Wenn der Run-in-Box eine Block-Box (die nicht gefloatet und nicht absolut positioniert ist) folgt, wird die Run-in-Box zur ersten Inline-Box der Block-Box. Andernfalls wird die Run-in-Box zu einer Block-Box.

· ·

Beispiel Eine 'run-in'-Box ist praktisch fr Run-in- berschriften, wie etwa im folgenden Beispiel gezeigt:

Cascading Style Sheets, Level 2



A run-in box example

A run-in heading.

And a paragraph of text that follows it.

Dieses Beispiel k=nnte wie folgt formatiert werden: A run-in heading. And a paragraph of text that follows it.

Die Eigenschaften erbt das Run-in-Element von seinen bergeordneten Elementen im Dokumentbaum, nicht von der Block-Box, deren visueller Teil es wird.

Kontrolle #ber das Erstellen von Boxen

< 633 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Weitere Informationen darber, wie Run-in-Boxen mit erzeugtem Inhalt zusammenspielen, finden Sie im Abschnitt ber erzeugten Inhalt (12.3).

9.2.5 Die 'display'-Eigenschaft 'display' Wert

inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | tablefooter-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

Ausgangswert:

Inline

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

All

Cascading Style Sheets, Level 2

Die Werte dieser Eigenschaft haben die folgenden Bedeutungen: block Dieser Wert veranlasst ein Element, eine Hauptblock-Box zu erzeugen. inline Dieser Wert veranlasst ein Element, eine oder mehrere Inline-Boxen zu erzeugen. list-item Dieser Wert veranlasst ein Element (z. B. LI in HTML), eine Hauptblock-Box und eine inzeilige Listenelement-Box zu erzeugen. Weitere Informationen ber Listen und Beispiele fr die Listenformatierung finden Sie im Abschnitt ber Listen. marker Dieser Wert deklariert erzeugten Inhalt vor oder hinter einer Box als Markierung. Dieser Wert sollte nur in Kombination mit den Pseudo-Elementen :before und :after verwendet werden, die Elementen auf Blockebene zugeordnet sind. In anderen F@llen wird dieser Wert als 'inline' interpretiert. Weitere Informationen finden Sie im Abschnitt ber Markierungen (12.6.1). none Dieser Wert veranlasst ein Element, keine Boxen in der Formatierungsstruktur zu erzeugen (das heißt, das Element hat keinen Einfluss auf das Layout). Abgeleitete Elemente erzeugen ebenfalls keine Boxen; dieses Verhalten kann nicht -berschrieben werden, indem die 'display'-Eigenschaft der abgeleiteten Elemente auf einen anderen Wert gesetzt wird. Beachten Sie bitte, dass mit 'display' gleich 'none' keine unsichtbare Box erzeugt wird; es wird berhaupt keine Box erzeugt. CSS beinhaltet Mechanismen, die es einem Element erm=glichen, Boxen in der Formatierungsstruktur zu erzeugen, die die Formatierung beeinflussen, aber selbst nicht sichtbar sind. Weitere Informationen finden Sie im Abschnitt ber die Sichtbarkeit (11.2).

< 634 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

run-in und compact Diese Werte erzeugen Block- oder Inline-Boxen, abh@ngig vom Kontext. Eigenschaften beziehen sich auf Run-in- und Compact-Boxen abh@ngig von ihrem endgltigen Status (Inline-Ebene oder Blockebene). Beispielsweise wird die 'white-space'-Eigenschaft nur angewendet, wenn die Box eine Block-Box ist. table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption Diese Werte veranlassen eine Element, sich wie ein Tabellenelement zu verhalten (den Einschr@nkungen unterliegend, die im Kapitel 17 ber Tabellen beschrieben sind). Beachten Sie, dass der Ausgangswert von 'display' zwar 'inline' ist, die Regeln im Standard-Stylesheet des Benutzerprogramms diesen Wert jedoch berschreiben k=nnen. Betrachten Sie dazu auch das Beispiel-Stylesheet fr HTML 4.0 im Anhang. Beispiel Hier einige Beispiele fr die 'display'-Eigenschaft: P EM LI IMG

{ { { {

display: display: display: display:

block } inline } list-item } none } /* Keine Bilder anzeigen */

Konforme HTML-Benutzerprogramme drfen die 'display'-Eigenschaft ignorieren.

9.3 Positionierungsschemata

Normaler Fluss In CSS2 beinhaltet der normale Fluss die Blockformatierung von Block-Boxen, die inzeilige Formatierung von Inline-Boxen, die relative Positionierung von Block- oder Inline-Boxen, und die Positionierung von Compact- und Run-in-Boxen. Floats Im Float-Modell wird eine Box zun@chst gem@ß dem normalen Fluss ausgelegt, dann aus dem Fluss entfernt und so weit wie m=glich nach links oder rechts verschoben. Weiterer Inhalt kann entlang der Seite eines Floats fließen. Absolute Positionierung Beim absoluten Positionierungsmodell wird eine Box vollst@ndig aus dem normalen Fluss entfernt (sie hat keinen Einfluss auf sp@tere gleichrangige Elemente), und es wird ihr eine Position relativ zum umschließenden Block zugewiesen. Hinweis: Die Positionierungsschemata von CSS2 helfen den Autoren, einen besseren Zugriff auf ihre Dokumente zu realisieren, indem sie ihnen erlauben, Markup-Tricks zu vermeiden (zum Beispiel unsichtbare Bilder), die fr Layout-Effekte verwendet werden. n

Positionierungsschemata

< 635 >

Cascading Style Sheets, Level 2

In CSS2 kann eine Box gem@ß den drei folgenden Positionierungsschemata ausgelegt werden:

Page size: 168,00 x 240,00 mm

Sandini Bib

9.3.1 Auswahl eines Positionierungsschemas: 'position'-Eigenschaft Die Eigenschaften 'position' und 'float' legen fest, welcher der Positionierungsalgorithmen von CSS2 fr die Berechnung der Position einer Box verwendet wird.

'position' Wert

static | relative | absolute | fixed | inherit

Ausgangswert:

Static

Angewendet auf:

Alle Elemente, aber nicht auf erzeugten Inhalt

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual

Cascading Style Sheets, Level 2

Die Werte dieser Eigenschaft haben die folgenden Bedeutungen: static Bei der Box handelt es sich um eine normale Box gem@ß dem normalen Fluss. Die Eigenschaften 'left' und 'top' finden keine Anwendung. relative Die Position der Box wird gem@ß dem normalen Fluss berechnet (man spricht auch von der Position im normalen Fluss). Anschließend wird die Box relativ zu ihrer normalen Position verschoben. Wird eine Box B relativ positioniert, wird die Position der nachfolgenden Box so berechnet, als w@re B nicht verschoben worden. absolute Die Position (und m=glicherweise Gr=ße) der Box wird mit Hilfe der Eigenschaften 'left', 'right', 'top' und 'bottom' angegeben. Diese Eigenschaften geben Abst@nde relativ zum umschließenden Block der Box an. Absolut positionierte Boxen werden aus dem normalen Fluss entfernt. Das bedeutet, sie haben keinen Einfluss auf das Layout sp@terer gleichrangiger Elemente. Obwohl absolut positionierte Boxen R@nder haben, fallen sie nicht mit anderen R@ndern zusammen. fixed Die Position der Box wird gem@ß des 'absolute'-Modells berechnet, aber darber hinaus ist die Box feststehend hinsichtlich einer bestimmten Referenz. Bei Endlosmedien ist die Box feststehend relativ zu dem Viewport (und bewegt sich beim Bl@ttern nicht). Bei Seitenmedien ist die Box feststehend relativ zur Seite, auch wenn diese Seite durch einen Viewport betrachtet wird (beispielsweise bei einer Druckvorschau). Autoren wollen 'fixed' m=glicherweise von einem Medium unabh@ngig angeben. Beispielsweise k=nnte ein Autor beabsichtigen, dass eine Box oben im Viewport auf dem Bildschirm bleibt, aber nicht oben auf jeder gedruckten Seite. Die beiden Spezifikationen k=nnen mit Hilfe einer @mediaRegel voneinander getrennt werden, beispielsweise wie folgt:

< 636 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

@media screen { H1#first { position: fixed } } @media print { H1#first { position: static } }

9.3.2 Box-Abst.nde : 'top', 'right', 'bottom', 'left' Ein Element ist positioniert, wenn seine 'position'-Eigenschaft einen anderen Wert als 'static' hat. Positionierte Elemente erzeugen positionierte Boxen, die gem@ß vier Eigenschaften ausgelegt werden:

'top' Wert

| | auto | inherit

Ausgangswert:

Auto

Angewendet auf:

Positionierte Elemente

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die H=he des umschließenden Blocks

Medium:

Visual

Diese Eigenschaft gibt an, wie weit die oberste Inhaltskante einer Box unter die oberste Kante des umschließenden Blocks der Box verschoben wird.

Wert

| | auto | inherit

Ausgangswert:

Auto

Angewendet auf:

Positionierte Elemente

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die H=he des umschließenden Blocks

Medium:

Visual

Diese Eigenschaft gibt an, wie weit die rechte Inhaltskante einer Box links neben die rechte Kante des umschließenden Blocks der Box verschoben wird.

Positionierungsschemata

< 637 >

Cascading Style Sheets, Level 2

'right'

Page size: 168,00 x 240,00 mm

Sandini Bib

'bottom' Wert

| | auto | inherit

Ausgangswert:

Auto

Angewendet auf:

Positionierte Elemente

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die H=he des umschließenden Blocks

Medium:

Visual

Diese Eigenschaft gibt an, wie weit die unterste Inhaltskante einer Box ber die unterste Kante des umschließenden Blocks der Box verschoben wird.

Cascading Style Sheets, Level 2

'left' Wert

| | auto | inherit

Ausgangswert:

auto

Angewendet auf:

Positionierte Elemente

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die H=he des umschließenden Blocks

Medium:

Visual

Diese Eigenschaft gibt an, wie weit die linke Inhaltskante einer Box nach rechts neben die linke Kante des umschließenden Blocks der Box verschoben wird. Die Werte fr die vier Eigenschaften haben die folgenden Bedeutungen:

Der Abstand ist ein feststehender Abstand von der Referenzkante.

Der Abstand ist ein Prozentwert der Breite (fr 'left' und 'right') oder H=he (fr 'top' und 'bottom') des umschließenden Blocks. Fr 'top' und 'bottom' wird der Prozentwert als 'auto' interpretiert, wenn die H=he des umschließenden Blocks nicht explizit angegeben ist (das heißt, sie ist von der Inhaltsh=he abh@ngig). auto Die Wirkung dieses Werts ist davon abh@ngig, welche „verwandten“ Eigenschaften ebenfalls den Wert 'auto' haben. Weitere Informationen finden Sie in den Abschnitten ber Breite und H=he absolut positionierter, nicht ersetzter Elemente (10.3.7, 10.6.4 und 9.6). Fr absolut positionierte Boxen beziehen sich die Abst@nde auf den umschließenden Block der Box. Fr relativ positionierte Boxen beziehen sich die Offsets auf die @ußeren Kanten der eigentlichen Box (d. h. die Box erh@lt eine Position im normalen Fluss, und wird dann gem@ß dieser Eigenschaften von dieser Position aus verschoben).

< 638 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

9.4 Normaler Fluss Boxen im normalen Fluss geh=ren zu einem Formatierungskontext, der entweder „Block“ oder „Inline“ (inzeilig) sein kann; aber nicht beides zugleich. Block-Boxen befinden sich in einem Block- Formatierungskontext. Inzeilige Boxen befinden sich in einem Inline- Formatierungskontext.

9.4.1 Block-Formatierungskontext In einem Blockformatierungskontext werden Boxen nacheinander angelegt, vertikal, beginnend oben in einem umschließenden Block. Der vertikale Abstand zwischen zwei gleichrangigen Boxen wird durch die 'margin'-Eigenschaften bestimmt. Vertikale R@nder zwischen benachbarten Block-Boxen in einem Blockformatierungskontext fallen zusammen. In einem Blockformatierungskontext berhrt jede linke @ußere Kante die linke Kante des umschließenden Blocks (fr die Formatierung von rechts nach links berhren sich die rechten Kanten). Das gilt selbst dann, wenn Floats vorliegen (obwohl der Inhaltsbereich einer Box aufgrund der Floats m=glicherweise schrumpft). Informationen ber Seitenumbrche in Seitenmedien finden Sie im Abschnitt ber erlaubte Seitenumbrche (13.3.4).

In einem Inline-Formatierungskontext werden Boxen horizontal ausgelegt, hintereinander, beginnend oben in einem umschließenden Block. Horizontale R@nder, Rahmen und Auffllung werden zwischen diesen Boxen respektiert. Die Boxen k=nnen auf unterschiedliche Weise vertikal ausgerichtet werden: ihre oberen oder unteren Kanten k=nnen ausgerichtet werden, oder die Grundlinien des Texts in ihnen k=nnen ausgerichtet werden. Der rechteckige Bereich, der die Boxen einer Zeile enth@lt, wird Zeilen-Box genannt. Die Breite einer Zeilen-Box wird durch einen umgebenden Block bestimmt. Die H=he einer Zeilen-Box wird durch die Regeln bestimmt, die im Abschnitt 10.8 ber Zeilenh=henberechnungen angegeben sind. Eine Zeilen-Box ist immer groß genug fr alle Boxen, die sie enth@lt. Sie kann jedoch gr=ßer sein, als die gr=ßte Box, die sie enth@lt (zum Beispiel falls die Boxen nach den Grundlinien ausgerichtet sind). Ist die H=he einer Box B kleiner als die H=he der Zeilen-Box, in der sie enthalten ist, wird die vertikale Ausrichtung von B innerhalb der Zeilen-Box durch die 'vertical-align'-Eigenschaft bestimmt. Passen mehrere inzeilige Boxen nicht horizontal in eine einzelne Zeilen-Box, werden sie ber zwei oder mehr vertikal hintereinandergeschaltete Zeilen-Boxen verteilt. Ein Absatz ist also ein vertikaler Stapel von Zeilen-Boxen. Zeilen-Boxen werden ohne vertikale Abtrennung gestapelt und berlappen sich nie. Im Allgemeinen berhrt die linke Kante einer Zeilen-Box die linke Kante ihres umschließenden Blocks, und die rechte Kante berhrt die rechte Kante ihres umschließenden Blocks. FloatingBoxen dagegen k=nnen zwischen der Kante des umschließenden Blocks und der Kante der Zeilen-Box liegen. Obwohl also Zeilen-Boxen im selben Inline-Formatierungskontext also im Allgemeinen dieselbe Breite haben (die des umschließenden Blocks), k=nnen sie in der Breite variieren, wenn der verfgbare horizontale Platz aufgrund von Floats reduziert wird. Zeilen-Boxen im selben Inline-Formatierungskontext variieren in der Regel in der H=he (zum Beispiel k=nnte eine Zeile ein großes Bild enthalten, w@hrend andere nur Text enthalten).

Normaler Fluss

< 639 >

Cascading Style Sheets, Level 2

9.4.2 Inline-Formatierungskontext

Page size: 168,00 x 240,00 mm

Sandini Bib

Ist die Gesamtbreite der inzeiligen Boxen in einer Zeile kleiner als die Breite der Zeilen-Box, die sie enth@lt, wird ihre horizontale Verteilung innerhalb der Zeilen-Box durch die 'textalign'-Eigenschaft bestimmt. Hat diese Eigenschaft den Wert 'justify', kann das Benutzerprogramm die inzeiligen Boxen auch strecken. Weil eine inzeilige Box die Breite einer Zeilen-Box nicht berschreiten kann, werden lange inzeilige Boxen in mehrere Boxen zerlegt und dann ber mehrere Zeilen-Boxen verteilt. Wenn eine inzeilige Box aufgeteilt wird, haben R@nder, Rahmen und Auffllung keine sichtbare Wirkung, wo die Aufteilung stattfindet. Die Formatierung von R@ndern, Rahmen und Auffllung ist m=glicherweise nicht vollst@ndig definiert, wenn die Aufteilung innerhalb einer bidirektionalen Einbettung stattfindet. Inzeilige Boxen k=nnen aufgrund einer bidirektionalen Textverarbeitung auch innerhalb derselben Zeilenbox aufgeteilt werden. Beispiel Nachfolgend sehen Sie ein Beispiel fr eine inzeilige Box. Der folgende Absatz (erzeugt durch das HTML-Blockebenenelement P) enth@lt anonymen Text, unterbrochen durch die Elemente EM und STRONG:

Mehrere betonte W^rter findet man in diesem einzigen Satz, mein Lieber.

Cascading Style Sheets, Level 2

Das P-Element erzeugt eine Block-Box, die fnf inzeilige Boxen enth@lt, von denen drei anonym sind: Anonym: „Mehrere“ EM: „betonte W=rter“ Anonym: „findet man“ STRONG: „in diesem einzigen“ Anonym: „Satz, mein Lieber.“

·· ·· ·

Um den Absatz zu formatieren, ordnet das Benutzerprogramm die fnf Boxen in Zeilen-Boxen an. In diesem Beispiel richtet die Box, die fr das P-Element erzeugt wird, den umschließenden Block fr die Zeilen-Boxen ein. Ist der umschließende Block breit genug, passen alle inzeiligen Boxen in eine einzige Box:

Mehrere betonte W rter findet man in diesem einzigen Satz, mein Lieber. Andernfalls werden die Inline-Boxen getrennt und ber mehrere Zeilen-Boxen verteilt. Der obige Abschnitte k=nnte wie folgt aufgeteilt werden: Mehrere betonte W rter findet man in diesem einzigen Satz, mein Lieber. Oder so:

Mehrere betonte W rter findet man in diesem einzigen Satz, mein Lieber. Im obigen Beispiel wurde die EM-Box in zwei EM-Boxen unterteilt (nennen wir sie „split1“ und „split2“). R@nder, Rahmen, Auffllung oder Textausschmckung haben keinen sichtbaren Effekt nach split1 oder vor split2.

< 640 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Betrachten Sie das folgende Beispiel:

Beispiel fUr Inline-Fluss Uber mehrere Zeilen

Several emphasized words appear here.

Abh@ngig von der Breite von P k=nnen die Boxen wie folgt verteilt werden:

Several words

emphasized

Line height 2.4em

appear here.

··

Der Rand wird vor „emphasized“ und hinter „words“ eingefgt. Die Auffllung wird vor, oberhalb und unterhalb von „emphasized“ und hinter, oberhalb und unterhalb von „words“ eingefgt. In jedem Fall wird auf drei Seiten ein gestrichelter Rahmen angezeigt.

9.4.3 Relative Positionierung Nachdem eine Box einem normalen Fluss entsprechend ausgerichtet wurde, kann sie relativ zu ihrer Position verschoben werden. Man spricht auch von einer relativen Positionierung. Verschiebt man eine Box (B1) auf diese Weise, hat das keine Auswirkung auf die nachfolgende Box (B2): B2 erh@lt eine Position, als w@re B1 nicht verschoben, und B2 wird nicht neu positioniert, nachdem B1 verschoben wurde. Das bedeutet gleichzeitig, dass sich die Boxen aufgrund der relativen Positionierung berlappen k=nnen. Relativ positionierte Boxen behalten ihre normale Flussgr=ße bei, inklusive der Zeilenumbrche und dem Platz, der ursprnglich fr sie reserviert wurde. Eine relativ positionierte Box richtet einen neuen umschließenden Block fr untergeordnete Elemente und positionierte abgeleitete Elemente im normalen Fluss ein. Eine relativ positionierte Box wird erzeugt, wenn die 'position'-Eigenschaft fr ein Element den Wert 'relative' hat. Der Offset wird durch die Eigenschaften 'top', 'bottom', 'left' und 'right' angegeben.

Normaler Fluss

< 641 >

Cascading Style Sheets, Level 2

Width of paragraph

Page size: 168,00 x 240,00 mm

Sandini Bib

Eine dynamische Bewegung relativ positionierter Boxen kann in Skripting-Umgebungen Animationseffekte erzielen (siehe auch Eigenschaft 'visibility', 11.2). Die relative Positionierung kann auch als allgemeine Form der Hochstellung und Tiefstellung verwendet werden, nur dass die Zeilenh=he nicht automatisch angepasst wird, um die Positionierung zu bercksichtigen. Weitere Informationen finden Sie im Abschnitt ber die Berechnung der Zeilenh=he (11.8). Beispiele fr die relative Positionierung finden Sei im Abschnitt ber den Vergleich von normalem Fluss, Floats und absoluter Positionierung (9.8).

Cascading Style Sheets, Level 2

9.5 Floats Ein Float ist eine Box, die in der aktuellen Zeile nach links oder rechts verschoben wird. Das interessanteste Merkmal eines Floats (oder „Floated-“ oder „Floating“-Box) ist, dass Inhalt an seiner Seite vorbeifließen kann (oder dass dies durch die 'clear'-Eigenschaft unterbunden werden kann). Inhalt fließt an der rechten Seite einer links-floated Box vorbei, und links von einer rechts-floated Box. Nachfolgend finden Sie eine Einfhrung in die Float-Positionierung und den Inhaltsfluss; die genauen Regeln zum Float-Verhalten finden Sie in der Beschreibung der 'float'-Eigenschaft. Eine Floating-Box muss eine explizite Breite haben (die ber die 'width'-Eigenschaft zugewiesen wird oder bei der es sich im Fall von ersetzten Elementen um eine eigene Breite handelt). Eine Floating-Box wird zu einer Block-Box, die nach links oder rechts verschoben wird, bis ihre @ußere Kante die Kante des umschließenden Blocks oder die @ußere Kante eines anderen Floats berhrt. Die obere Kante der Floating-Box wird an der oberen Kante der aktuellen ZeilenBox (oder der unteren Kante des vorhergehenden Blocks, falls es keine Zeilen-Box gibt) ausgerichtet. Falls nicht gengend horizontaler Platz in der aktuellen Zeile fr den Float vorhanden ist, wird er Zeile fr Zeile nach unten verschoben, bis eine Zeile gengend Platz dafr bietet. Weil sich ein Float nicht im Fluss befindet, fließen nicht-positionierte Block-Boxen, die vor und nach der Floating-Box erzeugt werden, vertikal vorbei, als wrde der Float gar nicht existieren. Zeilen-Boxen jedoch, die neben dem Float erzeugt werden, werden gekrzt, um Platz fr die Floating-Box zu schaffen. Der Inhalt in der aktuellen Zeile vor einer Floating-Box wird in der ersten verfgbaren Zeile auf der anderen Seite des Floats neu angeordnet. Mehrere Floats k=nnen benachbart sein, und dieses Modell gilt auch fr benachbarte Floats innerhalb derselben Zeile. Beispiel Die folgende Regel bewirkt, dass alle IMG-Boxen mit class="icon" links vorbeifließen (der linke Rand wird auf '0' gesetzt). IMG.icon { float: left; margin-left: 0; }

Betrachten Sie die folgende HTML-Datei und das Stylesheet:

Float example

< 642 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

Some sample text that has no other...

Die IMG-Box wird nach links verschoben. Der nachfolgende Inhalt wird rechts vom Float formatiert, in derselben Zeile wie der Float beginnend. Die Zeilen-Boxen rechts vom Float werden durch das Vorhandensein des Floats gekrzt, nehmen aber nach dem Float ihre „normale“ Breite wieder an (das ist die Breite des durch das P-Element eingerichteten umschließenden Blocks).

Some sample text

that has no other...

weil der Inhalt links vom Float durch den Float verdr@ngt wird und auf dessen rechten Seite entlang verl@uft. Die R@nder der Floating-Boxen fallen niemals mit R@ndern benachbarter Boxen zusammen. Im vorigen Beispiel fallen also die vertikalen R@nder zwischen P-Box und der Floating-IMG-Box nicht zusammen. Ein Float kann andere Boxen im normalen Fluss berlappen (z. B. wenn eine Box im normalen Fluss neben einem Float negative R@nder hat). berlappt eine inzeilige Box einen Float, werden der Inhalt, der Hintergrund und die Rahmen der inzeiligen Box vor dem Float dargestellt. berlappt eine Block-Box, werden der Hintergrund und die Rahmen der Block-Box hinter dem Float dargestellt und sind nur dann sichtbar, wenn die Box transparent ist. Der Inhalt der BlockBox wird vor dem Float dargestellt. Nachfolgend sehen Sie eine weitere Darstellung, die zeigt, was passiert, wenn ein Float die Rahmen von Elementen im normalen Fluss berlappt.

Floats

< 643 >

Cascading Style Sheets, Level 2

Die Formatierung w@re genau dieselbe, h@tte das Dokument wie folgt ausgesehen:

Page size: 168,00 x 240,00 mm

Sandini Bib

image margin

paragraph margin

paragraph border paragraph padding

Some sample text in the first paragraph. It has a floating image that was right about here (X) in the source. However, the image is so large that it extends below the text of this paragraph.

The second paragraph is therefore also affected. Any inline boxes in it are "pushed aside," as they are forbidden from coming inside the area delimited by the floating image’s margins. Note that the paragraph boxes are still rectangular, but their borders and backgrounds are "clipped" or interrupted by the floating image.

Abbildung 9.2: Ein Floating-Bild verdeckt die Rahmen von Block-Boxen, wenn eine berlappung stattfindet. Das folgende Beispiel zeigt die Verwendung der 'clear'-Eigenschaft, um zu verhindern, dass Inhalt neben einem Float vorbeifließt. Beispiel Nehmen wir die folgende Regel an:

Cascading Style Sheets, Level 2

P { clear: left }

Damit k=nnte die Formatierung wie folgt aussehen: image margin

paragraph margin

paragraph border paragraph padding

Some sample text in the first paragraph. It has a floating image that was right about here (X) in the source. However, the image is so large that it extends below the text of this paragraph.

This paragraph has its ’clear’ propery set to ’left,’ so that it will be forced to be below any left−floating images. This is done by increasing its top margin.

Abbildung 9.3: Beide Abs@tzen haben 'clear: left' gesetzt, so dass der zweite Absatz auf eine Position unterhalb des Floats nach unten geschoben wird – sein oberer Rand wird erweitert, um dies zu bewerkstelligen (siehe auch den Abschnitt ber die 'clear'-Eigenschaft).

< 644 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

9.5.1 Positionierung des Floats: die 'float'-Eigenschaft 'float' Wert

left | right | none | inherit

Ausgangswert:

none

Angewendet auf:

Alle Elemente außer positionierte Elemente und erzeugter Inhalt

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual

Diese Eigenschaft gibt an, ob eine Box nach links, rechts oder berhaupt nicht gleiten soll. Sie kann fr alle Elemente gesetzt werden, die Boxen erzeugen, die nicht absolut positioniert sind. Die Werte dieser Eigenschaft haben die folgenden Bedeutungen:

Nachfolgend die genauen Regeln, die das Verhalten von Floats steuern: 1. Die linke @ußere Kante einer Links-Floating-Box darf sich nicht links von der linken Kante ihres umschließenden Blocks befinden. Analog gilt die Regel fr Rechts-Floating-Elemente. 2. Ist die aktuelle Box links-floating und es gibt noch weitere Links-Floating-Boxen, die von Elementen an frherer Stelle des Quelldokuments erzeugt wurden, dann muss fr jede dieser frheren Boxen entweder die linke @ußere Kante der aktuellen Box rechts von der rechten @ußeren Kante der frheren Box liegen, oder ihre obere Kante muss tiefer als die untere Kante der frheren Box liegen. Analoge Regeln gelten fr Rechts-Floating-Boxen. 3. Die rechte @ußere Kante einer Links-Floating-Box darf nicht rechts von der linken @ußeren Kante einer Rechts-Floating-Box liegen, die sich rechts von ihr befindet. Analoge Regeln gelten fr Rechts-Floating-Elemente. 4. Die @ußere obere Kante einer Floating-Box darf nicht h=her sein als die oberste Kante des umschließenden Blocks. 5. Die @ußere obere Kante einer Floating-Box darf nicht h=her als die @ußere obere Kante einer Block- oder Floating-Box liegen, die von einem frheren Element im Quelldokument erzeugt wurde. 6. Die @ußere obere Kante der Floating-Box eines Elements darf nicht h=her liegen als die obere Kante einer Zeilen-Box, die eine Box enth@lt, die von einem frheren Element im Quelldokument erzeugt wurde.

Floats

< 645 >

Cascading Style Sheets, Level 2

left Das Element erzeugt eine Block-Box, die nach links gleitet. Der Inhalt fließt an der rechten Seite der Box vorbei, beginnend oben (der 'clear'-Eigenschaft unterliegend). Die 'display'Eigenschaft wird ignoriert, es sei denn, sie hat den Wert 'none'. right Wie 'left', außer dass der Inhalt an der linken Seite der Box vorbeifließt, beginnend von oben. none Die Box gleitet nicht.

Page size: 168,00 x 240,00 mm

Sandini Bib

7. Eine Links-Floating-Box, zu deren Linken sich eine weitere Links-Floating-Box befindet, darf ihre rechte @ußere Kante nicht rechts von der rechten Kante ihres umschließenden Blocks haben. (Locker ausgedrckt: Ein linker Float darf nicht an der rechten Kante herausragen, es sei denn, er befindet sich schon so weit links wie m=glich.) Eine analoge Regel gilt fr Rechts-Floating-Elemente. 8. Eine Floating-Box muss so hoch wie m=glich platziert werden. 9. Eine Links-Floating-Box muss so weit wie m=glich links, eine Rechts-Floating-Box so weit wie m=glich rechts liegen. Eine h=here Position wird gegenber einer weiter links/rechts liegenden bevorzugt.

9.5.2 Steuerung des Flusses neben Floats: die 'clear'-Eigenschaft

Cascading Style Sheets, Level 2

'clear' Wert

none | left | right | both | inherit

Ausgangswert:

none

Angewendet auf:

Elemente auf Blockebene

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual

Diese Eigenschaft gibt an, welche Seiten der Boxen eines Elements nicht neben einer vorhergehenden Floating-Box stehen drfen. (Es kann sein, dass das eigentliche Element Floating-Ableitungen hat; auf diese Nachkommen hat 'clear' keine Auswirkungen.) Diese Eigenschaft kann fr Elemente auf Blockebene (auch Floats) angegeben werden. Fr Compact- und Run-in-Boxen bezieht sich diese Eigenschaft auf die letzte Block-Box, zu der die Compact- oder Run-in-Box geh=rt. Die Werte haben die folgenden Bedeutungen, wenn sie auf Nicht-Floating-Block-Boxen angewendet werden: left Der obere Rand der erzeugten Box wird so weit vergr=ßert, dass sich die obere Rahmenkante unterhalb der unteren @ußeren Kante aller Links-Floating-Boxen befindet, die aus frheren Elementen des Quelldokuments resultieren. right Der obere Rand der erzeugten Box wird so weit vergr=ßert, dass die obere Rahmenkante unterhalb der unteren @ußeren Kante aller Rechts-Floating-Boxen liegt, die aus frheren Elementen des Quelldokuments resultieren. both Die erzeugte Box wird an eine Position unterhalb aller Floating-Boxen frherer Elemente des Quelldokuments geschoben. none Es gibt keine Beschr@nkungen fr die Position der Box relativ zu Floats.

< 646 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

Wenn die Eigenschaft fr Floating-Elemente gesetzt wird, fhrt das zu einer Onderung der Positionierungsregeln fr den Float. Eine zus@tzliche Bedingung (#10) wird eingefgt: Die obere @ußere Kante des Float muss sich unterhalb der unteren @ußeren Kante aller frheren Links-Floating-Boxen befinden (fr 'clear: left') oder unterhalb aller Rechts-FloatingBoxen (fr 'clear: right') oder beides ('clear: both') liegen.

·

9.6 Absolute Positionierung Im Modell der absoluten Positionierung wird eine Box explizit relativ zu ihrem umschließenden Block verschoben. Sie wird v=llig aus dem normalen Fluss entfernt (sie hat keinen Einfluss auf sp@tere gleichrangige Elemente). Eine absolut positionierte Box richtet einen neuen umschließenden Block fr untergeordnete Elemente im normalen Fluss und fr positionierte Nachkommen ein. Der Inhalt eines absolut positionierten Elements fließt jedoch nicht um andere Boxen herum. Sie k=nnen den Inhalt einer anderen Box verdecken oder nicht, abh@ngig von den Stapelebenen der berlappenden Boxen. Wenn in dieser Spezifikation von einem absolut positionierten Element (oder seiner Box) gesprochen wird, bedeutet das, dass die 'position'-Eigenschaft des Elements den Wert 'absolute' oder 'fixed' hat.

9.6.1 Feste Positionierung

Beispiel Autoren k=nnen die feste Positionierung verwenden, um Frame-@hnliche Pr@sentationen zu erzeugen. Betrachten Sie das folgende Frame-Layout: 100%

header

s i d e b a r

main

15%

"the rest"

10em footer

100px

Absolute Positionierung

< 647 >

Cascading Style Sheets, Level 2

Die feste Positionierung ist eine Unterkategorie der absoluten Positionierung. Der einzige Unterschied ist, dass der umschließende Block fr eine fest positionierte Box von dem Viewport eingerichtet wird. Bei Endlosmedien werden feste Boxen nicht verschoben, wenn das Dokument weitergebl@ttert wird. In dieser Hinsicht sind sie mit festen Hintergrundbildern vergleichbar. Bei Seitenmedien werden Boxen mit festen Positionen auf jeder Seite wiederholt. Das ist praktisch, um beispielsweise eine Signatur unten auf jeder Seite zu platzieren.

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

Das k=nnte mit dem folgenden HTML-Dokument und diesen Stilregeln erzielt werden:

A frame document with CSS2

... ... ... ...

< 648 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

9.7 Beziehungen zwischen 'display', 'position' und 'float' Die drei Eigenschaften, die das Erstellen und das Layout von Boxen beeinflussen – 'display', 'position' und 'float' – arbeiten wie folgt zusammen: 1. Wenn 'display' den Wert 'none' hat, mssen Benutzerprogramme 'position' und 'float' ignorieren. In diesem Fall erzeugt das Element keine Box. 2. Andernfalls, wenn 'position' den Wert 'absolute' oder 'fixed' hat, werden 'display' auf 'block' und 'float' auf 'none' gesetzt. Die Position der Box wird durch die Eigenschaften 'top', 'right', 'bottom' und 'left' und den umschließenden Block der Box bestimmt. 3. Andernfalls, wenn 'float' einen anderen Wert als 'none' hat, wird 'display' auf 'block' gesetzt und die Box gleitet. 4. Andernfalls werden die restlichen 'display'-Eigenschaften wie angegeben angewendet. Hinweis: CSS2 gibt kein Layoutverhalten vor, wenn die Werte fr diese Eigenschaften durch Skripte ge@ndert werden. Was passiert beispielsweise, wenn ein Element mit 'width: auto' neu positioniert wird? Wird der Inhalt neu dargestellt, oder wird die ursprngliche Formatierung beibehalten? Im Rahmen dieses Dokuments gibt es keine Antwort darauf, und in diesem Verhalten werden sich frhe Implementierungen von CSS2 wahrscheinlich voneinander unterscheiden. n

9.8 Vergleich von normalem Fluss, Floats und absoluter Positionierung Um die Unterschiede zwischen normalem Fluss, relativer Positionierung, Floats und absoluter Positionierung zu beschreiben, zeigen wir hier mehrere Beispiele, die auf dem folgenden HTML-Ausschnitt basieren:

Cascading Style Sheets, Level 2



Comparison of positioning schemes

Beginning of body contents. Start of outer contents. Inner contents. End of outer contents. End of body contents.

In diesem Dokument gehen wir von den folgenden Regeln aus: BODY { display: block; line-height: 200%; width: 400px; height: 400px } P { display: block } SPAN { display: inline }

Beziehungen zwischen 'display', 'position' und 'float'

< 649 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Die endgltigen Positionen von Boxen, die durch @ußere und innere Elemente erzeugt werden, variieren in jedem Beispiel. Die Zahlen links von jeder Abbildung geben die Position der Zeilen (die der Verst@ndlichkeit halber doppelten Zeilenabstand besitzen) fr den normalen Fluss an. (Hinweis: die Abbildungen verwenden unterschiedliche horizontale und vertikale Maßst@be.)

9.8.1 Normaler Fluss Betrachten Sie die folgenden CSS-Deklarationen fr outer und inner, die den normalen Fluss der Boxen nicht ver@ndern: #outer { color: red } #inner { color: blue }

Cascading Style Sheets, Level 2

Das P-Element enth@lt den gesamten Inline-Inhalt: anonymen Inline-Text und zwei SPAN-Elemente. Aus diesem Grund wird der gesamte Inhalt in einem Inline-Formatierungskontext ausgelegt, und zwar innerhalb eines von dem P-Element eingerichteten umschließenden Blocks, woraus sich etwa Folgendes ergibt:

9.8.2 Relative Positionierung Um die Auswirkungen der relativen Positionierung zu beobachten, geben wir Folgendes an: #outer { position: relative; top: -12px; color: red } #inner { position: relative; top: 12px; color: blue }

< 650 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

Beachten Sie auch, dass sich der Text von outer und der Rumpftext berlappt h@tten, w@re der Abstand von outer gleich '-24px' gewesen.

9.8.3 Eine Box floaten Betrachten Sie jetzt, was passiert, wenn der Text des Elements inner mit Hilfe der folgenden Regeln nach rechts gleitet: #outer { color: red } #inner { float: right; width: 130px; color: blue }

Text fließt normalerweise bis zur inner-Box, die aus dem Fluss genommen und an den rechten Rand verschoben wird (ihre 'width'-Eigenschaft wurde explizit zugewiesen). Zeilen-Boxen links von dem Float werden gekrzt, und der verbleibende Text des Dokuments fließt in sie hinein.

Normaler Fluss, Floats und absolute Positionierung

< 651 >

Cascading Style Sheets, Level 2

Text fließt normalerweise bis zum outer-Element. Der outer-Text fließt dann an seine normale Flussposition und in seiner normalen Gr=ße an das Ende von Zeile 1. Anschließend werden die Inline-Boxen, die den Text enthalten (ber drei Zeilen verteilt) alle zusammen um '-12px' (nach oben) verschoben. Der Inhalt von inner, als untergeordnetes Element von outer, wrde normalerweise unmittelbar hinter die W=rter „of outer contents“ (in Zeile 15) fließen. Die inner-Inhalte werden jedoch selbst relativ zum outer-Inhalt um '12px' (nach unten) verschoben, zurck an ihre ursprngliche Position in Zeile 2. Beachten Sie, dass der Inhalt nach outer nicht von der relativen Positionierung von outer beeinflusst wird.

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

Um die Wirkung der 'clear'-Eigenschaft zu demonstrieren, fgen wir dem Beispiel ein gleichrangiges Element hinzu:

Comparison of positioning schemes II

Beginning of body contents. Start of outer contents. Inner contents. Sibling contents. End of outer contents. End of body contents.

Die folgenden Regeln #inner { float: right; width: 130px; color: blue } #sibling { color: red }

bewirken, dass die inner-Box wie zuvor rechts vorbeifließt und dass der restliche Text des Dokuments in den freien Platz einfließt:

< 652 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

Wird die 'clear'-Eigenschaft des gleichrangigen Elements jedoch auf 'right' gesetzt (das heißt, die erzeugte Box fr das gleichrangige Element akzeptiert keine Position neben Floating-Boxen rechts von ihm), beginnt der Inhalt des gleichrangigen Elements, unter diesen Float zu fließen:

Cascading Style Sheets, Level 2

#inner { float: right; width: 130px; color: blue } #sibling { clear: right; color: red }

Normaler Fluss, Floats und absolute Positionierung

< 653 >

Page size: 168,00 x 240,00 mm

Sandini Bib

9.8.4 Absolute Positionierung Schließlich betrachten wir die Auswirkung einer absoluten Positionierung. Betrachten Sie die folgenden CSS-Deklarationen fr outer und inner: #outer { position: absolute; top: 200px; left: 200px; width: 200px; color: red; } #inner { color: blue }

Sie bewirken, dass die obere Kante der outer-Box relativ zu ihrem umschließenden Block positioniert wird. Der umschließende Block fr eine positionierte Box wird durch den n@chsten positionierten Vorfahren eingerichtet (oder, falls es keinen solchen gibt, durch den umschließenden Ausgangsblock, wie in unserem Beispiel gezeigt). Die obere Seite der outer-Box liegt '200px' unterhalb der oberen Kante des umschließenden Blocks, und die linke Seite liegt '200px' von der linken Seite entfernt. Die untergeordnete Box von outer fließt normalerweise relativ zu ihrem bergeordneten Element. (0,0)

Document Window

(0, 400)

1

Beginning of body contents. End of

2

body contents.

24 px

Cascading Style Sheets, Level 2

3 4 (200, 200)

5

Start of outer

6

contents. Inner

7

contents. End of

8

outer contents.

(400, 0)

(400, 400)

Das folgende Beispiel zeigt eine absolut positionierte Box, die ein untergeordnetes Element einer relativ positionierten Box ist. Obwohl die bergeordnete outer-Box nicht wirklich verschoben wird, bedeutet es, dass diese Box als umschließender Block fr positionierte Nachkommen dienen kann, wenn ihre 'position'-Eigenschaft auf 'relative' gesetzt wird. Weil die outer-Box eine inzeilige Box ist, die ber mehrere Zeilen verteilt wird, dienen die oberen und linken Kanten der ersten inzeiligen Box (in der nachfolgenden Abbildung durch dicke gestrichelte Linien dargestellt) als Referenzpunkte fr die Abst@nde von 'top' und 'left'.

< 654 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

#outer { position: relative; color: red } #inner { position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue; }

Wenn wir die outer-Box nicht positionieren: #outer { color: red } #inner { position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue; }

wird der umschließende Block fr inner zum umschließenden Ausgangsblock (in unserem Beispiel). Die folgende Abbildung zeigt, wo die inner-Box in diesem Fall angeordnet wrde.

Normaler Fluss, Floats und absolute Positionierung

< 655 >

Cascading Style Sheets, Level 2

Daraus ergibt sich etwa Folgendes:

Page size: 168,00 x 240,00 mm

Sandini Bib

Die relative und absolute Positionierung kann verwendet werden, um Onderungskennzeichen zu implementieren, wie im folgenden Beispiel gezeigt. Das folgende Dokument:

Cascading Style Sheets, Level 2

I used two red hyphens to serve as a change bar. They will "float" to the left of the line containing THIS - - word.

k=nnte etwa Folgendes erzeugen:

Zun@chst fließt der Absatz (die Seiten seines umschließenden Blocks werden in der Abbildung gezeigt) normal. Anschließend wird er um '10px' von der linken Kante des umschließenden Blocks verschoben (deshalb wurde ein rechter Rand von '10px' reserviert, weil ein Offset vorhergesehen wurde). Die beiden Trennstriche, die als Onderungskennzeichner dienen, werden aus dem Fluss genommen und in der aktuellen Zeile positioniert (aufgrund von 'top: auto'), '-1em' von der linken Kante des umschließenden Blocks entfernt (eingerichtet durch das P an seiner endgltigen Position). Das Ergebnis ist, dass die Onderungskennzeichner links in die aktuelle Zeile zu „fließen“ scheinen.

< 656 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

9.9 Ebenen (Layer) In den folgenden Abschnitten bedeutet der Ausdruck „vor“ dass sich etwas n@her beim Benutzer befindet, wenn dieser den Bildschirm betrachtet. In CSS2 hat jede Box eine Position in drei Dimensionen. Neben ihren horizontalen und vertikalen Positionen liegen Boxen entlang einer „Z-Achse“ und sind bereinander formatiert. Z-Achsen-Positionen sind vor allem relevant, wenn sich Boxen visuell berlappen. Dieser Abschnitt beschreibt, wie Boxen entlang der Z-Achse positioniert werden. Jede Box geh=rt zu einem Stapelkontext. Jede Box in einem bestimmten Stapelkontext hat eine ganzzahlige Stapelebene, die ihre Position auf der Z-Achse relativ zu anderen Boxen im selben Stapelkontext angibt. Boxen mit h=heren Stapelebenen werden immer vor Boxen mit niedrigeren Stapelebenen positioniert. Boxen k=nnen negative Stapelebenen haben. Boxen mit derselben Stapelebene in einem Stapelkontext werden von unten nach oben der Reihenfolge im Dokumentbaum entsprechend gestapelt. Das Wurzelelement erzeugt einen Wurzelstapelkontext, aber andere Elemente k=nnen lokale Stapelkontexte einrichten. Stapelkontexte werden vererbt. Ein lokaler Stapelkontext ist atomar; Boxen aus anderen Stapelkontexten drfen nicht zwischen seine Boxen gelangen. Ein Element, das einen lokalen Stapelkontext einrichtet, erzeugt eine Box, die zwei Stapelebenen hat: eine fr den Stapelkontext, den es erzeugt (immer '0'), und eine fr den Stapelkontext, zu dem es geh=rt (durch die 'z-index'-Eigenschaft angegeben). Die Box eines Elements hat dieselbe Stapelebene wie die Box des bergeordneten Elements, es sei denn, in der 'z-index'-Eigenschaft ist eine andere Stapelebene angegeben.

9.9.1 Angabe der Stapelebene: die 'z-index'-Eigenschaft

Wert

auto | | inherit

Ausgangswert:

auto

Angewendet auf:

Positionierte Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual

Fr eine positionierte Box gibt die 'z-index'-Eigenschaft Folgendes an: 1. Die Stapelebene der Box im aktuellen Stapelkontext. 2. Ob die Box einen lokalen Stapelkontext einrichtet. Die Werte haben die folgenden Bedeutungen:

Diese ganze Zahl ist die Stapelebene der erzeugten Box im aktuellen Stapelkontext. Außerdem richtet die Box einen lokalen Stapelkontext ein, indem ihre Stapelebene gleich '0' ist. auto Die Stapelebene der erzeugten Box im aktuellen Stapelkontext ist dieselbe wie die der Box seines bergeordneten Elements. Die Box richtet keinen neuen lokalen Stapelkontext ein.

Ebenen (Layer)

< 657 >

Cascading Style Sheets, Level 2

'z-index'

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

Beispiel Im folgenden Beispiel sind die Stapelebenen (angegeben durch ihre „id“-Attribute) „text2“=0, „image“=1, „text3“=2 und „text1“=3. Die Stapelebene „text2“ wurde von der Wurzel-Box geerbt. Die anderen sind mit der 'z-index'-Eigenschaft spezifiziert.

Positionierung in Z-Reihenfolge

Dieser Text Uberlagert das Schmetterlingsbild.

Dieser Text befindet sich unterhalb von allem.

Dieser Text liegt unter text1, Uberlagert aber das Schmetterlingsbild.



Dieses Biespiel demonstriert das Konzept der Transparenz. Standardm@ßig verh@lt sich eine Box so, dass dahinterliegende Boxen durch die transparenten Bereiche in ihrem Inhalt sichtbar sind. Im Beispiel berlagert jede Box transparent die darunterliegende Box. Dieses Verhalten kann mit Hilfe einer der existierenden Hintergrundeigenschaften berschrieben werden.

9.10 Textrichtung: die Eigenschaften 'direction' und 'unicode-bidi' In manchen Schriften werden die Buchstaben von rechts nach links geschrieben. In manchen Dokumenten, insbesondere solchen, die in Arabisch oder Hebr@isch geschrieben sind, sowie in einigen gemischtsprachigen Kontexten kann Text innerhalb eines einzigen (visuell angezeigten) Blockes mit unterschiedlichen Richtungen vorliegen. Dieses Ph@nomen wird auch als Bidirektionalit,t bezeichnet, kurz „bidi“.

< 658 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

'direction' Wert

ltr | rtl | inherit

Ausgangswert:

Ltr

Angewendet auf:

Alle Elemente, siehe Text

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

Diese Eigenschaft gibt die grundlegende Schreibrichtung sowie die Richtung von Einbettungen und berschreibungen (siehe 'unicode-bidi') fr den Unicode-Bidirektionalit@tsalgorithmus an. Darber hinaus gibt er die Richtung von Tabellenspalten, die Richtung von horizontalem berlauf sowie die Positionierung einer unvollst@ndigen letzten Zeile in einem Block mit 'text-align: justify' an.

Die Eigenschaften 'direction' und 'unicode-bidi'

< 659 >

Cascading Style Sheets, Level 2

Der Unicode-Standard ([UNICODE], Abschnitt 3.11) definiert einen komplexen Algorithmus, mit dem die korrekte Richtung von Text bestimmt wird. Der Algorithmus besteht aus einem impliziten Teil, der auf Zeicheneigenschaften basiert, und expliziten Steuerelementen fr das Einbetten und berschreiben. CSS2 verwendet diesen Algorithmus, um eine korrekte bidirektionale Darstellung zu erzielen. Die Eigenschaften 'direction' und 'unicode-bidi' erm=glichen den Autoren die Angabe, wie Elemente und Attribute einer Dokumentsprache auf diesen Algorithmus abgebildet werden sollen. Enth@lt ein Dokument Zeichen, die von rechts nach links geschrieben werden, und das Benutzerprogramm zeigt diese Zeichen an (mit geeigneten Glyphen, und nicht beliebigen Ersatzdarstellungen, wie beispielsweise Fragezeichen, Hex-Code, ein schwarzes Quadrat usw.), muss er den Algorithmus fr die Bidirektionalit@t anwenden. Diese scheinbar einseitige Forderung reflektiert die Tatsache, dass zwar nicht jedes hebr@ische oder arabische Dokument Text in gemischten Richtungen enth@lt, diese Dokumente aber eher dazu tendieren, Text zu enthalten, der von links nach rechts geschrieben wird (z. B. Zahlen oder anderssprachigen Text), als es umgekehrt fr Dokumente gilt, die in von links nach rechts verlaufenden Sprachen verfasst sind. Weil die Richtung eines Textes von der Struktur und der Semantik der Dokumentsprache abh@ngig ist, sollten diese Eigenschaften haupts@chlich von den Entwicklern von DTDs (Dokumenttypdefinitionen) oder Autoren spezieller Dokumente verwendet werden. Wenn ein Standard-Stylesheet diese Eigenschaften angibt, sollten Autoren und Benutzer keine Regeln einfhren, die sie berschreiben. Eine typische Ausnahme w@re das berschreiben von bidi-Verhalten in einem Benutzerprogramm, wenn dieser Jiddisch (normalerweise in hebr@ischen Buchstaben geschrieben) auf Anforderung des Benutzers hin in lateinische Buchstaben umschreibt. Die HTML 4.0-Spezifikation ([HTML40], Abschnitt 8.2) definiert bidirektionales Verhalten fr HTML-Elemente. Konforme HTML-Benutzerprogramme k=nnen deshalb die Eigenschaften 'direction' und 'unicode-bidi' in Autoren- und Benutzer-Stylesheets ignorieren. Die Stylesheet-Regeln, die das in [HTML40] spezifizierte Verhalten erzielen, sind im Beispiel-Stylesheet gezeigt (Anhang A). Die HTML 4.0-Spezifikation enth@lt weitere Informationen ber Aspekte der Bidirektionalit@t.

Page size: 168,00 x 240,00 mm

Sandini Bib

Werte fr diese Eigenschaft haben die folgenden Bedeutungen: ltr Richtung links nach rechts (left to right) rtl Richtung rechts nach links (right to left) Damit die 'direction'-Eigenschaft Wirkung in Elementen auf Inline-Ebene zeigt, mssen die Werte der 'unicode-bidi'-Eigenschaft gleich 'embed' oder 'override' sein. Hinweis: Die 'direction'-Eigenschaft wird, wenn sie fr Tabellenspaltenelemente angegeben ist, nicht von Zellen in der Spalte geerbt, weil es im Dokumentbaum keine Spalten gibt. Damit kann CSS nicht einfach die Attributvererbungsregeln fr „dir“ nachbilden, die in [HTML40] Abschnitt 11.3.2.1 beschrieben sind. n

Cascading Style Sheets, Level 2

'unicode-bidi' Wert

Normal | embed | bidi-override | inherit

Ausgangswert:

Normal

Angewendet auf:

Alle Elemente, siehe Text

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual

Werte fr diese Eigenschaft haben die folgenden Bedeutungen: normal Das Element er=ffnet keine zus@tzliche Einbettungsebene fr den Bidirektionalit@tsalgorithmus. Fr Elemente auf Inline-Ebene funktioniert die implizite Neuanordnung ber Elementgrenzen hinweg. embed Befindet sich das Element auf Inline-Ebene, er=ffnet dieser Wert eine zus@tzliche Einbettungsebene fr den Bidirektionalit@tsalgorithmus. Die Richtung dieser Einbettungsebene wird durch die 'direction'-Eigenschaft vorgegeben. Innerhalb des Elements erfolgt die Neuanordnung implizit. Das entspricht dem Hinzufgen von LRE (U+202A; fr 'direction: ltr') oder RLE (U+202B; fr 'direction: rtl') am Anfang des Elements und einer PFD (U+202C) am Ende des Elements. bidi-override Handelt es sich um ein Element auf Inline-Ebene oder um ein Element auf Blockebene, das Elemente auf Inline-Ebene enth@lt, wird ein berschreiben veranlasst. Das bedeutet, dass innerhalb des Elements die Neuanordnung streng in Folge nach der 'direction'-Eigenschaft

< 660 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

erfolgt; der implizite Teil des Bidirektionalit@tsalgorithmus wird dabei ignoriert. Das entspricht einem Hinzufgen einer LRO (U+202D; fr 'direction: ltr') oder RLO (U+202E; fr 'direction: rtl) am Anfang des Elements und einer PDF (U+202C) am Ende des Elements. Die endgltige Reihenfolge der Zeichen in jedem Element auf Blockebene ist dieselbe, als w@ren die bidi-Steuercodes, wie oben beschrieben, eingefgt, die Auszeichnungen entfernt und als w@re die resultierende Zeichenfolge an eine Implementierung des Unicode- Bidirektionalit@tsalgorithmus fr reinen Text weitergereicht, die dieselben Zeilenumbrche wie der formatierte Text erzeugt. In diesem Ablauf werden nicht-textuelle Entities wie etwa Bilder als neutrale Zeichen behandelt, es sei denn, ihre 'unicode-bidi'-Eigenschaft hat einen anderen Wert als 'normal'. In diesem Fall werden sie als Zeichen in der fr das Element angegebenen 'direction' behandelt. Bitte beachten Sie: Um in der Lage zu sein, inzeilige Boxen in eine einheitliche Richtung fließen zu lassen (entweder alle links-nach-rechts oder alle rechts-nach-links), mssen weitere inzeilige Boxen (einschließlich anonymer inzeiliger Boxen) erzeugt werden, und einige inzeilige Boxen mssen geteilt und neu angeordnet werden, bevor der Fluss bestimmt wird. Da der Unicode-Algorithmus auf maximal 15 Verschachtelungsebenen beschr@nkt ist, sollte man darauf achten, 'unicode-bidi' mit einem anderen Wert als 'normal' nicht zu verwenden, falls es nicht notwendig ist. Insbesondere sollte der Wert 'inherit' mit h=chster Vorsicht eingesetzt werden. Fr Elemente, die im Allgemeinen fr die Anzeige als Block bestimmt sind, wird die Einstellung 'unicode-bidi: embed' bevorzugt, um das Element zusammenzuhalten, falls die Darstellung auf inzeilig ge@ndert wird (siehe Beispiel unten). Das folgende Beispiel zeigt ein XML-Dokument mit bidirektionalem Text. Es veranschaulicht ein wichtiges Entwurfsprinzip: DTD-Designer sollten bidi sowohl bei der Sprache (Elemente und Attribute) als auch bei zugeh=rigen Stylesheets bercksichtigen. Stylesheets sollten so entworfen sein, dass bidi-Regeln von anderen Formatierungsregeln getrennt sind. Die bidi-Regeln sollten nicht von anderen Stylesheets berschrieben werden, so dass das bidi-Verhalten des Dokuments oder der DTD erhalten bleibt. Beispiel In diesem Beispiel stehen kleine Buchstaben fr links-nach-rechts-Zeichen und große Buchstaben fr rechts-nach-links-Zeichen:

HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5 HEBREW6 HEBREW7 HEBREW8

english9 english10 english11 HEBREW12 HEBREW13 english14 english15 english16 english17 HEBREW18 english19 HEBREW20

Da dies XML ist, ist das Stylesheet fr die Einstellung der Schreibrichtung verantwortlich. Hier ist das Stylesheet:

Die Eigenschaften 'direction' und 'unicode-bidi'

< 661 >

Cascading Style Sheets, Level 2

·· ·

Page size: 168,00 x 240,00 mm

Sandini Bib

/* Rules for bidi */ HEBREW, HE-QUO {direction: rtl; unicode-bidi: embed} ENGLISH {direction: ltr; unicode-bidi: embed} /* Rules for presentation */ HEBREW, ENGLISH, PAR {display: block} EMPH {font-weight: bold}

Das HEBREW-Element ist ein Block mit einer Grundrichtung von rechts nach links. Das ENGLISH-Element ist ein Block mit einer Grundrichtung von links nach rechts. Die PARs sind Bl=cke, die ihre Grundrichtung von ihren Eltern erben. Folglich werden die beiden ersten PARs von oben rechts beginnend gelesen, die letzten drei werden von oben links beginnend gelesen. Beachten Sie, dass die Namen HEBREW und ENGLISH fr die Elemente nur zur Veranschaulichung gew@hlt wurden. Im Allgemeinen sollten Elementnamen die Struktur widerspiegeln und keinen Bezug zur Sprache enthalten. Das EMPH-Element ist ein inzeiliges Element und, da der Wert fr 'unicode-bidi' 'normal' (Ausgangswert) ist, hat es keine Auswirkung auf die Anordnung des Textes. Andererseits erzeugt das HE-QUO-Element eine Einbettung. Die Formatierung dieses Texte kann wie folgt aussehen, falls die Zeilenl@nge zu lang ist: 5WERBEH 4WERBEH english3 2WERBEH 1WERBEH 8WERBEH 7WERBEH 6WERBEH english9 english10 english11 13WERBEH 12WERBEH english14 english15 english16 english17 20WERBEH english19 18WERBEH

Cascading Style Sheets, Level 2

Beachten Sie, dass die HE-QUO-Einbettung dafr sorgt, dass HEBREW18 rechts von english19 steht. Falls Zeilen umgebrochen werden mssen, kann es etwa wie folgt aussehen: 2WERBEH 1WERBEH -EH 4WERBEH english3 5WERB -EH 7WERBEH 6WERBEH 8WERB english9 english10 english11 12WERBEH 13WERBEH english14 english15 english16 english17 18WERBEH 20WERBEH english19

Da HEBREW18 vor english19 gelesen werden muss, steht es in der Zeil ber english19. Nur der Umbruch der langen Zeile der frheren Formatierung h@tte nicht funktioniert. Beachten Sie auch, dass die erste Silbe von english19 in die n@chste Zeile h@tte passen k=nnen, aber die Trennung von links-nach-rechts-W=rtern in einem rechts-nach-links-Kontext (und umgekehrt) wird normalerweise unterdrckt, um die Darstellung eines Trennstrichs in der Mitte der Zeile zu vermeiden.

< 662 >

Visuelles Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

10 Details zum visuellen Formatierungsmodell 10.1 Definition des „umschließenden Blocks“ Die Position und die Gr=ße der Boxen eines Elements werden manchmal relativ zu einem bestimmten Rechteck berechnet, dem umschließenden Block („containing block“) des Elements. Der umschließende Block eines Elements ist wie folgt definiert: 1. Der umschließende Block (auch als umschließender Ausgangsblock bezeichnet), in dem sich das Wurzelelement befindet, wird vom Benutzerprogramm ausgew@hlt. 2. Fr andere Elemente wird der umschließende Block durch die Inhaltskante der n@chsten benachbarten Box auf Blockebene gebildet, es sei denn, das Element ist absolut positioniert. 3. Ist fr das Element 'position: fixed' gesetzt, wird der umschließende Block durch den Viewport eingerichtet. 4. Ist fr das Element 'position: absolute' gesetzt, wird der umschließende Block durch den n@chsten Vorfahren mit einer anderen 'position' als 'static' eingerichtet, und zwar wie folgt: Falls es einen Vorfahren auf Blockebene gibt, wird der umschließende Block durch die Polsterungskante (padding) des Vorfahren gebildet. Falls der Vorfahre auf Inline-Ebene liegt, ist der umschließende Block von der 'direction'-Eigenschaft des Vorfahren abh@ngig. Falls die 'direction' gleich 'ltr' ist, sind die obere und linke Kante des umschließenden Blocks gleich der oberen und linken Inhaltskante der ersten durch den Vorfahren erzeugten Box, und die untere und die rechte Kante sind die untere und rechte Inhaltskante der letzten Box des Vorfahren. Falls 'direction' gleich 'rtl' ist, sind die obere und rechte Kante gleich der oberen und rechten Kante der ersten von dem Vorfahren erzeugten Box, und die untere und linke Kante sind die untere und linke Inhaltskante der letzten Box des Vorfahren.

· ·

·

Falls es keinen solchen Vorfahren gibt, richtet die Inhaltskante der Box des Wurzelelements den umschließenden Block ein. Beispiel Ohne Positionierung werden die umschließenden Bl=cke im folgenden Dokument wie nachfolgend eingerichtet.

Demonstration umschließender Bl^cke

Dieser Text befindet sich im ersten Absatz...

Dies ist Text im zweiten Absatz.

Details zum visuellen Formatierungsmodell

< 663 >

Cascading Style Sheets, Level 2

·

Page size: 168,00 x 240,00 mm

Sandini Bib

F-r eine Box, die erzeugt wurde von

wird der umschließende Block eingerichtet von

body

umschließender Ausgangsblock (vom Benutzerprogramm abh@ngig)

div1

body

p1

div1

p2

div1

em1

P2

strong1

P2

Wenn wir „div1“ positionieren: #div1 { position: absolute; left: 50px; top: 50px }

ist sein umschließender Block nicht mehr „body“; er wird zum anf@nglichen umschließenden Block (weil es keine anderen positionierten Vorfahren-Boxen gibt). Wenn wir „em1“ ebenfalls positionieren: #div1 { position: absolute; left: 50px; top: 50px } #em1 { position: absolute; left: 100px; top: 100px }

Cascading Style Sheets, Level 2

sieht die Tabelle der umschließenden Bl=cke wie folgt aus: F-r eine Box, die erzeugt wurde von

wird der umschließende Block eingerichtet von

body

umschließender Ausgangsblock

div1

umschließender Ausgangsblock

p1

div1

p2

div1

em1

div1

strong1

em1

Durch die Positionierung von „em1“ wird sein umschließender Block die am n@chsten positionierte Vorfahren-Box (also jene, die durch „div1“ erzeugt wurde).

< 664 >

Details zum visuellen Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

10.2 Inhaltsbreite: die 'width'-Eigenschaft 'width' Wert:

| | auto | inherit

Ausgangswert:

Auto

Angewendet auf:

Alle Elemente, außer auf nicht-ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die Breite des umschließenden Blocks

Medium:

Visual

Gibt eine feste Breite an.

Gibt eine prozentuale Breite an. Der Prozentwert wird relativ zur Breite des umschließenden Blocks der erzeugten Box berechnet. auto Die Breite ist von den Werten anderer Eigenschaften abh@ngig. Weitere Informationen finden Sie in den nachfolgenden Abschnitten. Negative Werte fr 'width' sind nicht erlaubt. Beispiel Die folgende Regel beispielsweise legt die Inhaltsbreite von Abs@tzen mit 100 Pixel fest: P { width: 100px }

Inhaltsbreite: die 'width'-Eigenschaft

< 665 >

Cascading Style Sheets, Level 2

Diese Eigenschaft gibt die Inhaltsbreite von Boxen an, die auf Blockebene erzeugt wurden, sowie die Inhaltsbreite von ersetzten Elementen. Diese Eigenschaft gilt nicht fr nicht ersetzte Elemente auf Inline-Ebene. Die Breite der Boxen fr ein nicht ersetztes inzeiliges Element ist die des in ihnen dargestellten Inhalts (vor jedem relativen Offset von untergeordneten Elementen). Beachten Sie, dass Inline-Boxen in ZeilenBoxen einfließen. Die Breite von Zeilen-Boxen wird durch ihren umschließenden Block vorgegeben, ist aber bei Vorhandensein von Floats m=glicherweise gekrzt. Ein ersetztes Element hat eine eigene Box-Breite, die vom Benutzerprogramm skaliert werden kann, wenn diese Eigenschaft einen anderen Wert als 'auto' hat. Die Werte haben die folgenden Bedeutungen:

Page size: 168,00 x 240,00 mm

Sandini Bib

10.3 Breiten und R.nder berechnen Die berechneten Werte der Eigenschaften 'width', 'margin-left', 'margin-right', 'left' und 'right' eines Elements sind vom Typ der erzeugten Box und voneinander abh@ngig. Im Prinzip sind die berechneten Werte dieselben wie die angegebenen Werte, wenn 'auto' durch einen geeigneten Wert ersetzt wird, aber es gibt Ausnahmen. Die folgenden Situationen mssen unterschieden werden: 1. Inline, nicht-ersetzte Elemente 2. Inline, ersetzte Elemente 3. Blockebene, nicht-ersetzte Elemente im normalen Fluss 4. Blockebene, ersetzte Elemente im normalen Fluss 5. Floating, nicht-ersetzte Elemente 6. Floating, ersetzte Elemente 7. Absolut positioniert, nicht-ersetzte Elemente 8. Absolut positioniert, ersetzte Elemente Die Punkte 1-6 beinhalten eine relative Positionierung.

10.3.1

Inline, nicht-ersetzte Elemente

Die 'width'-Eigenschaft wird nicht angewendet. Wird fr 'left', 'right', 'margin-left' oder 'marginright' der Wert 'auto' angegeben, wird daraus ein berechneter Wert von '0'.

10.3.2

Inline, ersetzte Elemente

Cascading Style Sheets, Level 2

Wird fr 'left', 'right', 'margin-left' oder 'margin-right' der Wert 'auto' angegeben, wird daraus der berechnete Wert '0'. Wird fr 'width' der Wert 'auto' angegeben, wird die eigene Breite des Elements als berechneter Wert angenommen.

10.3.3

Blockebene, nicht-ersetzte Elemente im normalen Fluss

Werden 'left' oder 'right' als 'auto' angegeben, ist ihr berechneter Wert gleich 0. Zwischen den anderen Eigenschaften mssen die folgenden Bedingungen gelten: 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-rightwidth' + 'margin-right' = Breite des umschließenden Blocks (Ist der Rahmenstil gleich 'none', verwenden Sie '0' als Rahmenbreite.) Ist fr alle oben aufgefhrten Werte ein anderer Wert als 'auto' angegeben, sagt man, die Werte sind „berspezifiziert“ und einer der berechneten Werte muss sich von dem angegebenen Wert unterscheiden. Hat die 'direction'-Eigenschaft den Wert 'ltr', wird der angegebene Wert von 'margin-right' ignoriert, und der Wert wird berechnet, so dass die Gleichung stimmt. Ist der Wert von 'direction' gleich 'ltr', findet dies stattdessen auf 'margin-left' Anwendung. Ist genau ein Wert als 'auto' angegeben, folgt sein berechneter Wert aus der Gleichung. Ist 'width' auf 'auto' gesetzt, werden alle anderen 'auto'-Werte zu '0', und 'width' folgt aus der resultierenden Gleichung. Sind sowohl 'margin-left' als auch 'margin-right' gleich 'auto', dann sind ihre berechneten Werte gleich.

< 666 >

Details zum visuellen Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

10.3.4

Blockebene, ersetzte Elemente im normalen Fluss

Sind 'left' oder 'right' gleich 'auto', ist ihr berechneter Wert gleich 0. Ist 'width' als 'auto' angegeben, ist sein Wert die eigene Breite des Elements. Ist einer der R@nder als 'auto' angegeben, wird sein berechneter Wert durch die obigen Bedingungen festgelegt. Sind darber hinaus beide R@nder gleich 'auto', sind ihre berechneten Werte gleich.

10.3.5

Floating, nicht-ersetzte Elemente

Sind 'left', 'right', 'width', 'margin-left' oder 'margin-right' als 'auto' angegeben, ist ihr berechneter Wert gleich '0'.

10.3.6

Floating, ersetzte Elemente

Sind 'left', 'right', 'width', 'margin-left' oder 'margin-right' als 'auto' angegeben, ist ihr berechneter Wert gleich '0'. Ist 'width' gleich 'auto', ist sein Wert die eigene Breite des Elements.

Absolute Positionierung, nicht-ersetzte Elemente

Die Bedingung, die die Berechnung fr diese Elemente festlegt, ist die folgende: 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'borderright-width' + 'margin-right' + 'right' = Breite des umschließenden Blocks (Ist der Rahmenstil gleich 'none', verwenden Sie '0' als Rahmenbreite.) Die L=sung fr diese Bedingung wird gefunden, indem einige Ersetzungen in der folgenden Reihenfolge vorgenommen werden: 1. Wenn 'left' den Wert 'auto' hat, w@hrend 'direction' gleich 'ltr' ist, ersetzen Sie 'auto' durch den Abstand von der linken Kante des umschließenden Blocks zur linken Randkante einer hypothetischen Box, die die erste Box des Elements w@re, wenn dessen 'position'-Eigenschaft gleich 'static' w@re. (Statt jedoch diese Box tats@chlich zu berechnen, steht es den Benutzerprogrammen frei, eine Sch@tzung der wahrscheinlichen Position vorzunehmen.) Der Wert ist negativ, wenn sich die hypothetische Box links vom umschließenden Block befindet. 2. Wenn 'right' den Wert 'auto' hat und 'direction' gleich 'rtl' ist, ersetzen Sie 'auto' durch den Abstand von der rechten Kante des umschließenden Blocks zur rechten Randkante derselben hypothetischen Box wie oben. Der Wert ist positiv, wenn sich die hypothetische Box links von der Kante des umschließenden Blocks befindet. 3. Ist 'width' gleich 'auto', ersetzen Sie jedes weitere 'auto' fr 'left' oder 'right' durch '0'. 4. Sind 'left', 'right' oder 'width' (immer noch) 'auto', ersetzen Sie jedes 'auto' fr 'margin-left' oder 'margin-right' durch '0'. 5. Sind jetzt 'margin-left' und 'margin-right' immer noch 'auto', l=sen Sie die Gleichung unter der zus@tzlichen Bedingung, dass die beiden R@nder denselben Wert erhalten mssen. 6. Ist an dieser Stelle nur noch ein 'auto' brig, l=sen Sie die Gleichung fr diesen Wert auf. 7. Sind die Werte an dieser Stelle berspezifiziert, ignorieren Sie den Wert fr 'left' (falls 'direction' gleich 'rtl') oder 'right' (falls 'direction' gleich 'ltr' ist) und l=sen fr diesen Wert auf.

Breiten und R,nder berechnen

< 667 >

Cascading Style Sheets, Level 2

10.3.7

Page size: 168,00 x 240,00 mm

Sandini Bib

10.3.8

Absolute Positionierung, ersetzte Elemente

Cascading Style Sheets, Level 2

Diese Situation ist vergleichbar der vorherigen, außer dass das Element eine eigene Breite hat. Die Abfolge der Ersetzungen ist jetzt: 1. Ist 'width' gleich 'auto', ersetzen Sie die eigene Breite des Elements. 2. Wenn 'left' den Wert 'auto' hat, w@hrend 'direction' gleich 'ltr' ist, ersetzen Sie 'auto' durch den Abstand von der linken Kante des umschließenden Blocks zur linken Randkante einer hypothetischen Box, die die erste Box des Elements w@re, wenn dessen 'position'-Eigenschaft gleich 'static' w@re. (Statt jedoch diese Box tats@chlich zu berechnen, steht es den Benutzerprogrammen frei, eine Sch@tzung an der wahrscheinlichen Position vorzunehmen.) Der Wert ist negativ, wenn sich die hypothetische Box links vom umschließenden Block befindet. 3. Wenn 'rigth' den Wert 'auto' hat und 'direction' gleich 'rtl' ist, ersetzen Sie 'auto' durch den Abstand von der rechten Kante des umschließenden Blocks zur rechten Randkante derselben hypothetischen Box wie oben. Der Wert ist positiv, wenn sich die hypothetische Box links von der Kante des umschließenden Blocks befindet. 4. Sind 'left' oder 'right' gleich 'auto' , ersetzen Sie jedes 'auto' fr 'margin-left' oder 'marginright' durch '0'. 5. Sind an dieser Stelle sowohl 'margin-left' als auch 'margin-right' immer noch 'auto', l=sen Sie die Gleichung unter der zus@tzlichen Bedingung, dass die beiden R@nder denselben Wert erhalten mssen. 6. Ist an dieser Stelle nur noch ein 'auto' brig, l=schen Sie die Gleichung fr diesen Wert. 7. Sie die Werte an dieser Stelle berspezifiziert, ignorieren Sie den Wert fr 'left' (falls 'direction' gleich 'rtl' ist) oder 'right' (falls 'direction' gleich 'ltr' ist) und l=sen fr diesen Wert.

10.4 Minimale und maximale Breiten: 'min-width' und 'max-width' 'min-width' Wert:

| | inherit

Ausgangswert:

Vom Benutzerprogramm abh@ngig

Angewendet auf:

Alle Elemente, außer auf nicht-ersetzte Inline-Elemente und Tabellenelemente

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die Breite des umschließenden Blocks

Medium:

Visual

< 668 >

Details zum visuellen Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

'max-width' Wert:

| | none | inherit

Ausgangswert:

Vom Benutzerprogramm abh@ngig

Angewendet auf:

Alle Elemente, außer auf nicht-ersetzte Inline-Elemente und Tabellenelemente

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die Breite des umschließenden Blocks

Medium:

Visual

Diese beiden Eigenschaften erlauben es Autoren, Box-Breiten auf einen bestimmten Bereich einzugrenzen. Die Werte haben die folgenden Bedeutungen:

Der folgende Algorithmus beschreibt, wie die beiden Eigenschaften den berechneten Wert der 'width'-Eigenschaft beeinflussen: 1. Die Breite wird nach den unter „Berechnung von Breiten und R@ndern“ beschriebenen Regeln berechnet (ohne 'min-width' und 'max-width'). 2. Ist der berechnete Wert von 'min-width' gr=ßer als der Wert von 'max-width', wird 'maxwidth' auf den Wert von 'min-width' gesetzt. 3. Ist die berechnete Breite gr=ßer als 'max-width', werden die obigen Regeln erneut angewendet, aber jetzt wird der Wert von 'max-width' als der fr 'width' angegebene Wert verwendet. 4. Ist der berechnete Wert kleiner als 'min-width', werden die obigen Regeln erneut angewendet, aber jetzt wird der Wert von 'min-width' als der fr 'width' angegebene Wert verwendet.Das Benutzerprogramm kann einen nicht negativen Mindestwert fr die 'min-width'-Eigenschaft angeben, der von Element zu Element variieren und sogar von anderen Eigenschaften abh@ngig sein kann. Geht 'min-width' unter diesen Grenzwert, entweder, weil es explizit gesetzt wurde, oder weil es 'auto' war und die nachfolgenden Regeln es zu klein gemacht h@tten, kann das Benutzerprogramm den Mindestwert als den berechneten Wert verwenden.

Minimale und maximale Breiten

< 669 >

Cascading Style Sheets, Level 2

Gibt eine feste minimale oder maximale berechnete Breite an.

Gibt einen Prozentwert fr die Ermittlung des berechneten Werts an. Der Prozentwert wird relativ zur Breite des umschließenden Blocks der erzeugten Box berechnet. none (Nur fr 'max-width') Es gibt keine Beschr@nkung fr die Breite der Box.

Page size: 168,00 x 240,00 mm

Sandini Bib

10.5 InhaltshUhe : die 'height'-Eigenschaft 'height' Wert:

| | auto | inherit

Ausgangswert:

Auto

Angewendet auf:

Alle Elemente, außer auf nicht-ersetzte Inline-Elemente, Tabellenspalten und Spaltengruppen

Vererbt:

Nein

Prozentwerte:

Siehe Text

Medium:

Visual

Cascading Style Sheets, Level 2

Diese Eigenschaft gibt die Inhaltsh=he von Boxen an, die auf Blockebene erzeugt wurden, sowie von ersetzten Elementen.Diese Eigenschaft bezieht sich nicht auf nicht ersetzte inzeilige Elemente. Die H=he der Boxen eines nicht-ersetzten Inline-Elements wird durch den (m=glicherweise geerbten) 'line-height'-Wert des Elements angegeben.Die Werte haben die folgenden Bedeutungen:

Gibt eine feste H=he an.

Gibt eine prozentuale H=he an. Der Prozentwert wird relativ zur H=he des umschließenden Blocks der erzeugten Box berechnet. Wird die H=he des umschließenden Blocks nicht explizit angegeben (das heißt, ist sie demnach von der Inhaltsh=he abh@ngig), wird der Wert als 'auto' interpretiert. auto Die H=he ist von den Werten anderer Eigenschaften abh@ngig. Weitere Informationen finden Sie im nachfolgenden Text. Negative Werte fr 'height' sind nicht erlaubt. Beispiel Die folgende Regel beispielsweise legt die H=he von Abs@tzen auf 100 Pixel fest: P { height: 100px }

Abs@tze, fr die eine H=he von mehr als 100 Pixel erforderlich ist, erzeugen gem@ß der 'overflow'-Eigenschaft einen berlauf.

< 670 >

Details zum visuellen Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

10.6 HUhen und R.nder berechnen Zur Berechnung der Werte fr 'top', 'margin-top', 'height', 'margin-bottom' und 'bottom' muss zwischen den verschiedenen Box-Typen unterschieden werden: 1. Inline, nicht-ersetzte Elemente 2. Inline, ersetzte Elemente 3. Blockebene, nicht-ersetzte Elemente im normalen Fluss 4. Blockebene, ersetzte Elemente im normalen Fluss 5. Floating, nicht-ersetzte Elemente 6. Floating, ersetzte Elemente 7. Absolut positioniert, nicht-ersetzte Elemente 8. Absolut positioniert, ersetzte Elemente Die Punkte 1-6 beinhalten eine relative Positionierung.

10.6.1

Inline, nicht-ersetzte Elemente

Wird fr 'top', 'bottom', 'margin-top' oder 'margin-bottom' der Wert 'auto' angegeben, wird daraus ein berechneter Wert von '0'. Die 'height'-Eigenschaft wird nicht angewendet, aber die H=he der Box wird durch die 'line-height'-Eigenschaft angegeben.

10.6.2 Inline, ersetzte Elemente, Blockebene, ersetzte Elemente im normalen Fluss, und Floating, ersetzte Elemente

10.6.3 Blockebene, nicht ersetzte Elemente im normalen Fluss, und Floating, nicht ersetzte Elemente Sind 'top', 'bottom', 'margin-top' oder 'margin-bottom' gleich 'auto', ist ihr berechneter Wert 0. Ist 'height' gleich 'auto', ist die H=he davon abh@ngig, ob das Element untergeordnete Elemente auf Blockebene hat. Wenn es nur untergeordnete inzeilige Elemente hat, reicht die H=he von der obersten Kante der obersten Zeilen-Box bis zur untersten Kante der untersten ZeilenBox. Hat es untergeordnete Elemente auf Blockebene, ist sie der Abstand zwischen der obersten Rahmenkante der Box des obersten untergeordneten Elements auf Blockebene bis zur untersten Rahmenkante der Box des untersten untergeordneten Elements auf Blockebene. Nur untergeordnete Elemente im normalen Fluss werden bercksichtigt (das heißt, FloatingBoxen und absolut positionierte Boxen werden ignoriert, und relativ positionierte Boxen werden ohne ihren Offset betrachtet.) Beachten Sie, dass die Box des untergeordneten Elements eine anonyme Box sein kann.

HFhen und R,nder berechnen

< 671 >

Cascading Style Sheets, Level 2

Wird fr 'top', 'bottom', 'margin-top' oder 'margin-bottom' der Wert 'auto' angegeben, wird daraus der berechnete Wert '0'. Ist 'height' gleich 'auto', ist der berechnete Wert die eigene H=he.

Page size: 168,00 x 240,00 mm

Sandini Bib

10.6.4

Absolute Positionierung, nicht-ersetzte Elemente

Fr absolut positionierte Elemente mssen die vertikalen Ausmaße die folgende Bedingung erfllen: 'top' + 'margin-top'+ 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = H=he des umschließenden Blocks (Ist der Rahmenstil gleich 'none', verwenden Sie '0' als Rahmenbreite.) Die L=sung fr diese Bedingung wird durch mehrere Ersetzungen in der folgenden Reihenfolge erzielt: 1. Hat 'top' den Wert 'auto', ersetzen Sie es durch den Abstand von der oberen Kante des umschließenden Blocks zur oberen Randkante einer hypothetischen Box, die die erste Box des Elements w@re, wenn seine 'position'-Eigenschaft 'static' w@re. (Statt jedoch diese Box zu berechnen, k=nnen die Benutzerprogramme ihre wahrscheinliche Position auch sch@tzen.) Der Wert ist negativ, wenn sich die hypothetische Box oberhalb des umschließenden Blocks befindet. 2. Sind sowohl 'height' als auch 'bottom' gleich 'auto', ersetzen Sie 'bottom' durch '0'. 3. Sind 'bottom' oder 'height' (immer noch) 'auto', ersetzen Sie jedes 'auto' fr 'margin-top' oder 'margin-bottom' durch '0'. 4. Sind an dieser Stelle 'margin-top' und 'margin-bottom' immer noch 'auto', l=sen Sie die Gleichung unter der zus@tzlichen Bedingung, dass die beiden R@nder gleiche Werte erhalten mssen. 5. Ist an dieser Stelle nur noch ein 'auto' brig, l=sen Sie die Gleichung fr diesen Wert. 6. Sind an dieser Stelle die Werte berspezifiziert, ignorieren Sie den Wert fr 'bottom' und l=sen Sie die Gleichung fr diesen Wert.

Cascading Style Sheets, Level 2

10.6.5

Absolute Positionierung, ersetzte Elemente

Diese Situation ist vergleichbar der vorherigen, außer dass das Element eine eigene H=he hat. Die Abfolge der Ersetzungen sieht jetzt wie folgt aus: 1. Wenn 'height' gleich 'auto' ist, setzen Sie statt dessen die eigene H=he des Elements ein. 2. Hat 'top' den Wert 'auto', ersetzen Sie es durch den Abstand von der oberen Kante des umschließenden Blocks zur oberen Randkante einer hypothetischen Box, die die erste Box des Elements w@re, wenn seine 'position'-Eigenschaft 'static' w@re. (Statt jedoch diese Box zu berechnen, k=nnen die Benutzerprogramme ihre wahrscheinliche Position auch sch@tzen.) Der Wert ist negativ, wenn sich die hypothetische Box oberhalb des umschließenden Blocks befindet. 3. Ist 'bottom' gleich 'auto', ersetzen Sie jedes 'auto' fr 'margin-top' oder 'margin-bottom' durch '0'. 4. Sind an dieser Stelle 'margin-top' und 'margin-bottom' immer noch 'auto', l=sen Sie die Gleichung unter der zus@tzlichen Bedingung, dass die beiden R@nder gleiche Werte erhalten mssen. 5. Ist an dieser Stelle nur noch ein 'auto' brig, l=sen Sie die Gleichung fr diesen Wert. 6. Sind an dieser Stelle die Werte berspezifiziert, ignorieren Sie den Wert fr 'bottom' und l=sen Sie die Gleichung fr diesen Wert.

< 672 >

Details zum visuellen Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

10.7 Mindest- und MaximalhUhen: 'min-height' und 'max-height' Manchmal ist es sinnvoll, die H=he von Elementen auf einen bestimmten Bereich zu begrenzen. Zwei Eigenschaften realisieren diese Funktionalit@t:

'min-height' Wert:

| | inherit

Ausgangswert:

0

Angewendet auf:

Alle Elemente, außer auf nicht-ersetzte Inline-Elemente und Tabellenelemente

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die H=he des umschließenden Blocks

Medium:

Visual

Wert:

| | none | inherit

Ausgangswert:

none

Angewendet auf:

Alle Elemente, außer auf nicht-ersetzte Inline-Elemente und Tabellenelemente

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die H=he des umschließenden Blocks

Medium:

Visual

Diese beiden Eigenschaften gestatten es Autoren, Box-H=hen auf einen bestimmten Bereich zu begrenzen. Werte haben die folgenden Bedeutungen:

Gibt eine minimale oder maximale berechnete H=he an.

Gibt einen Prozentwert fr die Ermittlung des berechneten Werts an. Der Prozentwert wird relativ zur H=he des umschließenden Blocks der erzeugten Box berechnet. Ist die H=he des umschließenden Blocks nicht explizit angegeben (das heißt, sie ist von der Inhaltsh=he abh@ngig), wird der Prozentwert als 'auto' interpretiert. none (Nur fr 'max-height'). Es gibt keine Begrenzung fr die H=he der Box.

Mindest- und MaximalhFhen

< 673 >

Cascading Style Sheets, Level 2

'max-height'

Page size: 168,00 x 240,00 mm

Sandini Bib

Der folgende Algorithmus beschreibt, wie diese beiden Eigenschaften den berechneten Wert der 'height'-Eigenschaft beeinflussen: 1. Die H=he wird gem@ß den Regeln aus dem obigen Abschnitt 10.6, „H=hen und R@nder berechnen“, berechnet (ohne 'min-height' und 'max-height'). 2. Ist der berechnete Wert von 'min-height' gr=ßer als der Wert von 'max-height', wird 'maxheight' auf den Wert von 'min-height' gesetzt. 3. Ist die berechnete H=he gr=ßer als 'max-height', werden die obigen Regeln erneut angewendet, aber jetzt unter Verwendung des Wertes von 'max-height' als vorgegebenen Wert fr 'height'. 4. Ist der berechnete Wert kleiner als 'min-height', werden die obigen Regeln erneut angewendet, aber jetzt unter Verwendung des Werts von 'min-height' vorgegebenen Wert fr 'height'.

10.8 ZeilenhUhenberechnungen: die Eigenschaften 'line-height' und 'vertical-align'

Cascading Style Sheets, Level 2

Wie im Abschnitt ber Inline-Formatierungskontexte (9.4.2) beschrieben, fhren Benutzerprogramme Inline-Boxen zu einem vertikalen Stapel aus Zeilen-Boxen zusammen. Die H=he einer Zeilen-Box wird wie folgt ermittelt: 1. Die H=he jeder Inline-Box in der Zeilen-Box wird berechnet (siehe Abschnitt 10.6, „H=hen und R@nder berechnen“, und die Beschreibung der 'line-height'-Eigenschaft). 2. Die Inline-Boxen werden vertikal gem@ß ihrer 'vertical-align'-Eigenschaft ausgerichtet. 3. Die H=he der Zeilen-Box ist der Abstand zwischen der oberen Kante der obersten Box und der unteren Kante der untersten Box. Leere inzeilige Elemente erzeugen leere Inline-Boxen, aber diese Boxen haben dennoch R@nder, Auffllung, Rahmen und eine Zeilenh=he und beeinflussen damit diese Berechnungen genauso wie Elemente mit Inhalt. Beachten Sie, dass die Zeilen-Box genau die H=he der h=chsten Box hat, wenn alle Boxen in der Zeilen-Box ihrer unteren Kante nach ausgerichtet sind. Sind die Boxen dagegen entlang einer gemeinsamen Grundlinie ausgerichtet, kann es sein, dass die obere und untere Kante der Zeilen-Box die untere und obere Kante der h=chsten Box nicht berhren.

10.8.1

Durchschuss und Halb-Durchschuss

Weil sich die H=he einer inzeiligen Box von der Schriftgr=ße des Texts in der Box unterscheiden kann (z. B. 'line-height' > 1em), kann es Platz oberhalb und unterhalb der dargestellten Glyphen geben. Die Differenz zwischen der Schriftgr=ße und dem berechneten Wert von 'lineheight' wird auch als Durchschuss bezeichnet. Die H@lfte des Durchschusses wird als HalbDurchschuss bezeichnet. Benutzerprogramme zentrieren Glyphen vertikal in einer Inline-Box und fgen einen HalbDurchschuss oben und unten ein. Ist ein Textstck beispielsweise '12pt' hoch und der 'lineheight' ist '14pt', sollten 2pt zus@tzlicher Platz hinzugefgt werden: 1pt oberhalb und 1 pt unterhalb der Buchstaben. (Das gilt auch fr leere Boxen, so als ob die leere Box einen unendlich schmalen Buchstaben enthalten wrde.)

< 674 >

Details zum visuellen Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

Ist der Wert von 'line-height' kleiner als die Schriftgr=ße, ist die H=he der endgltigen InlineBox kleiner als die Schriftgr=ße und die dargestellten Glypen „laufen aus der Box heraus“. Berhrt eine solche Box die Kante einer Zeilen-Box, fließen die dargestellten Glyphen auch in die benachbarte Zeilen-Box ein. Obwohl R@nder, Rahmen und Auffllung nicht-ersetzter Elemente fr die H=henberechnung der Inline-Box (und damit die Berechnung der Zeilen-Box) nicht bercksichtigt werden, werden sie dennoch um die Inline-Boxen herum dargestellt. Das bedeutet, wenn die H=he einer Zeilen-Box kleiner als die @ußeren Kanten der darin enthaltenen Boxen sind, k=nnen Hintergrnde und Farben von Auffllung und Rahmen in benachbarte Zeilen-Boxen „einfließen“. In diesem Fall k=nnen die Benutzerprogramme die Zeilen-Box jedoch nutzen, um die Rahmenund Auffllbereiche „abzuschneiden“ (das heißt, sie nicht darzustellen).

Wert:

normal | | | | inherit

Ausgangswert:

Normal

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

Beziehen sich auf die Schriftgr=ße des eigentlichen Elements

Medium:

Visual

Ist die Eigenschaft fr ein Element auf Blockebene gesetzt, dessen Inhalt sich aus Elementen auf Inline-Ebene zusammensetzt, gibt sie die minimale H=he jeder erzeugten Inline-Box an. Ist die Eigenschaft fr ein Element auf Inline-Ebene gesetzt, gibt sie die genaue H=he jeder Box an, die von dem Element erzeugt wird. (Außer fr ersetzte Inline-Elemente, bei denen die H=he der Box durch die 'height'-Eigenschaft angegeben wird.) Die Werte fr diese Eigenschaft haben die folgenden Bedeutungen: normal Weist Benutzerprogramme an, den berechneten Wert auf einen „sinnvollen“ Wert abh@ngig von der Schriftgr=ße des Elements zu setzen. Der Wert hat dieselbe Bedeutung wie . Wir empfehlen einen berechneten Wert zwischen 1.0 und 1.2 fr 'normal'.

Die Box-H=he wird auf diese L@nge gesetzt. Negative Werte sind nicht erlaubt.

Der berechnete Wert der Eigenschaft ist diese Zahl multipliziert mit der Schriftgr=ße des Elements. Negative Werte sind nicht erlaubt. Die Zahl, nicht der berechnete Wert, wird vererbt.

Der berechnete Wert der Eigenschaft ist dieser Prozentwert multipliziert mit der berechneten Schriftgr=ße des Elements. Negative Werte sind nicht erlaubt.

ZeilenhFhenberechnungen

< 675 >

Cascading Style Sheets, Level 2

'line-height'

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Die drei Regeln im folgenden Beispiel erzeugen dieselbe Zeilenh=he: DIV { line-height: 1.2; font-size: 10pt } DIV { line-height: 1.2em; font-size: 10pt } DIV { line-height: 120%; font-size: 10pt }

/* Zahl */ /* L]nge */ /* Prozentwert */

Enth@lt ein Element Text, der in mehreren Schriften dargestellt wird, sollten die Benutzerprogramme den 'line-height'-Wert anhand der gr=ßten Schriftgr=ße ermitteln. Allgemein gilt, wenn es nur einen Wert von 'line-height' fr alle Inline-Boxen in einem Absatz (und keine hohen Bilder) gibt, stellt die obige Aussage sicher, dass Grundlinien aufeinander folgender Zeilen genau 'line-height' voneinander entfernt sind. Das ist wichtig, wenn Spalten mit Text in unterschiedlichen Schriften ausgerichtet werden mssen, beispielsweise in einer Tabelle. Beachten Sie, dass ersetzte Elemente eine 'font-size'- und eine 'line-height'-Eigenschaft haben, selbst wenn sie nicht direkt verwendet werden, um die H=he der Box zu ermitteln. Die 'fontsize' wird jedoch verwendet, um die Einheiten 'em' und 'ex' zu definieren, und die 'lineheight'-Eigenschaft spielt eine Rolle in der 'vertical-align'-Eigenschaft.

Cascading Style Sheets, Level 2

'vertical-align' Wert:

baseline | sub | super | top | text-top | middle | bottom | text-bottom | | inherit

Ausgangswert:

Baseline

Angewendet auf:

Elemente auf Inline-Ebene und 'table-cell'-Elemente

Vererbt:

Nein

Prozentwerte:

Beziehen sich auf die 'line-height' des eigentlichen Elements

Medium:

Visual

Diese Eigenschaft beeinflusst die vertikale Positionierung innerhalb einer Zeilen-Box der von einem Element auf Inline-Ebene erzeugten Boxen. Die folgenden Werte haben nur eine Bedeutung fr ein bergeordnetes Element auf Inline-Ebene oder ein bergeordnetes Elemente auf Blockebene, wenn dieses Element anonyme Inline-Boxen erzeugt; sie haben keine Wirkung, wenn es keine solchen bergeordnete Elemente gibt. Hinweis: Werte dieser Eigenschaft haben etwas unterschiedliche Bedeutungen im Kontext von Tabellen. Weitere Informationen finden Sie im Abschnitt ber Algorithmen zur Ermittlung der Tabellenh=he. n baseline Richtet die Grundlinie der Box an der Grundlinie der bergeordneten Box aus. Hat die Box keine Grundlinie, wird die untere Kante der Box an der Grundlinie der Box des bergeordneten Elements ausgerichtet. middle Richtet den vertikalen Mittelpunkt der Box an der Grundlinie der bergeordneten Box plus der halben x-H=he des bergeordneten Elements aus.

< 676 >

Details zum visuellen Formatierungsmodell

Page size: 168,00 x 240,00 mm

Sandini Bib

sub Senkt die Grundlinie der Box fr die richtige Position von Tiefstellungen der Box des bergeordneten Elements ab. (Dieser Wert hat keine Wirkung fr die Schriftgr=ße des Elementtexts.) super Hebt die Grundlinie der Box fr die richtige Position von Hochstellungen der Box des bergeordneten Elements an. (Dieser Wert hat keine Wirkung auf die Schriftgr=ße des Elementtexts.) text-top Richtet die obere Kante der Box an der oberen Kante der Schrift des bergeordneten Elements. text-bottom Richtet die untere Kante der Box an der unteren Kante der Schrift des bergeordneten Elements aus.

Hebt (positiver Wert) oder senkt (negativer Wert) die Box um diesen Abstand. Der Wert '0cm' hat dieselbe Bedeutung wie 'baseline'. Die restlichen Werte beziehen sich auf die Zeilen-Box, in der die erzeugte Box erscheint:

11 Visuelle Effekte 11.1 berlauf und Abschneiden Im Allgemeinen wird der Inhalt einer Block-Box auf die Inhaltskanten der Box begrenzt. In bestimmten F@llen kann es einen Hberlauf einer Box geben, das heißt, ihr Inhalt liegt teilweise oder ganz außerhalb der Box, z. B.: Eine Zeile kann nicht umbrochen werden, so dass die Zeilen-Box breiter als die Block-Box ist. Eine Box auf Blockebene ist zu breit fr den umschließenden Block. Das kann passieren, wenn die 'width'-Eigenschaft eines Elements einen Wert hat, der bewirkt, dass die erzeugte Block-Box ber die Seiten des umschließenden Blocks hinausragt. Die H=he eines Elements berschreitet die dem umschließenden Block explizit zugeordnete H=he (das heißt, die H=he des umschließenden Blocks wird durch die 'height'-Eigenschaft festgelegt, nicht durch die Inhaltsh=he). Eine eingebette Box ist derart absolut positioniert, dass Teile außerhalb der umgebenden Box liegen. Eine eingebette Box hat negative R@nder, was dazu fhrt, dass Teile außerhalb der umgebenden Box liegen.

· · · · ·

Visuelle Effekte

< 677 >

Cascading Style Sheets, Level 2

top Richtet die obere Kante der Box an der oberen Kante der Zeilen-Box aus. bottom Richtet die obere Kante der Box an der oberen Kante der Zeilen-Box aus.

Page size: 168,00 x 240,00 mm

Sandini Bib

Immer wenn ein berlauf stattfindet, gibt die 'overflow'-Eigenschaft an, wie (und ob) eine Box abgeschnitten wird. Die 'clip'-Eigenschaft gibt die Gr=ße und den Umriss des Abschneidebereichs an. Die Angabe eines kleinen Abschneidebereichs kann das Abschneiden eines andernfalls sichtbaren Inhalts bewirken.

11.1.1 berlauf: die 'overflow'-Eigenschaft 'overflow' Wert:

visible | hidden | scroll | auto | inherit

Ausgangswert:

Visible

Angewendet auf:

Elemente auf Blockebene und ersetzte Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual

Cascading Style Sheets, Level 2

Diese Eigenschaft gibt an, ob der Inhalt eines Elements auf Blockebene abgeschnitten wird, wenn er ber die Box des Elements (die als umschließender Block fr den Inhalt dient) hinausgeht. Die Werte haben die folgenden Bedeutungen: visible Dieser Wert zeigt an, dass Inhalt nicht abgeschnitten wird, das heißt, er kann außerhalb der Block-Box angezeigt werden. hidden Dieser Wert gibt an, dass der Inhalt abgeschnitten wird und kein Mechanismus zum Scrolling bereitgestellt werden soll, um den Inhalt außerhalb des Abschneidebereichs anzuzeigen; die Benutzer haben keinen Zugriff auf den abgeschnittenen Inhalt. Die Gr=ße und die Form des Abschneidebereichs wird durch die Gr=ße und die Form des 'clip'-Bereichs angegeben. scroll Dieser Wert gibt an, dass der Inhalt abgeschnitten wird und dass, wenn das Benutzerprogramm Mechanismen zum Scrolling verwendet, die auf dem Bildschirm sichtbar sind (wie beispielsweise eine Bildlaufleiste oder einen Panner), dieser Mechanismus fr eine Box angezeigt werden soll, unabh@ngig davon, ob ihr Inhalt abgeschnitten wird. Damit vermeidet man Probleme mit Bildlaufleisten, die in einer dynamischen Umgebung erscheinen und verschwinden. Wird dieser Wert angegeben und das Zielmedium ist 'print', sollte berlaufender Inhalt gedruckt werden. auto Das Verhalten des Werts 'auto' ist vom Benutzerprogramm abh@ngig, sollte aber veranlassen, dass fr berlaufende Boxen ein Mechanismus zum Scrolling bereitgestellt wird. Selbst wenn 'overflow' auf 'visible' gesetzt ist, kann Inhalt durch die systemeigene Betriebsumgebung auf das Dokumentfenster eines Benutzerprogramms zugeschnitten werden.

< 678 >

Visuelle Effekte

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Betrachten Sie das folgende Beispiel eines Block-Zitats (BLOCKQUOTE), das zu groß fr seinen umschließenden Block (der durch ein DIV eingerichtet wird) ist. Hier das Quelldokument:

I didn't like the play, but then I saw it under adverse conditions - the curtain was up. - Groucho Marx

Nachfolgend das Stylesheet, das die Gr=ße und den Stil der erzeugten Boxen steuert: DIV.container { width : 100px; height: 100px; border: thin solid red; } BLOCKQUOTE { width : 125px; height : 100px; margin-top: 50px; margin-left: 50px; border: thin dashed black } DIV.attributed-to { text-align : right; }

DIV

I didn’t like the play, but then I saw it under adverse conditions − the curtain was up. − Groucho Marx BLOCKQUOTE

Wird dagegen 'overflow' fr das DIV-Element auf 'hidden' gesetzt, wird das BLOCKQUOTE auf den umschließenden Block zugeschnitten:

I didn’t li but then under ad condition

berlauf und Abschneiden

< 679 >

Cascading Style Sheets, Level 2

Der Ausgangswert von 'overflow' ist 'visible', deshalb wrde das BLOCKQUOTE ohne Abschneiden formatiert, etwa wie folgt:

Page size: 168,00 x 240,00 mm

Sandini Bib

Der Wert von 'scroll' teilt den Benutzerprogrammen, die einen sichtbaren Mechanismus zum Scrolling untersttzen, mit, dass sie diesen auch anzeigen sollten, so dass Benutzer auf den zugeschnittenen Inhalt zugreifen k=nnen.

11.1.2 Abschneiden : die 'clip'-Eigenschaft Ein Abschneidebereich (clipping region) definiert, welcher Teil des dargestellten Inhalts eines Elements sichtbar ist. Standardm@ßig hat der Abschneidebereich dieselbe Gr=ße und dieselbe Form wie die Element-Boxen. Der Abschneidebereich kann jedoch durch die 'clip'-Eigenschaft abge@ndert werden.

'clip' Wert:

| auto | inherit

Ausgangswert:

Auto

Angewendet auf:

Elemente auf Blockebene und ersetzte Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual

Cascading Style Sheets, Level 2

Die 'clip'-Eigenschaft bezieht sich auf Elemente, deren 'overflow'-Eigenschaft einen anderen Wert als 'visible' hat. Die Werte k=nnen die folgenden Bedeutungen haben: auto Der Abschneidebereich hat dieselbe Gr=ße und Position wie die Element-Boxen.

In CSS2 ist der einzig gltige -Wert rect( ), wobei , , und die Abst@nde von den jeweiligen Seiten der Box angeben. , , und k=nnen einen -Wert oder 'auto' annehmen. Negative L@ngen sind erlaubt. Der Wert 'auto' bedeutet, dass eine vorgegebene Kante des Abschneidebereichs dieselbe ist wie die Kante der erzeugten Box des Elements (das heißt, 'auto' bedeutet dasselbe wie '0'). Wenn Koordinaten auf Pixelkoordinaten gerundet werden, sollte darauf geachtet werden, dass keine Pixel sichtbar bleiben, wenn + gleich der Breite des Elements sind (oder + gleich der H=he des Elements), und dass andererseits keine Pixel verborgen bleiben, wenn diese Werte 0 sind.

Anmerkung der bersetzer: Der einzig gltige Wert fr hat gem@ß CSS-Errata die Form rect(, , , ). Beachten Sie die Kommata! Die Errata gestatten einem Benutzerprogramm sowohl die Erkennung von Leeraum als auch von Kommata zum Trennen der Parameter von rect(). Eine weitere sehr interessante Bemerkung in den Errata ist Folgende:

< 680 >

Visuelle Effekte

Page size: 168,00 x 240,00 mm

Sandini Bib

„W@hrend CSS2 festlegt, dass die Werte von rect() Abst@nde von den jeweiligen Seiten der Box angeben, interpretieren aktuelle Implementierungen alle vier Werte bezglich den oberen und linken Seiten. Die Arbeitsgruppe schl@gt vor, CSS2 so zu revidieren, dass die Spezifikation mit der g@ngigen Praxis bereinstimmt.“

Die Vorfahren des Elements k=nnen ebenfalls Abschneidebereiche haben (falls ihre 'overflow'-Eigenschaft nicht 'visible' ist); dargestellt wird die Schnittmenge aus den verschiedenen Zuschneidebereichen. berschreitet der Abschneidebereich die Grenzen des Dokumentfensters des Benutzerprogramms, kann der Inhalt durch die systemeigene Betriebssystemumgebung auf dieses Fenster zugeschnitten werden. Beispiel Die beiden folgenden Regeln: P { clip: rect(5px, 10px, 10px, 5px); } P { clip: rect(5px, -5px, 10px, 5px); }

erzeugen die rechteckigen Abschneidebereiche, die in den folgenden Abbildungen durch die gestrichelten Linien gekennzeichnet sind: (50, 0)

Cascading Style Sheets, Level 2

(0, 0)

clip region (0, 55) P’s block box (0, 0)

(50, 0)

clip region (0, 55) P’s block box

berlauf und Abschneiden

< 681 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Hinweis: In CSS2 sind alle Abschneidebereiche rechteckig. Wir erwarten zuknftige Erwei-

terungen, die auch ein anderes als ein rechteckiges Zuschneiden erlauben.

n

11.2 Sichtbarkeit: die 'visibility'-Eigenschaft 'visibility' Wert:

visible | hidden | collapse | inherit

Ausgangswert:

Inherit

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual

Cascading Style Sheets, Level 2

Anmerkung der bersetzer: Die CSS2-Errata @ndern den Ausgangswert und den Vererbt-Wert wie folgt: Ausgangswert: visible Vererbt: ja Die Bedeutung ist die gleiche wie zuvor, jedoch vermeidet sie den undefinierten Zustand des Wurzelelements, der zu Problemen bei einigen DOM-Implementierungen fhrte.

Die 'visibility'-Eigenschaft gibt an, ob die durch ein Element erzeugten Boxen angezeigt werden. Unsichtbare Boxen haben weiterhin Einfluss auf das Layout (um das Erzeugen von Boxen v=llig zu unterdrcken, setzen Sie die 'display'-Eigenschaft auf 'none'). Die Werte haben die folgenden Bedeutungen: visible Die erzeugte Box ist sichtbar. hidden Die erzeugte Box ist unsichtbar (v=llig transparent), beeinflusst aber das Layout. collapse Lesen Sie bitte den Abschnitt 17.5.5 ber dynamische Zeilen- und Spalteneffekte in Tabellen. Wird 'collapse' fr andere Elemente als Zeilen oder Spalten angewendet, hat es dieselbe Bedeutung wie 'hidden'. Diese Eigenschaft kann in Kombination mit Skripts verwendet werden, um dynamische Effekte zu erzeugen.

< 682 >

Visuelle Effekte

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Im folgenden Beispiel wird durch Anklicken einer Schaltfl@che auf dem Formular eine benutzerdefinierte Skriptfunktion aufgerufen, die veranlasst, dass die betreffende Box sichtbar wird, die andere verborgen. Weil diese Boxen dieselbe Gr=ße und Position haben, ersetzen sie sich letztlich wechselseitig. (Der Skriptcode ist in einer hypothetischen Skriptsprache formuliert. Er kann einen beliebigen Effekt in einem CSS-f@higen Benutzerprogramm haben, muss aber nicht.)

Sichtbarkeit: die 'visibility'-Eigenschaft

Cascading Style Sheets, Level 2

W]hlen Sie einen Verd]chtigen:

Name: Al Capone

Residence: Chicago

Name: Lucky Luciano

Residence: New York

< 683 >

Page size: 168,00 x 240,00 mm

Sandini Bib

12 Erzeugter Inhalt, automatische Nummerierung und Listen In einigen F@llen wollen Autoren, dass Benutzerprogramme Inhalt darstellen, der nicht aus dem Dokumentbaum stammt. Ein bekanntes Beispiel dafr ist eine nummerierte Liste; der Autor will die Nummern nicht explizit auflisten, sondern das Benutzerprogramm soll sie automatisch erzeugen. Analog dazu k=nnte es beispielsweise vorkommen, dass das Benutzerprogramm das Wort „Abbildung“ vor einer Bildunterschrift einfgt, oder die W=rter „Kapitel 7“ vor dem Titel des siebten Kapitels. Insbesondere fr Audio oder Braille sollten die Benutzerprogramme in der Lage sein, diese Zeichenketten einzufgen. In CSS2 kann Inhalt mit Hilfe mehrerer Mechanismen erzeugt werden: Die 'content'-Eigenschaft, in Kombination mit den Pseudoelementen :before und :after. Die akustischen Eigenschaften 'cue-before' und 'cue-after' (lesen Sie dazu das Kapitel 19 ber akustische Stylesheets). Wenn die Eigenschaft 'content' mit den akustischen Eigenschaften kombiniert wird, werden sie in der folgenden Reihenfolge dargestellt: :before, 'cuebefore', ('pause-before'), dem Elementinhalt, ('pause-after'), 'cue-after' und :after. Elemente mit dem Wert 'list-item' fr die 'display'-Eigenschaft.

·· ·

Nachfolgend beschreiben wir die Mechanismen der 'content'-Eigenschaft.

12.1 Die Pseudoelemente :before und :after

Cascading Style Sheets, Level 2

Autoren geben den Stil und die Position erzeugten Inhalts mit Hilfe der Pseudoelemente :before und :after an. Wie ihre Namen schon sagen, geben die Pseudoelemente :before und :after die Position von Inhalt vor und hinter dem Dokumentbauminhalt eines Elements an. Die 'content'-Eigenschaft gibt in Kombination mit diesen Pseudoelementen an, was eingefgt wird. Beispiel Die folgende Regel beispielsweise fgt die Zeichenkette „Hinweis:“ vor dem Inhalt jedes P-Elements ein, dessen „class“-Attribut den Wert „note“ hat: P.note:before { content: "Hinweis: " }

Die Formatierungsobjekte (zum Beispiel Boxen), die von einem Element erzeugt werden, enthalten den automatisch erzeugten Inhalt. Wenn man beispielsweise das obige Stylesheet wie folgt ab@ndert: P.note:before { content: "Note: " } P.note { border: solid green }

wird ein durchgezogener grner Rahmen um den gesamten Absatz angezeigt, inklusive der ersten Zeichenkette. Die Pseudoelemente :before und :after erben alle vererbbaren Eigenschaften von dem Element im Dokumentbaum, dem sie zugeordnet sind.

< 684 >

Erzeugter Inhalt, automatische Nummerierung, Listen

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Beispielsweise fgen die folgenden Regeln ein =ffnendes Anfhrungszeichen vor jedem Q-Element ein. Die Farbe des Anfhrungszeichens ist rot, aber die Schrift ist dieselbe wie die Schrift des restlichen Q-Elements: Q:before { content: open-quote; color: red }

In der Deklaration der Pseudoelemente :before oder :after nehmen nicht geerbte Eigenschaften ihren Ausgangswert an. Beispiel Weil also beispielsweise der Ausgangswert der Eigenschaft 'display' gleich 'inline' ist, wird das Anfhrungszeichen im vorigen Beispiel als inzeilige Box eingefgt (also auf derselben Zeile wie der anf@ngliche Textinhalt des Elements). Das n@chste Beispiel setzt die 'display'-Eigenschaft explizit auf 'block', so dass der eingefgte Text zu einem Block wird.

Beachten Sie, dass ein akustisches Benutzerprogramm nach der Darstellung des restlichen BODY-Elements die W=rter „Das Ende“ aussprechen wrde. Benutzerprogramme mssen die folgenden Eigenschaften fr die Pseudoelemente :before und :after ignorieren: 'position', 'float', Listeneigenschaften und Tabelleneigenschaften. Die Pseudoelemente :before und :after erlauben, dass die 'display'-Eigenschaft die folgenden Werte annimmt: Wenn das Subjekt (siehe Abschnitt 5.2) des Selektors ein Blocklevel-Element ist, sind die erlaubten Werte 'none', 'inline', 'block' und 'marker'. Wenn der Wert von 'display' einen andern Wert hat, verh@lt sich das Pseudoelement so, als w@re der Wert gleich 'block'. Wenn das Subjekt des Selektors ein Inline-Level-Element ist, sind die erlaubten Werte 'none' und 'inline'. Wenn der Wert von 'display' einen anderen Wert hat, verh@lt sich das Pseudoelement so, als w@re der Wert gleich 'inline'.

· ·

Hinweis: In zuknftigen Versionen von CSS sind m=glicherweise auch andere Werte erlaubt. n

Erzeugter Inhalt, automatische Nummerierung, Listen

< 685 >

Cascading Style Sheets, Level 2

BODY:after { content: "Das Ende"; display: block; margin-top: 2em; text-align: center; }

Page size: 168,00 x 240,00 mm

Sandini Bib

12.2 Die 'content'-Eigenschaft 'content' Wert:

[ | | | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote]+ | inherit

Ausgangswert

Leerer String

Angewendet auf:

'display : marker' und die Pseudoelemente :before und :after

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

All

Diese Eigenschaft wird fr die Pseudoelemente :before und :after verwendet, um Inhalt in einem Dokument zu erzeugen. Die Werte haben die folgenden Bedeutungen:

Textinhalt (lesen Sie dazu den Abschnitt 4.3.10 ber Zeichenketten).

Der Wert ist ein URI, der eine externe Ressource angibt. Wenn ein Benutzerprogramm die Ressource aufgrund der von ihm untersttzen Medientypen nicht untersttzen kann, muss es sie ignorieren.

Cascading Style Sheets, Level 2

Hinweis: CSS2 bietet keinen Mechanismus, um die Gr=ße des eingebetteten Objekts zu @ndern oder um eine Textbeschreibung bereitzustellen, wie etwa die Attribute „alt“ oder „longdesc“ fr Bilder in HTML. Das kann sich jedoch in zuknftigen Versionen von CSS @ndern. n

Z@hler k=nnen mit zwei verschiedenen Funktionen angegeben werden: 'counter()' oder 'counters()'. Die erste Funktion hat zwei Formen: 'counter(name)' oder 'counter(name, style)'. Der erzeugte Text ist der Wert des benannten Z@hlers an dieser Stelle in der Formatierungsstruktur; er wird im angegebenen Stil formatiert (standardm@ßig 'decimal'). Die zweite Funktion hat ebenfalls zwei Formen: 'counter(name, string)' oder 'counter(name, string, style)'. Der erzeugte Text ist der Wert aller Z@hler mit dem betreffenden Namen an dieser Stelle der Formatierungsstruktur, abgetrennt durch den angegebenen String. Die Z@hler werden in dem angegeben Stil dargestellt (standardm@ßig 'decimal'). Weitere Informationen finden Sie im Abschnitt 12.5 ber automatische Z@hler und Nummerierung. open-quote und close-quote Diese Werte werden durch die geeignete Zeichenkette aus der Eigenschaft 'quotes' ersetzt. no-open-quote und no-close-quote Fgt nichts ein (die leere Zeichenkette), inkrementiert (bzw. dekrementiert) aber die Verschachtelungsebene fr Anfhrungszeichen.

< 686 >

Erzeugter Inhalt, automatische Nummerierung, Listen

Page size: 168,00 x 240,00 mm

Sandini Bib

attr(X) Diese Funktion gibt den Wert des Attributs X fr das Subjekt des Selektors als Zeichenkette zurck. Die Zeichenkette wird vom CSS-Prozessor nicht geparst. Wenn das Subjekt des Selektors kein Attribut X hat, wird eine leere Zeichenkette zurckgegeben. Ob bei den Attributnamen die Groß-/Kleinschreibung bercksichtigt wird, ist von der Dokumentsprache abh@ngig. Hinweis. In CSS2 ist es nicht m=glich, auf Attributwerte fr andere Elemente des Selektors zuzugreifen. n Die 'display'-Eigenschaft steuert, ob der Inhalt in einem Block, einer Inline- oder MarkierungsBox angezeigt wird. Autoren sollten 'content'-Deklarationen in @media-Regeln platzieren, wenn der Inhalt vom Medium abh@ngig ist. Beispielsweise k=nnte literaler Text fr jede Mediengruppe verwendet werden, w@hrend Bilder sich nur auf visuelle und Bitmap-Mediengruppen beziehen und Sounddateien nur auf die akustische Mediengruppe. Beispiel Die folgende Regel bewirkt, dass eine Sounddatei am Ende eines Zitats abgespielt wird (weitere Mechanismen finden Sie im Abschnitt 19 ber akustische Stylesheets): @media aural { BLOCKQUOTE:after { content: url("beautiful-music.wav") } }

Die n@chste Regel fgt den Text des HTML-Attributs „alt“ vor dem Bild ein. Wenn das Bild nicht angezeigt wird, sieht der Leser statt dessen den „alt“-Text.

Autoren k=nnen Neuezeilezeichen in den erzeugten Inhalt einfgen, indem sie die Escape-Folge „\A“ in einen der Strings hinter der 'content'-Eigenschaft einfgen. Damit wird ein erzwungener Zeilenumbruch eingefgt, @hnlich dem BR-Element in HTML. Weitere Informationen ber die Escape-Folge „\A“ finden Sie in „Zeichenketten“ (4.3.10) und „Zeichen und Groß-/Kleinschreibung“ (4.1.3). Beispiel H1:before { display: block; text-align: center; content: "chapter\A hoofdstuk\A chapitre" }

Erzeugter Inhalt ver@ndert den Dokumentbaum nicht. Insbesondere wird er nicht an den Dokumentsprachprozessor zurckgemeldet (z. B. fr ein erneutes Parsing). Hinweis: In zuknftigen Versionen von CSS kann es sein, dass die 'content'-Eigenschaft zus@tzliche Werte akzeptiert, so dass der Stil von Bereichen des erzeugten Inhalts variiert wird, aber in CSS2 hat der gesamte Inhalt der Pseudoelemente :before und :after denselben Stil. n

Die 'content'-Eigenschaft

< 687 >

Cascading Style Sheets, Level 2

IMG:before { content: attr(alt) }

Page size: 168,00 x 240,00 mm

Sandini Bib

12.3 Zusammenspiel von :before und :after mit den Elementen 'compact' und 'run-in'

Cascading Style Sheets, Level 2

Die folgenden F@lle k=nnen auftreten: 1. Ein 'run-in'- oder 'compact'-Element hat ein :before-Pseudoelement des Typs 'inline': Das Pseudoelement wird bercksichtigt, wenn die Gr=ße der Element-Box berechnet wird (fr 'compact'), und innerhalb derselben Block-Box wie das Element dargestellt. 2. Ein 'run-in'- oder 'compact'-Element hat ein :after-Pseudoelement des Typs 'inline': Die Regeln des vorhergehenden Punktes werden angewendet. 3. Ein 'run-in'- oder 'compact'-Element hat ein :before-Pseudoelement des Typs 'block': Das Pseudoelement wird als Block oberhalb des Elements formatiert und bei der Berechnung der Elementgr=ße (fr 'compact') nicht bercksichtigt. 4. Ein 'run-in-'- oder 'compact'-Element hat ein :after-Pseudoelement des Typs 'block': Sowohl das Element als auch sein :after-Pseudoelement werden als Block-Box formatiert. Das Element ist nicht als Inline-Box in seinem eigenen :after-Pseudoelement formatiert. 5. Das Element, das einem 'run-in'- oder 'compact'-Element folgt, hat ein :beforePseudoelement des Typs 'block': Die Entscheidung, wie das 'run-in'/'compact'-Element formatiert wird, wird abh@ngig von der Block-Box getroffen, die aus dem :before-Pseudoelement resultiert. 6. Das Element, das einem 'run-in'- oder 'compact'-Element folgt, hat ein :beforePseudoelement des Typs 'inline': Die Entscheidung, wie das 'run-in'/'compact'-Element formatiert wird, ist vom 'display'-Wert des Elements abh@ngig, dem das :before zugeordnet ist. Beispiel Nachfolgend sehen Sie ein Beispiel fr einen 'run-in'-Header mit einem :after-Pseudoelement gefolgt von einem Absatz mit einem :before-Pseudoelement. Alle Pseudoelemente dieses Beispiels sind inline (das ist der Standard). Wenn das nachfolgende Stylesheet H3 { display: run-in } H3:after { content: ": " } P:before { content: "... " }

auf dieses Quelldokument angewendet wird Zentauren

haben Hufe

Haben einen Schwanz

sieht die visuelle Formatierung wie folgt aus: Zentauren: ... haben Hufe ... haben einen Schwanz

< 688 >

Erzeugter Inhalt, automatische Nummerierung, Listen

Page size: 168,00 x 240,00 mm

Sandini Bib

12.4 Anf-hrungszeichen In CSS2 k=nnen Autoren in einer den Stil bercksichtigenden und kontextabh@ngigen Weise angeben, wie die Benutzerprogramme Anfhrungszeichen darstellen sollen. Die Eigenschaft 'quotes' gibt Paare von Anfhrungszeichen fr jede Ebene der eingebetteten Zitate an. Die 'content'-Eigenschaft bietet Zugriff auf diese Anfhrungszeichen und bewirkt, dass sie vor und hinter einem Zitat eingefgt werden.

12.4.1 Anf-hrungszeichen mit der 'quotes'-Eigenschaft angeben 'quotes' Wert:

[ ]+ | none | inherit

Ausgangswert:

Vom Benutzerprogramm abh@ngig

Angewendet auf:

Alle Elemente

Geerbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

none Die Werte 'open-quote' und 'close-quote' der 'content'-Eigenschaft erzeugen keine Anfhrungsstriche. [ ]+ Werte fr die 'open-quote'- und 'close-quote'-Werte der 'content'-Eigenschaft werden dieser Liste mit Anfhrungszeichenpaaren (=ffnende und schließende) entnommen. Das erste Paar (ganz links) stellt die @ußerste Zitatebene dar, das zweite Paar die erste Einbettungsebene usw. Das Benutzerprogramm muss abh@ngig von der Einbettungsebene das geeignete Anfhrungszeichenpaar verwenden. Beispiel Wendet man beispielsweise das folgende Stylesheet /* Gibt AnfUhrungszeichenpaare fUr zwei Ebenen in zwei Sprachen an */ Q:lang(en) { quotes: '"' '"' "'" "'" } Q:lang(no) { quotes: "\(" "\(" "" } /* AnfUhrungszeichen vor und nach Q-Elementinhalt einfUgen */ Q:before { content: open-quote } Q:after { content: close-quote }

Anf#hrungszeichen

< 689 >

Cascading Style Sheets, Level 2

Diese Eigenschaft gibt die Anfhrungszeichen fr eine beliebige Anzahl eingebetteter Zitate an. Die Werte haben die folgenden Bedeutungen:

Page size: 168,00 x 240,00 mm

Sandini Bib

auf das folgende HTML-Fragment an

Quotes

Quote me!

erh@lt man "Quote me!"

w@hrend dieses HTML

Quotes

Trøndere grcter ncr Vinsjan pc kaia blir deklamert.

Folgendes erzeugen wrde:

Cascading Style Sheets, Level 2

\(Trøndere grcter ncr blir deklamert.\(

Hinweis: W@hrend die durch die 'quotes' in den vorigen Beispielen angegebenen Anfhrungszeichen alle bequem auf den Computertastaturen liegen, wrde ein wirklich hochqualitativer Schriftsatz andere ISO 10646-Zeichen erfordern. Die folgende informelle Tabelle listet einige der ISO 10646-Anfhrungszeichen auf: n Angen.herte Darstellung

ISO 10646-Code (hex)

Beschreibung

"

0022

ANF HRUNGSZEICHEN [das doppelte ASCIIAnfhrungszeichen]

'

0027

APOSTROPH [das einfache ASCII-Anfhrungszeichen]




203A

EINZELNES ANF HRUNGSZEICHEN SPITZE KLAMMER NACH RECHTS

“

00AB

ANF HRUNGSZEICHEN DOPPELTE SPITZE KLAMMER NACH LINKS

< 690 >

Erzeugter Inhalt, automatische Nummerierung, Listen

Page size: 168,00 x 240,00 mm

Sandini Bib

„

00BB

ANF HRUNGSZEICHEN DOPPELTE SPITZE KLAMMER NACH RECHTS

`

2018

LINKES EINFACHES ANF HRUNGSZEICHEN [einfach oben 6]

'

2019

RECHTES EINFACHES ANF HRUNGSZEICHEN [einfach oben 9]

``

201C

LINKES DOPPELTES ANF HRUNGSZEICHEN [doppelt oben 6]

''

201D

RECHTES DOPPELTES ANF HRUNGSZEICHEN [doppelt oben 9]

,,

201E

DOPPELTES UNTERES ANF HRUNGSZEICHEN [doppelt unten 9]

Anmerkung der bersetzer: In den Entity-Mengen von XHTML sind fr einige Anfhrungszeichen auch Zeichen-Entities definiert. Fr die blichen deutschen Anfhrungszeichen sind diese beiden die beste N@herung:

"„">

Es handelt sich dabei um die in der Tabelle schon genannten Zeichen an den Positionen 201E (links) und 201D (rechts). Da die beiden Zeichen fr XHTML definiert sind, besteht eine gute Chance, dass die aktuellen Browser diese Zeichen auch kennen. Versuche best@tigen dies. Allerdings wird das rechte Anfhrungszeichen nicht ganz genau nach den deutschen Konventionen dargestellt. Die folgende Abbildung zeigt die korrekte Darstellung (erzeugt mit Word).

Der HTML-Code „ Zitat ” fhrt im Browser (hier: Mozilla) jedoch zu folgender Darstellung.

12.4.2 Anf-hrungszeichen mit der 'content'-Eigenschaft einf-gen Mit den 'open-quote'-Werten der 'content'-Eigenschaft werden Anfhrungszeichen an den geeigneten Stellen in einem Dokument eingefgt. Jedes Auftreten von 'open-quote' oder 'closequote' wird durch einen Wert von 'quotes' ersetzt, abh@ngig von der Verschachtelungstiefe.

Anf#hrungszeichen

< 691 >

Cascading Style Sheets, Level 2

'open-quote' bezieht sich auf das erste Anfhrungszeichen eines Paares, 'close-quote' auf das zweite. Welches Anfhrungszeichenpaar verwendet wird, ist von der Verschachtelungstiefe der Anfhrungszeichen abh@ngig: Die Anzahl der Auftreten von 'open-quote' wird im gesamten erzeugten Text vor dem aktuellen Auftreten gez@hlt, minus der Anzahl des Auftretens von 'close-quote'. Ist die Tiefe gleich 0, wird das erste Paar verwendet, ist die Tiefe 1, wird das zweite Paar verwendet usw. Ist die Tiefe gr=ßer als die Anzahl der Paare, wird das letzte Paar fortlaufend wiederholt. Beachten Sie, dass diese Anfhrungszeichentiefe unabh@ngig von der Verschachtelung des Quelldokuments oder der Formatierungsstruktur ist. Einige typographische Stile fordern, dass =ffnende Anfhrungszeichen vor jedem Absatz eines Zitats wiederholt werden, das sich ber mehrere Abs@tze erstreckt, aber nur der letzte Absatz endet mit einem schließenden Anfhrungszeichen. In CSS kann das erzielt werden, indem schließende „Phantom“-Anfhrungszeichen gesetzt werden. Das Schlsselwort 'no-close-quote' dekrementiert die Zitatebene, fgt aber kein Anfhrungszeichen ein. Beispiel Das folgende Stylesheet setzt =ffnende Anfhrungszeichen fr jeden Absatz in einem BLOCKQUOTE und fgt am Ende ein einzelnes schließendes Anfhrungszeichen ein: BLOCKQUOTE P:before { content: open-quote } BLOCKQUOTE P:after { content: no-close-quote } BLOCKQUOTE P.last:after { content: close-quote }

Cascading Style Sheets, Level 2

Das basiert auf dem letzten Absatz, der mit der Klasse „last“ markiert wurde, weil es keine Selektoren gibt, die mit dem letzten untergeordneten Element eines Elements bereinstimmen k=nnen. Aus Symmetriegrnden gibt es auch das Schlsselwort 'no-open-quote', das nichts einfgt, sondern die Anfhrungszeichentiefe um eins inkrementiert. Hinweis: Wenn ein Zitat in einer anderen Sprache vorliegt als der umschließende Text, ist es blich, den Text mit Anfhrungszeichen der Sprache des umschließenden Texts auszuzeichnen, nicht mit den Anfhrungszeichen der Sprache des Zitats. n Ein Beispiel fr Franz=sisch innerhalb von Englisch: The device of the order of the garter is "Honi soit qui mal y pense."

Englisch innerhalb von Franz=sisch: Il disait: »Il faut mettre l'action en .«

Beispiel Ein Stylesheet wie das Folgende setzt die 'quotes'-Eigenschaft so, dass 'open-quote' und 'close-quote' korrekt fr alle Elemente funktionieren. Diese Regeln gelten fr Dokumente, die nur Englisch, Franz=sisch oder beides enthalten. Fr jede zus@tzliche Sprache wird eine weitere Regel ben=tigt. Beachten Sie die Verwendung des untergeordneten Kombinatorzeichens („>“), um Anfhrungszeichen fr Elemente abh@ngig von der Sprache des umschließenden Texts zu setzen:

< 692 >

Erzeugter Inhalt, automatische Nummerierung, Listen

Page size: 168,00 x 240,00 mm

Sandini Bib

[LANG|=fr] > * { quotes: "«" "»" "\2039" "\203A" } [LANG|=en] > * { quotes: "\201C" "\201D" "\2018" "\2019" }

Die Anfhrungszeichen fr das Englische sind hier in einer Form gezeigt, die die meisten Leute ber die Tastatur eingeben k=nnen. Wenn Sie sie direkt eingeben k=nnen, sehen sie wie folgt aus: [LANG|=fr] > * { quotes: "«" "»" "" } [LANG|=en] > * { quotes: "“" "”" "‘" "’" }

12.5 Automatische Z.hler und Nummerierung Die automatische Nummerierung in CSS2 wird durch zwei Eigenschaften gesteuert, 'counterincrement' und 'counter-reset'. Die Z@hler, die durch diese Eigenschaften definiert sind, werden in Kombination mit den Funktionen counter() und counters() der Eigenschaft 'content' verwendet.

Wert:

[ ]+ | none | inherit

Ausgangswert:

None

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

All

'counter-increment' Wert:

[ ]+ | none | inherit

Ausgangswert:

None

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

All

Die Eigenschaft 'counter-increment' akzeptiert einen oder mehrere Namen von Z@hlern (IDs), jeweils optional gefolgt von einer ganzen Zahl. Die ganze Zahl gibt an, um wie viel der Z@hler bei jedem Auftreten des Elements inkrementiert wird. Das Standardinkrement ist 1. Null und negative ganze Zahlen sind erlaubt.

Automatische Z,hler und Nummerierung

< 693 >

Cascading Style Sheets, Level 2

'counter-reset'

Page size: 168,00 x 240,00 mm

Sandini Bib

Die Eigenschaft 'counter-reset' enth@lt außerdem eine Liste eines oder mehrerer Namen von Z@hlern, jeweils optional gefolgt von einer ganzen Zahl. Die ganze Zahl gibt den Wert an, auf den der Z@hler bei jedem Auftreten des Elements gesetzt wird. Der Standardwert ist 0. Wenn 'counter-increment' auf einen Z@hler verweist, der sich nicht im Gltigkeitsbereich (siehe unten) eines 'counter-reset' befindet, wird angenommen, dass der Z@hler vom Wurzelelement auf 0 zurckgesetzt wurde. Beispiel Dieses Beispiel zeigt eine M=glichkeit, Kapitel und Abschnitte mit „Kapitel 1“, „1.1“, „1.2“ usw. zu nummerieren. H1:before { content: "Kapitel " counter(chapter) ". "; counter-increment: chapter; /* 1 zu chapter addieren */ counter-reset: section; /* section auf 0 setzen */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; }

Cascading Style Sheets, Level 2

Wenn ein Element einen Z@hler inkrementiert/zurcksetzt und ihn auch verwendet (in der 'content'-Eigenschaft seines :before- oder :after-Pseudoelements), wird der Z@hler nach dem Inkrementieren/Zurcksetzen verwendet. Wenn ein Element einen Z@hler sowohl zurcksetzt als auch inkrementiert, wird der Z@hler zuerst zurckgesetzt und dann inkrementiert. Die Eigenschaft 'counter-reset' folgt den Kaskadierungsregeln. Aufgrund der Kaskadierung setzt das folgende Stylesheet H1 { counter-reset: section -1 } H1 { counter-reset: imagenum 99 }

nur 'imagenum' zurck. Um beide Z@hler zurckzusetzen, mssen sie zusammen angegeben werden: H1 { counter-reset: section -1 imagenum 99 }

12.5.2 Verschachtelte Z.hler und G-ltigkeitsbereich Z@hler sind „selbst-verschachtelnd“, in der Hinsicht, dass eine Wiederverwendung eines Z@hlers in einem untergeordneten Elements automatisch eine neue Instanz des Z@hlers erzeugt. Das ist wichtig fr Situationen wie beispielsweise Listen in HTML, wo Elemente in beliebiger Tiefe innerhalb sich selbst verschachtelt werden k=nnen. Es w@re unm=glich, fr jede Ebene eindeutig benannte Z@hler zu definieren.

< 694 >

Erzeugter Inhalt, automatische Nummerierung, Listen

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Folgendes gengt also, um verschachtelte Listenelemente zu nummerieren. Das Ergebnis kommt jenem sehr nahe, wenn man 'display:list-item' und 'list-style: inside' fr das LI-Element setzt: OL { counter-reset: item } LI { display: block } LI:before { content: counter(item) ". "; counter-increment: item }

Die Selbstverschachtelung basiert auf dem Prinzip, dass jedes Element, das einen 'counter-reset' fr einen Z@hler X hat, einen neuen Z@hler X erzeugt, dessen Gltigkeitsbereich das Element ist, seine vorhergehenden gleichrangigen Elemente und alle Ableitungen des Elements und seiner vorhergehenden gleichrangigen Elemente. In dem obigen Beispiel erzeugt ein OL einen Z@hler, und alle untergeordneten Elemente des OL beziehen sich auf diesen Z@hler.

item

item

item

item

item

item

item

item

item

item

item

- -> - -> - -> - -> - -> - -> - -> - -> - -> - -> - -> - -> - -> - -> - -> - -> - -> - -> - -> - -> - ->

Die Funktion 'counters()' erzeugt einen String, der sich aus den Werten aller Z@hler mit demselben Namen zusammensetzt, getrennt durch einen vorgegebenen String.

Automatische Z,hler und Nummerierung

< 695 >

Cascading Style Sheets, Level 2

Beispiel Wenn wir die n-te Instanz des Z@hlers „item“ als item[n] bezeichnen und den Anfang und das Ende eines Gltigkeitsbereiches mit „(“ und „)“, verwendet das folgende HTML-Fragment die angegebenen Z@hler. (Wir setzen dabei das Stylesheet aus dem obigen Beispiel voraus.)

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Das folgende Stylesheet nummeriert verschachtelte Listenelemente als „1“, „1.1“, „1.1.1“ usw. OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, "."); counter-increment: item }

12.5.3

Z.hlerstile

Standardm@ßig werden Z@hler mit Dezimalzahlen formatiert, aber alle Stile, die fr die Eigenschaft 'list-style-type' zur Verfgung stehen, stehen auch fr Z@hler zur Verfgung. Die Notation sieht wie folgt aus: counter(name)

das ist der Standardstil; oder: counter(name, 'list-style-type')

Alle Stile sind erlaubt, unter anderem 'disc', 'circle', 'square' und 'none'. H1:before H2:before BLOCKQUOTE:after DIV.note:before P:before

Cascading Style Sheets, Level 2

12.5.4

{ { { { {

content: content: content: content: content:

counter(chno, upper-latin) ". " } counter(section, upper-roman) " - " } " [" counter(bq, hebrew) "]" } counter(notecntr, disc) " " } counter(p, none) }

Z.hler in Elementen mit 'display:none'

Ein Element, das nicht angezeigt wird ('display' ist auf 'none' gesetzt), kann einen Z@hler nicht inkrementieren oder zurcksetzen. Beispiel Beispielsweise inkrementieren nach dem folgenden Stylesheet H2s mit der Klasse „secret“ 'count2' nicht. H2.secret {counter-increment: count2; display: none}

Elemente, deren 'visibility' auf 'hidden' gesetzt ist, inkrementieren die Z@hler dagegen sehr wohl.

< 696 >

Erzeugter Inhalt, automatische Nummerierung, Listen

Page size: 168,00 x 240,00 mm

Sandini Bib

12.6 Markierungen (Marker) und Listen Die meisten Elemente auf Blockebene in CSS erzeugen eine Hauptblock-Box. In diesem Abschnitt beschreiben wir zwei CSS-Mechanismen, die bewirken, dass ein Element zwei Bl=cke erzeugt: eine Hauptblock-Box (fr den Inhalt eines Elements) und eine separate MarkierungsBox (fr Dekorationen, wie beispielsweise einen Punkt, ein Bild oder eine Nummer). Die Markierungs-Box kann innerhalb oder außerhalb der Haupt-Box platziert werden. Anders als :before- und :after-Inhalt beeinflusst die Markierungs-Box die Position der Haupt-Box nicht, egal welches Positionierungsschema verwendet wird. Der allgemeinere der beiden Mechanismen ist neu in CSS2 und wird auch als Markierungen (Marker) bezeichnet. Der einschr@nkendere Mechanismus beinhaltet die Listeneigenschaften von CSS1. Mit Listeneigenschaften k=nnen Autoren schnelle Ergebnisse fr viele gebr@uchliche geordnete und nicht geordnete Listenszenarien erzielen. Markierungen bieten Autoren jedoch eine pr@zise Kontrolle ber den Inhalt und die Position der Markierung. Markierungen k=nnen in Kombination mit Z@hlern verwendet werden, um neue Listenstile zu erzeugen, um Randbemerkungen zu nummerieren und fr vieles andere mehr. Beispiel Das folgende Beispiel etwa zeigt, wie Markierungen dazu verwendet werden, um Punkte hinter jeder Nummer einer geordneten Liste einzufgen. Diese HTML-Datei und das Stylesheet

Cascading Style Sheets, Level 2



Creating a list with markers

Das erste Element.

Das zweite Element.

Das dritte Element.



sollte etwa Folgendes erzeugen: i. Das erste Element. ii. Das zweite Element. iii. Das dritte Element.

Markierungen (Marker) und Listen

< 697 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Mit abgeleiteten Selektoren und untergeordneten Selektoren (siehe Abschnitte 5.5 und 5.6) ist es m=glich, unterschiedliche Markierungstypen anzugeben, abh@ngig von der Tiefe der eingebetteten Listen.

Cascading Style Sheets, Level 2

12.6.1 Markierungen: die Eigenschaft 'marker-offset' Markierungen werden erzeugt, indem die 'display'-Eigenschaft innerhalb eines :before- oder :after-Pseudoelements auf 'marker' gesetzt wird. W@hrend der :before- und :after-Inhalt 'block' und 'inline' Teil der von dem Element erzeugten Haupt-Box ist, wird 'marker'-Inhalt in einer unabh@ngigen Markierungs-Box außerhalb der Haupt-Box formatiert. Markierungs-Boxen werden als einzelne Zeile formatiert (das heißt als Zeilen-Box), weshalb sie nicht so flexibel wie Floats sind. Die Markeriungs-Box wird nur erzeugt, wenn die 'content'-Eigenschaft fr das Pseudoelement tats@chlich Inhalt erzeugt. Markierungs-Boxen haben Polsterungen (padding) und Rahmen (border), aber keine R@nder (margin). Fr das :before-Pseudoelement wird die Grundlinie des Texts in der Markierungs-Box vertikal an der Grundlinie des Texts in der ersten Zeile des Inhalts der Haupt-Box ausgerichtet. Enth@lt die Haupt-Box keinen Text, wird die obere @ußere Kante der Markierungs-Box an der oberen @ußeren Kante der Haupt-Box ausgerichtet. Fr das :after-Pseudoelement wird die Grundlinie des Texts in der Markierungs-Box vertikal an der Grundlinie des Texts in der letzten Inhaltszeile der Inhalts-Box ausgerichtet. Enth@lt die Haupt-Box keinen Text, wird die untere @ußere Kante der Markierungs-Box an der unteren @ußeren Kante der Haupt-Box ausgerichtet. Die H=he einer Markierungs-Box wird durch die Eigenschaft 'line-height' festgelegt. Die :before- (:after-) Markierungs-Box wird in der H=henberechnung der ersten (letzten) Zeilen-Box der Haupt-Box bercksichtigt. Markierungen werden also an der ersten und letzten Zeile eines Elementinhalts ausgerichtet, selbst wenn sich die Markierungs-Boxen in unterschiedlichen Zeilen-Boxen befinden. Falls es in einer Haupt-Box keine erste oder letzte Zeilen-Box gibt, richtet die Markierungs-Box selbst eine Zeilen-Box ein. Die vertikale Ausrichtung einer Markierungs-Box innerhalb ihrer Zeilen-Box wird mit Hilfe der Eigenschaft 'vertical-align' festgelegt. Ist der Wert der 'width'-Eigenschaft gleich 'auto', dann ist die Inhaltsbreite der MarkierungsBox gleich der des Inhalts, andernfalls ist sie gleich dem Wert von 'width'. Fr Werte von 'width' kleiner als die Inhaltsbreite gibt die 'overflow'-Eigenschaft das berlaufverhalten an. Markierungs-Boxen k=nnen Haupt-Boxen berlappen. Fr Werte von 'width' gr=ßer der Inhaltsbreite gibt die Eigenschaft 'text-align' die horizontale Ausrichtung des Inhalts in der Markierungs-Box an. Die Eigenschaft 'marker-offset' gibt den horizontalen Offset zwischen einer Markierungs-Box und der zugeh=rigen Haupt-Box an. Der Abstand wird zwischen ihren am n@chsten beieinander liegenden Rahmenkanten gemessen. Hinweis: Wenn eine Markierung rechts eines Floats in einem von links nach rechts formatierenden Kontext verl@uft, fließt die Haupt-Box an der rechten Seite des Floats vorbei, w@hrend die Markierungs-Box links vom Float erscheint. Weil die linke Rahmenkante der Haupt-Box links von dem Float liegt (lesen Sie dazu die Beschreibung von Floats) und die Markierungs-Boxen außerhalb der Rahmenkante der Haupt-Box liegen, liegt die Markierung ebenfalls links von dem Float. Ein analoges Verhalten ergibt sich fr die Formatierung von rechts nach links, wenn eine Markierung links von einem Float vorbeil@uft.

< 698 >

Erzeugter Inhalt, automatische Nummerierung, Listen

Page size: 168,00 x 240,00 mm

Sandini Bib

Wenn die Eigenschaft 'display' den Wert 'marker' fr den von einem Element mit 'display: list-item' erzeugten Inhalt hat, ersetzt eine fr ':before' erzeugte Markierungs-Box die normale Listenelementmarkierung. Beispiel Im folgenden Beispiel wird der Inhalt innerhalb einer Markierungs-Box einer festen Breite zentriert. Das folgende Dokument

Inhaltsausrichtung in der Markierungs-Box

Das erste Element.

Das zweite Element.

Das dritte Element.



(1) (2) (3)

Cascading Style Sheets, Level 2

sollte etwa Folgendes erzeugen: Das erste Element. Das zweite Element. Das dritte Element.

Das n@chste Beispiel erzeugt Markierungen vor und nach den Listeneintr@gen. Beispiel Das Dokument

Markers before and after list items

Markierungen (Marker) und Listen

< 699 >

Page size: 168,00 x 240,00 mm

Sandini Bib

• first list item comes first
• second list item comes second

sollte ungef@hr Folgendes erzeugen (hier ersetzen ASCII-Kunstwerke die Smiley-GIFs): :-) first list item comes first :-( :-) second list item comes second :-(

Das folgende Beispiel verwendet Markierungen, um Bemerkungen zu nummerieren.

Cascading Style Sheets, Level 2

Beispiel Das Dokument

Markers to create numbered notes4>/TITLE>

< 700 >

Erzeugter Inhalt, automatische Nummerierung, Listen

Page size: 168,00 x 240,00 mm

Sandini Bib

This is the first paragraph in this document.

This is a very short document.

This is the end.

sollte ungef@hr Folgendes produzieren:

Note 1:

This is the first paragraph in this document. This is a very short document. This is the end.

Wert:

| auto | inherit

Ausgangswert:

Auto

Angewendet auf:

Elemente mit 'display: marker'

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual

Diese Eigenschaft gibt den Abstand zwischen der n@chstliegenden Rahmenkanten einer Markierungs-Box und der zugeh=rigen Haupt-Box an. Der Abstand kann entweder benutzerspezifisch () oder vom Benutzerprogramm ('auto') gew@hlt sein. L@ngen k=nnen negativ sein, aber es gibt von der Implementierung abh@ngige Obergrenzen. Beispiel Das folgende Beispiel zeigt, wie Markierungen dazu verwendet werden k=nnen, um Punkte nach jedem nummerierten Listenelement einzufgen. Das nachfolgende HTMLProgramm und Stylesheet

Markierungsbeispiel 5

Ein langer vorhergehender Absatz....

Das erste Element.

Das zweite Element.

Das dritte Element.

Ein langer nachfolgender Absatz...

sollte etwa Folgendes erzeugen: Ein langer vorhergehender Absatz ... i. ii. iii.

Das erste Element. Das zweite Element. Das dritte Element. Ein langer nachfolgender Absatz ...

Cascading Style Sheets, Level 2

12.6.2 Listen: die Eigenschaften 'list-style-type', 'list-style-image', 'list-style-position' und 'list-style' Die Listeneigenschaften erlauben eine grundlegende visuelle Formatierung von Listen. Wie bei allgemeineren Markierungen erzeugt ein Element mit 'display: list-item' eine Haupt-Box fr den Elementinhalt und eine optionale Markierungs-Box. Die anderen Listeneigenschaften erlauben den Autoren, den Markierungstyp anzugeben (Bild, Glyphen oder Nummer) sowie die Position relativ zur Haupt-Box (außerhalb davon oder innerhalb davon vor dem Inhalt). Sie erlauben es den Autoren jedoch nicht, unterschiedliche Stile (Farben, Schriften, Ausrichtung und so weiter) fr die Listenmarkierung anzugeben oder ihre Position relativ zur Haupt-Box anzupassen. Wird darber hinaus eine Markierung M (erzeugt mit 'display: marker') fr ein durch die Listeneigenschaften erzeugtes Listenelement verwendet, ersetzt M die Standard-Listenelementmarkierung.

< 702 >

Erzeugter Inhalt, automatische Nummerierung, Listen

Page size: 168,00 x 240,00 mm

Sandini Bib

'list-style-type' Wert:

disc | circle | square | decimal | decimal-leading-zero | lowerroman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit

Ausgangswert:

Disc

Angewendet auf:

Elemente mit ''display: list-item'

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

decimal Dezimalzahlen, beginnend mit 1. decimal-leading-zero Dezimalzahlen, denen, wenn sie einstellig sind, eine Null vorangestellt wird (z. B. 01, 02, 03, ..., 98, 99). lower-roman Kleine r=mische Zahlen (i, ii, iii, iv, v usw.) upper-roman Große r=mische Zahlen (I, II, III, IV, V usw.) hebrew Traditionelle hebr@ische Nummerierung (Alef, Bet, ... Tet Vav, Tet Zayin, ... Yod Tet, Kaf ...). georgian Traditionelle georgianische Nummerierung (an, ban, gan, ..., he, tan, in, in-an, ...). armenian Traditionelle armenische Nummerierung. cjk-ideoraphic Einfache ideographische Nummern. hiragana a, i, u, e, o, ka, ki, ... katakana A, I, U, E, O, KA, KI, ...

Markierungen (Marker) und Listen

< 703 >

Cascading Style Sheets, Level 2

Diese Eigenschaft gibt das Erscheinungsbild der Listenelementmarkierung an, wenn 'list-styleimage' den Wert 'none' hat oder wenn das Bild, auf das die URI verweist, nicht angezeigt werden kann. Der Wert 'none' spezifiziert keine Markierung, andernfalls gibt es drei Typen von Markierungen: Glyphen, Nummerierungssysteme und alphabetische Systeme. Hinweis: Nummerierte Listen verbessern den Zugriff auf ein Dokument, weil es damit einfacher wird, sich innerhalb von Listen zu orientieren. Glyphen werden mit disc, circle und square angegeben. Die genaue Darstellung ist vom Benutzerprogramm abh@ngig. Nummerierungssysteme werden wie folgt spezifiziert:

Page size: 168,00 x 240,00 mm

Sandini Bib

hiragana-iroha i, ro, ha, ni, ho, he, to, ... katakana-iroha I, RO, HA, NI, HO, HE, TO, ... Ein Benutzerprogramm, das ein Nummerierungssymbol nicht erkennt, sollte 'decimal' verwenden. Hinweis: Dieses Dokument gibt keinen genauen Mechanismus fr die einzelnen Nummerierungssymbole an (z. B. wie r=mische Nummern berechnet werden). Eine zuknftige W3C-Spezifikation enth@lt m=glicherweise weitere Informationen zu diesem Thema. n Alphabetische Systeme werden wie folgt spezifiziert: lower latin oder lower-alpha ASCII-Kleinbuchstaben (a, b, c, ..., z). upper-latin oder upper-alpha ASCII-Großbuchstaben (A, B, C, ..., Z) lower-greek Kleine klassische griechische Buchstaben, Alpha, Beta, Gamma, ...(a, b, g, ...) Diese Spezifikation definiert nicht, wie alphabetische Systeme am Ende des Alphabets fortgesetzt werden. Nach 26 Listenelementen ist beispielsweise die Darstellung von 'lower-latin' nicht definiert. Fr lange Listen empfehlen wir den Autoren deshalb, echte Nummern anzugeben.

Cascading Style Sheets, Level 2

Beispiel Das folgende HTML-Dokument

Nummerierung mit kleinen lateinischen Zahlen

Erstes Element.

Zweites Element.

Drittes Element.



k=nnte etwa Folgendes erzeugen: i Erstes Element. ii Zweites Element. iii Drittes Element.

< 704 >

Erzeugter Inhalt, automatische Nummerierung, Listen

Page size: 168,00 x 240,00 mm

Sandini Bib

Beachten Sie, dass die Ausrichtung dieser Listenmarkierungen (hier rechts ausgerichtet) vom Benutzerprogramm abh@ngig ist. Zuknftige Versionen von CSS stellen m=glicherweise vollst@ndigere Mechanismen fr internationale Nummerierungssysteme bereit. n

'list-style-image' Wert:

| none | inherit

Ausgangswert:

None

Angewendet auf:

Elemente mit ''display: list-item'

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

Diese Eigenschaft legt das Bild fest, das als Listenelementmarkierung verwendet wird. Wenn das Bild zur Verfgung steht, ersetzt es die Markierung, die mit der Markierung 'list-style-type' festgelegt wurde. Beispiel Das folgende Beispiel setzt die Markierung am Anfang jedes Listenelements auf das Bild „ellipse.png“.

'list-style-position' Wert:

inside | outside | inherit

Ausgangswert:

Outside

Angewendet auf:

Elemente mit ''display: list-item'

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

Diese Eigenschaft gibt die Position der Markierungs-Box in der Hauptblock-Box an. Die Werte haben die folgenden Bedeutungen:

Markierungen (Marker) und Listen

< 705 >

Cascading Style Sheets, Level 2

UL { list-style-image: url("http://png.com/ellipse.png") }

Page size: 168,00 x 240,00 mm

Sandini Bib

outside Die Markierungs-Box liegt außerhalb der Hauptblock-Box. Hinweis: CSS1 hat die genaue Position der Markierungs-Box nicht angegeben, und aus Kompatibilit@tsgrnden bleibt CSS2 @hnlich mehrdeutig. Um eine genauere Kontrolle ber die Markierungs-Boxen zu gewinnen, verwenden Sie bitte Markierungen. inside Die Markierungs-Box ist die erste inzeilige Box in der Hauptblock-Box, welcher der Elementinhalt folgt. Beispiel

Comparison of inside/outside position

• first list item comes first
• second list item comes second

• first list item comes first
• second list item comes second

Cascading Style Sheets, Level 2

Das obige Beispiel k=nnte wie folgt formatiert werden:

< 706 >

Erzeugter Inhalt, automatische Nummerierung, Listen

Page size: 168,00 x 240,00 mm

Sandini Bib

In einem Text, der von rechts nach links verl@uft, befinden sich die Markierungen auf der rechten Seite des Rahmens.

'list-style' Wert:

[ | | | | ] |

Ausgangswert:

Fr zusammenfassende Eigenschaften nicht definiert.

Angewendet auf:

Elemente mit ''display: list-item'

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

Die Eigenschaft 'list-style' ist eine zusammenfassende Notation, mit der die drei Eigenschaften 'list-style-type', 'list-style-image' und 'list-style-position' an einer einzigen Stelle im Stylesheet festgelegt werden. Beispiel UL { list-style: upper-roman inside } /* Jede UL */ UL UL { list-style: circle outside } /* Jeder UL-Nachfahre einer UL */

Beispiel OL.alpha LI { list-style: lower-alpha } /* Jeder LI-Nachfahre einer OL */ OL.alpha > LI { list-style: lower-alpha } /* Jedes LI-Kind einer OL */

Autoren, die nur den abgeleiteten Selektor verwenden, erzielen damit vielleicht nicht die erwarteten Ergebnisse. Betrachten Sie die folgenden Regeln:

WARNUNG: Unerwartete Ergebnisse aufgrund der Kaskade

level 1

• level 2

Markierungen (Marker) und Listen

< 707 >

Cascading Style Sheets, Level 2

Obwohl Autoren die 'list-style'-Information direkt fr Listenelemente angeben k=nnen (z. B. LI in HTML), sollte das mit Vorsicht erfolgen. Die folgenden Regeln sehen ganz @hnlich aus, aber die erste deklariert einen abgeleiteten Selektor, die zweite dagegen einen (spezifischeren) untergeordneten Selektor.

Page size: 168,00 x 240,00 mm

Sandini Bib



Die gewnschte Darstellung h@tte Listenelemente der Ebene 1 mit 'lower-alpha'-Beschrifungen und Elemente der Ebene 2 mit 'disc'-Beschriftungen. Die kaskadierende Reihenfolge bewirkt, dass die erste Stilregel (die spezifische Klasseninformationen enth@lt) die zweite verdeckt. Die folgenden Regeln l=sen dieses Problem, indem sie statt dessen den untergeordneten Selektor verwenden: OL.alpha > LI { list-style: lower-alpha } UL LI { list-style: disc }

Eine weitere L=sung bestnde darin, die 'list-style'-Information nur fr die Listentypelemente anzugeben: OL.alpha { list-style: lower-alpha } UL { list-style: disc }

Vererbung bertr@gt die 'list-style'-Werte von den OL- und UL-Elementen an die LI-Elemente. Das ist die empfohlene Vorgehensweise zur Angabe der Listenstilinformation. Ein URI-Wert kann mit einem beliebigen anderen Wert kombiniert werden, wie beispielsweise in: UL { list-style: url("http://png.com/ellipse.png") disc }

Im obigen Beispiel wird 'disc' verwendet, wenn das Bild nicht zur Verfgung steht. Der Wert 'none' fr die 'list-style'-Eigenschaft setzt sowohl 'list-style-type' als auch 'list-styleimage' auf 'none': UL { list-style: none }

Cascading Style Sheets, Level 2

Das Ergebnis ist, dass keine Markierung fr die Listenelemente angezeigt wird.

13 Seitenmedien 13.1 Einf-hrung in Seitenmedien Seitenmedien (Paged Media; zum Beispiel Papier, Folien, Seiten, die auf Computerbildschirmen angezeigt werden und so weiter) unterscheiden sich von Endlosmedien, weil der Inhalt des Dokuments auf eine oder mehrere einzelne Seiten verteilt ist. Um Seitenumbrche zu verarbeiten, erweitert CSS2 das visuelle Formatierungsmodell wie folgt: 1. Die Seiten-Box erweitert das Box-Modell, so dass Autoren die Gr=ße einer Seite, ihre R@nder usw. angeben k=nnen. 2. Das Seitenmodell erweitert das visuelle Formatierungsmodell, um Seitenumbrche zu bercksichtigen. Das CSS2-Seitenmodell gibt an, wie ein Dokument innerhalb eines rechteckigen Bereichs – der Seiten-Box – formatiert wird, der eine feste Breite und H=he aufweist. Die Seiten-Box entspricht nicht unbedingt einem realen Blatt, auf dem das Dokument schließlich ausgegeben wird

< 708 >

Seitenmedien

Page size: 168,00 x 240,00 mm

Sandini Bib

(Papier, Folie, Bildschirm usw.). Das CSS-Seitenmodell spezifiziert die Formatierung in der Seiten-Box, aber das Benutzerprogramm ist dafr verantwortlich, die Seiten-Box auf das Blatt zu bertragen. Einige bertragungsm=glichkeiten seien an dieser Stelle genannt: bertragung einer Seiten-Box auf ein Blatt (zum Beispiel einseitiger Druck). bertragung von zwei Seiten-Boxen auf Vorder- und Rckseite desselben Blatts (zum Beispiel doppelseitiger Druck). bertragung von N (kleinen) Seiten-Boxen auf ein Blatt (auch als „n-up“ bezeichnet). bertragung einer (großen) Seiten-Box auf N x M Bl@tter (auch als „tiling“ bezeichnet). Anlegen von Signaturen. Eine Signatur ist eine Gruppe von Seiten, die auf ein Blatt ausgedruckt werden, die, wenn das Blatt gefaltet und wie ein Buch geschnitten wird, in der richtigen Reihenfolge erscheinen. Ausdruck eines Dokuments in mehrere Ausgabesch@chte. Ausgabe in eine Datei.

·· ·· · ··

Obwohl CSS2 nicht angibt, wie die Benutzerprogramme Seiten-Boxen bertragen, enth@lt es bestimmte Mechanismen, die den Benutzerprogrammen Informationen ber die Gr=ße und die Ausrichtung des Zielblatts mitteilen.

13.2 Seiten-Boxen: die @page -Regel Die Seiten-Box ist ein rechteckiger Bereich, der aus zwei Einzelbereichen besteht: Dem Seitenbereich. Der Seitenbereich beinhaltet die Boxen, die auf dieser Seite angelegt sind. Die Kanten des Seitenbereichs dienen als erster umschließender Block fr Layout, das zwischen Seitenumbrchen stattfindet. Der Randbereich, der den Seitenbereich umgibt.

· ·

Autoren geben die Gr=ße, die Ausrichtung, die R@nder usw. einer Seiten-Box innerhalb einer @page-Regel an. Eine @page-Regel besteht aus dem Schlsselwort "@page", einem Seitenselektor (ohne dazwischenliegende Leerzeichen, gefolgt von einer optionalen Seiten-Pseudoklasse) und einem Deklarationsblock (der sich im so genannten Seitenkontext befindet). Der Seitenselektor gibt an, fr welche Seiten die Deklaration angewendet werden soll. In CSS2 k=nnen Seitenselektoren die erste Seite, alle linken Seiten, alle rechten Seiten oder eine Seite mit einem bestimmten Namen ansprechen. Die Gr=ße der Seiten-Box wird mit der Eigenschaft 'size' festgelegt. Die Gr=ße des Seitenbereichs ist die Gr=ße der Seiten-Box minus dem Randbereich. Beispiel Die folgende @page-Regel beispielsweise setzt die Gr=ße der Seiten-Box auf 8,5 x 11 Zoll und erzeugt '2cm' Rand auf allen Seiten zwischen der Kante der Seiten-Box und dem Seitenbereich: @page { size 8.5in 11in; margin: 2cm }

Seiten-Boxen: die @page -Regel

< 709 >

Cascading Style Sheets, Level 2

Hinweis: In CSS2 beziehen sich die Rahmeneigenschaften und die Auffllungseigenschaften nicht auf Seiten, was jedoch in Zukunft m=glicherweise der Fall sein wird. n

Page size: 168,00 x 240,00 mm

Sandini Bib

Die Eigenschaft 'marks' in einer @page-Regel gibt Schnitt- und Kreuzmarkierungen fr die Seiten-Box an.

13.2.1 Seitenr.nder

Cascading Style Sheets, Level 2

Die Randeigenschaften ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' und 'margin') gelten innerhalb des Seitenkontexts. Die folgende Abbildung zeigt die Beziehungen zwischen dem Blatt, der Seiten-Box und den Seitenr@ndern:

Der berechnete Wert der Box-R@nder oben und unten auf dem Seitenbereich betr@gt '0'. Der Seitenkontext besitzt kein Konzept fr Schriften, deshalb sind die Einheiten 'em' und 'ex' nicht erlaubt. Prozentwerte fr die Randeigenschaften sind relativ zur Gr=ße der Seiten-Box; fr linke und rechte R@nder beziehen sie sich auf die Breite der Seiten-Box, w@hrend sie sich fr obere und untere R@nder auf die H=he der Seiten-Box beziehen. Alle anderen Einheiten, die den betreffenden CSS2-Eigenschaften zugeordnet sind, sind erlaubt. Negative Randwerte (entweder auf der Seiten-Box oder fr Elemente) oder die absolute Positionierung von Inhalt k=nnen dazu fhren, dass Inhalt außerhalb der Seiten-Box angeordnet ist, aber dieser Inhalt kann „zugeschnitten“ werden – vom Benutzerprogramm, dem Drucker oder letztlich dem Papierschneider.

< 710 >

Seitenmedien

Page size: 168,00 x 240,00 mm

Sandini Bib

13.2.2 SeitengrUße : die Eigenschaft 'size' 'size' Wert:

{1,2} | auto | portrait | landscape | inherit

Ausgangswert:

Auto

Angewendet auf:

den Seitenkontext

Vererbt:

N/A

Prozentwerte:

N/A

Medium:

Visual, Paged

Diese Eigenschaft gibt die Gr=ße und die Ausrichtung einer Seiten-Box an. Die Gr=ße einer Seiten-Box kann entweder „absolut“ (mit fester Gr=ße) oder „relativ“ (skalierbar, das heißt in die verfgbare Blattgr=ße eingepasst) sein. Relative Seiten-Boxen erlauben den Benutzerprogrammen, ein Dokument zu skalieren, und verwenden die Zielgr=ße optimal. Drei Werte fr die 'size'-Eigenschaft erzeugen eine relative Seiten-Box:

Beispiel Im folgenden Beispiel werden die @ußeren Kanten der Seiten-Box am Ziel ausgerichtet. Der Prozentwert der 'margin'-Eigenschaft ist relativ zur Zielgr=ße, wenn also das Zielblatt 21,0 cm x 29,7 cm groß ist (A4), sind die R@nder 2,10 cm und 2,97 cm. @page { size: auto; /* auto is the initial value */ margin: 10%; }

L@ngenwerte fr die 'size'-Eigenschaft erzeugen eine absolute Seiten-Box. Wird nur ein L@ngenwert angegeben, legt er sowohl die Breite als auch die H=he der Seiten-Box fest (das heißt bei der Box handelt es sich um ein Quadrat). Weil es sich bei der Seiten-Box um einen umschließenden Anfangsblock handelt, sind Prozentwerte fr die 'size'-Eigenschaft nicht erlaubt. Beispiel @page { size: 8.5in 11in; /* width height */ }

Seiten-Boxen: die @page -Regel

< 711 >

Cascading Style Sheets, Level 2

auto Die Seiten-Box wird auf die Gr=ße und die Ausrichtung des Zielblatts gesetzt. landscape berschreibt die Zielausrichtung. Die Seiten-Box hat dieselbe Gr=ße wie das Ziel, und die l@ngeren Seiten sind horizontal ausgerichtet. portrait berschreibt die Zielausrichtung. Die Seiten-Box hat dieselbe Gr=ße wie das Ziel, und die krzeren Seiten sind horizontal ausgerichtet.

Page size: 168,00 x 240,00 mm

Sandini Bib

Das obige Beispiel setzt die Breite der Seiten-Box auf 8,5 Zoll, die H=he auf 11 Zoll. Die SeitenBox in diesem Beispiel ben=tigt eine Zielblattgr=ße von 8,5" x 11" oder gr=ßer. Benutzerprogramme k=nnen den Benutzern erlauben, die bertragung der Seiten-Box auf das Blatt zu steuern (zum Beispiel eine Drehung einer absoluten Seiten-Box, die ausgedruckt wird).

Darstellung von Seiten-Boxen, die nicht auf ein Zielblatt passen Falls eine Seiten-Box nicht auf das Zielblatt passt, kann das Benutzerprogramm die folgenden Maßnahmen treffen: Drehen der Seiten-Box um 90v, vorausgesetzt, die Seiten-Box passt dann. Skalieren der Seite, so dass sie auf das Ziel passt.

··

Bevor das Benutzerprogramm diese Operationen ausfhrt, sollte es sich mit dem Benutzer abstimmen.

Positionierung der Seiten-Box auf dem Blatt Wenn die Seiten-Box kleiner als die Zielgr=ße ist, kann das Benutzerprogramm sie irgendwo auf dem Blatt platzieren. Es wird jedoch empfohlen, dass die Seiten-Box auf dem Blatt zentriert wird, weil damit doppelseitige Seiten ausgerichtet werden und ein versehentlicher Informationsverlust vermieden wird, wenn nahe der Kante eines Blatts gedruckt wird.

13.2.3 Schnittmarkierungen: die 'marks'-Eigenschaft

Cascading Style Sheets, Level 2

'marks' Wert:

[ crop | | cross ] | none | inherit

Ausgangswert:

None

Angewendet auf:

Seitenkontext

Vererbt:

N/A

Prozentwerte:

N/A

Medium:

Visual, Paged

Bei einem hochqualitativen Druck werden die Markierungen h@ufig außerhalb der Seiten-Box angegeben. Diese Eigenschaft gibt an, ob Kreuzmarkierungen (Cross) oder Schnittmarkierungen (Crop) oder beides außerhalb der Kanten der Seiten-Box ausgegeben werden sollen. Schnittmarkierungen zeigen, wo die Seite geschnitten werden soll. Kreuzmarkierungen (auch als Register- oder Registrierungsmarkierungen bezeichnet) werden fr die Ausrichtung von Bl@ttern verwendet. Markierungen sind nur auf absoluten Seiten-Boxen sichtbar (siehe auch 'size'-Eigenschaft). In relativen Seiten-Boxen wird die Seiten-Box am Ziel ausgerichtet und die Markierungen befinden sich außerhalb des druckbaren Bereichs. Die Gr=ße, der Stil und die Position der Kreuzmarkierungen ist vom Benutzerprogramm abh@ngig.

< 712 >

Seitenmedien

Page size: 168,00 x 240,00 mm

Sandini Bib

13.2.4 Linke, rechte und erste Seiten Beim Ausdruck von doppelseitigen Dokumenten sollten sich die Seiten-Boxen auf linken und rechten Seiten unterscheiden. Das kann durch zwei CSS-Pseudoklassen ausgedrckt werden, die im Seitenkontext definiert werden k=nnen. Alle Seiten werden automatisch vom Benutzerprogramm in die Pseudoklassen :left oder :right eingeordnet. @page :left { margin-left: 4cm; margin-right: 3cm; } @page :right { margin-left: 3cm; margin-right: 4cm; }

Wurden fr linke und rechte Seiten unterschiedliche Deklarationen angegeben, muss das Benutzerprogramm diese bercksichtigen, selbst wenn es die Seiten-Boxen nicht auf linke und rechte Bl@tter bertr@gt (z. B. auf einen Drucker, der nur einen einseitigen Druck untersttzt). Mit der Pseudoklasse :first k=nnen Autoren den Stil fr die erste Seite festlegen:

Ob es sich bei der ersten Seite eines Dokuments um :left oder :right handelt, ist von der Hauptschreibrichtung des Dokuments abh@ngig und liegt außerhalb des Gltigkeitsbereichs dieser Spezifikation. Um jedoch zu erzwingen, dass eine erste Seite :left oder :right ist, k=nnen Autoren einen Seitenumbruch vor der ersten erzeugten Box einfgen (in HTML z. B. wrde dies fr das BODY-Element angegeben). Eigenschaften, die in einer @page-Regel fr :left (oder :right) angegeben sind, berschreiben diejenigen aus einer @page-Regel, die keine Pseudoklasse angegeben hat. Eigenschaften, die in einer @page-Regel fr :first angegeben sind, berschreiben solche aus @page-Regeln fr :left (oder :right). Hinweis: Zus@tzliche Deklarationen in den Pseudoklassen :left oder :right haben keine Auswirkung darauf, ob das Dokument doppel- oder einseitig aus dem Drucker kommt (was nicht im Rahmen dieser Spezifikation liegt). Zuknftige Versionen von CSS enthalten m=glicherweise andere Seiten-Pseudoklassen. n

13.2.5 Inhalt außerhalb der Seiten-Box Bei der Formatierung von Inhalt im Seitenmodell kann Inhalt auch außerhalb der Seiten-Box erscheinen. Beispielsweise k=nnte ein Element, dessen 'white-space'-Eigenschaft den Wert 'pre' hat, eine Box erzeugen, die breiter als die Seiten-Box ist. Werden die Boxen außerdem absolut positioniert, k=nnte das zu „unpraktischen“ Positionen fhren. Beispielsweise k=nnten Bilder an der Kante der Seiten-Box oder 100.000 cm unterhalb der Seiten-Box platziert werden.

Seiten-Boxen: die @page -Regel

< 713 >

Cascading Style Sheets, Level 2

@page { margin: 2cm } /* Alle R]nder sind auf 2cm gesetzt */ @page :first { margin-top: 10cm /* Oberer Rand der ersten Seite: 10cm */ }

Page size: 168,00 x 240,00 mm

Sandini Bib

Die exakte Formatierung solcher Elemente kann im Rahmen dieser Spezifikation nicht festgelegt werden. Wir empfehlen jedoch, dass sich Autoren und Benutzerprogramme an die folgenden allgemeinen Konzepte halten, die sich auf Inhalt außerhalb der Seiten-Box beziehen: Inhalt sollte auch etwas ber die Seiten-Box hinaus erlaubt werden, so dass die Seiten „auslaufen“. Benutzerprogramme sollten vermeiden, eine große Anzahl leerer Seiten-Boxen zu erzeugen, um die Positionierung von Elementen zu bercksichtigen (Sie wollen z. B. nicht 100 leere Seiten ausdrucken). Beachten Sie jedoch, dass es erforderlich sein k=nnte, eine kleine Anzahl leerer Seiten-Boxen zu erzeugen, um die 'left'- und 'right'-Werte fr 'page-break-before' und 'page-break-after' zu bercksichtigen. Autoren sollten keine Elemente an unpraktischen Positionen positionieren, nur um zu vermeiden, sie darzustellen. Stattdessen: Um das Erstellen von Boxen vollst@ndig zu unterdrcken, setzen Sie die 'display'-Eigenschaft auf 'none'. Um eine Box unsichtbar zu machen, verwenden Sie die 'visibility'-Eigenschaft. Benutzerprogramme k=nnen Boxen, die sich außerhalb der Seiten-Box befinden, unterschiedlich verarbeiten, sie beispielsweise verwerfen oder Seiten-Boxen am Ende des Dokuments dafr erzeugen.

· · · ·

13.3 Seitenumbr-che

Cascading Style Sheets, Level 2

Die folgenden Abschnitte erkl@ren die Seitenformatierung in CSS. Fnf Eigenschaften geben an, ob das Benutzerprogramm Seitenumbrche vornehmen darf oder soll, und auf welcher Seite (links oder rechts) der nachfolgende Inhalt fortgesetzt werden soll. Jeder Seitenumbruch beendet das Layout in der aktuellen Seiten-Box und bewirkt, dass verbleibende Teile des Dokumentbaums in einer neuen Seiten-Box angelegt werden.

13.3.1 Umbruch vor/nach Elementen: 'page-break-before', 'page-break-after', 'page-break-inside' 'page-break-before' Wert:

auto | always | avoid | left | right | inherit

Ausgangswert:

Auto

Angewendet auf:

Elemente auf Blockebene

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual, Paged

< 714 >

Seitenmedien

Page size: 168,00 x 240,00 mm

Sandini Bib

'page-break-after' Wert:

auto | always | avoid | left | right | inherit

Ausgangswert:

Auto

Angewendet auf:

Elemente auf Blockeben

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual, Paged

'page-break-inside' Wert:

avoid | auto | inherit

Ausgangswert:

Auto

Angewendet auf:

Elemente auf Blockebene

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual, Paged

auto Ein Seitenumbruch vor (nach, innerhalb) der erzeugten Box wird weder erzwungen noch verboten. always Vor (hinter) der erzeugten Box wird immer ein Seitenumbruch erzwungen. avoid Ein Seitenumbruch vor (nach, innerhalb) der erzeugten Box wird vermieden. left Vor (nach) der erzeugten Box werden ein oder zwei Seitenumbrche erzwungen, so dass die n@chste Seite als linke Seite formatiert wird. right Vor (nach) der erzeugten Box werden ein oder zwei Seitenumbrche erzwungen, so dass die n@chste Seite als rechte Seite formatiert wird. Eine m=gliche Seitenumbruchposition wird normalerweise von der 'page-break-inside'-Eigenschaft des bergeordneten Elements, der 'page-break-after'-Eigenschaft des vorhergehenden Elements und der 'page-break-before'-Eigenschaft des nachfolgenden Elements beeinflusst. Wenn diese Eigenschaften andere Werte als 'auto' haben, haben die Werte 'always', 'left' und 'right' Priorit@t gegenber 'avoid'. Weitere Informationen ber die genauen Regeln, wie diese Eigenschaften einen Seitenumbruch erzwingen oder unterdrcken finden Sie im Abschnitt ber erlaubte Seitenumbrche (13.3.4).

Seitenumbr#che

< 715 >

Cascading Style Sheets, Level 2

Die Werte fr diese Eigenschaften haben die folgenen Bedeutungen:

Page size: 168,00 x 240,00 mm

Sandini Bib

13.3.2 Benannte Seiten verwenden: 'page' 'page' Wert:

| auto

Ausgangswert:

Auto

Angewendet auf:

Elemente auf Blockebene

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual, Paged

Die 'page'-Eigenschaft kann dazu verwendet werden, einen bestimmten Seitentyp anzugeben, auf dem ein Element angezeigt werden soll. Beispiel Dieses Beispiel platziert alle Tabellen auf einer rechten horizontalen Seite (namens "rotated"): @page rotated {size: landscape} TABLE {page: rotated; page-break-before: right}

Cascading Style Sheets, Level 2

Die 'page'-Eigenschaft funktioniert wie folgt: Wenn eine Block-Box mit Inline-Inhalt eine 'page'-Eigenschaft hat, die sich von der der vorherigen Block-Box mit Inline-Inhalt unterscheidet, werden ein oder zwei Seitenumbrche zwischen ihnen eingefgt, und die Boxen hinter dem Umbruch werden auf einer Seiten-Box des angegebenen Typs dargestellt. Weitere Informationen finden Sie im Abschnitt „Erzwungene Seitenumbrche“, sp@ter in diesem Kapitel. Beispiel In diesem Beispiel werden die beiden Tabellen auf horizontal ausgerichteten Seiten dargestellt (falls sie Platz haben, auf derselben Seite), und der Seitentyp „narrow“ wird berhaupt nicht verwendet, obwohl er fr DIV gesetzt wurde: @page narrow {size: 9cm 18cm} @page rotated {size: landscape} DIV {page: narrow} TABLE {page: rotated}

mit diesem Dokument:

... ...

< 716 >

Seitenmedien

Page size: 168,00 x 240,00 mm

Sandini Bib

13.3.3 Umbr-che innerhalb von Elementen: 'Waisen', 'Witwen' 'orphans' (Waisen) Wert:

| inherit

Ausgangswert:

2

Angewendet auf:

Elemente auf Blockebene

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual, Paged

Wert:

| inherit

Ausgangswert:

2

Angewendet auf:

Elemente auf Blockebene

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual, Paged

Die 'orphans'-Eigenschaft („Waisen“, auch „Schusterjungen“ genannt) gibt an, wie viele Zeilen eines Abschnitts mindestens unten auf einer Seite noch angezeigt werden mssen. Die 'widows'-Eigenschaft („Witwen“, auch „Hurenkinder“ genannt) gibt an, wie viele Zeilen eines Abschnitts oben auf einer Seite mindestens noch angezeigt werden mssen. Beispiele dafr, wie sie verwendet werden, um Seitenumbrche zu steuern, finden Sie nachfolgend. Weitere Informationen ber die Absatzformatierung finden Sie im Abschnitt ber ZeilenBoxen (9.4.2).

13.3.4 Erlaubte Seitenumbr-che Im normalen Verlauf erfolgen Seitenumbrche an den folgenden Positionen: 1. Im vertikalen Rand zwischen Block-Boxen. Wenn hier ein Seitenumbruch erfolgt, werden die berechneten Werte der relevanten 'margin-top'- und 'margin-bottom'-Eigenschaften auf '0' gesetzt. 2. Zwischen Zeilen-Boxen innerhalb einer Block-Box.

Seitenumbr#che

< 717 >

Cascading Style Sheets, Level 2

'widows' (Witwen)

Page size: 168,00 x 240,00 mm

Sandini Bib

Diese Zeilenumbrche unterliegen den folgenden Regeln: Regel A Ein Umbruch an der Stelle (1) ist erlaubt, wenn die Eigenschaften 'page-break-after' und 'page-break-before' aller Elemente, die Boxen erzeugen, die auf diesen Rand treffen, dies erlauben, das heißt, wenn mindestens eine den Wert 'always', 'left' oder 'right' hat oder wenn alle davon auf 'auto' gesetzt sind. Regel B Sind alle Eigenschaften 'auto' und der n@chste gemeinsame Vorfahre aller Elemente hat den 'page-break-inside'-Wert 'avoid', ist ein Umbruch hier nicht erlaubt. Regel C Ein Umbruch an der Stelle (2) ist nur dann erlaubt, wenn die Anzahl der Zeilen-Boxen zwischen dem Umbruch und dem Anfang der umschließenden Block-Box gleich dem Wert von 'orphans' oder h=her ist und die Anzahl der Zeilen-Boxen zwischen dem Umbruch und dem Ende der Box gleich dem Wert von 'widows' oder h=her ist. Regel D Darber hinaus ist ein Umbruch an der Stelle (2) nur dann erlaubt, wenn die 'page-breakinside'-Eigenschaft gleich 'auto' ist. Falls die obigen Regeln nicht gengend Umbrche zulassen, um zu verhindern, dass der Inhalt in den Seiten-Boxen berl@uft, werden die Regeln B und D verworfen, um zus@tzliche Umbrche zu finden. Wenn das immer noch nicht zu ausreichend vielen Umbrchen fhrt, werden auch die Regeln A und C verworfen, um noch mehr Umbrche zu finden. Seitenumbrche k=nnen nicht in absolut positionierten Boxen auftreten.

Cascading Style Sheets, Level 2

13.3.5 Erzwungene Seitenumbr-che Ein Seitenumbruch muss an der Stelle (1) erfolgen, wenn unter den 'page-break-after'- und 'page-break-before'-Eigenschaften aller Elemente, die Boxen erzeugen, die diesen Rand berhren, es mindestens eine gibt, die den Wert 'always', 'left' oder 'right' hat.

13.3.6 „Beste“ Seitenumbr-che CSS2 definiert nicht, welcher Seitenumbruch aus einer Menge von erlaubten Seitenumbrchen verwendet werden muss; CSS2 verbietet einem Benutzerprogramm nicht, an jedem m=glichen Umbruchpunkt einen Umbruch einzufgen, und auch nicht, berhaupt keine Umbrche zu verwenden. CSS2 empfiehlt jedoch, dass Benutzerprogramme die folgende Heuristik befolgen (wobei erkannt werden soll, dass sie manchmal widersprchlich sind): So wenig wie m=glich umbrechen. Alle Seiten, die keinen erzwungenen Seitenumbruch haben, sollten mit ungef@hr der gleichen H=he erscheinen. Vermeiden von Umbrchen in Bl=cken, die einen Rahmen haben. Vermeiden von Umbrchen innerhalb einer Tabelle. Vermeiden von Umbrchen innerhalb eines Floating-Elements.

·· ·· ·

< 718 >

Seitenmedien

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Angenommen, ein Stylesheet enth@lt 'orphans: 4', 'widows: 2', und unten auf der aktuellen Seite stehen 20 Zeilen (Zeilen-Boxen) zur Verfgung: Wenn ein Absatz am Ende der aktuellen Seite 20 Zeilen oder weniger enth@lt, sollte er auf der aktuellen Seite platziert werden. Enth@lt der Absatz 21 oder 22 Zeilen, darf der zweite Teil des Absatzes die durch 'widows' vorgegebene Beschr@nkung nicht verletzen, deshalb muss der zweite Teil genau zwei Zeilen umfassen. Enth@lt der Absatz 23 Zeilen oder mehr, sollte der erste Teil 20 Zeilen und der zweite Teil die restlichen Zeilen enthalten.

· · ·

Angenommen, 'orphans' ist '10', 'widows' ist '20', und unten auf der aktuellen Seite stehen 8 Zeilen zur Verfgung: Enth@lt ein Absatz am Ende der aktuellen Seite 8 Zeilen oder weniger, sollte er auf der aktuellen Seite platziert werden. Enth@lt der Absatz 9 oder mehr Zeilen, darf er nicht geteilt werden (das wrde der 'orphan'-Beschr@nkung widersprechen), deshalb sollte er als Block auf die n@chste Seite verschoben werden.

· ·

13.4 Kaskade im Seitenkontext Deklarationen im Seitenkontext gehorchen der Kaskade wie normale CSS2-Deklarationen.

@page { margin-left: 3cm; } @page :left { margin-left: 4cm; }

Weil der Pseudoklassen-Selektor spezifischer ist, ist der linke Rand auf linken Seiten '4cm', und alle anderen Seiten (d. h. die rechten Seiten) haben einen linken Rand von '3cm'.

14 Farben und Hintergrund CSS-Eigenschaften gestatten es den Autoren, die Vordergrundfarbe sowie den Hintergrund fr ein Element festzulegen. Beim Hintergrund kann es sich um Farben oder Bilder handeln. Hintergrundeigenschaften erlauben den Autoren, ein Hintergrundbild zu positionieren, es zu wiederholen und zu deklarieren, ob es in Hinblick auf den Viewport feststehend sein soll, oder ob es zusammen mit dem Dokument weitergebl@ttert werden soll. Eine Beschreibung der Syntax fr gltige Farbewerte finden Sie im Abschnitt ber Farbeinheiten (4.3.6).

Kaskade im Seitenkontext

< 719 >

Cascading Style Sheets, Level 2

Beispiel Betrachten Sie folgendes Beispiel:

Page size: 168,00 x 240,00 mm

Sandini Bib

14.1 Vordergrundfarbe : die 'color'-Eigenschaft 'color' Wert:

| inherit

Ausgangswert:

Vom Benutzerprogramm abh@ngig.

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozents,tze:

N/A

Medium:

Visual

Diese Eigenschaft beschreibt die Vordergrundfarbe des Textinhalts eines Elements. Es gibt unterschiedliche M=glichkeiten, rot festzulegen: EM { color: red } EM { color: rgb(255,0,0) }

/* vordefinierter Farbname */ /* RGB-Bereich 0-255 */

Cascading Style Sheets, Level 2

14.2 Der Hintergrund Autoren k=nnen den Hintergrund eines Elements (das heißt, die Oberfl@che, auf der es dargestellt wird) entweder als Farbe oder als Bild festlegen. Beim Box-Modell bezieht sich der „Hintergrund“ auf den Hintergrund der Inhalts- und Polsterbereiche (padding). Rahmenfarben und -stile werden mit Hilfe der Rahmeneigenschaften festgelegt. R@nder sind immer transparent, so dass der Hintergrund der bergeordneten Box immer durchscheint. Hintergrundeigenschaften werden nicht vererbt, aber der Hintergrund der bergeordneten Box scheint standardm@ßig durch, weil 'background-color' den Ausgangswert 'transparent' hat. Der Hintergrund der Box, die vom Wurzelelement erzeugt wurde, bedeckt die gesamte Zeichenfl@che. Fr HTML-Dokumente empfehlen wir jedoch, dass die Autoren den Hintergrund fr das BODY-Element und nicht fr das HTML-Element angeben. Benutzerprogramme sollten beim Einfgen des Hintergrunds die folgenden Priorit@tsregeln beachten: Wenn der Wert der 'background'-Eigenschaft fr das HTML-Element nicht 'transparent' ist, wird er verwendet, andernfalls wird der Wert der 'background'-Eigenschaft fr das BODY-Element verwendet. Ist der resultierende Wert 'transparent', ist die Darstellung nicht definiert. Beispiel Gem@ß diesen Regeln hat die Zeichenfl@che fr das folgende HTML-Dokument einen marmorierten Hintergrund:

Einstellen des Hintergrunds fUr die Zeichenfl]che

< 720 >

Farben und Hintergrund

Page size: 168,00 x 240,00 mm

Sandini Bib

Mein Hintergrund ist Marmor.

14.2.1 Hintergrundeigenschaften : 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' und 'background' 'background-color' Wert:

| transparent | inherit

Ausgangswert:

Transparent

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

N/A

Medium:

Visual

Diese Eigenschaft legt die Hintergrundfarbe eines Elements fest, entweder als -Wert, oder mit dem Schlsselwort 'transparent', so dass die darunter liegenden Farben durchscheinen. Beispiel

Cascading Style Sheets, Level 2

H1 { background-color: #F00 }

'background-image' Wert:

| none |inherit

Ausgangswert:

None

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

N/A

Medium:

Visual

Diese Eigenschaft legt das Hintergrundbild eines Elements fest. Beim Festlegen eines Hintergrundbildes sollten die Autoren auch eine Hintergrundfarbe angeben, die verwendet wird, wenn das Bild nicht zur Verfgung steht. Wenn das Bild zur Verfgung steht, wird es auf der vorgegebenen Hintergrundfarbe dargestellt. (Die Farbe wird also in den transparenten Bereichen des Bildes sichtbar.)

Der Hintergrund

< 721 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Wert fr diese Eigenschaft sind entweder , womit das Bild angegeben wird, oder 'none', wenn kein Bild verwendet wird. Beispiel BODY { background-image: url("marble.gif") } P { background-image: none }

'background-repeat' Wert:

repeat | repeat-x | repeat-y | no-repeat | inherit (siehe 6.2.1)

Ausgangswert:

Repeat

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual

Cascading Style Sheets, Level 2

Wenn ein Hintergrundbild angegeben ist, gibt diese Eigenschaft an, ob und wie es wiederholt (kachelartig angeordnet) werden soll. Die kachelartige Anordnung erstreckt sich ber die Inhalts- und Polsterbereiche einer Box. Die Werte haben die folgenden Bedeutungen: repeat Das Bild wird sowohl horizontal als auch vertikal wiederholt. repeat-x Das Bild wird nur horizontal wiederholt. repeat-y Das Bild wird nur vertikal wiederholt. no-repeat Das Bild wird nicht wiederholt: Es wird nur einmal angezeigt. Beispiel BODY { background: white url("pendant.gif"); background-repeat: repeat-y; background-position: center; }

< 722 >

Farben und Hintergrund

Page size: 168,00 x 240,00 mm

Sandini Bib

body text body text body text body text body text body text body text. body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text center image body text body text body text body text body text body text body text. body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text. body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text

Abbildung 14.1: Eine Kopie des Hintergrundbildes ist zentriert, die anderen werden unterhalb und oberhalb angeordnet, so dass ein vertikales Band hinter dem Element entsteht.

Wert:

scroll | fixed | inherit

Ausgangswert:

Scroll

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual

Wenn ein Hintergrundbild angegeben ist, legt diese Eigenschaft fest, ob es in Hinblick auf den Viewport feststehend ('fixed') ist, oder ob es zusammen mit dem Dokument weitergebl@ttert wird ('scroll'). Selbst ein feststehendes Bild ist immer noch nur dann sichtbar, wenn es sich dabei um den Hintergrund oder die Polsterung des Elements handelt. Wenn das Bild also nicht kachelartig angeordnet ist ('background-repeat: repeat'), ist es m=glicherweise nicht sichtbar.

Der Hintergrund

< 723 >

Cascading Style Sheets, Level 2

'background-attachment'

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Dieses Beispiel erzeugt ein vertikales Endlosband, das beim Weiterbl@ttern des Elements am Viewport „festgemacht“ zu sein scheint. BODY { background: red url("pendant.gif"); background-repeat: repeat-y; background-attachment: fixed; }

Benutzerprogramme behandeln 'fixed' m=glicherweise wie 'scroll'. Es ist jedoch zu empfehlen, dass sie 'fixed' korrekt interpretieren, zumindest fr HTML- und BODY-Elemente, weil es fr einen Autor keine M=glichkeit gibt, nur fr solche Browser ein Bild bereitzustellen, die 'fixed' untersttzen. Weitere Informationen finden Sie im Abschnitt 3.2 ber Konformit@t.

Cascading Style Sheets, Level 2

'background-position' Wert:

[[ | ]{1,2} | [[top | center | bottom] || [left | center | right ]]] | inherit

Ausgangswert:

0% 0%

Angewendet auf:

Elemente auf Blockebene und ersetzte Elemente.

Vererbt:

Nein

Prozentwerte:

Bezieht sich auf die Gr=ße der eigentlichen Box.

Medium:

Visual

Wenn ein Hintergrundbild angegeben wurde, legt diese Eigenschaft seine Ausgangsposition fest. Die Werte haben die folgenden Bedeutungen: Mit einem Wertepaar von '0% 0%' ist die obere linke Ecke des Bildes an der oberen linken Ecke der Polsterungskante der Box ausgerichtet. Ein Wertepaar von '100% 100%' platziert die untere rechte Ecke des Bildes in der unteren rechten Ecke des Polsterbereichs. Mit einem Wertepaar von '14% 84%' wird der Punkt 14% nach rechts und 84% nach unten im Auffllbereich platziert. Mit einem Wertepaar von '2cm 2cm' wird die obere linke Ecke des Bildes 2cm rechts und 2cm unterhalb der oberen linken Ecke des Auffllbereichs platziert. top left und left top Entspricht '0% 0%'. top, top center und center top Entspricht '50% 0%'. right top und top right Entspricht '100% 0%'. left, left center und center left Entspricht '0% 50%'.

< 724 >

Farben und Hintergrund

Page size: 168,00 x 240,00 mm

Sandini Bib

center und center center Entspricht '50% 50%'. right, right center und center right Entspricht '100% 50%'. bottom left und left bottom Entspricht '0% 100'. bottom, bottom center und center bottom Entspricht '50% 100%'. bottom right und right bottom Entspricht '100% 100%'. Wenn nur ein Prozent- oder L@ngenwert angegeben ist, setzt dieser nur die horizontale Position, und die vertikale Position liegt bei 50%. Sind zwei Werte angegeben, bestimmt der erste die horizontale Position. Kombinationen aus L@ngen- und Prozentwerten sind ebenso erlaubt (zum Beispiel '50% 2cm') wie negative Positionen. Schlsselw=rter drfen nicht mit Prozentwerten oder L@ngenwerten kombiniert werden (alle m=glichen Kombinationen sehen Sie oben). Beispiel BODY BODY BODY BODY

{ { { {

background: background: background: background:

url("banner.jpeg") url("banner.jpeg") url("banner.jpeg") url("banner.jpeg")

right top } top center } center } bottom }

/* /* /* /*

100% 0% */ 50% 0% */ 50% 50% */ 50% 100% */

Wenn das Hintergrundbild am Viewport fixiert ist (siehe Eigenschaft 'background-attachment'), wird das Bild relativ zum Viewport und nicht zum Auffllbereich des Elements platziert. Ein Beispiel:

BODY { background-image: url("logo.png"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; }

In diesem Beispiel wird das (einzelne) Bild in der unteren rechten Ecke des Viewports platziert.

'background' Wert:

[ || || || || ] | inherit

Ausgangswert:

Fr zusammenfassende Eigenschaften nicht definiert.

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

Fr 'background-position' erlaubt.

Medium:

Visual

Der Hintergrund

< 725 >

Cascading Style Sheets, Level 2

Beispiel

Page size: 168,00 x 240,00 mm

Sandini Bib

Die Eigenschaft 'background' ist eine zusammenfassende Eigenschaft fr die Einstellung der einzelnen Hintergrundeigenschaften ('background-color', 'background-image', 'background-repeat', 'background-attachment' und 'background-position') an einer einzigen Stelle im Stylesheet. Die Eigenschaft 'background' setzt zun@chst die einzelnen Hintergrundeigenschaften auf ihre Ausgangswerte und weist ihnen dann die explizit in der Deklaration angegebene Werte zu. Beispiel In der ersten Regel des folgenden Beispiels wurde nur ein Wert fr 'background-color' angegeben, und die anderen einzelnen Eigenschaften werden auf ihren Ausgangswert gesetzt. In der zweiten Regel wurden alle einzelnen Eigenschaften angegeben. BODY { background: red } P { background: url("chess.png") gray 50% repeat fixed }

14.3 Gammakorrektur Anmerkung: Informationen ber Gamma-Aspekte finden Sie im Gamma-Tutorial der PNG-Spezifikation ([PNG10]). n

Cascading Style Sheets, Level 2

Bei der Berechnung der Gammakorrektur k=nnen Benutzerprogramme, die Ausgaben auf einem CRT-Bildschirm vornehmen, von einem idealen CRT-Bildschirm ausgehen und alle Auswirkungen auf scheinbares Gamma ignorieren, die durch Dithering entstehen. Der daraus abgeleitete minimale Aufwand, der erforderlich ist, damit sie auf den jeweiligen Plattformen funktionieren, ist unten angegeben.

Anmerkung der bersetzer: CRT ist die Abkrzung fr „Cathode Ray Tube“, also Kathodenstrahlr=hre. Gemeint sind damit herk=mliche Monitore (oder auch Fernseher) im Gegensatz zu LCDs oder TFT-Bildschirmen. Bei der Gamma-Korrektur geht es darum, Licht-Intensit@ten „korrekt“ darzustellen. Dabei spielt eine Eigenschaft des menschlichen Auges eine wichtige Rolle: Das Auge reagiert sensibel auf Intensit@tsverh,ltnisse, statt auf absolute Intensit@tswerte. Das ist die Ursache dafr, dass Intensit@tswerte logaithmisch und nicht linear ber den Wertebereich verteilt werden. Es ist nun nicht so einfach, die Intensit@ten auf einem CRT-Bildschirm anzuzeigen. Abh@ngig ist dieser Vorgang auch von der Phosphorart, die im Monitor zum Einsatz kommt. Die Intensit@t des Lichts, das eine Phosphorart aussendet, h@ngt von der Anzahl N der Elektronen im Strahl wie folgt ab: I = kNg Dabei sind k und g Konstanten. Der g-Wert liegt blicherweise zwischen 2,2 und 2,5. In der Praxis gibt es noch ein paar weitere Umformungen dieser Gleichung, die hier nicht weiter ausgefhrt werden sollen. Wesentlich ist, dass am Ende einige Konstanten eine Rolle spielen, die vom Monitortyp abh@ngen. Letzlich msste man also eine Tabelle mit den Werten fr jeden Monitortyp haben und k=nnte dann die entsprechenden Umrechnungen durchfhren. Der allgemeine Einsatz einer solchen Tabelle wird Gamma-Korrektur genannt; eher willkrlich nach dem – natrlich austauschbaren – g in der Gleichung benannt. Die obigen Ausfhrungen stammen sinngem@ß aus dem Buch von Foley, van Dam et.al. „Computer Graphics – Principles and Practice“, Zweite Auflage, Addison-Wesley.

< 726 >

Farben und Hintergrund

Page size: 168,00 x 240,00 mm

Sandini Bib

PC unter MS-Windows Nichts zu tun Unix mit X11 Nichts zu tun Mac mit QuickDraw Anwendung von Gamma 1,45 [ICC32] (ColorSync-f@hige Applikationen k=nnen ColorSync einfach das sRGB ICC-Profil bergeben, um eine korrekte Farbkorrektur vorzunehmen). SGI mit X Anwendung des Gammawerts aus /etc/config/system.glGammaVal (der Standardwert ist 1,70; Applikationen unter Irix 6.2 oder h=her k=nnen dem Farbverwaltungssystem einfach das sRGB ICC-Profil bergeben). NeXT unter NeXTStep Anwendung von Gamma 2,22. „Anwendung von Gamma“ bedeutet, dass R, G und B jeweils in R'=Rgamma, G'=Ggamma, B'=Bgamma umgewandelt werden, bevor sie dem Betriebssystem bergeben werden. Das ist ganz einfach, indem man sich einmal pro Browseraufruf eine Nachschlagetabelle mit 256 Elementen erstellt: for i := 0 to 255 do raw := i / 255.0; corr := pow(raw, gamma); table[i] := trunc (0.5 + corr * 255.0) end

15 Schriften 15.1 Einf-hrung Wenn der Text eines Dokuments visuell dargestellt werden soll, mssen die einzelnen Zeichen (abstrakte Informationselemente) auf abstrakte Glyphen abgebildet werden. Ein oder mehr Zeichen k=nnen durch ein oder mehr abstrakte Glyphen in m=glicherweise kontextabh@ngiger Weise dargestellt werden. Ein Glyph ist die tats@chliche knstlerische Darstellung eines abstrakten Glyphen in einem typografischen Stil in Form von Umrissen oder Bitmaps, die auf den Bildschirm oder Papier gezeichnet werden. Eine Schrift (Font) besteht aus einem Satz von Glyphen, die alle demselben grundlegenden Motiv in Hinblick auf Entwurf, Gr=ße, Erscheinungsbild und anderen dem gesamten Satz zugeordneten Attributen entsprechen, sowie eine Zuordnung der Zeichen zu abstrakten Glyphen.

Schriften

< 727 >

Cascading Style Sheets, Level 2

Damit vermeidet man transzendentale Mathematik fr jedes Farbattribut, und schon gar pro Pixel.

Page size: 168,00 x 240,00 mm

Sandini Bib

Anmerkung der bersetzer: Der englische Begriff „Font“ wurde hier mit „Schrift“ bersetzt. An einigen Stellen kann dies zu Missverst@ndnissen und Verwechslungen mit verwandten Begriffen fhren. An solchen Stellen steht der englische Originalbegriff in Klammern hinter dem deutschen Begriff, so wie im vorhergehenden Absatz.

Ein visuelles Benutzerprogramm muss vor der Darstellung eines Zeichens die folgenden Aspekte bercksichtigen: Wurde fr dieses Zeichen (direkt oder per Vererbung) eine Schrift angegeben? Steht dem Benutzerprogramm diese Schrift zur Verfgung? Ist dies der Fall, auf welche(n) Glyphen wird dieses Zeichen bzw. diese Zeichenfolge abgebildet? Was ist zu tun, wenn dies nicht der Fall ist? Sollte stattdessen eine andere Schrift verwendet werden? Kann die Schrift nachgebildet werden? Kann sie aus dem Web geladen werden?

Cascading Style Sheets, Level 2

·· · ·

Sowohl in CSS1 als auch in CSS2 geben Autoren die Charakteristik einer Schrift unter Verwendung mehrerer Schrifteigenschaften an. Wie das Benutzerprogramm diese Eigenschaften verarbeitet, wenn es keine entsprechende Schrift auf dem Client gibt, wurde von CSS1 auf CSS2 erweitert. In CSS1 wurde vorausgesetzt, dass auf dem Client-System alle Schriften vorhanden seien, und sie wurden nur dem Namen nach identifiziert. Alternative Schriften konnten ber die Eigenschaften angegeben werden, aber darber hinaus hatten die Benutzerprogramme keine M=glichkeit, dem Benutzer außer generischen Standardschriften andere Schriften vorzuschlagen (selbst stilistisch @hnliche Schriften, die dem Benutzerprogramm zur Verfgung standen). In CSS2 hat sich dies alles ver@ndert, und es gibt sehr viel mehr Freiheiten fr: Stylesheet-Autoren, um die Schriften zu beschreiben, die verwendet werden sollen Benutzerprogramme bei der Auswahl einer Schrift, wenn die von einem Autor angeforderte Schrift nicht unmittelbar zur Verfgung steht

··

CSS2 verbessert die client-seitige Schriftbereinstimmung, erm=glicht eine Schriftsynthese und eine progressive Darstellung und erlaubt, dass Schriften ber das Web heruntergeladen werden. Diese verbesserten M=glichkeiten werden auch als „WebFonts“ bezeichnet. Im CSS2-Schriftmodell hat wie in CSS1 jedes Benutzerprogramm eine „Schriftdatenbank“ zur Verfgung. CSS1 hat auf diese Datenbank verwiesen, gab aber keine Details an, was darin enthalten war. CSS2 definiert die Information in dieser Datenbank und erlaubt es den Autoren von Stylesheets, sie zu erweitern. Wird ein Benutzerprogramm aufgefordert, ein Zeichen in einer bestimmten Schrift darzustellen, identifiziert das Benutzerprogramm zun@chst die Schrift in der Datenbank, die mit der angegebenen Schrift am besten bereinstimmt (gem@ß dem Schriftvergleichsalgorithmus). Nachdem es eine Schrift gefunden hat, l@dt es die Schriftdaten lokal oder aus dem Web und kann die Zeichen unter Verwendung dieser Glyphen anzeigen. Wegen dieses Modells haben wir die Spezifikation in zwei Teile unterteilt. Der erste besch@ftigt sich mit dem Mechanismus zur Angabe der Schrift, mit Hilfe dessen die Autoren festlegen k=nnen, welche Schrift sie in ihren Dokumenten verwenden wollen. Der zweite betrifft den Schriftauswahlmechanismus, mittels dessen das Benutzerprogramm des Clients eine Schrift identifiziert und l@dt, die der Spezifikation des Autors am besten entspricht.

< 728 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

Wie das Benutzerprogramm die Schriftdatenbank anlegt, kann im Rahmen dieser Spezifikation nicht beschrieben werden, weil die Implementierung der Datenbank von verschiedenen Faktoren abh@ngig ist, wie beispielsweise dem Betriebssystem, dem Fenstersystem und dem Client.

Die erste Phase des CSS-Schriftmechanismus besch@ftigt sich damit, wie Stylesheet-Autoren festlegen, welche Schriften von einem Benutzerprogramm verwendet werden sollten. Zun@chst scheint es, dass die offensichtlichste Methode zur Angabe einer Schrift w@re, ihren Namen anzugeben, einen einzelnen String, der in verschiedene Teile unterteilt ist, zum Beispiel „BT Swiss 721 Heavy Italic“. Leider gibt es keine wohldefinierte und universell akzeptierte Taxonomie fr die Klassifizierung von Schriften abh@ngig von ihren Namen, und Begriffe, die fr einen Schriftfamiliennamen gelten, sind fr andere m=glicherweise nicht geeignet. Beispielsweise wird der Begriff 'italic' (kursiv) im Allgemeinen verwendet, um kursiven Text zu beschreiben, aber kursiver Text kann auch als Oblique, Slanted, Incline, Cursive oder Kursiv bezeichnet werden. Analog enthalten Schriftnamen h@ufig Begriffe, die die „Gewichtung“ einer Schrift angeben. Die wichtigste Aufgabe dieser Namen ist es, Schriften unterschiedlicher Strichst@rke innerhalb einer einzelnen Schriftfamilie voneinander zu unterscheiden. Es gibt keine allgemein akzeptierte, universelle Bedeutung dieser Gewichtungsbezeichnungen, und ihre Verwendung variiert stark. Eine Schrift, die Sie als „Bold“ (fett) bezeichnen wrden, k=nnte auch die Attribute Regular, Roman, Book, Medium, Semi- oder Demi-Bold, Bold oder Black erhalten, abh@ngig davon, wie schwarz die „normale“ Schrift innerhalb ihres Designs erscheint. Dieses Fehlen einer systematischen Benennung macht es im Allgemeinen unm=glich, einen abgewandelten Schriftnamen zu erzeugen, der sich in bestimmter Hinsicht vom Standardnamen unterscheidet, beispielsweise durch eine fettere Darstellung. Aufgrund dessen verwendet CSS ein anderes Modell. Schriften werden nicht ber einen bestimmten Schriftnamen angefordert, sondern durch die Festlegung mehrerer Schrifteigenschaften. Diese Eigenschaftsnamen bilden die Grundlage fr den Schriftauswahlmechanismus des Benutzerprogramms. Die Schrifteigenschaften k=nnen einzeln abge@ndert werden, beispielsweise, um eine Schrift fetter zu machen; die neue Menge der Schrifteigenschaftsnamen wird dann dazu verwendet, um erneut eine Auswahl aus der Schriftdatenbank zu treffen. Das Ergebnis ist eine gesteigerte Regelm@ßigkeit fr Stylesheet-Autoren und -Implementierer und außerdem eine verbesserte Robustheit.

Anmerkung der bersetzer: Der Abschnitt 15.2 ist innerhalb dieses Kapitels fr den Stylesheet-Autor, der Formatierungen fr Web-Seiten festlegen m=chte, der wichtigste Abschnitt. Die darauffolgenden Abschnitte erfordern einerseits ein geh=riges Maß an typographischen Kenntnissen ber Schriften, andererseits kann man sich nicht auf die Untersttzung der fortgeschrittenen Features durch Web-Browser verlassen. In der blichen Praxis ist deshalb dieser Abschnitt maßgeblich.

Schriftspezifikation

< 729 >

Cascading Style Sheets, Level 2

15.2 Schriftspezifikation

Page size: 168,00 x 240,00 mm

Sandini Bib

15.2.1 Eigenschaften f-r die Schriftspezifikation

Cascading Style Sheets, Level 2

CSS2 spezifiziert Schriften abh@ngig von den folgenden Eigenschaften: Schriftfamilie (Font family) Die Schriftfamilie gibt an, welche Schriftfamilie fr die Darstellung des Texts verwendet werden soll. Eine Schriftfamilie ist eine Gruppe von Schriften, die darauf ausgelegt sind, dass sie kombiniert werden k=nnen und die vom Design her ahnlich sind. Ein Mitglied der Familie kann kursiv sein, ein anderes fett, ein wieder anderes komprimiert, oder vielleicht verwendet es Kapit@lchen. Schriftfamiliennamen sind beispielsweise „Helvetica“, „New Century Schoolbook“ oder „Kyokasho ICA L“. Schriftfamiliennamen sind nicht auf lateinische Zeichen begrenzt. Schriftfamilien k=nnen in unterschiedliche Kategorien eingeteilt werden: mit oder ohne Serifen, mit Zeichen, die proportional oder nicht proportional angeordnet sind, Schriften, die an eine Handschrift erinnern, Fantasieschriften usw. Schriftstil (Font style) Der Schriftstil gibt an, ob der Text normal, kursiv oder geneigt dargestellt werden soll. Italic (kursiv) ist eine kursivere Variante der normalen Schrift, aber nicht so kursiv wie eine Schreibschrift. Oblique ist eine geneigte Form der normalen Schrift und wird h@ufiger als begleitende Variante fr serifenlose Schriften verwendet. Diese Definition vermeidet, dass leicht geneigte normale Schriften als oblique bezeichnet werden oder normale griechische Schriften als kursiv. Schriftvariante (Font variant) Die Schriftvariante gibt an, ob der Text unter Verwendung der normalen Glyphen fr Kleinbuchstaben oder mit Kapit@lchen-Glyphen fr Kleinbuchstaben dargestellt werden soll. Eine Schrift enth@lt m=glicherweise nur normale Glyphen oder nur Kapit@lchen oder beide Arten von Glyphen; diese Eigenschaft wird genutzt, um eine geeignete Schrift anzufordern, und, falls die Schrift beide Varianten enth@lt, die geeigneten Glyphen. Schriftgewichtung (Font weight) Die Schriftgewichtung bezieht sich darauf, wie fett oder wie dnn die fr die Darstellung des Texts verwendeten Glyphen relativ zu anderen Schriften derselben Schriftfamilie sind. Schriftdehnung (Font stretch) Die Schriftdehnung gibt an, wie stark die fr die Darstellung des Texts verwendeten Glyphen zusammengeschoben oder auseinandergezogen werden, relativ zu anderen Schriften derselben Schriftfamilie. SchriftgrUße (Font size) Die Schriftgr=ße bezieht sich auf die Gr=ße der Schrift von Grundlinie zu Grundlinie, wenn sie durchgezogen dargestellt ist (in CSS-Terminologie ist dies der Fall, wenn die Eigenschaften 'font-size' und 'line-height' denselben Wert haben). Fr alle Eigenschaften außer 'font-size' beziehen sich 'em'- und 'ex'-L@ngenwerte auf die Schriftgr=ße des aktuellen Elements. Fr 'font-size' beziehen sich diese L@ngeneinheiten auf die Schriftgr=ße des bergeordneten Elements. Weitere Informationen finden Sie im Abschnitt ber L@ngeneinheiten. Die CSS-Schrifteigenschaften werden verwendet, um das gewnschte Erscheinungsbild von Text im Dokument zu beschreiben. Die Schriftdeskriptoren dagegen werden verwendet, um die Charakteristiken von Schriften zu beschreiben, so dass eine geeignete Schrift gew@hlt werden kann, um das gewnschte Erscheinungsbild zu erzeugen. Weitere Informationen ber die Klassifizierung von Schriften finden Sie im Abschnitt ber Schriftdeskriptoren.

< 730 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

15.2.2 Schriftfamilie: die Eigenschaft 'font-family' 'font-family' Wert:

[[ | ,]* [ | ] | inherit

Ausgangswert:

Vom Benutzerprogramm abh@ngig

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

Beispiel Fr Text beispielsweise, der deutsche W=rter kombiniert mit mathematischen Symbolen enth@lt, k=nnte es sein, dass eine Schriftmenge mit zwei Schriften ben=tigt wird, eine mit lateinischen Buchstaben und Ziffern, die andere mit mathematischen Symbolen. Nachfolgend sehen Sie ein Beispiel fr eine Schriftmenge, die fr einen Text geeignet ist, von dem man erwartet, dass er Text mit lateinischen Buchstaben, japanischen Zeichen sowie mathematischen Symbolen enth@lt: BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }

Die in der Schrift „Baskerville“ verfgbaren Glyphen (diese Schrift deckt nur lateinische Buchstaben ab) werden dieser Schrift entnommen, japanische Buchstaben werden aus „Heisi Mincho W3“ entnommen, und die mathematischen Symbol-Glyphen stammen aus „Symbol“. Alle anderen stammen aus der generischen Schriftfamilie 'serif'. Die generische Schriftfamilie wird verwendet, wenn eine oder mehrere der anderen Schriften in einem Schriftsatz nicht zur Verfgung stehen. Obwohl viele Schriften den Glyph fr ein „fehlendes Zeichen“ bereitstellen, in der Regel ein kleines, nicht ausgeflltes Rechteck, sollte dieses, wie der Name sagt, nicht als bereinstimmung betrachtet werden, außer in der letzten ausgewerteten Schrift in einem Schriftsatz.

Schriftspezifikation

< 731 >

Cascading Style Sheets, Level 2

Diese Eigenschaft gibt eine Liste mit bevorzugten Familiennamen und/oder generischen Familiennamen an. Es k=nnen verschiedene Probleme auftreten, etwa dass eine einzige Schrift m=glicherweise nicht gengend Glyphen enth@lt, um alle Zeichen in einem Dokument darzustellen, oder dass nicht alle Schriften auf allen Systemen zur Verfgung stehen. Um mit solchen Problemen umgehen zu k=nnen, erlaubt diese Eigenschaft den Autoren, eine Liste mit Schriften anzugeben, alle mit demselben Stil und derselben Gr=ße, die nacheinander ausprobiert werden, um zu berprfen, ob sie eine Glyphe fr ein bestimmtes Zeichen enthalten. Diese Liste wird auch als Schriftmenge (Font set) bezeichnet.

Page size: 168,00 x 240,00 mm

Sandini Bib

Es gibt zwei Arten von Schriftfamiliennamen:

Der Name der gew@hlten Schriftfamilie. Im vorigen Beispiel waren „Baskerville“, „Heisi Mincho W3“ und „Symbol“ Schriftfamilien. Schriftfamiliennamen, in denen Leeraum enthalten ist, sollten in Anfhrungszeichen gesetzt werden. Werden die Anfhrungszeichen weggelassen, werden alle Leeraumzeichen vor und hinter dem Schriftnamen ignoriert, und eine beliebige Folge von Leeraumzeichen innerhalb des Schriftnamens wird in ein einzelnes Leerzeichen umgewandelt.

Die nachfolgenden generischen Familien sind definiert: 'serif', 'sans-serif', 'cursive', 'fantasy' und 'monospace'. Eine Beschreibung dieser Familien finden Sie im Abschnitt ber generische Schriftfamilien (15.2.6). Die Namen generischer Schriftfamilien sind Schlsselw=rter und mssten deshalb nicht in Anfhrungszeichen stehen. Den Autoren ist zu empfehlen, dass sie mindestens eine generische Schriftfamilie als letzte Alternative angeben, um eine gesteigerte Robustheit zu gew@hrleisten.

Cascading Style Sheets, Level 2

Beispiel

Font test

Test

Was ist los, Doc?

Anmerkung der bersetzer: Hier sei darauf hingewiesen, dass nicht nur die Schriften, die auf unterschiedlichen Systemen installiert sind, voneinander abweichen k=nnen, auch kann eine Schrift unter verschiedenen Namen bekannt sein. Das Problem wird in sp@teren Abschnitten dieses Kapitels thematisiert. Die oben benutzte New Century Schoolbook kann zum Beispiel auch kurz „NewCent“ heißen; gegebenenfalls auch abh@ngig von Systembeschr@nkungen wie maximalen Dateinamenl@ngen. Gerade vor diesem Hintergrund ist die Empfehlung, eine generische Schriftfamilie anzugeben, nur zu unterstreichen.

Die umfangreichere Selektorsyntax von CSS2 kann genutzt werden, um eine sprachabh@ngige Typographie zu realisieren. Beispielsweise sind einige chinesische und japanische Zeichen unter demselben Unicode-Codepunkt zusammengefasst, obwohl die abstrakten Glyphen in den beiden Sprachen nicht gleich sind:

< 732 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif } *:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif }

Damit werden alle Elemente ausgew@hlt, die in der betreffenden Sprache enthalten sind – Japanisch oder traditionelles Chinesisch –, und eine geeignete Schrift wird angefordert.

15.2.3 Schriftstile: die Eigenschaften 'font-style', 'font-variant', 'font-weight' und 'font-stretch' 'font-style' Wert:

normal | italic | oblique | inherit

Ausgangswert:

Normal

Angewendet auf:

Alle Elemente

Vererbt

Ja

Prozents,tze

N/A

Medium:

Visual

normal Gibt eine Schrift an, die in der Schriftdatenbank des Benutzerprogramms als 'normal' klassifiziert ist. oblique Gibt eine Schrift an, die in der Schriftdatenbank des Benutzerprogramms als 'oblique' klassifiziert ist. Schriften mit den W=rtern Oblique, Slanted oder Incline in ihren Namen werden in der Schriftdatenbank h@ufig als 'oblique' bezeichnet. Eine in der Schriftdatenbank des Benutzerprogramms als 'oblique' bezeichnete Schrift kann durch das elektronische „Neigen“ einer normalen Schrift entstanden sein. italic Gibt eine Schrift an, die in der Schriftdatenbank des Benutzerprogramms als 'italic' klassifiziert ist, oder, falls diese nicht verfgbar ist, eine, die als 'oblique' gekennzeichnet ist. Schriften mit Italic, Cursive oder Kursiv in ihren Namen werden normalerweise als 'italic' gekennzeichnet. Beispiel In diesem Beispiel wird normaler Text in einem H1-, H2- oder H3-Element in kursiver Schrift dargestellt. Betonter Text (EM) in einem H1-Element dagegen erscheint in normaler Schrift. H1, H2, H3 { font-style: italic } H1 EM { font-style: normal }

Schriftspezifikation

< 733 >

Cascading Style Sheets, Level 2

Die Eigenschaft 'font-style' fordert normale (manchmal auch als „roman“ oder „upright“ bezeichnet), kursive und geneigte Darstellungen innerhalb einer Schriftfamilie an. Die Werte haben die folgenden Bedeutungen:

Page size: 168,00 x 240,00 mm

Sandini Bib

'font-variant' Wert :

normal | small-caps | inherit

Ausgangswert:

Normal

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

In einer Schrift mit Kapit@lchen sehen die Glyphen fr die Kleinbuchstaben @hnlich wie die fr die Großbuchstaben aus, aber sie sind etwas kleiner und haben etwas andere Proportionen. Die Eigenschaft 'font-variant' fordert eine Schrift fr Situationen an, in denen zwischen Großund Kleinschreibung unterschieden wird, wie beispielsweise bei der lateinischen Schrift. Diese Eigenschaft hat keine sichtbaren Effekte in Dokumenten, in denen es keine Groß- und Kleinschreibung gibt, wie bei den meisten Schreibsystemen der Welt. Die Werte haben die folgenden Bedeutungen:

Cascading Style Sheets, Level 2

normal Gibt eine Schrift an, die nicht als Kapit@lchenschrift gekennzeichnet ist. small-caps Gibt eine Schrift an, die als Kapit@lchenschrift gekennzeichnet ist. Steht keine eigene Kapit@lchenschrift zur Verfgung, sollten die Benutzerprogramme eine Kapit@lchenschrift simulieren, indem sie beispielsweise eine normale Schrift verwenden und die Kleinbuchstaben durch verkleinerte Großbuchstaben ersetzen. Als letzten Ausweg k=nnen nicht verkleinerte Großbuchstaben-Glyphen in einer normalen Schrift die Glyphen in einer Kapit@lchenschrift ersetzen, so dass der Text aussieht, als sei er nur in Großbuchstaben geschrieben. Beispiel Das nachfolgende Beispiel erzeugt ein H3-Element in Kapit@lchen mit betonten W=rtern (EM) in geneigten Kapit@lchen: H3 { font-variant: small-caps } EM { font-style: oblique }

Wenn diese Eigenschaft bewirkt, dass Text in Großbuchstaben umgewandelt wird, gelten dieselben Betrachtungen wie fr 'text-transform'.

< 734 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

'font-weight' Wert:

normal | bold | bolder | lighter |100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

Ausgangswert:

Normal

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

100 bis 900 Diese Werte bilden eine sortierte Abfolge, wobei jede Zahl eine Gewichtung angibt, die mindestens so dunkel wie ihre Vorg@ngerin ist. normal Wie '400'. bold Wie '700'. bolder Gibt die n@chste Gewichtung an, die einer Schrift zugeordnet ist, die dunkler als die geerbte ist. Falls es keine solche Gewichtung gibt, wird einfach der n@chstdunklere numerische Wert angenommen (und die Schrift bleibt unver@ndert), es sei denn, der geerbte Wert war '900', dann ist die resultierende Gewichtung ebenfalls '900'. lighter Gibt die n@chste Gewichtung an, die einer Schrift zugeordnet ist, die heller als die geerbte ist. Falls es keine solche Gewichtung gibt, wird einfach der n@chst hellere numerische Wert verwendet (und die Schrift bleibt unver@ndert), es sei denn, der geerbte Wert war '100', dann ist die resultierende Gewichtung ebenfalls '100'. Beispiel P { font-weight: normal } /* 400 */ H1 { font-weight: 700 } /* fett */ BODY { font-weight: 400 } STRONG { font-weight: bolder } /* 500 falls verfUgbar */

Untergeordnete Elemente erben den berechneten Wert der Gewichtung.

Schriftspezifikation

< 735 >

Cascading Style Sheets, Level 2

Die Eigenschaft 'font-weight' gibt die Gewichtung der Schrift an. Die Werte haben die folgenden Bedeutungen:

Page size: 168,00 x 240,00 mm

Sandini Bib

'font-stretch' Wert

normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | extraexpanded | ultra-expanded | inherit

Ausgangswert

Normal

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

Cascading Style Sheets, Level 2

Die Eigenschaft 'font-stretch' w@hlt eine normale, komprimierte oder gedehnte Darstellung aus einer Schriftfamilie. Absolute Schlsselwortwerte haben die folgende Reihenfolge, von der komprimiertesten bis hin zur am weitesten gedehnten Schrift: 1. ultra-condensed 2. extra-condensed 3. condensed 4. semi-condensed 5. normal 6. semi-expanded 7. expanded 8. extra-expanded 9. ultra-expanded Das relative Schlsselwort 'wider' setzt den Wert auf den n@chstweiter gedehnten Wert oberhalb des geerbten Werts (wobei bei 'ultra-expanded' keine weitere Steigerung m=glich ist); das relative Schlsselwort 'narrower' setzt den Wert auf den n@chstst@rker komprimierten Wert unterhalb des geerbten Werts (wobei unterhalb 'ultra-condensed' keine weitere Komprimierung erfolgt).

15.2.4 SchriftgrUße: die Eigenschaften 'font-size' und 'font-size-adjust' 'font-size' Wert:

| | | | inherit

Ausgangswert:

Medium

Angewendet auf:

Alle Elemente

Vererbt:

Ja, der berechnete Wert ist geerbt

Prozentwerte:

Bezieht sich auf die Schriftgr=ße des bergeordneten Elements

Medium

Visual

< 736 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

Diese Eigenschaft beschreibt die Gr=ße der Schrift bei der Darstellung in voller Zeilenh=he. Die Werte haben die folgenden Bedeutungen:

Ein -Schlsselwort bezieht sich auf einen Eintrag in einer Tabelle mit Schriftgr=ßen, die vom Benutzerprogramm berechnet und verwaltet werden. M=gliche Werte sind: [xx-small | x-small | small | medium | large | x-large | xx-large] Auf einem Computerbildschirm wird ein Skalierungsfaktor von 1.2 zwischen benachbarten Indizes empfohlen; wenn die Schrift 'medium' 12pt groß ist, k=nnte die Schrift 'large' 14.4pt groß sein. Unterschiedliche Medien brauchen m=glicherweise unterschiedliche Skalierungsfaktoren. Außerdem sollte das Benutzerprogramm bei der Berechnung der Tabelle die Qualit@t und die Verfgbarkeit von Schriften bercksichtigen. Die Tabelle kann sich zwischen einzelnen Schriftfamilien unterscheiden.

Ein -Schlsselwort wird als relativ zur Tabelle der Schriftgr=ßen und der Schriftgr=ße des bergeordneten Elements interpretiert. M=gliche Werte sind: [larger | smaller] Hat das bergeordnete Element beispielsweise die Schriftgr=ße 'medium', macht der Wert 'larger' die Schriftgr=ße des aktuellen Elements 'large'. Liegt die Gr=ße eines bergeordneten Elements nicht nahe an einem Tabelleneintrag, steht es dem Benutzerprogramm frei, zwischen Tabelleneintr@gen zu interpolieren und auf den n@chsten aufzurunden. Das Benutzerprogramm muss m=glicherweise Tabellenwerte extrapolieren, wenn die numerischen Werte ber die Schlsselw=rter hinausgehen.

Ein L@ngenwert gibt eine absolute Schriftgr=ße an (die von der Schrifttabelle des Benutzerprogramms unabh@ngig ist). Negative L@ngen sind nicht erlaubt.

Ein Prozentwert gibt eine absolute Schriftgr=ße relativ zur Schriftgr=ße des bergeordneten Elements an. Die Verwendung von Prozentwerten oder Werten in 'em's fhrt zu robusteren und kaskadierbareren Stylesheets. Der tats@chliche Wert dieser Eigenschaft kann sich von dem berechneten Wert aufgrund eines numerischen Wertes von 'font-size-adjust' und der Unverfgbarkeit mancher Schriftgr=ßen unterscheiden. Untergeordnete Werte erben den berechneten 'font-size'-Wert (andernfalls w@re der Effekt von 'font-size-adjust' vermischt). Beispiel P { font-size: 12pt; } BLOCKQUOTE { font-size: larger } EM { font-size: 150% } EM { font-size: 1.5em }

Schriftspezifikation

< 737 >

Cascading Style Sheets, Level 2

Hinweis: In CSS1 lag der empfohlene Skalierungsfaktor zwischen benachbarten Indizes bei 1,5, was sich der Erfahrung der Benutzer nach als zu groß erwies. n

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

'font-size-adjust' Wert:

| none | inherit

Ausgangswert:

None

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

In Schriften mit Groß-/Kleinschreibung sind die subjektive sichtbare Gr=ße und Lesbarkeit einer Schrift weniger von ihrem 'font-size'-Wert abh@ngig, als vielmehr vom Wert ihrer 'x-height', oder, was praktischer ist, vom Verh@ltnis dieser beiden Werte, dem so genannten Aspektwert (Schriftgr=ße dividiert durch x-height). Je h=her der Aspektwert ist, desto wahrscheinlicher ist es, dass eine Schrift bei kleineren Gr=ßen leserlich ist. Umgekehrt gilt, dass Schriften mit einem kleinen Aspektwert schneller unterhalb einer vorgegebenen Schwellwertgr=ße unleserlich werden als Schriften mit einem h=heren Aspektwert. Eine einfache Schriftersetzung, die sich nur nach der Schriftgr=ße richtet, k=nnte also zu unleserlichen Zeichen fhren. Die bekannte Schrift Verdana beispielsweise hat einen Aspektwert von 0,58; wenn die Schriftgr=ße von Verdana 100 Einheiten entspricht, dann entspricht ihre x-height 58 Einheiten. Im Vergleich dazu hat Times New Roman einen Aspektwert von 0,46. Verdana bleibt deshalb tendenziell bei kleineren Gr=ßen besser lesbar als Times New Roman. Im Gegenzug dazu erscheint Verdana h@ufig als „zu groß“, wenn sie anstelle von Times New Roman in einer zuvor festgelegten Gr=ße eingesetzt wird. Diese Eigenschaft erlaubt den Autoren, einen Aspektwert fr ein Element anzugeben, der die x-height der Schrift der ersten Wahl in der Ersatzschrift beibeh@lt. Die Werte haben die folgenden Bedeutungen: none Beh@lt die x-height der Schrift nicht bei.

Gibt den Aspektwert an. Die Zahl bezieht sich auf den Aspektwert der Schrift der ersten Wahl. Der Skalierfaktor fr verfgbare Schriften wird gem@ß der folgenden Formel berechnet: y(a/a') = c

Wobei Folgendes gilt: y = 'font-size' oder Schrift der ersten Wahl a' = Aspektwert der verfUgbaren Schrift c = 'font-size', die auf die verfUgbare Schrift angewendet wird

Steht beispielsweise 14px Verdana (mit einem Aspektwert von 0,58) nicht zur Verfgung und die verfgbare Schrift hat den Aspektwert 0,46, w@re die Schriftgr=ße des Ersatzes 14 & (0,58/0,46) = 17,65px.

< 738 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

Anpassungen der Schriftgr=ße finden statt, wenn der tats@chliche Wert von 'font-size' berechnet wird. Weil die Vererbung auf dem berechneten Wert basiert, erben die untergeordneten Elemente nicht angepasste Werte. Das erste der nachfolgenden Bilder zeigt mehrere Schriften, dargestellt in einer gebr@uchlichen Schriftgr=ße (11 pt bei 72 ppi), zusammen mit ihren Aspektwerten. Beachten Sie, dass die Schriften mit h=heren Aspektwerten gr=ßer erscheinen als die mit kleineren. Schriften mit sehr kleinen Aspektwerten sind in der gezeigten Gr=ße unleserlich.

Schriftspezifikation

< 739 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

Das n@chste Bild zeigt die Ergebnisse von 'font-size-adjust', wobei Verdana als „erste Wahl“ gilt, zusammen mit dem angewendeten Skalierfaktor. Weil sie angepasst sind, sind die sichtbaren Schriften ann@hernd linear ber die verschiedenen Schriften, obwohl die tats@chlichen (em-) Gr=ßen um mehr als 100% variieren. Beachten Sie, dass 'font-size-adjust' dazu tendiert, auch die horizontale Zeilenmetrik zu stabilisieren.

< 740 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

15.2.5 Zusammenfassende Schrift-Eigenschaft: die Eigenschaft 'font' 'font' Wert:

[[ | | | | ]? [/ ]? ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

Ausgangswert:

Siehe einzelne Eigenschaften

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte

Erlaubt fr 'font-size' und 'line-height'

Medium

Visual

Beispiel P P P P P P

{ { { { { {

font: font: font: font: font: font:

12pt/14pt sans-serif } 80% sans-serif } x-large/110% "new century schoolbook", serif } bold italic large Palatino, serif } normal small-caps 120%/120% fantasy } oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

In der zweiten Regel bezieht sich der Prozentwert fr die Schriftgr=ße ('80%') auf die Schriftgr=ße des bergeordneten Elements. In der dritten Regel bezieht sich der Prozentwert fr die Zeilenh=he ('110%') auf die Schriftgr=ße des eigentlichen Elements. Die ersten drei Regeln treffen keine expliziten Angaben fr 'font-variant' und 'font-weight', deshalb erhalten diese Eigenschaften ihre Ausgangswerte ('normal'). Beachten Sie, dass der Schriftfamilienname „new century schoolbook“, der Leerzeichen enth@lt, in Anfhrungszeichen eingeschlossen ist. Die vierte Regel setzt 'font-weight' auf 'bold', 'font-style' auf 'italic' und 'fontvariant' implizit auf 'normal'.

Schriftspezifikation

< 741 >

Cascading Style Sheets, Level 2

Die Eigenschaft 'font' ist, von nachfolgend beschriebenen Ausnahmen abgesehen, eine zusammenfassende Eigenschaft fr die Einstellung von 'font-style', 'font-variant', 'font-weight', 'fontsize', 'line-height' und 'font-family' an einer gemeinsamen Stelle im Stylesheet. Die Syntax dieser Eigenschaft basiert auf einer traditionellen typografischen zusammenfassenden Notation, um mehrere Eigenschaften fr Schriften zu setzen. Alle auf die Schrift bezogenen Eigenschaften werden zun@chst auf ihre Ausgangswerte zurckgesetzt, auch die im vorigen Abschnitt aufgelisteten sowie 'font-stretch' und 'font-size-adjust'. Anschließend erhalten Eigenschaften, denen in der zusammenfassenden Eigenschaft 'font' explizit Werte zugeordnet sind, genau diese Werte. Eine Definition der erlaubten und der Ausgangswerte finden Sie in den zuvor definierten Eigenschaften. Aus Grnden der Abw@rtskompatibilit@t ist es nicht m=glich, 'font-stretch' und 'font-size-adjust' unter Verwendung von 'font' auf andere als ihre Ausgangswerte zu setzen; stattdessen setzen Sie dafr die separaten Eigenschaften.

Page size: 168,00 x 240,00 mm

Sandini Bib

Die fnfte Regel setzt 'font-variant' ('small-caps'), 'font-size' (120% der Schriftgr=ße des bergeordneten Elements), 'line-height' (120% der Schriftgr=ße) und die 'font-family' ('fantasy'). Es folgt, dass sich das Schlsselwort 'normal' auf die beiden restlichen Eigenschaften bezieht, 'fontstyle' und 'font-weight'. Die sechste Regel setzt 'font-style', 'font-size' und 'font-family', die anderen Schrifteigenschaften werden auf ihre Ausgangswerte gesetzt. Anschließend setzt sie 'font-stretch' auf 'condensed', weil diese Eigenschaft nicht mit Hilfe der zusammenfassenden Eigenschaft 'font' auf diesen Wert gesetzt werden kann. Die nachfolgenden Werte beziehen sich auf Systemschriften:

Cascading Style Sheets, Level 2

caption Die fr Steuerelemente mit Beschriftungen verwendete Schrift (z. B. Schaltfl@chen, Dropdown-Steuerelemente usw.). icon Die fr die Beschriftung von Icons verwendete Schrift. menu Die in Mens verwendete Schrift (z. B. Dropdown-Mens oder Menlisten). message-box Die in Dialogfeldern verwendete Schrift. small-caption Die fr die Beschriftung kleiner Steuerelemente verwendete Schrift. status-bar Die fr Fensterstatusleisten verwendete Schrift.

Anmerkung der bersetzer: Mit diesen Werten ist es m=glich, fr Teile einer Webseite die gleichen Schriften zu verwenden, wie sie fr das Fenstersystem (etwa Windows oder X) benutzt werden, das auf dem Rechner des Betrachters l@uft. Beachten Sie in diesem Zusammenhang auch Kapitel 18.

Systemschriften k=nnen nur als Ganzes gesetzt werden; das bedeutet, die Schriftfamilie, Gr=ße, Gewichtung, Stil usw. werden gleichzeitig gesetzt. Diese Werte k=nnen gegebenenfalls einzeln ver@ndert werden. Gibt es auf einer bestimmten Plattform keine Schrift mit den vorgegebenen Charakteristika, sollte das Benutzerprogramm entweder intelligent ersetzen (z. B. k=nnte fr die 'small-caption'-Schrift eine kleinere Version der 'caption'-Schrift verwendet werden) oder aber seine Standardschrift verwenden. Wie fr regul@re Schriften gilt auch fr eine Systemschrift, dass, wenn eine der einzelnen Eigenschaften nicht Teil der verfgbaren Benutzereinstellungen des Betriebssystems sind, diese Eigenschaften auf ihre Ausgangswerte gesetzt werden sollten. Deshalb ist diese Eigenschaft „fast“ eine zusammenfassende Eigenschaft: Systemschriften k=nnen nur mit dieser Eigenschaft angegeben werden, nicht mit 'font-family' selbst, deshalb erlaubt 'font' den Autoren, mehr als die Summe seiner enthaltenen Eigenschaften zu setzen. Die einzelnen Eigenschaften wie beispielsweise 'font-weight' erhalten dennoch Werte, die aus der Systemschrift stammen und unabh@ngig variiert werden k=nnen.

< 742 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif } BUTTON P { font: menu } BUTTON P EM { font-weight: bolder }

Wenn die fr Dropdown-Mens verwendete Schrift auf einem bestimmten System beispielsweise 9 Punkt Charcoal ist, mit einer Gewichtung von 600, wrden die P-Elemente, die Ableitungen von BUTTON sind, so dargestellt, als g@lte die folgende Regel: BUTTON P { font: 600 9pt Charcoal }

Weil die zusammenfassende Eigenschaft 'font' jede Eigenschaft, der nicht explizit ein Wert zugewiesen wird, auf ihren Ausgangswert zurcksetzt, hat das denselben Effekt wie die folgende Deklaration: BUTTON P { font-style: normal; font-variant: normal; font-weight: 600; font-size: 9pt; line-height: normal; font-family: Charcoal }

Generische Schriftfamilien sind ein Rckgriffsmechanismus. Sie sind eine M=glichkeit, wenigstens einen Teil der Absichten des Stylesheet-Autors zu realisieren, falls im schlimmsten Fall keine der angegebenen Schriften ausgew@hlt werden kann. Einer optimalen typografischen Steuerung halber sollten in Stylesheets bestimmte benannte Schriften verwendet werden. Alle fnf generischen Schriftfamilien sind so definiert, dass es sie in allen CSS-Implementierungen gibt (sie mssen nicht unbedingt auf fnf verschiedene existierende Schriften abgebildet werden). Benutzerprogramme sollten sinnvolle Standardauswahlen fr die generischen Schriftfamilien bereitstellen, die die Charakteristika jeder Familie so gut wie m=glich ausdrcken, innerhalb der Grenzen, die die zugrunde liegende Technologie aufweist. Den Benutzerprogrammen wird nahe gelegt, den Benutzern zu erlauben, alternative Auswahlen fr die generischen Schriften festzulegen.

serif Glyphen von Serifen-Schriften, wie der Begriff in CSS verwendet wird, haben Abschlussstriche, ausgestellte oder spitz zulaufende Enden oder tats@chlich Serifen-Endungen (inklusive Slab Serifs). Serifen-Schriften sind normalerweise proportional. H@ufig weisen sie eine gr=ßere Variation zwischen dicken und dnnen Strichen als Schriften aus der generischen Schriftfamilie 'sans-serif' (serifenlos) auf. CSS verwendet den Begriff 'serif' fr eine Schrift einer beliebigen Sprachschrift (script), obwohl andere Namen vertrauter fr bestimmte Sprachschriften (script) sein k=nnen, wie beispielsweise Mincho (Japanisch), Sung oder Song (Chinesisch), Totum oder Kodig (Koreanisch). Jede auf diese Weise beschriebene Schrift kann verwendet werden, um die generische 'serif'-Familie darzustellen.

Schriftspezifikation

< 743 >

Cascading Style Sheets, Level 2

15.2.6 Generische Schriftfamilien

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiele fr Schriften, die dieser Beschreibung entsprechen, sind unter anderem: Lateinische Schriften

Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstram, Cyberbit

Griechische Schriften

Bitstream Cyberbit

Kyrillische Schriften

Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst

Hebr@ische Schriften

New Peninim, Raanana, Bitstream Cyberbit

Japanische Schriften

Ryumin Light-KL, Kyokasho ICA, Futo Min A101

Arabische Schriften

Bitstream Cyberbit

Cherokee-Schriften

Lo Cicero Cherokee

sans-serif

Cascading Style Sheets, Level 2

Glyphen in serifenlosen Schriften, wie der Begriff in CSS verwendet wird, haben Strichenden, die gerade sind – ohne spitzes Zulaufen, vertikale Abschlussstriche oder andere Verzierungen. Serifenlose Schriften sind in der Regel proportional. H@ufig weisen sie im Vergleich mit Schriften aus der 'serif'-Familie geringere Abweichungen zwischen dicken und dnnen Strichen auf. CSS verwendet den Begriff 'sans-serif', um auf eine Schrift fr eine beliebige Sprachschrift (script) zu verweisen, obwohl fr bestimmte Sprachschriften (script) andere Namen m=glicherweise gebr@uchlicher sind, wie beispielsweise Gothic (Japanisch), Kai (Chinesisch) oder Pathang (Koreanisch). Jede auf diese Weise beschriebene Schrift kann verwendet werden, um die generische 'sans-serif'-Familie darzustellen. Beispiele fr Schriften, die dieser Beschreibung entsprechen, sind unter anderem: Lateinische Schriften

MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica

Griechische Schriften

Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek

Kyrillische Schriften

Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion

Hebr@ische Schriften

Arial Hebrew, MS Tahoma

Japanische Schriften

Shin Go, Heisei Kaku Gothic W5

Arabische Schriften

MS Tahoma

cursive Glyphen in kursiven Schriften, wie der Begriff in CSS verwendet wird, haben im Allgemeinen entweder verbindende Striche oder andere kursive Charakteristika, die ber diejenigen von geneigten Schriften hinausgehen. Die Glyphen sind teilweise oder vollst@ndig verbunden, und das Ergebnis sieht mehr wie eine Handschrift oder eine Pinselschrift aus, als wie ein gedrucktes Buchstabenwerk. Schriften fr einige Sprachschriften (script), wie beispielsweise Arabisch, sind fast immer kursiv. CSS verwendet den Begriff 'cursive' fr eine Schrift fr Sprachschriften (script), obwohl in Schriftnamen auch andere Namen verwendet werden wie beispielsweise Chancery, Brush, Swing oder Script.

< 744 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiele fr Schriften, die dieser Beschreibung entsprechen, sind unter anderem: Lateinische Schriften

Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery

Kyrillische Schriften

ER Architekt

Hebr@ische Schriften

Corsiva

Arabische Schriften

DecoType Naskh, Monotype Urdu 507

fantasy Fantasy-Schriften, wie sie in CSS verwendet werden, sind haupts@chlich dekorativ, enthalten aber immer noch Zeichendarstellungen (im Gegensatz zu Pi- oder Picture-Schriften, die keine Buchstaben darstellen). Beispiele sind unter anderem: Lateinische Schriften

Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz

monospace

Lateinische Schriften

Courier, MS Courier New, Prestige, Everson Mono

Griechische Schriften

MS Courier New, Everson Mono

Kyrillische Schriften

ER Kurier, Everson Mono

Japanische Schriften

Osaka Monospaced

Cherokee-Schriften

Everson Mono

15.3 Schriftauswahl Die zweite Phase des CSS2-Schriftmechanismus betrifft die Schriftauswahl, die ein Benutzerprogramm abh@ngig von den vom Autor angegebenen Schrifteigenschaften, verfgbaren Schriften und so weiter trifft. Die Details fr den Schriftvergleichalgorithmus finden Sie im Folgenden beschrieben. Es gibt vier m=gliche Aktionen fr die Schriftauswahl: Namensvergleich, intelligenter Vergleich, Synthese und Download.

Schriftnamensvergleich In diesem Fall verwendet das Benutzerprogramm eine bereits existierende, verfgbare Schrift, die denselben Familiennamen wie die angeforderte Schrift hat. (Beachten Sie, dass das Erscheinungsbild und die Metrik m=glicherweise nicht bereinstimmen, wenn die Schrift, die der Autor

Schriftauswahl

< 745 >

Cascading Style Sheets, Level 2

Das einzige Kriterium fr eine Monospace-Schrift ist, dass alle Glyphen dieselbe feste Breite aufweisen. (Das kann dazu fhren, dass einige Schriften, wie beispielsweise Arabisch, eher seltsam aussehen.) Der Effekt ist ein Schriftbild @hnlich dem einer manuellen Schreibmaschine. Diese Schrift wird h@ufig verwendet, um Beispiele fr Computercode darzustellen. Beispiele fr Schriften, die dieser Beschreibung entsprechen, sind unter anderem:

Page size: 168,00 x 240,00 mm

Sandini Bib

des Dokuments verwendet hat, und die Schrift auf dem Client-System aus unterschiedlichen Quellen stammen.) Die Vergleichsinformation ist auf die CSS-Schrifteigenschaften beschr@nkt, inklusive des Familiennamens. Dies ist die einzige Methode, die in CSS1 verwendet wird.

Intelligenter Schriftvergleich In diesem Fall verwendet das Benutzerprogramm eine existierende, verfgbare Schrift, die die beste bereinstimmung mit dem Erscheinungsbild der angeforderten Schrift ergibt. (Beachten Sie, dass die Metrik m=glicherweise nicht genau bereinstimmt.) Die Vergleichsinformation enth@lt Informationen ber die Art der Schrift (Text oder Symbol), die Art der Serifen, die Gewichtung, die Buchstabenh=he, die x-H=he, Steigung, Gef@lle, Neigung usw.

Schriftsynthese In diesem Fall erzeugt das Benutzerprogramm eine Schrift, die nicht nur ein ganz @hnliches Erscheinungsbild aufweist, sondern auch in der Metrik mit der angeforderten Schrift bereinstimmt. Die Syntheseinformation beinhaltet die Vergleichsinformationen und fordert normalerweise genauere Werte fr die Parameter, als fr andere Vergleichsschemata verwendet werden. Insbesondere fordert die Synthese eine exakte Breitenmetrik und einen exakten Ersatz von Zeichen durch Glyphen sowie Positionsinformationen, wenn alle Layouteigenschaften der angegebenen Schrift beibehalten werden sollen.

Cascading Style Sheets, Level 2

Schrift-Download Schließlich kann das Benutzerprogramm eine Schrift ber das Web laden. Das entspricht in etwa dem Prozess, der abl@uft, wenn Bilder, Sounds oder Applets ber das Web geladen werden, um sie im aktuellen Dokument anzuzeigen. Es kann hier deshalb ebenso zu gewissen Verz=gerungen kommen, bevor die Seite angezeigt wird. Die progressive Darstellung ist eine Kombination aus Download und einer der anderen Methoden; sie stellt tempor@r eine Ersatzschrift bereit (wozu der Namensvergleich, intelligenter Vergleich oder Synthese verwendet werden), so dass der Inhalt bereits gelesen werden kann, w@hrend die gewnschte Schrift heruntergeladen wird. Nachdem die ben=tigte Schrift erfolgreich heruntergeladen wurde, ersetzt sie die tempor@re Schrift, hoffentlich ohne dass eine Neudarstellung der Seite erforderlich wird. Hinweis: Fr die progressive Darstellung wird Metrikinformation ber die Schrift ben=tigt, um einen erneuten Layout-Aufbau des Inhalts zu vermeiden, wenn die gewnschte Schrift geladen und dargestellt wurde. Diese Metrikinformation ist ausreichend umfassend, so dass sie normalerweise nur h=chstens einmal pro Schrift in einem Dokument angegeben werden muss. n

15.3.1 Schriftbeschreibungen und @font-face Die Schriftbeschreibung stellt die Brcke zwischen der Schriftspezifikation eines Autors und den Schriftdaten dar. Das sind die Daten, die fr die Formatierung von Text und die Darstellung der abstrakten Glyphen, auf die die Zeichen abgebildet werden, ben=tigt werden. Schriften werden anhand von Stylesheet-Eigenschaften beschrieben. Die Schriftbeschreibung wird der Schriftdatenbank hinzugefgt und dann verwendet, um die relevanten Schriftdaten auszuw@hlen. Die Schriftbeschreibung enth@lt Deskriptoren, wie beispielsweise die Position der Schriftdaten im Web oder Charakteristika dieser Schriftdaten. Die

< 746 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

Schriftdeskriptoren werden darber hinaus ben=tigt, um die Stylesheet-Schrifteigenschaften mit bestimmten Schriftdaten zu vergleichen. Der Detailgrad einer Schriftbeschreibung kann variieren, von einfach nur dem Namen der Schrift bis hin zu einer Liste mit den Breiten jeder einzelnen Glyphe. Schriftdeskriptoren k=nnen in drei Kategorien eingeordnet werden: 1. solche, die die Verknpfung zwischen der CSS-Nutzung der Schrift und der Schriftbeschreibung darstellen (sie haben dieselben Namen wie die entsprechenden CSS-Schrifteigenschaften) 2. der URI fr die Position der Schriftdaten (im Web) 3. solche, die die Schrift weiter charakterisieren, um eine Verknpfung zwischen der Schriftbeschreibung und den Schriftdaten bereitzustellen Alle Schriftbeschreibungen werden ber die At-Regel @font-face angegeben. Die allgemeine Form sieht wie folgt aus: @font-face { }

Dabei hat die folgende Form:

Jede @font-face-Regel gibt einen Wert fr jeden Schriftdeskriptor an, entweder implizit oder explizit. Die nicht explizit angegebenen Werte nehmen in der Regel den fr jeden Deskriptor in dieser Spezifikation angegebenen Ausgangswert an. Diese Deskriptoren gelten ausschließlich innerhalb des Kontexts der @font-face-Regel, in der sie definiert sind, und sind nicht auf Elemente der Dokumentsprache anzuwenden. Es gibt also kein Konzept, das beschreibt, auf welche Elemente sich der Deskriptor bezieht, oder das festlegt, ob die Werte von den untergeordneten Elementen geerbt werden. Die verfgbaren Schriftdeskriptoren sind in sp@teren Abschnitten dieser Spezifikation beschrieben. Beispiel Beispielsweise ist nachfolgend die Schrift 'Robson Celtic' definiert und wird in einem Stylesheet, das in einem HTML-Dokument enthalten ist, verwendet.

Font test



Schriftauswahl

< 747 >

Cascading Style Sheets, Level 2

descriptor: wert; descriptor: wert; [...] descriptor: wert;

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

Diese dberschrift wird in Robson Celtic dargestellt

Das Stylesheet (im STYLE-Element) enth@lt eine CSS-Regel, die fr alle H1-Elemente festlegt, dass sie die Schriftfamilie 'Robson Celtic' verwenden. Eine CSS1-Implementierung sucht client-seitig nach einer Schrift, deren Familienname und andere Eigenschaften mit denen von 'Robson Celtic' bereinstimmen. Wenn sie keine entsprechende Schrift findet, verwendet sie die fr den Benutzerprogramm spezifische Fallback-Serifenschrift (die definitionsgem@ß existiert). Ein Benutzerprogramm, das CSS2 implementiert, wertet bei der Suche nach einer Schriftbeschreibung, die 'Robson Celtic' definiert, zun@chst die @font-face-Regeln aus. Dieses Beispiel enth@lt eine bereinstimmende Regel. Obwohl diese Regel nicht viele Schriftdaten enth@lt, hat sie einen URI, unter dem die Schrift fr die Darstellung in diesem Dokument geladen werden kann. Anderen Applikationen sollten die heruntergeladenen Schriften nicht zur Verfgung gestellt werden. Wird keine bereinstimmende @font-face gefunden, wendet das Benutzerprogramm denselben Vergleich wie ein Benutzerprogramm an, das CSS1 implementiert hat. Beachten Sie, dass wenn die Schrift 'Robson Celtic' auf dem Client-System installiert gewesen w,re, das Benutzerprogramm veranlasst worden w@re, fr die installierte Kopie einen Eintrag in der Schriftdatenbank vorzunehmen, wie im Abschnitt ber den Algorithmus zum Schriftvergleich beschrieben (15.5). Die installierte Kopie h@tte im obigen Beispiel vor der heruntergeladenen Schrift eine bereinstimmung erzeugt. CSS1-Implementierungen, die die @font-face-Regel nicht verstehen, treffen auf die =ffnende geschweifte Klammer und ignorieren alles weitere bis zur bereinstimmenden schließenden geschweiften Klammer. Diese At-Regel ist konform zu der CSS-Forderung, dass ein aufw@rtskompatibles Parsing m=glich sein soll. Die Parser k=nnen diese Regeln ignorieren, ohne einen Fehler zu melden. Legt man die Schriftdeskriptoren separat von den Schriftdaten ab, hat das außer der Schriftauswahl und/oder dem Schriftersatz noch weitere Vorteile. Der Schutz der Daten sowie die Replikationsbeschr@nkungen fr die Schriftdeskriptoren k=nnen sehr viel schw@cher als fr die vollst@ndigen Schriftdaten sein. Damit k=nnte es m=glich sein, die Schriftdefinition lokal zu installieren, oder sie zumindest in einem lokalen Cache abzulegen, wenn sie in einem allgemein zug@nglichen Stylesheet auftritt; dafr ist es nicht erforderlich, mehr als einmal pro angegebener Schrift auf die vollst@ndige Schriftdefinition ber das Web zuzugreifen. Wird ein Schrift-Deskriptor dupliziert, dominiert der zuletzt aufgetretene Deskriptor und der Rest muss ignoriert werden. Außerdem mssen alle Deskriptoren ignoriert werden, die vom Benutzerprogramm nicht erkannt werden oder keinen Sinn fr ihn ergeben. Zuknftige Versionen von CSS erlauben m=glicherweise zus@tzliche Deskriptoren, um den Ersatz, den Vergleich oder die Synthese von Schriften noch besser durchfhren zu k=nnen.

< 748 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

15.3.2 Deskriptoren f-r die Auswahl einer Schrift: 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-stretch' und 'font-size' Die folgenden Deskriptoren haben dieselben Namen wie die entsprechenden CSS2-Schrifteigenschaften und nehmen einen einzelnen Wert oder eine Liste mit durch Kommas voneinander getrennten Werten an. Die Werte innerhalb dieser Liste sind dieselben wie die fr die entsprechende CSS2-Eigenschaft, außer wenn explizit anders angegeben. Gibt es einen einzelnen Wert, muss eine genaue bereinstimmung mit diesem Wert vorliegen. Gibt es eine Liste, kann eine beliebiges Listenelement eine bereinstimmung erzeugen. Wird der Deskriptor aus @font-face weggelassen, wird der Ausgangswert fr den Deskriptor verwendet.

'font-family' (Deskriptor) Wert:

[ | ] [, [ | ]]*

Ausgangwert:

Vom Benutzerprogramm abh@ngig

Medium:

Visual

Dies ist der Deskriptor fr den Schriftfamiliennamen einer Schrift. Er nimmt dieselben Werte wie die Eigenschaft 'font-family' an.

Wert:

All | [ normal | italic | oblique ] [, normal | italic | oblique]]*

Ausgangswert :

All

Medium :

Visual

Dies ist der Deskriptor fr den Stil einer Schrift. Er nimmt dieselben Werte an wie die Eigenschaft 'font-style', außer wenn eine Liste erlaubt ist, deren Werte durch Kommas voneinander getrennt sind.

'font-variant' (Deskriptor) Wert:

[normal | small-caps][,[normal | small-caps]]*

Ausgangswert:

Normal

Medium:

Visual

Damit gibt CSS an, ob diese Schrift die Kapit@lchen-Variante einer Schrift ist. Sie nimmt dieselben Werte wie die Eigenschaft 'font-variant' an, außer dass eine Liste mit Werten erlaubt ist, die durch Kommas voneinander getrennt sind.

Schriftauswahl

< 749 >

Cascading Style Sheets, Level 2

'font-style' (Deskriptor)

Page size: 168,00 x 240,00 mm

Sandini Bib

Hinweis: Kyrillische Proymo-Schriften k=nnen mit einer 'font-variant' von Kapit@lchen bezeichnet werden, was eine bessere Konsistenz mit lateinischen Schriften ergibt (und die zugeh=rige kursive Schrift wird aus demselben Grund mit einem 'font-style' italic beschriftet). n

'font-weight' (Deskriptor) Wert:

all | [normal | bold |100 | 200 | 300 |400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]*

Ausgangswert:

All

Medium:

Visual

Dies ist der Deskriptor fr die Gewichtung einer Schrift relativ zu anderen in derselben Schriftfamilie. Er verwendet dieselben Werte wie die Eigenschaft 'font-weight', mit drei Ausnahmen: 1. Relative Schlsselw=rter (bolder, lighter) sind nicht erlaubt. 2. Eine Liste mit durch Kommas voneinander getrennten Werten ist erlaubt fr Schriften, die mehrere Gewichtungen enthalten. 3. Das zus@tzliche Schlsselwort 'all' ist erlaubt, das heißt, die Schrift erzeugt eine bereinstimmung fr alle m=glichen Werte; entweder weil sie mehrere Gewichtungen enth@lt oder weil die Schrift nur eine einzige Gewichtung hat.

Cascading Style Sheets, Level 2

'font-stretch' (Deskriptor) Wert

all | [normal | ulstra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded][, [normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded]]*

Ausgangswert:

Normal

Medium:

Visual

Damit gibt CSS die komprimierte oder gedehnte Schriftform relativ zu anderen Schriften derselben Schriftfamilie an. Sie nimmt dieselben Werte an wie die Eigenschaft 'font-stretch', nur dass hier gilt: Relative Schlsselw=rter (wider, narrower) sind nicht erlaubt. Eine Liste mit durch Kommas voneinander getrennten Werten ist erlaubt. Das Schlsselwort 'all' ist erlaubt.

·· ·

< 750 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

'font-size' (Deskriptor) Wert:

all | [, ]*

Ausgangswert:

All

Medium:

Visual

Dies ist der Deskriptor fr die durch diese Schrift untersttzten Gr=ßen. Es sind nur absolute L@ngeneinheiten erlaubt, im Gegensatz zur Eigenschaft 'font-size', die sowohl relative als auch absolute L@ngen und Gr=ßen erlaubt. Eine Liste mit durch Kommas voneinander getrennten absoluten L@ngen ist erlaubt. Der Ausgangswert 'all' ist fr die meisten skalierbaren Schriften geeignet, deshalb ist dieser Deskriptor haupts@chlich fr die Verwendung in einer @font-face fr Bitmap-Schriften oder skalierbare Schriften geeignet, die darauf ausgelegt sind, in einem begrenzten Bereich von Schriftgr=ßen gerastert zu werden.

15.3.3 Deskriptoren f-r die Schriftdatenqualifizierung : 'unicode-range' Der folgende Deskriptor ist optional innerhalb einer Schriftdefinition, wird aber verwendet, um eine berprfung oder einen Download einer Schrift zu vermeiden, die nicht ausreichend viele Glyphen umfasst, um ein bestimmtes Zeichen darzustellen.

Wert:

[, ]*

Ausgangswert:

U+0-7FFFFFFF

Medium:

Visual

Dies ist der Deskriptor fr den Bereich der ISO 10646-Zeichen, die diese Schrift abdeckt. Die Werte von werden als hexadezimale Zahlen mit dem Pr@fix „U+“ angegeben, die den Zeichencodepositionen in ISO 10646 entsprechen ([ISO10646]). Beispielsweise ist U+05D1 das ISO 10646-Zeichen 'Hebr@ischer Buchstabe bet'. Fr Werte außerhalb der BMP (Basic Multilingual Plane) werden zus@tzliche fhrende Ziffern eingefhrt, die der Ebenennummer entsprechen. Beispielsweise ist U+A1234 das Zeichen auf Ebene 10 an der hexadezimalen Codeposition 1234. Zum Zeitpunkt der Drucklegung dieses Buches gab es keine Zeichen außerhalb der BMP. Fhrende Nullen (z. B. 0000004D) sind gltig aber nicht erforderlich. Der Ausgangswert dieses Deskriptors deckt nicht nur die gesamte BMP (Basic Multilingual Plane) ab, die als U+0-FFFF ausgedrckt wird, sondern auch das gesamte Repertoire von ISO 10646. Damit besagt der Ausgangswert, dass die Schrift Glyphen fr Zeichen irgendwo in ISO 10646 haben kann. Die Angabe eines Wertes fr 'unicode-range' stellt Informationen bereit, die die Suche effizient machen, indem ein begrenzter Bereich deklariert wird, in dem die Schrift Glyphen fr Zeichen haben kann. Die Schrift muss nicht außerhalb dieses Bereichs nach Zeichen durchsucht werden.

Schriftauswahl

< 751 >

Cascading Style Sheets, Level 2

'unicode-range' (Deskriptor)

Page size: 168,00 x 240,00 mm

Sandini Bib

Werte k=nnen mit einer beliebigen Anzahl an Stellen angegeben werden. Fr einzelne Zahlen steht das Zeichen '?' fr einen beliebigen Wert, wodurch ein Bereich an Zeichenpositionen abgedeckt wird. Die Verwendung einer einzelnen Zahl bedeutet also: Unicode-Bereich: U+20A7 keine Wildcards – es handelt sich um eine einzelne Zeichenposition (das spanische W@hrungssymbol fr die Peseta) Unicode-Bereich: U+215? eine Wildcard, deckt den Bereich 2150 bis 215F ab (die Brche) Unicode-Bereich: U+00?? zwei Wildcards, deckt den Bereich 0000 bis 00FF (Latin-1) ab Unicode-Bereich: U+E?? zwei Wildcards, deckt den Bereich 0E00 bis 0EFF (das Lao-Skript) ab Ein Zahlenpaar in diesem Format kann mit dem Trennstrich kombiniert werden, um gr=ßere Bereiche abzudecken. Beispiel: Unicode-Bereich: U+AC00-D7FF der Bereich deckt AC00 bis D7FF ab (der Hangul Syllables-Bereich)

Cascading Style Sheets, Level 2

Es k=nnen mehrere, durch Kommas voneinander getrennte, nicht fortlaufende Bereiche angegeben werden. Wie in allen Listen in CSS, deren Werte durch Kommas voneinander getrennt sind, wird Whitespace vor und nach einem Komma ignoriert. Beispiel: Unicode-Bereich: U+370-3FF, U+1F?? Deckt den Bereich 0370 bis 03FF (Modern Greek) und 1F00 bis 1FFF (Ancient polytonic Greek) ab. Unicode-Bereich: U+3000-303F, U+3100-312F, U+32??, U+33??, U+4E00-9FFF, U+F9000-FAFF, U+FE30-FE4F In Hinblick auf die Komplexit@t vermutlich der schlimmste Fall, gibt aber sehr pr@zise an, dass diese (extrem umfangreiche) Schrift nur Chinesische Zeichen aus ISO 10646 enth@lt, ohne irgendwelche Zeichen, die eindeutig japanisch oder koreanisch sind. Der Bereich erstreckt sich von 3000 bis 303F (CJK-Symbole und Interpunktion) plus 3100 bis 312F (Bopomofo) plus 3200 bis 32FF (inklusive CJK-Buchstaben und Monate) plus 3300 bis 33FF (CJK-Kompatibilit@tszone) plus 4E00 bis 9FFF (vereinheitlichte CJK-Ideographien) plus F900 bis FAFF (CJK-Kompatibilit@ts-Ideographien) plus FE30 bis FE4F (CJK-Kompatibilit@tsformen). Eine angenehmere Darstellung fr eine typische chinesische Schrift w@re: Unicode-Bereich: U+3000-33FF, U+4E00-9FFF Unicode-Bereich: U+11E00-121FF Diese Schrift deckt eine vorgeschlagene Registrierung fr Aztekische Piktogramme ab, n@mlich den Bereich von 1E00 bis 21FF in Ebene 1. Unicode-Bereich: U+1A00-1A1F Diese Schrift deckt eine vorgeschlagene Registrierung fr Irish Ogham ab, n@mlich den Bereich 1A00 bis 1A1F.

< 752 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

15.3.4 Deskriptor f-r numerische Werte: 'units-per-em' Der folgende Deskriptor gibt die Anzahl der „Einheiten“ pro em an; diese Einheiten k=nnen von verschiedenen anderen Deskriptoren genutzt werden, um verschiedene L@ngen auszudrcken, 'units-per-em' ist also erforderlich, wenn andere Deskriptoren davon abh@ngig sind.

'units-per-em' (Deskriptor) Wert:

Ausgangswert:

Nicht definiert

Medium:

Visual

Dies ist der Deskriptor fr die Anzahl der Koordinateneinheiten im em-Quadrat, die Gr=ße des Entwurfsrasters, auf dem die Glyphen angelegt wurden.

15.3.5 Deskriptor f-r den Verweis: 'src' Dieser Deskriptor ist erforderlich, um auf tats@chliche Schriftdaten zu verweisen, egal ob herunterzuladen oder lokal installiert.

Wert:

[ [format( [, ]*)] | ] [, [format( [, ]*)] | ]*

Ausgangswert:

Nicht definiert

Medium:

Visual

Dies ist eine nach Priorit@ten geordnete Liste externer Referenzen und/oder lokal installierter Schriftnamen, die durch Kommas voneinander getrennt sind. Die externe Referenz verweist auf die Schriftdaten im Web. Das ist erforderlich, wenn die Web-Schrift heruntergeladen werden soll. Die Schriftressource kann eine Untermenge der Quellschrift sein, beispielsweise kann sie nur die Glyphen enthalten, die fr die aktuelle Seite oder fr eine Menge von Seiten ben=tigt werden. Die externe Referenz besteht aus einem URI, gefolgt von einem optionalen Hinweis auf das Format der Schriftressource, die unter diesem URI zu finden ist; diese Information sollte von den Clients verwendet werden, um zu vermeiden, dass Links auf Schriften in Formaten verfolgt werden, die nicht genutzt werden k=nnen. Wie bei jedem Hypertext-Verweis kann es auch noch andere Formate geben, aber der Client weiß besser, was wahrscheinlich vorhanden ist, und das ist besser, als zu versuchen, Dateinamenerweiterungen in URIs auszuprobieren. Der Formathinweis enth@lt eine Liste mit Formatstrings, die durch Kommas voneinander getrennt sind und die wohlbekannte Schriftformate angeben. Das Benutzerprogramm erkennt den Namen von Schriftformaten, die es untersttzt, und vermeidet das Herunterladen von Schriften in Formaten, die es nicht erkennt.

Schriftauswahl

< 753 >

Cascading Style Sheets, Level 2

'src' (Deskriptor)

Page size: 168,00 x 240,00 mm

Sandini Bib

Nachfolgend sehen Sie eine erste Liste mit Formatstrings, die durch diese Spezifikation definiert sind und Formate darstellen, die sehr wahrscheinlich von Implementierungen auf verschiedenen Plattformen verwendet werden: String

Schriftformat

Beispiele f-r gebr.uchliche Erweiterungen

„truedoc-pfr“

TrueDoc Portable Font Resource

.pfr

„embedded-opentype“

Embedded OpenType

.eot

„type-1“

PostScript Type 1

.pfb, .pfa

„truetype“

TrueType

.ttf

„opentype“

OpenType, inclusive TrueType Open

.ttf

„truetype-gx“

TrueType mit GX-Erweiterungen

„speedo“

Speedo

„intellifont“

Intellifont

Cascading Style Sheets, Level 2

Wie andere URIs in CSS kann der URI partiell sein; in diesem Fall wird er relativ zur Position des Stylesheets aufgel=st, das das @font-face enth@lt. Der lokal installierte ist der vollst@ndige Schriftname, der in Anfhrungszeichen gesetzt werden muss, weil er beliebige Zeichen enthalten kann, unter anderem Leerzeichen und Interpunktionszeichen. Zudem muss er in „local(“ und „)“eingeschlossen sein.

Beispiel src: url("http://foo/bar") Ein vollst@ndiger URI, und es stehen keine Informationen ber die dort verfgbaren Schriftformate zur Verfgung src: local("BT Century 751 No. 2 Semi Bold Italic") Verweist auf eine bestimmte Schriftform einer lokal installierten Schrift src: url("../fonts/bar") format("truedoc-pfr") Ein partieller URI, fr den es eine Schrift im TrueDoc-Format gibt src: url("http://cgi-bin/bar?stuff") format("opentype", "intellifont") Ein vollst@ndiger URI, in diesem Fall fr ein (serverseitiges) Skript, das zwei verschiedene Formate erzeugen kann – OpenType und Intellifont src: local("T-26 Typeka Mix"), url("http://site/magda-extra") format("type-1") Es sind zwei Alternativen angegeben: erstens eine lokal installierte Schrift und zweitens eine herunterladbare Schrift, die im Type 1-Format zur Verfgung steht. Der Zugriff auf lokal installierte Schriften erfolgt ber den . Der Schriftname ist nicht wirklich eindeutig, und er ist auch nicht wirklich unabh@ngig von der Plattform oder vom Schriftformat, aber momentan stellt er die beste M=glichkeit dar, lokal installierte Schriftdaten zu identifizieren. Das kann erfolgen, indem der Bereich der ISO 10646-Zeichenpositionen angegeben wird, fr die die Schrift Glyphen untersttzt (siehe 'unicode-range').

< 754 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

15.3.6 Deskriptoren f-r den Vergleich: 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent' und 'descent' Diese Deskriptoren sind optional fr eine CSS2-Definition, k=nnen aber fr einen intelligenten Schriftvergleich oder eine Schriftgr=ßenanpassung verwendet werden, wenn der Autor dies wnscht.

'panose-1' (Deskriptor) Wert:

[]{10}

Ausgangswert:

0000000000

Medium:

visual

Dieser Deskriptor fr die Panose-1-Nummer besteht aus zehn dezimalen Integern, die durch Whitespace voneinander getrennt sind. Eine Liste mit durch Kommas voneinander getrennten Werten ist fr diesen Deskriptor nicht erlaubt, weil es erforderlich sein kann, dass fr das Panose-1-System ein Wertebereich verglichen wird. Der Ausgangswert ist Null, das heißt, „alle“ fr jede PANOSE-Stelle; alle Schriften stimmen mit der Panose-Nummer berein, wenn dieser Wert verwendet wird. Die Verwendung des Panose-1-Deskriptors ist fr lateinische Schriften sehr zu empfehlen. Weitere Informationen finden Sie in Anhang C.

Wert:

[]{10}

Ausgangswert:

0000000000

Medium:

Visual

Dies ist der Deskriptor fr die vertikale Strichbreite der Schrift. Falls dieser Wert nicht definiert ist, wird der Deskriptor fr den Vergleich nicht herangezogen. Wird dieser Deskriptor verwendet, muss auch der Deskriptor 'units-per-em' verwendet werden.

'stemh' (Deskriptor) Wert:

Ausgangswert:

Nicht definiert

Medium:

Visual

Dies ist der Deskriptor fr die horizontale Strichbreite der Schrift. Falls dieser Wert nicht definiert ist, wird der Deskriptor nicht fr den Vergleich verwendet. Wird dieser Deskriptor verwendet, muss auch der Deskriptor 'units-per-em' verwendet werden.

Schriftauswahl

< 755 >

Cascading Style Sheets, Level 2

'stemv' (Deskriptor)

Page size: 168,00 x 240,00 mm

Sandini Bib

'slope' (Deskriptor) Wert:

Ausgangswert:

Nicht definiert

Medium:

Visual

Dies ist der Deskriptor fr den vertikalen Strichwinkel der Schrift.

'cap-height' (Deskriptor) Wert:

Ausgangswert:

Nicht definiert

Medium:

Visual

Dies ist der Deskriptor fr der H=he von Großbuchstaben-Glyphen der Schrift. Falls der Wert nicht definiert ist, wird der Deskriptor nicht fr den Vergleich verwendet. Wird dieser Deskriptor verwendet, muss auch der Deskriptor 'units-per-em' verwendet werden.

Cascading Style Sheets, Level 2

'x-height' (Deskriptor) Wert:

Ausgangswert:

Nicht definiert

Medium:

Visual

Dies ist der Deskriptor fr die H=he von Kleinbuchstaben-Glyphen der Schrift. Falls der Wert nicht definiert ist, wird der Deskriptor nicht fr den Vergleich verwendet. Wird dieser Deskriptor verwendet, muss auch der Deskriptor 'units-per-em' verwendet werden. Dieser Deskriptor kann sehr praktisch sein, wenn die Eigenschaft 'font-size-adjust' verwendet wird, weil fr die Berechnung des z-Werts der in Frage kommenden Schriften sowohl die Schriftgr=ße als auch die x-H=he erforderlich ist; deshalb ist zu empfehlen, diesen Deskriptor zu verwenden.

'ascent' (Deskriptor) Wert:

Ausgangswert:

Nicht definiert

Medium:

Visual

Dies ist der Deskriptor fr die maximale H=he der Schrift ohne Bercksichtigung der Akzente. Falls der Wert nicht definiert ist, wird der Deskriptor nicht fr den Vergleich verwendet. Wird dieser Deskriptor verwendet, muss auch der Deskriptor 'units-per-em' verwendet werden.

< 756 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

'descent' (Deskriptor) Wert:

Ausgangswert:

Nicht definiert

Medium:

Visual

Dies ist der Deskriptor fr die maximale Tiefe der Schrift ohne Bercksichtigung der Akzente. Falls der Wert nicht definiert ist, wird der Deskriptor nicht fr den Vergleich verwendet. Wird dieser Deskriptor verwendet, muss auch der Deskriptor 'units-per-em' verwendet werden.

Die Synthese einer Schrift bedeutet, dass zumindest die Breitenmaße der angegebenen Schrift zur Deckung gebracht werden. Fr die Synthese muss also diese Maßinformation zur Verfgung stehen. Analog dazu ben=tigt auch die progressive Darstellung die Breitenmaße, um zu vermeiden, dass der Inhalt neu angeordnet werden muss, nachdem die tats@chliche Schrift geladen wurde. Obwohl die nachfolgenden Deskriptoren optional fr eine CSS2-Definition sind, werden einige davon ben=tigt, wenn der Autor eine Synthese (oder eine progressive Darstellung ohne Neuanordnung des Inhalts) wnscht. Sobald die tats@chliche Schrift zur Verfgung steht, sollte die Ersatzschrift dagegen ausgetauscht werden. Jeder dieser vorhandenen Deskriptoren wird verwendet, um eine bessere oder schnellere Ann@herung an die gewnschte Schrift zu erreichen. Von diesen Deskriptoren sind die wichtigsten 'widths' und 'bbox', die verwendet werden, um eine Neuanordnung des Texts zu verhindern, wenn die tats@chliche Schrift zur Verfgung steht. Darber hinaus k=nnen diese Deskriptoren in der Menge der fr den Vergleich verwendeten Deskriptoren verwendet werden, um eine bessere Synthese der tats@chlichen Schriftdarstellung zu erzielen.

'widths' (Deskriptor) Wert:

[]? []+ [,[]? ]+]

Ausgangswert:

Nicht definiert

Medium:

Visual

Dies ist der Deskriptor fr die Glyphen-Breiten. Der Wert ist eine Liste mit durch Kommas voneinander getrennten -Werten, jeweils gefolgt von einer oder mehreren GlyphenBreiten. Wird dieser Deskriptor verwendet, muss auch der Deskriptor 'units-per-em' verwendet werden. Wenn weggelassen wird, wird ein Bereich von U+0-7FFFFFFF angenommen, der alle Zeichen und ihre Glyphen abdeckt. Falls nicht gengend Glyphen-Breiten zur Verfgung stehen, wird der letzte in der Liste repliziert, um diese U-Range abzudecken. Falls zu viele Breiten angegeben sind, werden die berflssigen ignoriert.

Schriftauswahl

< 757 >

Cascading Style Sheets, Level 2

15.3.7 Deskriptoren f-r die Synthese: 'widths', 'bbox' und 'definition-src'

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel widths: U+4E00-4E1F 1736 1874 1692 widths: U+1A?? 1490, U+215? 1473 1838 1927 1684 1356 1792 1815 1848 1870 1492 1715 1745 1584 1992 1978 1770

Im ersten Beispiel ist ein Bereich von 32 Zeichen vorgegeben, von 4E00 bis 4E1F. Der Glyph, der dem ersten Zeichen entspricht (4E00), hat eine Breite von 1736, der zweite hat eine Breite von 1874, und der dritte von 1692. Weil nicht gengend Breiten bereitgestellt wurden, wird die letzte Breite repliziert, um den restlichen angegebenen Bereich abzudecken. Das zweite Beispiel setzt eine einzige Breite, 1490, fr den gesamten Bereich von 256 Glyphen und dann explizite Breiten fr einen Bereich von 16 Glyphen. Dieser Deskriptor kann nicht mehrere Glyphen beschreiben, die einem einzelnen Zeichen oder Ligaturen mehrerer Zeichen entsprechen. Damit kann dieser Deskriptor nur fr Schriften (scripts) verwendet werden, die keine kontextabh@ngigen Formen oder verpflichtende Ligaturen aufweisen. Dennoch ist er in diesen Situationen praktisch. Schriften (scripts), die eine 1:noder n:n-Abbildung von Zeichen auf Glyphen verlangen, k=nnen momentan diesen Deskriptor nicht verwenden, um eine Schriftsynthese zu aktivieren, obwohl sie dennoch Schriften herunterladen oder einen intelligenten Vergleich durchfhren k=nnen.

Cascading Style Sheets, Level 2

'bbox' (Deskriptor) Wert:

, , ,

Ausgangswert:

Nicht definiert

Medium:

Visual

Dies ist der Deskriptor fr die maximal umschließende Box der Schrift. Der Wert ist eine Liste mit durch Kommas voneinander getrennten genau vier Zahlen, die in ihrer Reihenfolge die Koordinaten unten links x, unten links y, oben rechts x und oben rechts y der umschließenden Box fr die gesamte Schrift angeben.

'definition-src' (Deskriptor) Wert:

Ausgangswert:

Nicht definiert

Medium:

Visual

Die Schriftdeskriptoren k=nnen entweder innerhalb der Schriftdefinition im Stylesheet angegeben werden, oder in einer separaten Schriftdefinitionsressource, die durch einen URI festgelegt wird. Der letztere Ansatz kann den Netzwerkverkehr reduzieren, wenn mehrere Stylesheets auf dieselben Schriften verweisen.

< 758 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

15.3.8 Deskriptoren f-r die Ausrichtung : 'baseline', 'centerline', 'mathline' und 'topline' Diese optionalen Deskriptoren werden verwendet, um Ausfhrungen unterschiedlicher Schriften (scripts) aneinander auszurichten.

'baseline' (Deskriptor) Wert:

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

src: url(swiss721.pfr); /* Komprimierte Swiss 721 */ font-stretch: condensed; } @font-face { font-family: "Swiss 721"; src: url(swiss721.pfr); /* Gestreckte Swiss 721 */ font-stretch: expanded; }

15.4 Schriftcharakteristika 15.4.1 Einleitung In diesem Abschnitt sind die Schriftcharakteristika aufgelistet, die sich als praktisch fr den client-seitigen Schriftvergleich, Synthese und Download fr heterogene Plattformen, die auf das Web zugreifen, erwiesen haben. Die Daten mssen fr jedes Medium geeignet sein, das Schriften aus dem Web nutzen muss, und zwar ber einen anderen Weg als das physische Einbetten der Schriftdaten in das Medium. Diese Charakteristika werden herangezogen, um Schriften zu beschreiben. Sie sind nicht spezifisch fr CSS oder Stylesheets. In CSS wird jede Charakteristik durch einen Schrift-Deskriptor ausgedrckt. Diese Charakteristika k=nnten auch auf VRML-Knoten oder CGM Application Structures oder Java API oder alternative Stylesheet-Sprachen abgebildet werden. Schriften, die von einem Medium geladen und in einem Proxy-Cache gespeichert wurden, k=nnten von einem anderen Medium wiederverwendet werden, wodurch Download-Zeit und Netzwerkbandbreite eingespart wird, vorausgesetzt, dass durchg@ngig ein allgemeines System von Schriftcharakteristika verwendet wird. Nachfolgend sehen Sie eine unvollst@ndige Liste mit Beispielen fr solche Medien: 2D-Vektorformate Computer Graphics Metafile Simple Vector Format

Cascading Style Sheets, Level 2

··

3D-Grafikformat VRML 3DMF

··

Objekt-einbettende Technologien Java Active-X Obliq

·· ·

15.4.2 Vollst.ndiger Schriftname Dies ist der vollst@ndige Name einer bestimmten Schrift oder Schriftfamilie. Normalerweise enth@lt er eine Vielzahl nicht standardisierter Textbezeichner oder Ausschmckungen, die an den Schriftfamiliennamen angefgt sind. Er kann auch einen Gießereinamen oder eine Abkrzung davon enthalten, h@ufig dem Schriftfamiliennamen vorangestellt. Er wird nur verwendet,

Schriftcharakteristika

< 761 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

um auf lokal installierte Schriften zu verweisen, weil sich das Format des ausfhrlichen Namens zwischen den verschiedenen Plattformen erheblich unterscheiden kann. Er muss in Anfhrungszeichen stehen. Beispielsweise k=nnen sich der Schriftfamilienname der TrueType-Schrift und der PostScriptName hinsichtlich der Verwendung von Leerzeichen, Interpunktionszeichen und in der Abkrzung bestimmter W=rter unterscheiden (z. B. um verschiedene Beschr@nkungen fr die L@nge von Namen auf dem System- oder Druckerinterpreter zu bercksichtigen). Beispielsweise sind in einem PostScript-Namen keine Leerzeichen erlaubt, in vollst@ndigen Schriftnamen dagegen sind sie gebr@uchlich. Die TrueType-Namenstabelle kann auch den PostScript-Namen enthalten, der keine Leerzeichen enth@lt. Der Name der Schriftdefinition ist wichtig, weil es sich dabei um die Verknpfung zu den lokal installierten Schriften handelt. Es ist wichtig, dass der Name robust ist, sowohl in Hinblick auf Plattform- als auch auf Applikationsunabh@ngigkeit. Aus diesem Grund sollte ein Name verwendet werden, der nicht fr bestimmte Applikationen oder Sprachen spezifisch ist. Die ideale L=sung w@re, einen Namen zu verwenden, der alle Schriftdatenmengen eindeutig identifiziert. Einen solchen Namen gibt es in der aktuellen Praxis fr Schriftdaten nicht. Schriften mit demselben Schriftnamen k=nnen ber mehrere Deskriptoren variieren. Einige dieser Deskriptoren, wie beispielsweise verschiedene Glyphen-S@tze in der Schrift, k=nnen irrelevant sein, wenn die betreffenden Glyphen in der Schrift enthalten sind. Andere Deskriptoren, wie beispielsweise verschiedene Breitenmaße, machen Schriften desselben Namens inkompatibel. Es scheint nicht m=glich zu sein, eine Regel zu definieren, die die Inkompatibilit@ten immer erkennt und die Verwendung einer perfekt passenden lokalen Kopie der Schriftdaten eines bestimmten Namens nicht verhindert. Deshalb wird nur der Bereich der ISO 10646-Zeichen verwendet, um bereinstimmungen fr den Schriftnamen zu qualifizieren. Weil es ein prim@res Ziel fr den Schriftnamen in der Schriftdefinition ist, einem Benutzerprogramm die Entscheidung zu berlassen, ob es eine lokale Kopie der angegebenen Schriftdaten gibt, muss es sich dabei um einen Namen handeln, der in allen legitimen Kopien der Schriftdaten enthalten ist. Andernfalls k=nnte aufgrund fehlender bereinstimmungen in der lokalen Kopie unn=tiger Netzverkehr erzeugt werden.

15.4.3 Koordinaten-Einheiten im em-Quadrat Bestimmte Werte wie beispielsweise Breitenmaße werden in Einheiten ausgedrckt, die in Relation zu einem abstrakten Quadrat stehen, dessen H=he die beabsichtigte Distanz zwischen den Zeilen derselben Typengr=ße ist. Dieses Quadrat wird auch als das em-Quadrat bezeichnet. Es handelt sich dabei um das Entwurfsraster, auf dem die Glyphen-Umrisse definiert sind. Der Wert dieses Deskriptors gibt an, in wie viele Einheiten das em-Quadrat unterteilt ist. Gebr@uchliche Werte sind zum Beispiel 250 (Intellifont), 1000 (Type 1) und 2048 (TrueType, TrueType GX und OpenType). Wenn dieser Wert nicht angegeben ist, wird es unm=glich, zu erkennen, was ein Schriftmaß bedeutet. Beispielsweise hat eine Schrift Kleinbuchstaben-Glyphen der H=he 450, eine andere hat kleinere der H=he 890! Bei den Zahlen handelt es sich um Bruchteile; die erste Schrift hat 450/1000, die zweite 890/2048, was tats@chlich kleiner ist.

< 762 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

15.4.4 Zentrale Grundlinie Dies gibt die Position im em-Quadrat auf der zentralen Grundlinie an. Die zentrale Grundlinie wird von ideographischen Schriften (scripts) fr die Ausrichtung verwendet, so wie die untere Grundlinie fr lateinische, griechische und kyrillische Schriften (scripts).

15.4.5 Schriftcodierung Jeder Schrift ist explizit oder implizit eine Tabelle zugeordnet, die Schriftcodierungstabelle, die angibt, welche Zeichen die einzelnen Glyphen darstellen. Diese Tabelle wird auch als Kodierungsvektor bezeichnet. Viele Schriften enthalten mehrere Glyphen fr dasselbe Zeichen. Welche dieser Glyphen verwendet werden sollte, ist entweder von den Sprachregeln oder den Vorlieben des Entwicklers abh@ngig. Im Arabischen beispielsweise haben alle Buchstaben vier (oder zwei) verschiedene Formen, abh@ngig davon, ob der Buchstabe am Wortanfang, in der Mitte, am Ende oder isoliert verwendet wird. Es handelt sich in allen F@llen um denselben Buchstaben, deshalb gibt es nur ein Zeichen im Quelldokument, aber beim Ausdruck sieht er jedes Mal anders aus. Außerdem gibt es Schriften, die es dem Grafikdesigner berlassen, unter verschiedenen bereitgestellten alternativen Umrissen zu w@hlen. Leider stellt CSS2 noch keine M=glichkeit bereit, diese Alternativen auszuw@hlen. Momentan wird immer der Standardumriss aus diesen Schriften ausgew@hlt.

Gibt den Familiennamenanteil des Schriftnamens an. Beispielsweise ist der Familienname fr Helvetica-Bold gleich Helvetica, und der Familienname von ITC Stone Serif Semibold Italic ist ITC Stone Serif. Einige Systeme behandeln die Ausschmckungen, die sich auf komprimierte oder gedehnte Schriften beziehen, so, als handele es sich dabei um einen Teil des Familiennamens.

15.4.7 Glyphenbreite Dies ist eine Liste mit Breiten (im Entwurfsraster) fr den Glyphen, die jedem einzelnen Zeichen entsprechen. Die Liste ist nach ISO 10646-Codepunkten sortiert. Breiten k=nnen nicht sinnvoll angegeben werden, wenn mehr als ein Glyph auf dasselbe Zeichen abgebildet wird oder es zwingend vorgeschriebene Ligaturen gibt.

15.4.8 Horizontale Strichbreite Dieser Wert bezieht sich auf den dominanten Strich der Schrift. Es kann zwei oder mehr entworfene Breiten geben. Beispielsweise unterscheidet sich der vertikale Hauptstrich von Roman-Zeichen von den dnnen Strichen der serifen-behafteten „M“ und „N“, und außerdem kann es unterschiedliche Breiten fr Großbuchstaben- und Kleinbuchstabenzeichen innerhalb derselben Schrift geben. Außerdem k=nnen alle Striche, entweder dem Entwurf entsprechend oder aufgrund eines Fehlers, etwas unterschiedliche Breiten haben.

Schriftcharakteristika

< 763 >

Cascading Style Sheets, Level 2

15.4.6 Schriftfamilienname

Page size: 168,00 x 240,00 mm

Sandini Bib

15.4.9 HUhe von Großbuchstaben-Glyphen Dieses Maß stellt die y-Koordinate des oberen Abschlusses von flachen Großbuchstaben in lateinischen, griechischen und kyrillischen Scripts dar, gemessen von der Grundlinie aus. Dieser Deskriptor ist nicht unbedingt praktisch fr Schriften, die keine Glyphen aus diesen Scripts enthalten.

15.4.10 HUhe von Kleinbuchstaben-Glyphen

Cascading Style Sheets, Level 2

Dieses Maß stellt die y-Koordinate des oberen Abschlusses von nicht mit Akzenten versehenen, nicht aufsteigenden Kleinbuchstaben in lateinischen, griechischen und kyrillischen Schriften (scripts) dar, gemessen von der Grundlinie aus. Buchstaben mit flachem oberen Abschluss werden verwendet, wobei alle optischen Korrekturzonen ignoriert werden. Dies wird manchmal als Verh@ltnis zwischen Kleinbuchstaben- und Großbuchstabenh=hen verwendet, um Schriftfamilien vergleichen zu k=nnen.

Dieser Deskriptor ist nicht sinnvoll fr Schriften, die keine Glyphen aus diesen Scripts enthalten. Weil die H=he von Kleinbuchstaben und Großbuchstaben h@ufig als Verh@ltnis fr den Vergleich verschiedener Schriften verwendet wird, kann es sinnvoll sein, sowohl die Kleinbuchstaben- als auch die Großbuchstabenh=he fr Scripts ohne Klein/Großschreibung wie beispielsweise Hebr@isch auf denselben Wert zu setzen, w@hrend fr einen gemischten Text aus lateinischem und hebr@ischem Text die hebr@ischen Zeichen normalerweise auf eine H=he zwischen den Großbuchstaben- und Kleinbuchstabenh=hen der lateinischen Schrift gesetzt werden.

15.4.11 Untere Grundlinie Gibt die Position des em-Quadrats der unteren Grundlinie an. Die untere Grundlinie wird von lateinischen, griechischen und kyrillischen Schriften (scripts) fr die Ausrichtung verwendet, so wie die obere Grundlinie fr von Sanskrit abgeleitete Schriften (scripts) verwendet wird.

< 764 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

15.4.12 Mathematische Grundlinie Gibt die Position im em-Quadrat der mathematischen Grundlinie an. Die mathematische Grundlinie wird fr die Ausrichtung mathematischer Symbole verwendet, so wie die untere Grundlinie fr lateinische, griechische und kyrillische Schriften (scripts) verwendet wird.

15.4.13 Maximale umschließende Box Die maximale umschließende Box ist das kleinste Rechteck, das den Umriss umschließt, der entsteht, wenn alle Glyphen der Schrift mit ihren Ursprngen am selben Punkt angelegt und dann gezeichnet werden.

15.4.14 Maximale nicht-akzentuierte HUhe Dieses Maß fr das em-Quadrat verl@uft von der Grundlinie zum h=chsten Punkt, die jeder einzelne Glyph erreichen kann, ohne Akzente oder diakritische Markierungen.

Dieses Maß fr das em-Quadrat verl@uft von der Grundlinie zum niedrigsten Punkt, den ein Glyph erreichen kann, ausschließlich aller Akzente oder diakritischen Markierungen.

15.4.16 Panose-1-Zahl Panose-1 ist eine Klassifizierungs- und Vergleichstechnologie fr TrueType-Schriften nach dem Industriestandard. Das PANOSE-System besteht aus einer Menge von zehn Zahlen, die die Schlsselattribute einer lateinischen Schrift kategorisieren, eine Klassifizierungsprozedur zum Erstellen dieser Zahlen und einer Mapper-Software, die die n@chstm=gliche Schrift ermittelt, die zu einer vorgegebenen Menge an Schriftformen passt. Das System k nnte mit einigen Ab@n-

Schriftcharakteristika

< 765 >

Cascading Style Sheets, Level 2

15.4.15 Maximale nicht-akzentuierte Tiefe

Page size: 168,00 x 240,00 mm

Sandini Bib

derungen auch fr Griechisch und Kyrillisch verwendet werden, es ist jedoch nicht fr Schriften (scripts) ohne Klein-/Großschreibung und ideographische Schriften (scripts; Hebr@isch, Armenisch, Arabisch, Chinesisch/Japanisch/Koreanisch) geeignet.

15.4.17 Bereich der ISO 10646-Zeichen

Cascading Style Sheets, Level 2

Zeigt das Glyphen-Repertoire der Schrift bezglich ISO 10646 (Unicode) an. Weil dieses schwach besetzt ist (die meisten Schriften decken nicht das gesamte ISO 10646 ab), listet dieser Deskriptor Bl=cke oder Bereiche auf, die eine teilweise bereinstimmung aufweisen (es wird keine Garantie fr eine komplette Abdeckung gegeben), und wird verwendet, um ungeeignete Schriften auszuschließen (solche, die die erforderlichen Glyphen nicht enthalten). Er bietet keinen Hinweis darauf, dass die Schrift definitiv die erforderlichen Glyphen enth@lt, sondern nur, ob es sinnvoll ist, sie herunterzuladen, und sie einzusehen. Weitere Hinweise auf informative Dokumente finden Sie in [ISO10646]. Diese Methode ist erweiterbar auf zuknftige Reservierungen von Zeichen in Unicode, ohne die Syntax zu @ndern und ohne existierenden Inhalt ungltig zu machen. Schriftformate, die diese Information nicht enthalten, weder explizit noch indirekt, k=nnen diese Charakteristik dennoch verwenden, aber der Wert muss vom Dokument- oder Stylesheet-Autor bereitgestellt werden. Es gibt noch andere Klassifizierungen in Schriften (scripts) wie beispielsweise das MonotypeSystem (siehe [MONOTYPE]) und ein vorgeschlagenes ISO-Skriptsystem. Sie sind noch nicht erweiterbar. Aufgrund dessen wird in dieser Spezifikation die Klassifizierung von Glyphen-Repertoires nach dem Bereich der ISO 10646-Zeichen verwendet, die durch eine bestimmte Schrift dargestellt werden k=nnen. Dieses System ist erweiterbar, so dass es jede zuknftige Reservierung abdecken kann.

15.4.18 Obere Grundlinie Gibt die Position im em-Quadrat der oberen Grundlinie an. Die obere Grundlinie wird von Sanskrit abgeleiteten Schriften (scripts) fr die Ausrichtung verwendet, so wie die untere Grundlinie fr lateinische, griechische und kyrillische Schriften (scripts) verwendet wird.

15.4.19 Vertikale Strichbreite Dies ist die Breite der vertikalen (oder ann@hernd vertikalen) Striche fr Glyphen. Diese Information wird h@ufig nur als Hinweis bereitgestellt und steht in einigen Schriftformaten nicht fr den direkten Zugriff zur Verfgung. Dieses Maß sollte fr den dominanten vertikalen Strich in der Schrift verwendet werden, weil es unterschiedliche Gruppierungen vertikaler Striche geben k=nnte (zum Beispiel einen Hauptstrich und einen helleren Strich, wie beispielsweise fr ein großes M oder N).

15.4.20 Vertikaler Strichwinkel Dies ist der Winkel der dominanten vertikalen Striche der Schrift, angegeben in Grad im Gegenuhrzeigersinn von der Vertikalen. Der Wert ist negativ fr Schriften, die nach rechts geneigt sind, wie es bei fast allen kursiven Schriften der Fall ist. Dieser Deskriptor kann auch

< 766 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

fr geneigte Schriften, schr@ge Schriften, Handschriften und im Allgemeinen fr alle Schriften, deren vertikalen Striche nicht genau vertikal sind, verwendet werden. Ein Wert ungleich Null weist nicht unbedingt auf eine kursive Schrift hin.

15.5 Algorithmus zum Schriftvergleich Diese Spezifikation erweitert den in der CSS1-Spezifikation enthaltenen Algorithmus. Dieser Algorithmus reduziert sich auf den Algorithmus aus der CSS1-Spezifikation, wenn die Autorund die Leser-Stylesheets keine @font-face-Regeln enthalten. Der Vergleich von Deskriptoren mit Schriftarten muss sorgf@ltig erfolgen. Die Deskriptoren werden in genau definierter Reihenfolge betrachtet, um sicherzustellen, dass die Ergebnisse dieses Vergleichsprozesses so konsistent wie m=glich ber die verschiedenen Benutzerprogramme hinweg sind (vorausgesetzt, jedem von ihnen wird dieselbe Bibliothek mit Schriftarten und Schriftdeskriptoren pr@sentiert). Dieser Algorithmus kann optimiert werden, vorausgesetzt, eine Implementierung verh@lt sich so, als w@re der Algorithmus exakt befolgt worden. 1. Das Benutzerprogramm erzeugt eine Datenbank relevanter Schriftartendeskriptoren aller Schriften, die es kennt (oder es greift darauf zu). Falls es zwei Schriften mit genau denselben Deskriptoren gibt, wird eine davon ignoriert. Das Benutzerprogramm erkennt eine Schrift, wenn: sie lokal installiert wurde, sie unter Verwendung einer @font-face-Regel in einem der Stylesheets deklariert wurde, das mit dem aktuellen Dokument verknpft ist oder darin enthalten ist, sie im Standard-Stylesheet des Benutzerprogramms verwendet wird, das es konzeptuell in allen Benutzerprogramme gibt, und von dem angenommen wird, dass es vollst@ndige @font-face-Regeln fr alle Schriften enth@lt, die das Benutzerprogramm fr die Standarddarstellung verwendet, sowie @font-face-Regeln fr die fnf speziellen generischen Schriftfamilien (siehe 'font-family'), die in CSS2 definiert sind. 2. In einem bestimmten Element und fr jedes Zeichen in diesem Element setzt das Benutzerprogramm die Schrifteigenschaften zusammen, die auf dieses Element anzuwenden sind. Unter Verwendung der vollst@ndigen Eigenschaftenmenge verwendet das Benutzerprogramm den Deskriptor 'font-family', um versuchsweise eine Schriftfamilie auszuw@hlen. Der Vergleich mit einem bereinstimmenden Familiennamen ist also erfolgreich, bevor der Vergleich mit einem anderen Deskriptor erfolgt. Die restlichen Eigenschaften werden mit der Familie verglichen, gem@ß den Vergleichskriterien, die zusammen mit jedem Deskriptor angegeben sind. Falls es auch bereinstimmungen fr alle restlichen Eigenschaften gibt, ist dies die passende Schriftart fr das betreffende Element. 3. Falls es keine bereinstimmende Schriftart innerhalb der in Schritt 2 verarbeiteten 'font-family' gibt, k=nnen Benutzerprogramme, die einen intelligenten Vergleich implementieren, weitermachen, indem sie weitere Deskriptoren auswerten wie beispielsweise x-H=he, Glyphenbreiten und Panose-1, um eine andere vorl@ufige Schriftfamilie zu finden. Falls es bereinstimmungen fr alle restlichen Deskriptoren gibt, ist das die geeignete Schriftart fr das betreffende Element. Der 'font-family'-Deskriptor, der sich in den CSS2-Eigenschaften widerspiegelt, ist die Schriftfamilie, die angefordert wurde, und nicht der Name, den die intelligent verglichene Schrift aufweist. Benutzerprogramme, die keinen intelligenten Vergleich implementieren, werden diese Schritt abbrechen.

Algorithmus zum Schriftvergleich

< 767 >

Cascading Style Sheets, Level 2

·· ·

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

4. Falls es keine bereinstimmende Schriftart fr die in Schritt 3 verarbeitete 'font-family' gibt, k=nnen Benutzerprogramme, die das Herunterladen von Schriften implementieren fortfahren. Sie k=nnen den Deskriptor 'src' der in Schritt 2 oder 3 identifizierten Schriftart auswerten, um eine verfgbare Netzressource zu finden, die das korrekte Format hat. Falls es bereinstimmungen fr alle restlichen Deskriptoren gibt, ist das die passende Schriftart fr das betreffende Element, und das Benutzerprogramm kann versuchen, diese Schriftressource herunterzuladen. Das Benutzerprogramm kann diesen Download entweder blockieren, oder mit dem n@chsten Schritt fortfahren, w@hrend die Schriften heruntergeladen werden. Benutzerprogramme, die das Herunterladen von Schriften nicht implementieren, oder die nicht an ein Netzwerk angeschlossen sind oder wo die Benutzereinstellungen das Herunterladen von Schriften verhindern, oder wo die angeforderte Ressource aus irgendeinem Grund nicht zur Verfgung steht, oder wo die heruntergeladene Schrift aus irgendeinem Grund nicht verwendet werden kann, verhalten sich so, als w@re dieser Schritt fehlgeschlagen. 5. Falls es keine bereinstimmende Schriftart innerhalb der in Schritt 3 verarbeiteten 'font-family' gibt, k=nnen Benutzerprogramme, die die Schriftsynthese implementieren, weitermachen und andere Deskriptoren auswerten wie beispielsweise die 'x-height', Glyphenbreite und 'panose-1', um eine vorl@ufige Schriftfamilie fr die Synthese zu finden. Wenn es bereinstimmungen fr alle restlichen Deskriptoren gibt, ist das die geeignete Schriftart fr das betreffende Element, und die Synthese der Schrift kann beginnen. Benutzerprogramme, die keine Schriftsynthese implementieren, verhalten sich so, als w@re dieser Schritt fehlgeschlagen. 6. Wenn die Schritte 3, 4 und 5 alle fehlschlagen und es eine n@chste alternative 'font-family' in der Schriftmenge gibt, erfolgt eine Wiederholung ab Schritt 2 mit der n@chsten alternativen 'font-family'. 7. Wenn es eine bereinstimmende Schriftart gibt, diese aber keine Glyphen fr die aktuellen Zeichen enth@lt, und wenn es eine n@chste alternative 'font-family' in den Schriftmengen gibt, erfolgt eine Wiederholung ab Schritt 2 mit der n@chsten alternativen 'font-family'. Der 'unicode-range'-Deskriptor kann verwendet werden, um schnell Schriftarten auszuschließen, die nicht die korrekten Glyphen enthalten. Wenn der 'unicode-range'-Deskriptor anzeigt, dass eine Schrift Glyphen im korrekten Bereich enth@lt, kann sie vom Benutzerprogramm daraufhin ausgewertet werden, ob sie den ben=tigten Glyphen enth@lt. 8. Falls es keine Schrift innerhalb der in 2 ausgew@hlten Familie gibt, wird der geerbte oder vom Benutzerprogramm abh@ngige 'font-family'-Wert verwendet, und es erfolgt eine Wiederholung ab Schritt 2, unter Verwendung der besten bereinstimmung, die mit Hilfe dieser Schrift erzielt werden kann. Wenn ein bestimmtes Zeichen mit dieser Schrift nicht angezeigt werden kann, sollte das Benutzerprogramm darauf hinweisen, dass ein Zeichen nicht angezeigt wird (z. B. mit dem Glyphen fr „fehlendes Zeichen“). 9. Benutzerprogramme, die eine progressive Darstellung implementieren und ausstehende Schrift-Downloads haben, verwenden die heruntergeladene Schrift als Schriftfamilie. Wenn in der heruntergeladenen Schrift einige Glyphen fehlen, die die vorbergehende progressive Schrift enthielt, wird die heruntergeladene Schrift fr dieses Zeichen nicht verwendet, und es wird weiterhin die tempor@re Schrift verwendet. Hinweis: Der obige Algorithmus kann optimiert werden, um zu vermeiden, dass fr jedes Zeichen die CSS2-Eigenschaften erneut eingesehen werden mssen. n

< 768 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

Die Pro-Deskriptor-Vergleichsregeln aus Schritt (2) sehen wie folgt aus: 1. 'font-style' wird als Erstes ausprobiert. 'italic' ist erfllt, wenn es entweder eine Schrift in der Schriftdatenbank des Benutzerprogramms gibt, die mit dem CSS-Schlsselwort 'italic' (bevorzugt) oder 'oblique' versehen ist. Andernfalls mssen die Werte genau bereinstimmen, sonst schl@gt 'font-style' fehl. 2. 'font-variant' wird als N@chstes ausprobiert. 'normal' bringt eine bereinstimmung mit einer Schrift, die nicht als 'small-caps' gekennzeichnet ist; 'small-caps' stimmt mit einer Schrift berein (1), die als 'small-caps' gekennzeichnet ist, mit einer Schrift (2), in der die Kapit@lchen synthetisiert sind, oder mit einer Schrift (3), in der alle Kleinbuchstaben durch Großbuchstaben ersetzt sind. Eine Kapit@lchen-Schrift kann synthetisiert werden, indem alle Großbuchstaben aus einer normalen Schrift elektronisch skaliert werden. 3. 'font-weight' wird als N@chstes verglichen und schl@gt niemals fehl. (Siehe 'font-weight' unten.) 4. 'font-size' muss innerhalb eines vom Benutzerprogramm angegebenen Toleranzmaßes bereinstimmen. (Normalerweise werden Gr=ßen fr skalierbare Schriften auf das n@chste ganze Pixel aufgerundet, w@hrend die Toleranz fr Bitmap-Schriften mindestens 20% betragen k=nnte.) Weitere Berechnungen, z. B. durch 'em'-Werte in anderen Eigenschaften, basieren auf dem verwendeten 'font-size'-Wert, nicht auf dem angegebenen.

Die 'font-weight'-Eigenschaftswerte werden auf einer numerischen Skala dargestellt, wobei der Wert '400' (oder 'normal') der normalen Textdarstellung fr diese Familie entspricht. Der dieser Schrift zugeordnete Gewichtungsname ist normalerweise Book, Regular, Roman, Normal oder manchmal auch Medium. Die Zuordnung anderer Gewichtungen innerhalb einer Familie fr die numerischen Gewichtungswerte soll nur die Reihenfolge der Gewichtungen innerhalb dieser Familie beibehalten. Die Benutzerprogramme mssen Namen Werte zuordnen, und zwar so, dass die visuelle Reihenfolge beibehalten wird; eine Schrift, die auf einen Wert abgebildet wird, darf nicht heller sein als Schriften, die auf kleinere Werte abgebildet werden. Es gibt keine Garantien, wie ein Benutzerprogramm Schriften innerhalb einer Familie auf Gewichtungswerte abbildet. Die folgende Heuristik zeigt, wie die Zuweisung normalerweise erfolgt: Falls die Schriftfamilie bereits eine numerische Skala mit neun Werten verwendet (wie z. B. OpenType), sollten die Schriftgewichtungen direkt abgebildet werden. Falls es sowohl eine mit Medium als auch eine mit Book, Regular, Roman oder Normal bezeichnete Schrift gibt, wird die Medium-Schrift normalerweise '500' zugeordnet. Die Schrift mit der Bezeichnung 'Bold' entspricht h@ufig dem Gewichtungswert '700'. Falls es weniger als 9 Gewichtungen in der Familie gibt, sieht der Standardalgorithmus fr das Ausfllen der „L=cher“ wie folgt aus. Wenn '500' nichts zugewiesen ist, wird ihm dieselbe Schrift wie '400' zugewiesen. Bleibt einer der Werte '600', '700', '800' oder '900' nicht belegt, wird ihnen dieselbe Schrift wie dem n@chst dunkleren Schlsselwort zugewiesen, falls es einen solchen gibt, andernfalls die n@chst hellere Schrift. Falls '300', '200' oder '100' unbelegt sind, werden sie dem n@chst helleren zugeordneten Schlsselwort zugewiesen, falls es ein solches gibt, andernfalls das n@chst dunklere.

· · ··

Es gibt keine Garantie, dass es eine dunklere Schrift fr jeden der 'font-weight'-Werte gibt; beispielsweise kann es sein, dass einige Schriften nur eine normale und eine fette Darstellung aufweisen, w@hrend andere acht verschiedene Darstellungen kennen.

Algorithmus zum Schriftvergleich

< 769 >

Cascading Style Sheets, Level 2

15.5.1 Schriftgewichtungswerte auf Schriftnamen abbilden

Page size: 168,00 x 240,00 mm

Sandini Bib

Die beiden folgenden Beispiele zeigen typische Zuordnungen. Beispiel Angenommen, in der Familie „Rattlesnake“ gibt es vier Gewichtungen, von der hellsten bis zur dunkelsten: Regular, Medium, Bold, Heavy. Erstes Beispiel fr die Zuordnung der Schriftgewichtung: Verf-gbare Schriften

Zuordnungen

LUcher ausf-llen

„Rattlesnake Regular“

400

100, 200, 300

„Rattlesnake Medium“

500

„Rattlesnake Bold“

700

600

„Rattlesnake Heavy“

800

900

Cascading Style Sheets, Level 2

Angenommen, es gibt sechs Gewichtungen in der Familie „Ice Prawn“: Book, Medium, Bold, Heavy, Black, ExtraBlack. Beachten Sie, dass das Benutzerprogramm in diesem Beispiel entschieden hat, „Ice Prawn ExtraBlack“ keinen numerischen Wert zuzuweisen. Zweites Beispiel fr die Zuordnung der Schriftgewichtung: Verf-gbare Schriften

Zuordnungen

LUcher f-llen

„Ice Prawn Book“

400

100, 200, 300

„Ice Prawn Medium“

500

„Ice Prawn Bold“

700

„Ice Prawn Heavy“

800

„Ice Prawn Black“

900

„Ice Prawn ExtraBlack“

(keine)

600

15.5.2 Beispiele f-r den Schriftvergleich Das folgende Beispiel definiert eine bestimmte Schrift, Alabama Italic. Eine Panose-Schriftbeschreibung und einen Quell-URI fr das Laden einer TrueType-Server-Schrift sind ebenfalls bereitgestellt. Deskriptoren fr die Schriftgewichtung und den Schriftstil liegen vor, um die Schrift zu beschreiben. Die Deklaration besagt, dass die Gewichtung auch mit allen Anforderungen im Bereich zwischen 300 und 500 bereinstimmt. Die Schriftfamilie ist Alabama, der ausfhrliche Schriftname ist Alabama Italic. @font-face { src: local("Alabama Italic"), url(http://www.fonts.org/A/alabama-italic) format("truetype"); panose-1: 2 4 5 2 5 4 5 9 3 3; font-family: Alabama, serif;

< 770 >

Schriften

Page size: 168,00 x 240,00 mm

Sandini Bib

font-weight: 300, 400, 500; font-style: italic, oblique; }

Das folgende Beispiel gruppiert drei physische Schriften zu einer virtuellen Schrift mit erweiterter Abdeckung. In jedem Fall wird im src-Deskriptor der ausfhrliche Schriftname angegeben, um zu erm=glichen, dass lokal installierte Versionen bevorzugt verwendet werden, falls sie zur Verfgung stehen. Eine vierte Regel verweist auf eine Schrift mit derselben Abdeckung, die jedoch innerhalb einer einzigen Ressource enthalten ist.

Das n@chste Beispiel k=nnte man im Standard-Stylesheet des Benutzerprogramms finden. Es implementiert die generische CSS2-Schriftfamilie serif, indem es sie auf eine Vielzahl von serifen-behafteten Schriften abbildet, die auf verschiedenen Plattformen existieren k=nnen. Es werden keine Maße angegeben, weil diese zwischen den m=glichen Alternativen variieren. @font-face { src: local("Palatino"), local("Times New Roman"), local("New York"), local("Utopia"), url("http://somewhere/free/font"); font-family: serif; font-weight: 100, 200, 300, 400, 500; font-style: normal; font-variant: normal; font-size: all }

Algorithmus zum Schriftvergleich

< 771 >

Cascading Style Sheets, Level 2

@font-face { font-family: Excelsior; src: local("Excelsior Roman"), url("http://site/er") format("intellifont"); unicode-range: U+??; /* Latin-1 */ } @font-face { font-family: Excelsior; src: local("Excelsior EastA Roman"), url("http://site/ear") format("intellifont"); unicode-range: U+100-220; /* Latin Extended A and B */ } @font-face { font-family: Excelsior; src: local("Excelsior Cyrillic Upright"), url("http://site/ecr") format("intellifont"); unicode-range: U+4??; /* Cyrillic */ } @font-face { font-family: Excelsior; src: url("http://site/excels") format("truedoc"); unicode-range: U+??,U+100-220,U+4??; }

Page size: 168,00 x 240,00 mm

Sandini Bib

16 Text Die in den folgenden Abschnitten definierten Eigenschaften beeinflussen die visuelle Darstellung von Zeichen, Leerzeichen, W=rtern und Abs@tzen.

16.1 Einr-ckung: die 'text-indent'-Eigenschaft 'text-indent' Wert:

|

Text

Page size: 168,00 x 240,00 mm

16.2 Ausrichtung: die 'text-align'-Eigenschaft 'text-align' Wert:

left | right | center | justify | | inherit

Ausgangswert:

Vom Benutzerprogramm und der Schreibrichtung abh@ngig

Angewendet auf:

Elemente auf Blockebene

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

Ausrichtung: die 'text-align'-Eigenschaft

< 773 >

Cascading Style Sheets, Level 2

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

Diese Eigenschaft beschreibt, wie Inline-Inhalt eines Blocks ausgerichtet wird. Die Werte haben die folgenden Bedeutungen: left, right, center und justify Richtet einen Text linksbndig, rechtsbndig, zentriert bzw. beidseitig aus.

Gibt einen String an, nach dem die Zellen einer Tabelle ausgerichtet werden (detaillierte Informationen und ein Beispiel finden Sie im Abschnitt 17.5.4 ber die horizontale Ausrichtung in einer Spalte). Dieser Wert gilt nur fr Tabellenzellen. Wird er fr andere Elemente gesetzt, wird er wie 'left' oder 'right' behandelt, abh@ngig davon, ob 'direction' 'ltr' oder 'rtl' ist. Ein Textblock ist ein Stapel aus Zeilen-Boxen. Fr 'left', 'right' und 'center' gibt diese Eigenschaft an, wie die inzeiligen Boxen innerhalb jeder Zeilen-Box entlang der linken oder rechten Seiten der Zeilen-Box ausgerichtet sind; die Ausrichtung erfolgt nicht relativ zum Viewport. Im Fall von 'justify' kann das Benutzerprogramm die inzeiligen Boxen zus@tzlich strecken, um sie an ihren Positionen auszurichten. (Weitere Informationen finden Sie auch unter 'letter-spacing' und 'word-spacing', siehe weiter unten). Beispiel Beachten Sie, dass 'text-align' in diesem Beispiel vererbt ist, und deshalb fr alle Elemente auf Blockebene innerhalb des DIV-Elements mit 'class=center' der Inline-Inhalt zentriert ist.

Cascading Style Sheets, Level 2

DIV.center { text-align: center }

Hinweis: Welcher Algorithmus fr die eigentliche Ausrichtung verwendet wird, ist vom Benutzerprogramm und der geschriebenen Sprache abh@ngig. Konforme Benutzerprogramme drfen den Wert 'justify' als 'left' oder 'right' interpretieren, abh@ngig davon, ob die Standardschreibrichtung des Elements von links nach rechts oder von rechts nach links ist. n

16.3 Ausschm-ckung 16.3.1 Unterstreichen , berstreichen , Durchstreichen und Blinken: die 'text-decoration'-Eigenschaft 'text-decoration' Wert:

None | [underline | | overline | | line-through | | blink ] | inherit

Ausgangswert:

None

Angewendet auf:

Alle Elemente

Vererbt:

Nein (siehe Text)

Prozentwerte:

N/A

Medium:

Visual

< 774 >

Text

Page size: 168,00 x 240,00 mm

Sandini Bib

Diese Eigenschaft beschreibt Ausschmckungen, die dem Text eines Elements hinzugefgt werden. Wird die Eigenschaft fr ein Element auf Blockebene angegeben, beeinflusst sie alle Ableitungen des Elements auf Inline-Ebene. Wird sie fr ein Element auf Inline-Ebene angegeben (oder betrifft sie dieses), beeinflusst sie auch alle von dem Element erzeugten Boxen. Hat das Element keinen Inhalt oder keinen Textinhalt (z. B. das IMG-Element in HTML), mssen Benutzerprogramme diese Eigenschaft ignorieren . Die Werte haben die folgenden Bedeutungen: none Erzeugt keine Textausschmckung. underline Jede Textzeile ist unterstrichen. overline Jede Textzeile hat eine berstreichung. line-through Jede Textzeile ist mittig durchgestrichen. blink Der Text blinkt (er wechselt zwischen sichtbar und unsichtbar). Konforme Benutzerprogramme mssen diesen Wert nicht untersttzen.

Beispiel Im folgenden Beispiel fr HTML wird der Textinhalt aller A-Elemente, die als Hyperlinks dienen, unterstrichen dargestellt: A[href] { text-decoration: underline }

16.3.2 Textschatten: die 'text-shadow'-Eigenschaft 'text-shadow' Wert:

none | [

Cascading Style Sheets, Level 2

Die fr die Textausschmckung ben=tigten Farben sollen vom Wert der 'color'-Eigenschaft abgeleitet werden. Die Eigenschaft wird nicht vererbt, aber die abgeleiteten Boxen einer Block-Box sollten mit derselben Ausschmckung formatiert werden (z. B. sollten sie alle unterstrichen dargestellt sein). Die Farbe der Ausschmckungen sollte immer dieselbe bleiben, selbst wenn die abgeleiteten Elemente andere 'color'-Werte haben.

Page size: 168,00 x 240,00 mm

Sandini Bib

Diese Eigenschaft nimmt eine Liste durch Kommas voneinander getrennter Schatteneffekte entgegen, die auf den Text des Elements angewendet werden. Die Schatteneffekte werden in der angegebenen Reihenfolge angewendet und k=nnen sich somit berlagern, aber sie berlagern niemals den eigentlichen Text. Schatteneffekte ver@ndern die Gr=ße einer Box nicht, k=nnen sich aber ber ihre Grenzen hinaus erstrecken. Die Stapelebene der Schatteneffekte ist dieselbe wie fr das eigentliche Element. Jeder Schatteneffekt muss einen Abstand fr den Schatten und kann optional einen berblendradius und eine Schattenfarbe angeben. Ein Schattenabstand wird mit zwei -Werten angegeben, die den Abstand vom Text spezifizieren. Der erste L@ngenwert bestimmt den horizontalen Abstand zur rechten Textseite. Ein negativer Wert fr die horizontale L@nge platziert den Schatten links vom Text. Der zweite L@ngenwert gibt den vertikalen Abstand unterhalb des Texts an. Ein negativer Wert fr die vertikale L@nge platziert den Schatten oberhalb des Textes. Optional kann nach dem Schattenabstand ein berblendradius angegeben werden. Der berblendradius ist ein L@ngenwert, der die Grenzen des berblendeffekts bestimmt. Der genaue Algorithmus fr die Berechnung des berblendeffekts ist nicht vorgegeben. Optional kann vor oder hinter den L@ngenwerten des Schatteneffekts ein Farbwert angegeben werden. Der Farbwert wird als Grundlage fr den Schatteneffekt verwendet. Wird keine Farbe angegeben, wird stattdessen auf den Wert der 'color'-Eigenschaft zurckgegriffen. Textschatten k=nnen in Kombination mit den Pseudo-Elementen :first-letter und :first-line verwendet werden.

Cascading Style Sheets, Level 2

Beispiel Das folgende Beispiel setzt einen Textschatten rechts und unterhalb des Elementtexts. Weil keine Farbe angegeben wurde, hat der Schatten dieselbe Farbe wie das eigentliche Element, und weil kein berblendradius angegeben ist, wird der Textschatten langsam ausgeblendet: H1 { text-shadow: 0.2em 0.2em }

Das n@chste Beispiel platziert einen Schatten rechts und unterhalb des Elementtexts. Der Schatten hat eine 5px breiten berblendradius und ist rot. H2 { text-shadow: 3px 3px 5px red }

Das n@chste Beispiel gibt eine Liste mit Schatteneffekten an. Der erste Schatten liegt rechts und unterhalb des Elementtexts und ist rot ohne berblendung. Der zweite Schatten berlagert den ersten Schatteneffekt, er ist gelb, wird langsam ausgeblendet und links und unterhalb des Texts platziert. Der dritte Schatteneffekt wird rechts und oberhalb des Texts platziert. Weil fr den dritten Schatteneffekt keine Schattenfarbe angegeben ist, wird der Wert der 'color'Eigenschaft des Elements verwendet: H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

< 776 >

Text

Page size: 168,00 x 240,00 mm

Sandini Bib

Betrachten Sie das folgende Beispiel: SPAN.glow { background: white; color: white; text-shadow: black 0px 0px 5px; }

Hier haben die 'background'- und 'color'-Eigenschaften denselben Wert, und die 'textshadow'-Eigenschaft wird verwendet, um einen „Sonnenfinsterniseffekt“ zu erzeugen:

Hinweis: Diese Eigenschaft ist in CSS1 nicht definiert. Einige Schatteneffekte (wie beispielsweise der aus dem letzten Beispiel) zeigt diesen Text in Benutzerprogrammen, die nur CSS1 untersttzen, m=glicherweise unsichtbar an. n

16.4 Buchstaben- und Wortabst.nde: die 'letter-spacing'und 'word-spacing'-Eigenschaften

Wert:

normal | | inherit

Ausgangswert:

Normal

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

Diese Eigenschaft gibt das Abstandsverhalten zwischen Textzeichen an. Die Werte haben die folgenden Bedeutungen: normal Der Abstand ist der normale Abstand fr die aktuelle Schrift. Dieser Wert erlaubt, dass das Benutzerprogramm den Abstand zwischen Zeichen @ndert, um Text auszurichten.

Dieser Wert gibt den Abstand zwischen den Zeichen zus,tzlich zu dem Standardabstand zwischen Zeichen an. Werte k=nnen negativ sein, aber es kann von der jeweiligen Implementierung abh@ngige Grenzen geben. Benutzerprogramme drfen den Leeraum zwischen den Buchstaben nicht weiter vergr=ßern oder verkleinern, um Text auszurichten.

Buchstaben- und Wortabst,nde

< 777 >

Cascading Style Sheets, Level 2

'letter-spacing'

Page size: 168,00 x 240,00 mm

Sandini Bib

Algorithmen fr die Zeichenabst@nde sind vom Benutzerprogramm abh@ngig. Die Zeichenabst@nde k=nnen auch durch die Ausrichtung beeinflusst werden (siehe auch die Beschreibung der 'text-align'-Eigenschaft oben). Beispiel In diesem Beispiel wird der Abstand zwischen Zeichen in BLOCKQUOTE-Elementen um '0,1 em' vergr=ßert: BLOCKQUOTE { letter-spacing: 0.1em }

Im folgenden Beispiel ist es dem Benutzerprogramm nicht erlaubt, den Abstand zwischen den Zeichen zu ver@ndern: BLOCKQUOTE { letter-spacing: 0cm }

/* Wie '0' */

Anmerkung der bersetzer: Die Formatierungsanweisung span.gesperrt

{ font-family: monospace; font-weight: bolder; letter-spacing: 1em;

}

l@sst die HTML-Zeile Im Namen des Volkes

Cascading Style Sheets, Level 2

wie folgt erscheinen:

Wenn der resultierende Abstand zwischen zwei Zeichen nicht derselbe wie der Standardabstand ist, sollten die Benutzerprogramme keine Ligaturen verwenden. Konforme Benutzerprogramme k=nnten den Wert der 'letter-spacing'-Eigenschaft als 'normal' interpretieren.

'word-spacing' Wert:

normal | | inherit

Ausgangswert:

Normal

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

< 778 >

Text

Page size: 168,00 x 240,00 mm

Sandini Bib

Diese Eigenschaft gibt das Abstandsverhalten zwischen W=rtern an. Die Werte haben die folgenden Bedeutungen: normal Der normale Abstand zwischen W=rtern, wie durch die aktuelle Schrift und/oder das Benutzerprogramm definiert.

Dieser Wert gibt den Abstand zwischen W=rtern zus,tzlich zum Standardabstand zwischen W=rtern an. Die Werte k=nnen negativ sein, aber m=glicherweise gibt es von der Implementierung abh@ngige Obergrenzen. Algorithmen fr den Wortabstand sind vom Benutzerprogramm abh@ngig. Der Wortabstand wird außerdem durch die Ausrichtung beeinflusst (siehe auch die Informationen zur 'textalign'-Eigenschaft). Beispiel In diesem Beispiel wird der Wortabstand zwischen jedem Wort in H1-Elementen um '1em' erh=ht. H1 { word-spacing: 1em }

Konforme Benutzerprogramme k=nnen den Wert der 'word-spacing'-Eigenschaft als 'normal' interpretieren.

16.5 Großschreibung: die 'text-transform'-Eigenschaft

Wert:

capitalize | uppercase | lowercase | none | inherit

Ausgangswert:

None

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

Diese Eigenschaft steuert die Effekte zur Großschreibung von Text. Die Werte haben die folgenden Bedeutungen: capitalize Schreibt das erste Zeichen eines jeden Wortes in Großbuchstaben. uppercase Wandelt alle Zeichen eines jeden Wortes in Großbuchstaben um.

Großschreibung: die 'text-transform'-Eigenschaft

< 779 >

Cascading Style Sheets, Level 2

'text-transform'

Page size: 168,00 x 240,00 mm

Sandini Bib

lowercase Wandelt alle Zeichen eines jeden Wortes in Kleinbuchstaben um. none Keine Effekte zur Großschreibung. Die eigentliche Umwandlung ist fr jeden dieser F@lle von der geschriebenen Sprache abh@ngig. M=glichkeiten, die Sprache eines Elements festzustellen, finden Sie in RFC 2070 ([RFC2070]). Konforme Benutzerprogramme k=nnen den Wert von 'text-transform' fr Zeichen, die nicht aus dem Latin-1-Repertoire stammen auf 'none' setzen, ebenso fr Elemente in Sprachen, fr die sich die Umwandlung von der in den Fallumwandlungstabellen von ISO 10646 ([ISO10646]) unterscheidet. Beispiel In diesem Beispiel wird der gesamte Text in einem H1-Element in Großbuchstaben umgewandelt. H1 { text-transform: uppercase }

16.6 Leerraum: die 'white-space'-Eigenschaft

Cascading Style Sheets, Level 2

'white-space' Wert:

normal | pre | nowrap | inherit

Ausgangswert:

Normal

Angewendet auf:

Elemente auf Blockebene

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

Diese Eigenschaft deklariert, wie Leerraum innerhalb des Elements behandelt wird. Die Werte haben die folgenden Bedeutungen: normal Dieser Wert weist Benutzerprogramme an, Leerraum-Folgen zu komprimieren und bei Bedarf Zeilen zu umbrechen, um Zeilen-Boxen zu fllen. Es k=nnen zus@tzliche Zeilenumbrche erzeugt werden, wenn „\A“ in erzeugtem Inhalt (z. B. fr das BR-Element in HTML) auftritt. pre Dieser Wert verhindert, dass Benutzerprogramme Leerraum-Folgen komprimieren. Zeilen werden nur an Neuezeile-Zeichen der Quelle umbrochen, oder wenn im erzeugten Inhalt „\A“ auftritt. nowrap Dieser Wert komprimiert Leerraum wie fr 'normal', unterdrckt aber Zeilenumbrche innerhalb von Text, außer diejenigen, die durch „\A“ in erzeugtem Inhalt erzeugt werden (z. B. fr das BR-Element in HTML).

< 780 >

Text

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Die folgenden Beispiele zeigen, welches Leerraum-Verhalten von den PRE- und P-Elementen erwartet wird, und zudem das "nowrap"-Attribut in HTML. PRE { white-space: pre } P { white-space: normal } TD[nowrap] { white-space: nowrap }

Konforme Benutzerprogramme k=nnen die 'white-space'-Eigenschaft in Autor- und BenutzerStylesheets ignorieren, mssen aber einen Wert dafr im Standard-Stylesheet angeben.

17 Tabellen

Tabellen stellen eine Beziehung zwischen Daten her. Autoren geben diese Beziehungen in der Dokumentsprache an und legen ihre Darstellung mit CSS fest, und zwar auf zwei Arten: visuell und akustisch. Autoren k=nnen die visuelle Formatierung einer Tabelle als regelm@ßiges Zellraster angeben. Zeilen und Spalten aus Zellen k=nnen in Zeilengruppen und Spaltengruppen eingeteilt werden. Zeilen, Spalten, Zeilengruppen, Spaltengruppen und Zellen k=nnen Rahmen haben (es gibt zwei Rahmenmodelle in CSS2). Autoren k=nnen ihre Daten vertikal oder horizontal in einer Zelle und die Daten in allen Zellen einer Zeile oder Spalte ausrichten. Außerdem k=nnen Autoren die akustische Darstellung einer Tabelle festlegen: wie berschriften und Daten gesprochen werden. In der Dokumentsprache k=nnen Autoren Zellen und Zellgruppen beschriften, so dass bei einer akustischen Ausgabe Zellenberschriften vor Zellendaten gesprochen werden. Damit wird die Tabelle letztlich „serialisiert“: Benutzer, die die Tabelle akustisch wahrnehmen, h=ren eine Folge von berschriften, denen die Daten folgen. Beispiel Nachfolgend sehen Sie eine einfache dreizeilige, dreispaltige Tabelle, die in HTML 4.0 beschrieben ist:

Dies ist eine einfache 3x3-Tabelle

dberschrift 1	Zelle 1	Zelle 2
dberschrift 2	Zelle 3	Zelle 4
dberschrift 3	Zelle 5	Zelle 6

Tabellen

< 781 >

Cascading Style Sheets, Level 2

17.1 Einf-hrung in Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

Dieser Code erzeugt eine Tabelle (das TABLE-Element), drei Zeilen (die TR-Elemente), drei berschriftszellen (die TH-Elemente) und sechs Datenzellen (die TD-Elemente). Beachten Sie, dass die drei Spalten dieses Beispiels implizit angegeben sind: Es gibt so viele Spalten in der Tabelle, wie von berschrift und Datenzellen ben=tigt werden. Die folgende CSS-Regel zentriert den Text horizontal in den berschriftszellen und stellt die Daten fett ausgezeichnet dar: TH { text-align: center; font-weight: bold }

Die n@chste Regel richtet den Text der berschriftszellen an ihrer Grundlinie aus und zentriert den Text vertikal in jeder Datenzelle: TH { vertical-align: baseline } TD { vertical-align: middle }

Die n@chste Regel gibt an, dass die oberste Zeile von einem 3px breiten durchgezogenen blauen Rahmen umgeben ist, und dass alle anderen Zeilen von einem 1px breiten durchgezogenen schwarzen Rahmen umgeben sind. TABLE TR#row1 TR#row2 TR#row3

{ { { {

border-collapse: collapse } border-top: 3px solid blue } border-top: 1px solid black } border-top: 1px solid black }

Cascading Style Sheets, Level 2

Beachten Sie jedoch, dass sich die Rahmen um die Zeilen herum dort berlappen, wo die Zeilen zusammentreffen. Welche Farbe (schwarz oder blau) und welche St@rke (1px oder 3px) erh@lt der Rahmen zwischen Zeile 1 (row1) und Zeile 2 (row2)? Wir werden im Abschnitt ber die Konfliktaufl=sung bei Rahmen noch einmal darauf zurckkommen. Die folgende Regel schreibt die Tabellenberschrift ber die Tabelle: CAPTION { caption-side: top }

Die nachfolgende Regel schließlich gibt an, dass jede Datenzeile bei der akustischen Darstellung als „ berschrift, Daten, Daten“ gelesen wird. TH { speak-header: once }

Die erste Zeile beispielsweise wrde als „ berschrift1 Zelle1 Zelle2“ gelesen. Mit der folgenden Regel hingegen: TH { speak-header: always }

wrde sie wie „ berschrift1 Zelle1 berschrift1 Zelle2“ gesprochen. Das obige Beispiel zeigt, wie CSS mit HTML 4.0-Elementen umgeht; in HTML 4.0 ist die Semantik der verschiedenen Tabellenelemente (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH und TD) wohldefiniert. In anderen Dokumentsprachen (wie beispielsweise XML-Anwendungen) gibt es m=glicherweise keine vordefinierten Tabellenelemente. CSS2 erlaubt es deshalb den Autoren, Elemente aus der Dokumentsprache mit Hilfe der 'display'-Ei-

< 782 >

Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

genschaft auf Tabellenelemente „abzubilden“. Die nachfolgende Regel beispielsweise bewirkt, dass sich das FOO-Element wie ein TABLE-Element aus HTML und das BAR-Element wie ein CAPTION-Element verh@lt: FOO { display : table } BAR { display : table-caption }

Im folgenden Abschnitt beschreiben wir die verschiedenen Tabellenelemente. In dieser Spezifikation bezieht sich der Begriff Tabelle auf jedes Element, das fr das Anlegen einer Tabelle genutzt wird. Ein „internes“ Tabellenelement ist ein Element, das eine Zeile, Zeilengruppe, Spalte, Spaltengruppe oder Zelle erzeugt.

Anmerkung der bersetzer: Das folgende Beispiel zeigt eine Tabelle eines XMLDokumenttyps, der nicht die bekannten HTML- oder CALS-Tabellen verwendet. Es handelt sich um die Tabelle der ersten Fußball-Bundesliga. Zu sehen ist der Stand nach einem Spieltag in der Saison 2002/2003. Zur Beschreibung der Daten werden Elementtypnamen verwendet, die beschreiben, worum es sich bei den Daten handelt: verein, tore, punkte.

Einf#hrung in Tabellen

Cascading Style Sheets, Level 2





]>

Bayern MUnchen 29 29:14

Borussia Dortmund 24 19:9

Werder Bremen 23 27:25

1. FC Schalke 04 22 16:11

Hertha BSC Berlin 22 16:12

< 783 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

VfB Stuttgart 21 21:15

VfL Bochum 20 27:21

1860 MUnchen 20 18:15

VfL Wolfsburg 19 15:16

Hamburger SV 19 16:19

Bayer Leverkusen 16 17:20

1. FC NUrnberg 16 16:21

Borussia M^nchengladbach 15 16:12

Hansa Rostock 15 15:14

Hannover 96 15 22:27

Armenia Bielefeld 14 13:22

< 784 >

Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

Energie Cottbus 8 7:27

FC Kaiserslautern 7 12:22

In der zweiten Zeile verweist die Verarbeitungsanweisung xml-stylesheet auf die externe CSS-Datei liga.css. Erst die CSS-Anweisungen sorgen fr die tabellarische Darstellung der Daten. Nachfolgend nun die CSS-Datei: { display: margin: border-collapse: border: border-spacing: } pos { display: padding: } verein { display: font-weight: padding: background: } punkte { display: padding: background: } tore { display: padding: background: }

table; 5em; separate; 4px solid black; 3px; table-row; 2px; table-cell; bolder; 1em; lightgray;

Cascading Style Sheets, Level 2

liga

table-cell; 1em; lightblue; table-cell; 1em; lightgreen;

Einf#hrung in Tabellen

< 785 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

Mozilla 1.1 stellt dieses Beispiel wie in der Abbildung zu sehen dar.

Im weiteren Verlauf des Kapitels werden die einzelnen CSS-Anweisungen, die fr die Darstellung als Tabelle verantwortlich sind, detailliert erkl@rt.

< 786 >

Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

17.2 Das CSS-Tabellenmodell

table (in HTML: table) Gibt an, dass ein Element eine Tabelle auf Blockebene definiert: Es handelt sich um einen rechteckigen Block, der Teil eines Bockformatierungskontexts (9.4.1) ist. inline-table (in HTML: table) Gibt an, dass ein Element eine Tabelle auf Inline-Ebene definiert: Es handelt sich um einen rechteckigen Block, der Teil eines Inline-Formatierungskontexts (9.4.2) ist. table-row (in HTML: tr) Gibt an, dass ein Element eine Zeile mit Zellen ist. table-row-group (in HTML: tbody) Gibt an, dass ein Element eine oder mehrere Zeilen gruppiert. table-header-group (in HTML: thead) Wie 'table-row-group', aber fr die visuelle Formatierung; die Zeilengruppe wird immer vor allen anderen Zeilen und Zeilengruppen und nach allen nach oben ausgelagerten berschriften angezeigt. Druck-Benutzerprogramme k=nnen Kopfzeilen auf jeder Zeile wiederholen, ber die sich eine Tabelle erstreckt. table-footer-group (in HTML: tfoot) Wie 'table-row-group', aber fr die visuelle Formatierung; die Zeilengruppe wird immer nach allen anderen Zeilen und Zeilengruppen und vor nach unten ausgelagerten berschriften angezeigt. Druck-Benutzerprogramme k=nnen Fußzeilen auf jeder Seite wiederholen, ber die sich eine Tabelle erstreckt. table-column (in HTML: col) Gibt an, dass ein Element eine Spalte beschreibt. table-column-group (in HTML: colgroup) Gibt an, dass ein Element eine oder mehrere Spalten gruppiert. table-cell (in HTML: td, th) Gibt an, dass ein Element eine Tabellenzelle darstellt. table-caption (in HTML: caption) Gibt eine berschrift fr die Tabelle an.

Das CSS-Tabellenmodell

< 787 >

Cascading Style Sheets, Level 2

Das CSS-Tabellenmodell basiert auf dem Tabellenmodell von HTML 4.0, wobei die Struktur einer Tabelle eng mit dem visuellen Layout der Tabelle verknpft ist. In diesem Modell besteht die Tabelle aus einer optionalen berschrift und einer beliebigen Anzahl von Zellzeilen. Das Tabellenmodell wird auch als „zeilenorientiert“ bezeichnet, weil die Autoren in der Dokumentsprache explizit Zeilen angeben, keine Spalten. Spalten werden abgeleitet, nachdem alle Zeilen angegeben wurden – die erste Zelle jeder Zeile geh=rt zur ersten Spalte, die zweite zur zweiten Spalte usw. Zeilen und Spalten k=nnen strukturiert gruppiert werden, und diese Gruppierung wird in der Darstellung bercksichtigt (z. B. kann um eine bestimmte Zeilengruppe ein Rahmen gezogen werden). Das Tabellenmodell besteht also aus Tabellen, berschriften, Zeilen, Zeilengruppen, Spalten, Spaltengruppen und Zellen. Fr das CSS-Modell ist es nicht erforderlich, dass die Dokumentsprache Elemente enth@lt, die diesen Komponenten entsprechen. Fr Dokumentsprachen (wie beispielsweise XML-Anwendungen), die keine vordefinierten Tabellenelemente haben, mssen Autoren die Elemente aus der Dokumentsprache auf Tabellenelemente abbilden; das geschieht mit Hilfe der 'display'-Eigenschaft. Die folgenden 'display'-Werte weisen einem beliebigen Element Tabellensemantik zu:

Page size: 168,00 x 240,00 mm

Sandini Bib

Elemente, fr die 'display' auf 'table-column' oder 'table-column-group' gesetzt ist, werden nicht dargestellt (so, als w@re 'display' auf 'none' gesetzt), aber sie sind praktisch, weil sie m=glicherweise Attribute haben, die einen bestimmten Stil fr die Spalten vorgeben, die sie darstellen. Das Standard-Stylesheet fr HTML 4.0 im Anhang zeigt die Verwendung dieser Werte fr HTML 4.0: TABLE TR THEAD TBODY TFOOT COL COLGROUP TD, TH CAPTION

{ { { { { { { { {

display: display: display: display: display: display: display: display: display:

table } table-row } table-header-group } table-row-group } table-footer-group } table-column } table-column-group } table-cell } table-caption }

Benutzerprogramme k=nnen diese 'display'-Eigenschaftswerte fr HTML-Dokumente ignorieren, weil die Autoren das erwartete Verhalten eines Elements nicht ver@ndern sollten.

Cascading Style Sheets, Level 2

17.2.1 Anonyme Tabellenobjekte Andere Dokumentsprachen als HTML enthalten m=glicherweise nicht alle Elemente aus dem CSS2-Tabellenmodell. In diesen F@llen mssen die „fehlenden“ Elemente vorausgesetzt werden, damit das Tabellenmodell funktioniert. Die fehlenden Elemente erzeugen anonyme Objekte (z. B. anonyme Boxen im visuellen Tabellenlayout), die den folgenden Regeln entsprechen: 1. Jedes Tabellenelement erzeugt automatisch anonyme Tabellenobjekte um sich selbst herum, die aus mindestens drei verschachtelten Objekten bestehen, die einem 'table'/'inline-table'-Element, einem 'table-row'-Element und einem 'table-cell'-Element entsprechen. 2. Wenn das bergeordnete P eines 'table-cell'-Elements T keine 'table-row' ist, wird ein Objekt, das einer 'table-row' entspricht, zwischen P und T erzeugt. Dieses Objekt erstreckt sich ber alle nachfolgenden gleichrangigen 'table-cell'-Elemente (im Dokumentbaum) von T. 3. Wenn das bergeordnete P eines 'table-row'-Elements T kein 'table'-, 'inline-table'- oder 'table-row-group'-Element ist, wird ein Element, das einem 'table'-Element entspricht, zwischen P und T erzeugt. Dieses Objekt erstreckt sich ber alle gleichrangigen Elemente (im Dokumentbaum) von T, fr die ein bergeordnetes 'table'-Element ben=tigt wird: 'tablerow', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'tablecolumn-group' und 'caption'. 4. Wenn ein bergeordnetes P eines 'table-row-group'- (oder 'table-header-group'- oder 'table-footer-group'-) Elements T kein 'table' oder 'inline-table' ist, wird ein Element entsprechend einem 'table'-Objekt zwischen P und T erzeugt. Dieses Objekt erstreckt sich ber alle gleichrangigen Elemente (im Dokumentbaum) von T, fr die ein bergeordnetes 'table'-Element ben=tigt wird: 'table-row', 'table-row-group', 'table-header-group', 'tablefooter-group', 'table-column', 'table-column-group' und 'caption'. 5. Wenn ein untergeordnetes T eines 'table-row'-Elements P kein 'table-cell'-Element ist, wird zwischen P und T ein Objekt erzeugt, das einem 'table-cell'-Element entspricht. Dieses Objekt erstreckt sich ber alle nachfolgenden gleichrangigen Elemente von T, bei denen es sich nicht um 'table-cell'-Elemente handelt.

< 788 >

Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel In diesem XML-Beispiel wird angenommen, dass ein 'table' Element das HBOX-Element enth@lt:

George 4287 1998

weil das zugeh=rige Stylesheet wie folgt aussieht: HBOX { display: table-row } VBOX { display: table-cell }

In diesem Beispiel werden drei 'table-cell'-Elemente angenommen, die den Text in den ROWs enthalten. Beachten Sie, dass der Text weiter in anonyme Inline-Boxen eingekapselt ist, wie im Abschnitt ber das visuelle Formatierungsmodell erkl@rt:

This is the top row. This is the middle row. This is the bottom row.

Das Stylesheet ist:

HTML-Benutzerprogramme mssen keine anonymen Objekte gem@ß den obigen Regeln erzeugen.

17.3 Spaltenselektoren Tabellenzellen k=nnen zu zwei Kontexten geh=ren: Zeilen und Spalten. Im Quelldokument sind Zellen jedoch Ableitungen von Zeilen, nie von Spalten. Trotzdem k=nnen einige Aspekte von Zellen beeinflusst werden, indem man Eigenschaften fr Spalten setzt. Die folgenden Eigenschaften gelten fr Spalten- und Spaltengruppenelemente: 'border' Die verschiedenen Rahmeneigenschaften gelten fr Spalten nur dann, wenn 'border-collapse' fr das Tabellenelement auf 'collapse' gesetzt ist. In diesem Fall werden Rahmen, die fr Spalten und Spaltengruppen gesetzt sind, in den Algorithmus zur Konfliktaufl=sung (17.6.2) eingegeben, der den Rahmenstil an jeder Zellkante festlegt.

Spaltenselektoren

< 789 >

Cascading Style Sheets, Level 2

STACK { display: inline-table } ROW { display: table-row } D { display: inline; font-weight: bolder }

Page size: 168,00 x 240,00 mm

Sandini Bib

'background' Die Hintergrundeigenschaften setzen den Hintergrund fr Zellen in der Spalte, aber nur, wenn sowohl die Zelle als auch die Zeile transparente Hintergrnde haben. Weitere Informationen finden Sie im Abschnitt 17.5.1 ber Tabellenebenen und Transparenz. 'width' Die 'width'-Eigenschaft gibt die Mindestbreite fr die Spalte vor. 'visibility' Wenn die 'visibility' einer Spalte auf 'collapse' gesetzt ist, werden keine Zellen der Spalte dargestellt, und Zellen, die sich in andere Spalten erstrecken, werden abgeschnitten. Darber hinaus wird die Breite der Tabelle um die Breite der Spalte verringert, die diese Spalte eingenommen h@tte. Weitere Informationen finden Sie im Abschnitt „Dynamische Effekte“, sp@ter in diesem Kapitel. Andere Werte fr 'visibility' zeigen keine Wirkung. Beispiel Nachfolgend finden Sie einige Beispiele fr Stilregeln, die Eigenschaften fr Spalten setzen. Die beiden ersten Regeln implementieren zusammen das „rules“-Attribut von HTML 4.0 mit einem Wert „cols“. Die dritte Regel macht die Spalte „totals“ blau, die beiden letzten Regeln zeigen, wie man einer Spalte mit Hilfe des Algorithmus fr ein fixes Layout eine feste Gr=ße zuweist. COL { border-style: none solid } TABLE { border-style: hidden } COL.totals { background: blue } TABLE { table-layout: fixed } COL.totals { width: 5em }

Cascading Style Sheets, Level 2

17.4 Tabellen im visuellen Formatierungsmodell Im visuellen Formatierungsmodell kann sich eine Tabelle wie ein Element auf Blockebene oder ein ersetztes Element auf Inline-Ebene verhalten. Tabellen haben Inhalt, Polsterung, Rahmen und R@nder. In beiden F@llen erzeugt das Tabellenelement eine anonyme Box, die sowohl die eigentliche Tabellen-Box als auch die Box fr die berschrift (falls vorhanden) enth@lt. Die Boxen fr Tabelle und berschrift behalten ihre eigenen Inhalts-, Polsterungs-, Rand- und Rahmenbereiche, und die Gr=ße der rechteckigen anonymen Box ist die kleinste Gr=ße, die erforderlich ist, um beides aufzunehmen. Vertikale R@nder fallen zusammen, wenn sich die Tabellen-Box und die berschrifts-Box berhren. Eine Neupositionierung der Tabelle muss die gesamte anonyme Box verschieben, nicht nur die Tabellen-Box, damit die berschrift der Tabelle folgt.

< 790 >

Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

caption’s margin

caption caption caption caption caption

} collapsed mar

table’s margin

Abbildung 17.1: Skizze einer Tabelle mit einer darber liegenden berschrift; der untere Rand der berschrift f@llt mit dem oberen Rand der Tabelle zusammen.

17.4.1 Positionierung und Ausrichtung von berschriften

Wert:

top | bottom | left | right | inherit

Ausgangswert:

top

Angewendet auf:

'table-caption'-Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

Diese Eigenschaft gibt die Position der Werte haben die folgenden Bedeutungen: top Positioniert die bottom Positioniert die left Positioniert die right Positioniert die

berschrifts-Box relativ zur Tabellen-Box an. Die

berschrifts-Box oberhalb der Tabellen-Box. berschrifts-Box unterhalb der Tabellen-Box. berschrifts-Box links von der Tabellen-Box. berschrifts-Box rechts von der Tabellen-Box.

Tabellen im visuellen Formatierungsmodell

< 791 >

Cascading Style Sheets, Level 2

'caption-side'

Page size: 168,00 x 240,00 mm

Sandini Bib

berschriften oberhalb oder unterhalb eines 'table'-Elements werden fast so formatiert, als handle es sich dabei um ein Blockelement vor oder nach der Tabelle, außer dass (1) sie nicht vererbbare Eigenschaften von der Tabelle erben und (2) nicht als Block-Box betrachtet werden, was 'compact'- oder 'run-in'-Elemente betrifft, die der Tabelle m=glicherweise vorausgehen. Eine berschrift, die sich oberhalb oder unterhalb einer Tabellen-Box befindet, verh@lt sich ebenfalls wie eine Block-Box fr Breitenberechnungen; die Breite wird relativ zur Breite des umschließenden Blocks der Tabellen-Box berechnet. Fr eine berschrift, die sich rechts oder links von einer Tabellen-Box befindet, setzt dagegen ein anderer Wert als 'auto' fr 'width' die Breite explizit; 'auto' weist das Benutzerprogramm an, eine „sinnvolle Breite“ zu w@hlen. Das reicht von „der schmalsten m=glichen Box“ bis hin zu „eine einzelne Zeile“, wir empfehlen also, dass die Autoren fr die Breite einer linken und rechten berschrift nicht 'auto' angeben. Um den berschriftsinhalt horizontal innerhalb der berschrifts-Box auszurichten, verwenden Sie die 'text-align'-Eigenschaft. Fr die vertikale Ausrichtung einer linken oder rechten berschrifts-Box relativ zur Tabellen-Box ist die 'vertical-align'-Eigenschaft zust@ndig. Die einzigen sinnvollen Werte sind in diesem Fall 'top', 'middle' und 'bottom'. Alle anderen Werte werden genau wie 'top' behandelt. Beispiel In diesem Beispiel platziert die 'caption-side'-Eigenschaft berschriften unterhalb von Tabellen. Die berschrift ist so breit wie das bergeordnete Element der Tabelle, und der berschriftstext ist linksbndig ausgerichtet.

Cascading Style Sheets, Level 2

CAPTION { caption-side: bottom; width: auto; text-align: left }

Das folgende Beispiel zeigt, wie man eine berschrift im linken Rand platziert. Die eigentliche Tabelle ist zentriert, weil ihre linken und rechten R@nder auf 'auto' gesetzt wurden, und die gesamte Box mit Tabelle und berschrift wird in den linken Rand verschoben, und zwar um dieselbe Breite wie die berschrift. BODY { margin-left: 8em } TABLE { margin-left: auto; margin-right: auto } CAPTION { caption-side: left; margin-left: -8em; width: 8em; text-align: right; vertical-align: bottom }

< 792 >

Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

Angenommen, die Breite der Tabelle w@re kleiner als die verfgbare Breite, dann s@he die Formatierung wie folgt aus: current margins

text text text previous paragraph text text above the table text text more text text text normal paragraph text text etc. etc.

Table 72. This is the caption. It is right aligned. Also aligned at the bottom

header

header

header

cell

cell

cell

cell

cell

cell

cell

cell

cell

cell

cell

cell

cell

cell

cell

cell

cell

cell

Abbildung 17.2: Skizze, die eine zentrierte Tabelle zeigt, wobei die berschrift in den linken Rand hinausragt, weil eine negative 'margin-left'-Eigenschaft angegeben wurde.

Wie andere Elemente der Dokumentsprache auch erzeugen interne Tabellenelemente rechteckige Boxen mit Inhalt, Polsterung und Rahmen. Sie haben jedoch keine R@nder. Das visuelle Layout dieser Boxen wird durch ein rechteckiges unregelm@ßige Raster aus Zeilen und Spalten festgelegt. Jede Box belegt eine ganze Zahl an Rasterzellen, die nach den folgenden Regeln ermittelt werden. Diese Regeln gelten nicht fr HTML 4.0 oder frhere HTML-Versionen; HTML weist eigene Beschr@nkungen fr Zeilen- und Spaltenbereiche auf. 1. Jede Zeilen-Box belegt eine Zeile Rasterzellen. Insgesamt fllen die Zeilen-Boxen die Tabelle von oben nach unten in der Reihenfolge, in der sie im Quelldokument auftreten (das heißt, die Tabelle belegt genau so viele Rasterzeilen, wie es Zeilenelemente gibt). 2. Eine Zeilengruppe belegt dieselben Rasterzellen wie die Zeilen, die sie enth@lt. 3. Eine Spalten-Box belegt eine oder mehrere Spalten an Rasterzellen. Spalten-Boxen werden nebeneinander in der Reihenfolge, in der sie auftreten, angeordnet. Die erste Spalten-Box kann sich links oder rechts befinden, abh@ngig vom Wert der 'direction'-Eigenschaft der Tabelle. 4. Eine Spaltengruppen-Box belegt dieselben Rasterzellen wie die Spalten, die sie enth@lt. 5. Zellen k=nnen sich ber mehrere Zeilen oder Spalten erstrecken. (Obwohl CSS2 nicht definiert, wie die Anzahl der abgedeckten Zeilen oder Spalten ermittelt wird, hat ein Benutzerprogramm m=glicherweise ein spezielles Wissen ber das Quelldokument; eine zuknftige Version von CSS untersttzt vielleicht eine M=glichkeit, dieses Wissen in CSS-Syntax auszudrcken.) Jede Zelle ist also eine rechteckige Box, ein oder mehr Rasterzellen breit und hoch. Die oberste Zeile dieses Rechtecks befindet sich in der Zeile, die durch das bergeordnete Element der Zelle angegeben wurde. Das Rechteck muss sich so weit wie m=g-

Visuelles Layout von Tabelleninhalt

< 793 >

Cascading Style Sheets, Level 2

17.5 Visuelles Layout von Tabelleninhalt

Page size: 168,00 x 240,00 mm

Sandini Bib

lich links befinden, aber es darf sich nicht mit anderen Zell-Boxen berlappen. Zudem muss es rechts von allen Zellen derselben Zeile stehen, die im Quelldokument vorher vorkommen. (Diese Beschr@nkung gilt, wenn die 'direction'-Eigenschaft der Tabelle gleich 'ltr' ist; wenn die 'direction' 'rtl' ist, vertauschen Sie im vorigen Satz „links“ und „rechts“). 6. Eine Zellen-Box kann nicht ber die letzte Zeilen-Box einer Tabellen- oder Zeilengruppe hinausgehen; Benutzerprogramme mssen sie krzen, bis sie passt. Hinweis: Tabellenzellen k=nnen relativ und absolut positioniert werden, das ist jedoch nicht zu empfehlen: die Positionierung und das Floating entfernen eine Box aus dem Fluss und beeinflussen die Tabellenausrichtung. n Beispiel Hier zwei Beispiele. Das erste soll in einem HTML-Dokument auftreten:

1	2	3	4
5

1 2 3 4 5

Cascading Style Sheets, Level 2

Die zweite Tabelle ist formatiert, wie in der Abbildung rechts gezeigt; die Darstellung der HTML-Tabelle ist von HTML explizit nicht definiert, und CSS versucht nicht, sie zu definieren. Benutzerprogramme k=nnen sie nach Belieben darstellen, z. B. wie in der Abbildung links gezeigt.

1

2

3

4

1

5

2

3

4

5

Abbildung 17.3: Links sehen Sie eine m=gliche Darstellung einer fehlerhaften HTML 4.0-Tabelle; rechts sehen Sie die einzig m=gliche Formatierung einer @hnlichen Tabelle, die nicht in HTML formuliert ist.

17.5.1 Tabellenebenen und Transparenz Um den Hintergrund jeder Tabellenzelle zu ermitteln, kann man sich die verschiedenen Tabellenelemente als sechs bereinander geschichtete Ebenen vorstellen. Der Hintergrund, der fr ein Element in einer der Ebenen gesetzt wird, ist nur sichtbar, wenn die darber liegenden Ebenen einen transparenten Hintergrund haben.

< 794 >

Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

cells

rows

row groups

columns

column groups

table

1. Unterste Ebene ist eine einzelne Ebene, die die eigentliche Tabellen-Box darstellt. Wie alle Boxen kann sie transparent sein. 2. Die n@chste Ebene enth@lt die Spaltengruppen. Die Spaltengruppen sind so groß wie die Tabelle, aber sie mssen nicht die gesamte Tabelle horizontal abdecken. 3. ber den Spaltengruppen gibt es die Bereiche, die die Spalten-Boxen darstellen. Wie Spaltengruppen sind Spalten so hoch wie die Tabelle, mssen aber nicht die gesamte Tabelle horizontal abdecken. 4. Es folgt die Ebene, die die Zeilengruppen enth@lt. Jede Zeilengruppe ist so breit wie die Tabelle. Zusammen decken die Zeilengruppen die gesamte Tabelle von oben bis unten ab. 5. Die vorletzte Ebene enth@lt die Zeilen. Die Zeilen decken ebenfalls die gesamte Tabelle ab. 6. Die oberste Ebene enth@lt die eigentlichen Zellen. Wie die Abbildung zeigt, enthalten zwar alle Zeilen dieselbe Anzahl an Zellen, aber m=glicherweise haben nicht alle Zellen einen angegebenen Inhalt. Diese „leeren“ Zellen sind transparent, so dass die unteren Ebenen durchscheinen. Beispiel Im folgenden Beispiel enth@lt die erste Zeile vier Zellen, die zweite Zeile dagegen keine Zellen, deshalb scheint der Tabellenhintergrund durch, außer wenn sich eine Zelle von der ersten Zeile in diese Zeile weitererstreckt. Der nachfolgende HTML-Code und die Stilregeln:

1	2	3	4

k=nnten wie folgt formatiert werden:

1 2 3 4

Cascading Style Sheets, Level 2

Abbildung 17.5: Tabelle mit drei leeren Zellen in der unteren Zeile

17.5.2 Algorithmen f-r die Tabellenbreite: die 'table-layout'-Eigenschaft CSS definiert kein „optimales“ Layout fr Tabellen, weil es in vielen F@llen Geschmackssache ist, was optimal ist. CSS definiert des Weiteren keine Beschr@nkungen, die die Benutzerprogramme beim Anlegen einer Tabelle bercksichtigen mssen. Benutzerprogramme k=nnen beliebige Algorithmen verwenden, und es steht ihnen frei, Darstellungsgeschwindigkeit einer genaue Darstellung vorzuziehen, außer wenn der „Algorithmus fr ein festes Layout“ (fixed) ausgew@hlt wird.

'table-layout' Wert:

auto | fixed | inherit

Ausgangswert:

auto

Angewendet auf:

'table'- und 'inline-table'-Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual

< 796 >

Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

Die 'table-layout'-Eigenschaft steuert den Algorithmus fr das Anlegen der Zellen, Zeilen und Spalten der Tabelle. Die Werte haben die folgenden Bedeutungen: fixed Verwendet den Algorithmus fr ein festes Tabellen-Layout auto Verwendet einen beliebigen Algorithmus fr ein automatisches Tabellenlayout Die beiden Algorithmen sind nachfolgend beschrieben.

Festes Tabellenlayout

Die Breite einer Tabelle ist dann der gr=ßere Wert aus dem Wert der 'width'-Eigenschaft fr das Tabellenelement und der Summe der Spaltenbreiten (plus Zellauffllung oder Rahmen). Ist die Tabelle breiter als die Summe der Spaltenbreiten, sollte der zus@tzliche Platz gleichm@ßig auf die Spalten verteilt werden. Auf diese Weise kann das Benutzerprogramm beginnen, die Tabelle darzustellen, nachdem es die gesamte erste Zeile erhalten hat. Zellen in nachfolgenden Zeilen haben keine Auswirkung auf die Spaltenbreiten. Alle Zellen, deren Inhalt gr=ßer als die Tabellenbreite ist, entscheiden anhand des Wertes der 'overflow'-Eigenschaft, ob der berlaufenden Inhalt abgeschnitten werden soll.

Automatisches Tabellenlayout Bei diesem Algorithmus (der im Allgemeinen mehr als zwei Durchg@nge ben=tigt), wird die Tabellenbreite durch die Breite ihrer Spalten (und dazwischenliegenden Rahmen) festgelegt. Dieser Algorithmus reflektiert das Verhalten mehrerer bekannter HTML-Benutzerprogramme zum Zeitpunkt der Drucklegung dieser Spezifikation. Benutzerprogramme mssen diesen Algorithmus nicht implementieren, um das Tabellenlayout im Falle von 'table-layout' gleich 'auto' zu implementieren; sie k=nnen einen beliebigen anderen Algorithmus verwenden. Dieser Algorithmus kann ineffizient sein, weil er einerseits fordert, dass das Benutzerprogramm Zugriff auf den gesamten Tabelleninhalt hat, bevor das endgltige Layout festgelegt werden kann, und weil andererseits dafr mehrere Durchg@nge erforderlich sein k=nnen.

Visuelles Layout von Tabelleninhalt

< 797 >

Cascading Style Sheets, Level 2

Bei diesem (schnellen) Algorithmus ist das horizontale Layout der Tabelle nicht vom Inhalt der Zellen, sondern nur von der Breite der Tabelle, der Breite der Spalten sowie den Rahmen oder Zellauffllungen abh@ngig. Die Tabellenbreite kann explizit mit der 'width'-Eigenschaft angegeben werden. Der Wert 'auto' (sowohl fr 'display: table' als auch fr 'display: inline-table') bedeutet, dass der Algorithmus fr das automatische Tabellenlayout verwendet wird. Beim Algorithmus fr ein festes Tabellenlayout wird die Breite jeder Spalte wie folgt ermittelt: 1. Ein Spaltenelement mit einem anderen Wert als 'auto' fr die 'width'-Eigenschaft legt die Breite fr diese Spalte fest. 2. Andernfalls legt eine Zelle in der ersten Zeile mit einem anderen Wert als 'auto' fr die 'width'-Eigenschaft die Breite fr diese Spalte fest. Wenn sich die Zelle ber mehrere Spalten erstreckt, wird die Breite ber die Spalten aufgeteilt. 3. Der restliche horizontale Tabellenraum wird auf alle restlichen Spalten aufgeteilt (abzglich der Rahmen oder Zellauffllungen).

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

Die Spaltenbreiten werden wie folgt ermittelt: 1. Berechnung der Mindestinhaltsbreite (MIB) jeder Zelle: Der formatierte Inhalt kann sich ber mehrere Zeilen erstrecken, darf jedoch nicht ber die Zell-Box hinausgehen. Ist die angegebene 'width' (W) der Zelle gr=ßer als MIB, ist W die Mindestzellbreite. Der Wert 'auto' bedeutet, dass MIB die Mindestzellbreite darstellt. Außerdem kann die „maximale“ Zellbreite fr jede Zelle berechnet werden: Anschließend kann der Inhalt formatiert werden, ohne andere Zeilen umzubrechen, mit Ausnahme jener Zeilen, fr die explizite Zeilenumbrche auftreten. 2. Fr jede Spalte kann eine maximale und minimale Spaltenbreite aus den Zellen ermittelt werden, die sich nur ber diese Spalte erstrecken. Das Minimum ist das, das von der Zelle mit der gr=ßten minimalen Zellenbreite (oder Spaltenbreite, abh@ngig davon, was von beiden gr=ßer ist) ben=tigt wird. Das Maximum ist das, das von der Zelle mit der gr=ßten maximalen Zellbreite (oder der Spaltenbreite, abh@ngig davon, was von beiden gr=ßer ist) ben=tigt wird. 3. Fr jede Zelle, die sich ber mehr als eine Spalte erstreckt, wird die Mindestbreite der Spalten erh=ht, ber die sie sich erstreckt, so dass sie zusammen mindestens so breit sind wie die Zelle. Dasselbe erfolgt fr die maximalen Breiten. Wenn m=glich, sollten alle abgedeckten Spalten um denselben Betrag verbreitert werden. Damit erh@lt man eine maximale und minimale Breite fr jede Spalte. Die Spaltenbreiten beeinflussen die endgltige Tabellenbreite wie folgt: 1. Wenn die 'width'-Eigenschaft des 'table'- oder 'inline-table'-Elements einen vorgegebenen Wert (W) hat, der ungleich 'auto' ist, dann ist der berechnete Wert der Eigenschaft der gr=ßere Wert von W und der Mindestbreite, die alle Spalten brauchen, plus der Zellabst@nde oder Rahmen (MIN). Ist W gr=ßer MIN, sollte die zus@tzliche Breite ber die Spalten verteilt werden. 2. Hat das 'table'- oder 'inline-table'-Element die Eigenschaft 'width: auto', ist die berechnete Tabellenbreite der gr=ßere Wert aus der Breite des die Tabelle umschließenden Blocks und MIN. Ist die maximale Breite, die fr die Spalten plus Zellauffllung oder Rahmen (MAX) erforderlich ist, kleiner als die des umschließenden Blocks, wird MAX verwendet. Ein Prozentwert fr eine Spaltenbreite ist relativ zur Tabellenbreite. Hat die Tabelle die Eigenschaft 'width: auto', stellt ein Prozentwert eine Beschr@nkung fr die Spaltenbreite dar, die ein Benutzerprogramm einhalten sollte. (Offensichtlich ist das nicht immer m=glich: Ist die Spaltenbreite gleich '110%', kann die Beschr@nkung nicht mehr eingehalten werden.) Hinweis: In diesem Algorithmus werden Zeilen (und Zeilengruppen) und Spalten (und Spaltengruppen) durch die Gr=ße der enthaltenen Zellen beschr@nkt und beschr@nken diese. Durch die Festlegung der Breite einer Spalte kann die H=he einer Zeile indirekt beeinflusst werden und umgekehrt. n

17.5.3 Algorithmen f-r die TabellenhUhe Die H=he einer Tabelle wird durch die 'height'-Eigenschaft fr das 'table'- oder 'inline-table'-Element festgelegt. Der Wert 'auto' bedeutet, dass die H=he gleich der Summe der Zeilenh=hen plus aller Zellenabst@nde oder Rahmen ist. Jeder andere Wert gibt die H=he explizit an; die Tabelle kann also h=her oder niedriger als die H=he ihrer Zeilen sein. CSS2 gibt nichts fr die Darstellung vor, wenn sich die angegebene Tabellenh=he von der Inhaltsh=he unterscheidet,

< 798 >

Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

insbesondere, ob die Inhaltsh=he die angegebene H=he berschreiben soll; ist dies nicht der Fall, wie soll dann der zus@tzliche Platz ber die Zeilen verteilt werden, der sich aus einer H=he geringer als die angegebene Tabellenh=he ergibt; oder soll das Benutzerprogramm, falls die Inhaltsh=he die angegebene Tabellenh=he berschreitet, einen Mechanismus bereitstellen, mit dem der Inhalt weitergebl@ttert werden kann? Hinweis: Zuknftige Versionen von CSS werden diese Problematik vielleicht genauer behandeln. n

baseline Die Grundlinie der Zelle erh@lt dieselbe H=he wie die Grundlinie der ersten der Zeilen, ber die sie sich erstreckt (eine Definition der Grundlinien von Zellen und Zeilen finden Sie nachfolgend). top Die obere Kante der Zell-Box wird an der oberen Kante der ersten Zeile ausgerichtet, ber die sie sich erstreckt. bottom Die untere Kante der Zell-Box wird an der unteren Kante der letzten Zeile ausgerichtet, ber die sie sich erstreckt. middle Der Mittelpunkt der Zelle wird an dem Mittelpunkt der Zeile ausgerichtet, ber die sie sich erstreckt. sub, super, text-top, text-bottom Diese Werte gelten nicht fr Zellen; die Zelle wird in diesen F@llen an der Grundlinie ausgerichtet.

Visuelles Layout von Tabelleninhalt

< 799 >

Cascading Style Sheets, Level 2

Die H=he der Box eines 'table-row'-Elements wird berechnet, nachdem dem Benutzerprogramm alle Zellen der Zeile zur Verfgung stehen: Es ist der Maximalwert aus der angegebenen H=he der Zeile ('height') und der Mindesth=he (MIN), die fr die Zellen erforderlich ist. Ein 'height'-Wert von 'auto' fr eine 'table-row' bedeutet, die berechnete Zeilenh=he ist MIN. MIN ist von der Zell-Box-H=he und der Zell-Box-Ausrichtung abh@ngig (@hnlich wie die Berechnung einer Zeilen-Box-H=he). CSS2 definiert nicht, worauf sich Prozentwerte von 'height' beziehen, wenn sie fr Tabellenzeilen und Zeilengruppen angegeben werden. In CSS2 ist die H=he einer Zell-Box der Maximalwert aus der 'height'-Eigenschaft der Tabellenzelle und der fr den Inhalt erforderlichen Mindesth=he (MIN). Der Wert 'auto' fr 'height' impliziert einen berechneten Wert von MIN. CSS2 definiert nicht, worauf sich Prozentwerte von 'height' beziehen, wenn sie fr Tabellenzellen angegeben sind. CSS2 gibt nicht an, wie Tabellenzellen, die sich ber mehrere Zeilen erstrecken, die Zeilenh=henberechnungen beeinflussen. Es wird nur vorgegeben, dass die Summe der betreffenden Zeilenh=hen groß genug sein muss, um die Zelle aufzunehmen, die sich ber die Zeilen erstreckt. Die 'vertical-align'-Eigenschaft jeder Tabellenzelle legt ihre Ausrichtung innerhalb der Zeile fest. Der Inhalt jeder Zelle hat eine Grundlinie, ein Oben, eine Mitte und ein Unten, genau wie die eigentliche Zeile auch. Im Kontext von Tabellen haben die Werte fr 'vertical-align' die folgenden Bedeutungen:

Page size: 168,00 x 240,00 mm

Sandini Bib

Die Grundlinie einer Zelle ist die Grundlinie der ersten Zeilen-Box in der Zelle. Falls es keinen Text gibt, ist die Grundlinie die Grundlinie des Objekts, das in der Zelle angezeigt wird, oder, falls es kein solches gibt, die untere Kante der Zell-Box. Der maximale Abstand zwischen der oberen Kante der Zell-Box und der Grundlinie ber alle Zellen, fr die 'vertical-align: baseline' gilt, wird verwendet, um die Grundlinie der Zeile zu setzen. Hier ein Beispiel: Beispiel

Cascading Style Sheets, Level 2

Abbildung 17.6: Skizze, die die Auswirkung verschiedener Werte von 'vertical-align' auf Tabellenzellen verdeutlicht. Die Zell-Boxen 1 und 2 werden an ihren Grundlinien ausgerichtet. Zell-Box 2 hat die gr=ßte H=he ber der Grundlinie und legt damit die Grundlinie der Zeile fest. Beachten Sie, dass die Zeile keine Grundlinie hat (oder braucht), wenn keine Zell-Box an ihrer Grundlinie ausgerichtet ist. Um mehrdeutige Situationen zu vermeiden, geht die Ausrichtung der Zellen in der nachstehenden Reihenfolge vor: 1. Zuerst werden die Zellen positioniert, die an ihrer Grundlinie ausgerichtet sind. Damit wird die Grundlinie der Zeile eingerichtet. Anschließend werden die Zellen mit 'verticalalign: top' positioniert. 2. Jetzt hat die Zeile eine obere Kante, m=glicherweise eine Grundlinie sowie eine provisorische H=he, n@mlich den Abstand von der oberen Kante zu der untersten Kante der bisher positionierten Zellen. (Weitere Bedingungen der Zellauffllung finden Sie nachfolgend.) 3. Falls eine der weiteren Zellen, die unten oder in der Mitte ausgerichtet sind, eine H=he hat, die gr=ßer als die aktuelle H=he der Zeile ist, wird die Zeilenh=he auf das Maximum dieser Zellen erh=ht, indem die Unterkante abgesenkt wird. 4. Schließlich werden die restlichen Zellen positioniert. Zellboxen, die kleiner als die Zeilenh=he sind, erhalten eine zus@tzliche Polsterung oben oder unten.

< 800 >

Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

17.5.4 Horizontale Ausrichtung in einer Spalte Die horizontale Ausrichtung eines Zellinhalts innerhalb einer Zell-Box wird mit Hilfe der 'textalign'-Eigenschaft angegeben. Wenn die 'text-align'-Eigenschaft fr mehr als eine Zelle in einer Spalte auf einen Zeichenkettenwert gesetzt ist, wird der Inhalt dieser Zellen entlang einer vertikalen Achse ausgerichtet. Der Anfang der Zeichenkette berhrt diese Achse. Die Richtung der Zeichen bestimmt, ob die Zeichenkette links oder rechts von der Achse liegt. Die Ausrichtung des Texts auf diese Weise ist nur dann sinnvoll, wenn der Text in eine Zeile passt. Das Ergebnis ist nicht definiert, wenn sich der Zellinhalt ber mehr als eine Zeile erstreckt. Falls der Wert von 'text-align' fr eine Tabellenzelle eine Zeichenkette ist, die Zeichenkette aber nicht im Zellinhalt auftritt, berhrt das Ende des Zellinhalts die vertikale Achse der Ausrichtung. Beachten Sie, dass die Zeichenketten nicht fr alle Zellen gleich sein mssen, obwohl dies normalerweise der Fall ist. CSS untersttzt keine Methode, um den Abstand der vertikalen Ausrichtungsachse relativ zur Kante einer Spalten-Box anzugeben. Beispiel Das folgende Stylesheet: TD { text-align: "." } TD:before { content: "$" }

Ferngespr]che
1.30
2.50
10.80
111.01
85.
90
.05
.06

entlang des Dezimalpunkts ausgerichtet werden. Spaßeshalber haben wir das Pseudo-Element :before verwendet, um vor jeder Zahl ein Dollarzeichen einzufgen. Die Tabelle k=nnte wie folgt dargestellt werden: Ferngespr]che $1.30 $2.50 $10.80 $111.01 $85. $90 $.05 $.06

Visuelles Layout von Tabelleninhalt

< 801 >

Cascading Style Sheets, Level 2

bewirkt, dass die Spalte der Dollarwerte in der folgenden HTML-Tabelle:

Page size: 168,00 x 240,00 mm

Sandini Bib

17.5.5 Dynamische Zeilen- und Spalteneffekte Die 'visibility'-Eigenschaft nimmt den Wert 'collapse' fr Zeilen-, Zeilengruppen-, Spalten- und Spaltengruppenelemente an. Dieser Wert bewirkt, dass die ganze Zeile oder Spalte aus der Anzeige entfernt und der Platz, der normalerweise von der Zeile oder Spalte belegt wird, fr anderen Inhalt verfgbar gemacht wird. Die Unterdrckung der Zeile oder Spalte wirkt sich jedoch nicht anderweitig auf das Layout der Tabelle aus. Das erlaubt dynamische Effekte zum Entfernen von Tabellenzeilen oder -spalten, ohne eine Neudarstellung der Tabelle zu erzwingen, um die m=glichen Onderungen in Spaltenbeschr@nkungen zu bercksichtigen.

17.6 Rahmen Es gibt zwei verschiedene Modelle, um in CSS Rahmen fr Tabellenzellen zu setzen. Das eine ist am besten fr so genannte trennende Rahmen um einzelne Zellen herum geeignet, das andere fr Rahmen, die fortlaufend vom einen Ende der Tabelle zum anderen verlaufen. Mit jedem dieser Modelle k=nnen viele Rahmenstile generiert werden, deshalb ist es h@ufig Geschmackssache, welches von beiden verwendet wird.

Cascading Style Sheets, Level 2

'border-collapse' Wert:

collapse | separate | inherit

Ausgangswert:

collapse

Angewendet auf:

'table'- und 'inline-table'-Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

Diese Eigenschaft legt das Rahmenmodell fr eine Tabelle fest. Der Wert 'separate' w@hlt das Rahmenmodell mit trennenden Rahmen aus. Der Wert 'collapse' w@hlt das Modell mit zusammenfallenden Rahmen aus. Die Modelle sind nachfolgend beschrieben.

17.6.1 Das Modell mit trennenden Rahmen 'border-spacing' Wert:

? | inherit

Ausgangswert:

0

Angewendet auf:

'table'- und 'inline-table'-Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

< 802 >

Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

Die L@nge gibt den Abstand an, der benachbarte Zellrahmen voneinander trennt. Wird nur eine L@nge angegeben, gibt sie sowohl den horizontalen als auch den vertikalen Abstand an. Werden zwei L@ngen angegeben, bezieht sich die erste auf den horizontalen Abstand, die zweite auf den vertikalen Abstand. L@ngen drfen nicht negativ sein. In diesem Modell hat jede Zelle einen eigenen Rahmen. Die 'border-spacing'-Eigenschaft gibt den Abstand zwischen den Rahmen benachbarter Zellen an. Dieser Abstand wird mit dem Hintergrund des Tabellenelements gefllt. Zeilen, Spalten, Zeilengruppen und Spaltengruppen k=nnen keine Rahmen haben (das heißt, Benutzerprogramme mssen die Rahmeneigenschaften fr diese Elemente ignorieren). Beispiel Die Tabelle in der nachfolgenden Abbildung k=nnte das Ergebnis etwa des folgenden Stylesheets sein: TABLE

{ border: outset 10pt; border-collapse: separate; border-spacing: 15pt } TD { border: inset 5pt } TD.special { border: inset 10pt } /* Die obere linke Zelle */

table width

vertical cell−spacing

cell border (inset)

cell width

horizontal cell−spacing

Abbildung 17.7: Eine Tabelle, deren 'border-spacing' auf einen L@ngenwert gesetzt ist. Beachten Sie, dass jede Zelle einen eigenen Rahmen hat und die Tabelle einen separaten Rahmen hat.

Rahmen

< 803 >

Cascading Style Sheets, Level 2

table border (outset)

Page size: 168,00 x 240,00 mm

Sandini Bib

Rahmen um leere Zellen: die Eigenschaft 'empty-cells' 'empty-cells' Wert:

show | hide | inherit

Ausgangswert:

show

Angewendet auf:

'table-cell'-Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

Bei dem Modell der trennenden Rahmen steuert diese Eigenschaft die Darstellung von Rahmen um Zellen, die keinen sichtbaren Inhalt haben. Leere Zellen und Zellen, deren 'visibility'-Eigenschaft auf 'hidden' gesetzt ist, werden so behandelt, als h@tten sie keinen sichtbaren Inhalt. Sichtbarer Inhalt beinhaltet „ “ und anderen Leeraum außer ASCII Wagenrcklauf („\0D“), Zeilenvorschub („\0A“), Tabulator („\09“) und Leerzeichen („\20“). Wenn diese Eigenschaft den Wert 'show' hat, werden Rahmen um leere Zellen (wie um normale Zellen) gezogen. Der Wert 'hide' bedeutet, dass um leere Zellen keine Rahmen gezogen werden. Haben darber hinaus alle Zellen in einer Zeile den Wert 'hide' und keinen sichtbaren Inhalt, verh@lt sich die gesamte Zeile so, als w@re 'dispay: none'.

Cascading Style Sheets, Level 2

Beispiel Die folgende Regel bewirkt, dass Rahmen um alle Zellen gezogen werden: TABLE { empty-cells: show }

17.6.2 Das Modell mit den zusammenfallenden Rahmen Im Modell mit den zusammenfallenden Rahmen ist es m=glich, Rahmen anzugeben, die einen Teil oder eine gesamte Zelle, Zeile, Zeilengruppe, Spalte und Spaltengruppe umrahmen. Auf diese Weise k=nnen Rahmen fr das „rule“-Attribut angegeben werden. Rahmen sind an den Rasterlinien zwischen den Zellen zentriert. Benutzerprogramme mssen eine konsistente Regel finden, um im Fall einer ungeraden Nummer diskreter Einheiten (Bildschirmpixel, Druckerpunkte) abzurunden. Die folgende Skizze zeigt, wie die Breite der Tabelle, die Breite der Rahmen, die Auffllung und die Zellbreite zusammenspielen. Ihre Beziehung wird durch die folgende Gleichung beschrieben, die fr jede Zeile der Tabelle gilt: Zeilenbreite = (0.5 * border-width0) + padding-left1 + width1 + padding-right1 + borderwidth1 + padding-left2 + ... + padding-rightn + (0.5 * border-widthn) Hier ist n die Anzahl der Zellen in der Zeile, und border-widthi bezieht sich auf den Rahmen zwischen den Zellen i und i+1. Beachten Sie, dass fr die Tabellenbreite nur die H@lfte der beiden @ußeren Rahmen bercksichtigt wird; die andere H@lfte dieser beiden Rahmen liegt im Randbereich.

< 804 >

Tabellen

Page size: 168,00 x 240,00 mm

table width

border−width

width

padding

padding

width

border−width padding

padding

padding

cell width

border−width

border−width padding

Sandini Bib

grid line

Abbildung 17.8: Schema, das die Breiten von Zellen und Rahmen und die Auffllung von Zellen zeigt Beachten Sie, dass die Breite der Tabelle in diesem Modell die H@lfte des Tabellenrahmens enth@lt. Darber hinaus hat eine Tabelle in diesem Modell keine Auffllung (aber R@nder).

Im Modell fr zusammenfallende Rahmen kann jede Kante jeder Zelle durch Rahmeneigenschaften fr eine Vielzahl von Elementen gesetzt werden, die diese Kanten treffen (Zellen, Zeilen, Zeilengruppen, Spalten, Spaltengruppen und die eigentliche Tabelle), und diese Rahmen k=nnen in Breite, Stil und Farbe variieren. Die Faustregel dabei ist, dass an jeder Kante der am besten ins Auge fallende Rahmenstil verwendet wird. Sie gilt nur dann nicht, wenn irgendein Auftreten des Stils 'hidden' den Rahmen unbedingt deaktiviert. Die folgenden Regeln legen fest, welcher Rahmen im Falle eines Konflikts „gewinnt“: 1. Rahmen mit dem 'border-style' 'hidden' haben Priorit@t gegenber allen anderen konflikterzeugenden Rahmen. Jeder Rahmen mit diesem Wert unterdrckt alle Rahmen an dieser Position. 2. Rahmen mit dem Stil 'none' haben die geringste Priorit@t. Nur wenn die Rahmeneigenschaften aller Elemente, die sich an dieser Kante treffen, gleich 'none' sind, wird der Rahmen weggelassen (aber beachten Sie, dass 'none' der Standardwert fr den Rahmenstil ist.) 3. Ist keiner der Stile gleich 'hidden' und mindestens einer davon ist nicht 'none', werden schmale Rahmen zugunsten breiter Rahmen verworfen. Haben mehrere Rahmen dieselbe 'border-width', erhalten die Stile in dieser Reihenfolge Priorit@t: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', und die niedrigste: 'inset'. 4. Unterscheiden sich die Rahmenstile nur in der Farbe, gewinnt der fr eine Zelle gesetzte Stil gegenber dem fr eine Zeile, der gegenber dem fr eine Zeilengruppe, Spalte, Spaltengruppe und schließlich Tabelle gewinnt.

Rahmen

< 805 >

Cascading Style Sheets, Level 2

RahmenkonfliktauflUsung

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Das folgende Beispiel zeigt die Anwendung dieser Priorit@tsregeln. Das folgende Stylesheet: TABLE

{ border-collapse: collapse; border: 5px solid yellow; } *#col1 { border: 3px solid black; } TD { border: 1px solid red; padding: 1em; } TD.solid-blue { border: 5px dashed blue; } TD.solid-green { border: 5px solid green; }

Cascading Style Sheets, Level 2

mit dieser HTML-Quelle:

1	2	3
4	5	6
7	8	9
10	11	12
13	14	15

< 806 >

Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

wrde etwa Folgendes erzeugen:

Abbildung 17.9: Beispiel fr eine Tabelle mit zusammenfallenden Rahmen Das n@chste Beispiel zeigt eine Tabelle mit horizontalen Linien zwischen den Zeilen. Der oberste Rahmen der Tabelle ist auf 'hidden' gesetzt, um den obersten Rahmen der ersten Zeile zu unterdrcken. Das implementiert das „rules“-Attribut von HTML 4.0 (rules=„rows“).

a

b

c

3

4

5

5

12

13

Abbildung 17.10: Tabelle mit horizontalen Linien zwischen den Zeilen In diesem Fall kann derselbe Effekt auch erzielt werden, ohne einen 'hidden'-Rahmen fr TABLE zu setzen, indem die erste Zeile separat adressiert wird. Welche Methode bevorzugt wird, ist Geschmackssache. TR:first-child { border-top: none } TR { border-top: solid }

Abbildung 17.11: Tabelle, in der zwei interne Rahmen weggelassen wurden

Rahmen

< 807 >

Cascading Style Sheets, Level 2

TABLE[rules=rows] TR { border-top: solid } TABLE[rules=rows] { border-collapse: collapse; border-top: hidden }

Page size: 168,00 x 240,00 mm

Sandini Bib

HTML-Quelle:

foo	bar
foo	bar

17.6.3 Rahmenstile

Cascading Style Sheets, Level 2

Einige Werte von 'border-style' haben in Tabellen andere Bedeutungen als fr andere Elemente. In der nachfolgenden Liste sind sie mit einem Stern markiert. none Kein Rahmen. *hidden Wie 'none', außer im Modell fr kollabierende Rahmen; verbietet alle anderen Rahmen (siehe vorhergehenden Abschnitt ber Rahmenkonflikte). dotted Der Rahmen besteht aus einer Reihe von Punkten. dashed Der Rahmen ist eine Folge aus kurzen Liniensegmenten. solid Der Rahmen ist ein einzelnes Liniensegment. double Der Rahmen besteht aus zwei durchgezogenen Linien. Die Summe der beiden Linien und der Platz zwischen ihnen ist gleich dem Wert von 'border-width'. groove Der Rahmen sieht aus, als w@re er in die Zeichenfl@che eingemeißelt. ridge Das Gegenteil von 'groove': der Rahmen sieht aus, als wrde er sich aus der Zeichenfl@che erheben. *inset Im Modell fr trennende Rahmen bewirkt der Rahmen, dass die gesamte Box so aussieht, als w@re sie in die Zeichenfl@che eingebettet. Im Modell fr zusammenfallenden Rahmen bedeutet dieser Wert dasselbe wie 'groove' *outset Im Modell fr trennende Rahmen bewirkt dieser Rahmen, dass die gesamte Box so aussieht, als wrde sie sich aus der Zeichenfl@che erheben. Im Modell fr zusammenfallende Rahmen bedeutet dieser Wert dasselbe wie 'ridge'.

17.7 Akustische Darstellung von Tabellen Wenn eine Tabelle von einem Sprachgenerator gesprochen wird, muss die Beziehung zwischen den Datenzellen und den berschriftszellen anders ausgedrckt werden als durch eine horizontale oder vertikale Ausrichtung. Einige Sprach-Browser erlauben einem Benutzer m=gli-

< 808 >

Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

cherweise, sich im zweidimensionalen Raum zu bewegen, so dass sie die M=glichkeit erhalten, die r@umlich dargestellten Relationen auszudrcken. Wenn dies nicht m=glich ist, muss das Stylesheet angeben, an welchen Stellen die berschriften gesprochen werden:

17.7.1 berschriften aussprechen: die 'speak-header'-Eigenschaft 'speak-header' Wert:

once | always | inherit

Ausgangswert:

show

Angewendet auf:

Elemente, die Tabellenberschriftsinformationen haben

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Aural

Diese Eigenschaft gibt an, ob Tabellenberschriften vor jeder Zelle gesprochen werden oder nur vor einer Zelle, wenn diese einer anderen berschrift zuzuordnen ist als die vorhergehende Zelle. Die Werte haben die folgenden Bedeutungen:

Jede Dokumentsprache kann unterschiedliche Mechanismen untersttzen, die es Autoren erlauben, berschriften anzugeben. In HTML 4.0 ([HTML40]) beispielsweise ist es m=glich, berschriftsinformationen mit drei verschiedenen Attributen („headers“, „scope“ und „axis“) anzulegen. Die Spezifikation bietet einen Algorithmus, mit dem berschriftsinformationen ermittelt werden, falls diese Attribute nicht angegeben wurden.

Abbildung 17.12: Bild einer Tabelle mit berschriftszellen („San Jose“ und „Seattle“), die sich nicht in derselben Spalte oder Zeile befinden wie die Daten, auf die sie sich beziehen

Akustische Darstellung von Tabellen

< 809 >

Cascading Style Sheets, Level 2

once Die berschrift wird einmal vor einer Folge von Zellen gesprochen. always Die berschrift wird vor jeder passenden Zelle gesprochen.

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

Beispiel Dieses HTML-Beispiel zeigt das Geld, das fr Mahlzeiten, Hotels und Transport an zwei Orten (San Jose und Seattle) an aufeinanderfolgenden Tagen ausgegeben wurde. Grunds@tzlich k=nnen Sie sich die Tabelle wie einen n-dimensionalen Raum vorstellen. Die berschriften dieses Raums sind: Ort, Tag, Kategorie und Zwischensumme. Einige Zellen definieren Markierungen entlang einer Achse, w@hrend andere das Geld an den Punkten innerhalb dieses Raums angeben. Die Quellcode fr diese Tabelle lautet: Travel Expense Report

< 810 >

Tabellen

Page size: 168,00 x 240,00 mm

Sandini Bib

	Meals	Hotels	Transport	subtotal
San Jose
25-Aug-97	37.74	112.00	45.00
26-Aug-97	27.28	112.00	45.00
subtotal	65.02	224.00	90.00	379.02
Seattle
27-Aug-97	96.25	109.00	36.00
28-Aug-97	35.00	109.00	36.00
subtotal	131.25	218.00	72.00	421.25
Totals	196.27	442.00	162.00	800.27

Durch diese Bereitstellung des Datenmodells machen es Autoren fr sprachf@hige Browser m=glich, eine Tabelle auf die unterschiedlichsten Arten zu erkunden, z. B. k=nnte jede Zelle als Liste gesprochen werden, wobei die betreffenden berschriften vor jeder Datenzelle wiederholt werden: San Jose, 25-Aug-97, Meals: 37.74 San Jose, 25-Aug-97, Hotels: 112.00 San Jose, 25-Aug-97, Transport: 45.00 ...

Cascading Style Sheets, Level 2

Der Browser k=nnte auch entscheiden, die berschriften nur dann zu sprechen, wenn sie sich @ndern: San Jose, 25-Aug-97, Meals: 37.74 Hotels: 112.00 Transport: 45.00 26-Aug-97, Meals: 27.28 Hotels: 112.00 ...

Akustische Darstellung von Tabellen

< 811 >

Page size: 168,00 x 240,00 mm

Sandini Bib

18 Benutzeroberfl.che 18.1 Cursor: die 'cursor'-Eigenschaft 'cursor' Wert:

[[,]* [auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help ]] | inherit

Ausgangswert:

auto

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual, Interactive

Cascading Style Sheets, Level 2

Diese Eigenschaft gibt den Typ des Cursors an, der fr das Zeigeger@t angezeigt wird. Die Werte haben die folgenden Bedeutungen: auto Das Benutzerprogramm ermittelt den anzuzeigenden Cursor abh@ngig vom aktuellen Kontext. crosshair Ein einfaches Fadenkreuz (z. B. kurze Liniensegmente, die an ein "+"-Zeichen erinnern). default Der von der Plattform abh@ngige Standard-Cursor. Wird h@ufig als Pfeil dargestellt. pointer Der Cursor ist ein Zeiger, der einen Link anzeigt. move Kennzeichnet, dass etwas verschoben werden soll. e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize Gibt an, dass eine Fensterkante verschoben werden soll. Beispielsweise wird der 'se-resize'-Cursor verwendet, wenn das Verschieben in der rechten unteren Ecke der Box beginnt. text Gibt an, dass Text markiert werden kann. Wird h@ufig auch als I-Balken dargestellt. wait Zeigt an, dass das Programm besch@ftigt ist und der Benutzer warten soll. Wird h@ufig als Uhr oder Sanduhr dargestellt. help Es steht Hilfe fr das Objekt unter dem Cursor zur Verfgung. Wird h@ufig auch als Fragezeichen oder Sprechblase dargestellt.

< 812 >

Benutzeroberfl,che

Page size: 168,00 x 240,00 mm

Sandini Bib

Das Benutzerprogramm l@dt den Cursor aus der durch den URI angegebene Ressource. Wenn das Benutzerprogramm den ersten Cursor aus einer Liste mit Cursorn nicht verarbeiten kann, sollte er versuchen, den zweiten zu verarbeiten usw. Wenn das Benutzerprogramm keine benutzerdefinierten Cursor verarbeiten kann, muss es den generischen Cursor am Ende der Liste verwenden. Beispiel P { cursor : url("mything.cur"), url("second.csr"), text; }

18.2 Benutzereinstellungen f-r Farben

Die fr die Systemfarben definierte Wertemenge ist darauf ausgelegt, dass sie vollst@ndig ist. Fr Systeme, die ber keinen entsprechenden Wert verfgen, sollte der angegebene Wert auf das n@chstliegende Systemattribut oder auf eine Standardfarbe abgebildet werden. Die folgende Liste beschreibt zus@tzliche Werte fr farbbezogene CSS-Attribute und ihre allgemeine Bedeutung. Jede Farbeigenschaft (z. B. 'color' oder 'background-color') kann einen der folgenden Namen annehmen. Obwohl sie die Groß-/Kleinschreibung nicht bercksichtigen, wird empfohlen, dass die nachfolgend gezeigte gemischte Schreibweise bercksichtigt wird, um die Namen besser lesbar zu machen. ActiveBorder Aktiver Fensterrahmen ActiveCaption Aktiver Fenstertitel AppWorkspace Hintergrundfarbe eines Multiple Document Interfaces Background Desktop-Hintergrund ButtonFace Schriftfarbe fr dreidimensionale Anzeigeelemente ButtonHighlight Helle Farbe fr dreidimensionale Anzeigeelemente ButtonShadow Schattenfarbe fr dreidimensionale Anzeigeelemente (fr Kanten, die von der Lichtquelle weg zeigen) ButtonText Text auf Schaltfl@chen

Benutzereinstellungen f#r Farben

< 813 >

Cascading Style Sheets, Level 2

CSS2 erm=glicht nicht nur, Text, Hintergrnden usw. vordefinierte Farbwerte zuzuweisen, sondern erlaubt Autoren außerdem, Farben so anzugeben, dass sie in die graphische Umgebung des Benutzers integriert werden. Stilregeln, die Benutzerpriorit@ten bercksichtigen, bieten deshalb die folgenden Vorteile: 1. Sie erzeugen Seiten, die in das vom Benutzer definierte Look&Feel passen. 2. Sie erzeugen Seiten, auf die ein besserer Zugriff m=glich ist, weil die aktuellen Benutzereinstellungen m=glicherweise eine Behinderung bercksichtigen.

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

CaptionText Text in berschriften, Size Boxes und Pfeilfeld der Bildlaufleiste GrayText Grau unterlegter (deaktivierter) Text. Diese Farbe wird auf #000 gesetzt, wenn der aktuelle Anzeigetreiber keine durchg@ngige graue Farbe untersttzt. Highlight Elemente, die in einem Steuerelement markiert sind HighlightText Text von Elementen, die in einem Steuerelement markiert sind InactiveBorder Nicht aktiver Fensterrahmen InactiveCaption Nicht aktiver Fenstertitel InactiveCaptionText Farbe des Texts in einem nicht aktiven Titel InfoBackground Hintergrundfarbe fr Tooltip-Steuerelemente InfoText Textfarbe fr Tooltip-Steuerelemente Menu Menhintergrund MenuText Text in Mens Scrollbar Grauer Bereich der Bildlaufleiste ThreeDDarkShadow Dunkler Schatten fr dreidimensionale Anzeigeelemente ThreeDFace Schriftfarbe fr dreidimensionale Anzeigeelemente ThreeDHighlight Farbe fr die Hervorhebung von dreidimensionalen Anzeigeelementen ThreeDLightShadow Helle Farbe fr dreidimensionale Anzeigeelemente (fr Kanten, die zur Lichtquelle hin zeigen) ThreeDShadow Dunkler Schatten fr dreidimensionale Anzeigeelemente Window Fensterhintergrund WindowFrame Fensterrahmen WindowText Text in Fenstern

< 814 >

Benutzeroberfl,che

Page size: 168,00 x 240,00 mm

Sandini Bib

Beispiel Um beispielsweise die Hintergrund- und Vordergrundfarben eines Absatzes auf die Vordergrund- und Hintergrundfarben des Benutzerfensters zu setzen, schreiben Sie Folgendes: P { color: WindowText; background-color: Window }

18.3 Benutzereinstellungen f-r Schriften Wie Farben k=nnen Autoren auch Schriften so angeben, dass die Systemressourcen der Benutzer genutzt werden. Weitere Informationen finden Sie im Abschnitt ber die 'font'-Eigenschaft (15.2.5).

18.4 Dynamische Einrahmungen: die 'outline'-Eigenschaft Manchmal wollen Stylesheet-Autoren Einrahmungen fr visuelle Objekte erstellen wie beispielsweise fr Schaltfl@chen, aktive Formularfelder, Bilder und so weiter, so dass sie hervorgehoben dargestellt werden. CSS2-Einrahmungen unterscheiden sich wie folgt von Rahmen: 1. Einrahmungen ben=tigen keinen Platz. 2. Einrahmungen mssen nicht rechteckig sein. Die Einrahmungs-Eigenschaften steuern den Stil dieser dynamischen Einrahmungen.

'outline' [ | | | | ] | inherit

Ausgangswert:

Siehe einzelne Eigenschaften

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual, Interactive

Cascading Style Sheets, Level 2

Wert:

'outline-width' Wert:

| inherit

Ausgangswert:

medium

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual, interactive

Benutzereinstellungen f#r Schriften

< 815 >

Page size: 168,00 x 240,00 mm

Sandini Bib

'outline-color' Wert:

| invert | inherit

Ausgangswert:

invert

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

Visual, Interactive

Cascading Style Sheets, Level 2

Die durch die Einrahmungseigenschaften erzeugten Einrahmungen werden „ber“ eine Box gezeichnet, das heißt, die Einrahmung befindet sich immer oben und beeinflusst die Position oder die Gr=ße der Box oder irgendwelcher anderer Boxen nicht. Die Anzeige oder das Unterdrcken von Einrahmungen verursacht also kein Neuzeichnen. Die Einrahmung wird unmittelbar außerhalb der Rahmenkante beginnend gezeichnet. Einrahmungen mssen nicht rechteckig sein. Ist das Element beispielsweise ber mehrere Zeilen umbrochen, ist die Einrahmung der kleinste Umriss, der alle Boxen des Elements beinhaltet. Im Gegensatz zu Rahmen ist die Einrahmung am Ende oder Anfang einer Zeilen-Box nicht ge=ffnet, sondern immer vollst@ndig geschlossen. Die 'outline-width'-Eigenschaft akzeptiert dieselben Werte wie 'border-width'. Die 'outline-style'-Eigenschaft akzeptiert dieselben Werte wie 'border-style', nur dass 'hidden' kein erlaubter Einrahmungsstil ist. Die 'outline-color'-Eigenschaft akzeptiert alle Farben sowie das Schlsselwort 'invert'. 'invert' nimmt eine Farbumkehrung der Pixel auf dem Bildschirm vor. Dies ist ein gebr@uchlicher Trick, um sicherzustellen, dass der Fokusrahmen sichtbar ist, unabh@ngig von farbigem Hintergrund. Die 'outline'-Eigenschaft ist eine zusammenfassende Eigenschaft und setzt 'outline-style', 'outline-width' und 'outline-color'. Beachten Sie, dass die Einrahmung auf allen Seiten dieselbe ist. Im Gegensatz zu Rahmen gibt es keine 'outline-top'- oder 'outline-left'-Eigenschaft. n Diese Spezifikation definiert nicht, wie mehrere berlappende Einrahmungen oder wie Einrahmungen fr Boxen gezeichnet werden, die teilweise von anderen Elementen verdeckt sind. Hinweis: Weil die Fokuseinrahmung keinen Einfluss auf die Formatierung hat (das heißt, es ist kein Platz mehr dafr im Box-Modell), kann sie m=glicherweise andere Elemente auf der Seite berlappen. n Beispiel Nachfolgend sehen Sie ein Beispiel, das eine dicke Einrahmung um ein BUTTON-Element zeichnet: BUTTON { outline-width : thick }

Mit Hilfe von Skriptprogrammen kann die Breite der Einrahmung dynamisch ver@ndert werden, ohne ein Neuzeichnen zu verursachen.

< 816 >

Benutzeroberfl,che

Page size: 168,00 x 240,00 mm

Sandini Bib

18.4.2 Einrahmungen und der Fokus Graphische Benutzeroberfl@chen k=nnen Einrahmungen um Elemente verwenden, um dem Benutzer damit anzuzeigen, welches Element auf der Seite den Fokus hat. Diese Einrahmungen werden zus@tzlich zu irgendwelchen Rahmen angezeigt, und das Aktivieren oder Deaktivieren der Einrahmungen sollte nicht bewirken, dass das Dokument neu gezeichnet werden muss. Der Fokus ist erforderlich fr die Benutzerinteraktion in einem Dokument (z. B. fr die Eingabe von Text, die Auswahl einer Schaltfl@che usw.). Benutzerprogramme, die die interaktive Mediengruppe untersttzen, mssen beobachten, wo sich der Fokus befindet, und sie mssen außerdem den Fokus darstellen. Das kann auch mit Hilfe dynamischer Einrahmungen erfolgen, in Kombination mit der Pseudo-Klasse :focus. Beispiel Um beispielsweise eine dicke schwarze Linie um ein Element zu zeichnen, wenn es den Fokus hat, und eine dicke rote Linie, wenn es aktiv ist, k=nnen die folgenden Regeln angewendet werden: :focus { outline: thick solid black } :active { outline: thick solid red }

Die CSS Working Group hat beschlossen, dass die Vergr=ßerung eines Dokuments oder von Teilen eines Dokuments nicht ber Stylesheets festgelegt werden sollte. Benutzerprogramme k=nnen eine solche Vergr=ßerung auf unterschiedliche Weise untersttzen (z. B. gr=ßere Bilder, lautere Sounds usw.). Wenn Benutzerprogramme eine Seite vergr=ßern, sollten sie die Beziehungen zwischen positionierten Elementen beibehalten. Ein Comic-Strip k=nnte beispielsweise aus Bildern mit berlagerten Textelementen zusammengesetzt werden. Wenn diese Seite vergr=ßert wird, sollte ein Benutzerprogramm den Text weiterhin innerhalb der Sprechblasen des Comic-Strips anzeigen.

19 Akustische Stylesheets 19.1 Einf-hrung in akustische Stylesheets (Aural Stylesheets) Die akustische Darstellung eines Dokuments, die von blinden Benutzern sowie Benutzern, die keine visuelle Ausgabe nutzen k=nnen, bereits h@ufig eingesetzt wird, kombiniert Sprachsynthese und „akustische Icons“. H@ufig erfolgt diese akustische Darstellung durch die Konvertierung des Dokuments in einfachen Text, der dann einer so genannten Bildschirmleser-Software oder -Hardware bergeben wird, die einfach alle Zeichen auf dem Bildschirm liest. Das Ergebnis ist eine weniger effektive Darstellung, als wrde die Dokumentstruktur beibehalten. Style-

VergrFßerung

< 817 >

Cascading Style Sheets, Level 2

18.5 VergrUßerung

Page size: 168,00 x 240,00 mm

Sandini Bib

sheet-Eigenschaften fr eine akustische Darstellung k=nnen mit den visuellen Eigenschaften (gemischte Medien) kombiniert oder als akustische Alternative zur visuellen Darstellung verwendet werden. Neben den offensichtlichen Vorteilen, die sie in Hinblick auf den Zugriff bringen, gibt es noch andere große M@rkte fr rein akustisch angebotene Informationen, wie beispielsweise fr Autofahrer, industrielle und medizinische Dokumentationssysteme, Home-Entertainment, oder um Benutzer zu untersttzen, die gerade lesen lernen oder Probleme mit dem Lesen haben. Bei der Verwendung akustischer Eigenschaften besteht die Zeichenfl@che aus einem dreidimensionalen physischen Raum (Klangumgebung) und einem tempor@ren Raum (man kann Klang vor w@hrend und nach anderen Kl@ngen spezifizieren). Darber hinaus erlauben die CSS-Eigenschaften den Autoren, die Qualit@t synthetisierter Sprache zu variieren (Sprachtyp, Frequenz, Modulation usw.). Beispiel

Cascading Style Sheets, Level 2

H1, H2, H3, H4, H5, H6 { voice-family: paul; stress: 20; richness: 90; cue-before: url("ping.au") } P.heidi { azimuth: center-left } P.peter { azimuth: right } P.ziege { volume: x-soft }

Damit wird der Sprachsynthesizer angewiesen, die berschriften in der Sprache (eine Art „Audio-Schrift“) namens „paul“ zu sprechen, in einem flachen Ton, aber mit einer sehr umfangreichen Stimme zu sprechen. Bevor die berschriften gesprochen werden, wird ein Sound-Sample von dem angegebenen URL abgespielt. Abs@tze mit der Klasse „heidi“ sollen so erscheinen, dass sie von vorne links kommen (falls das Soundsystem r@umliches Audio beherrscht), und Abs@tze mit der Klasse „peter“ von rechts. Abs@tze mit der Klasse „ziege“ werden sehr weich gesprochen.

19.2 Eigenschaften f-r die Lautst.rke : 'volume' 'volume' Wert:

| | silent | x-soft | soft | medium | loud | x-loud | inherit

Ausgangswert:

medium

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentzahlen

Beziehen sich auf den geerbten Wert

Medium

Aural

< 818 >

Akustische Stylesheets

Page size: 168,00 x 240,00 mm

Sandini Bib

'volume' bezieht sich auf die Medien-Lautst@rke der Wellenform. Mit anderen Worten, eine hochmodulierte Stimme mit einer Lautst@rke von 50 k=nnte sehr viel h=here Spitzenwerte haben. Die Gesamtwerte k=nnen sehr wahrscheinlich fr den Menschen annehmbar angepasst werden, beispielsweise mit einer physischen Lautst@rkenregelung (die sowohl die 0- als auch die 100-Werte proportional vergr=ßern wrde); diese Eigenschaft passt also den dynamischen Bereich an. Die Werte haben die folgende Bedeutung:

Die Benutzerprogramme sollen es dem Zuh=rer gestatten, die Werte fr '0' und '100' zu setzen. Es gibt keine allgemein verwendbare Einstellung; geeignete Werte sind von der verwendeten Ausrstung abh@ngig (Lautsprecher, Kopfh=rer), von der Umgebung (im Auto, Heimkino, Bibliothek) und von den pers=nlichen Vorlieben. Einige Beispiele: Ein Browser fr den Einsatz im Auto verwendet eine Einstellung fr sehr viel Hintergrundl@rm. '0' entspricht in diesem Fall einer relativ hohen Lautst@rke, '100' einer sehr hohen Lautst@rke. Die Sprache ist gegenber dem Straßenl@rm gut verst@ndlich, aber der gesamte dynamische Bereich ist komprimiert. Autos mit besserer Isolation k=nnten einen breiteren dynamischen Bereich erlauben. Ein anderer Sprach-Browser k=nnte beispielsweise in einem Appartement verwendet werden, sp@t nachts oder in einem gemeinsamen Studierzimmer. '0' wird dann mit einer sehr geringen Lautst@rke festgelegt, '100' mit einer immer noch relativ geringen Lautst@rke. Wie im ersten Beispiel gibt es einen geringen Anstieg; der dynamische Bereich ist reduziert. Die tats@chlichen Lautst@rken sind hier jedoch gering, w@hrend sie im ersten Beispiel hoch waren. In einem stillen und isolierten Haus gibt es ein teueres Hi-Fi-Heimkino. '0' wird auf relativ leise, '100' auf relativ laut gestellt; es gibt einen breiten dynamischen Bereich.

· · ·

Eigenschaften f#r die Lautst,rke : 'volume'

< 819 >

Cascading Style Sheets, Level 2

Eine beliebige Zahl zwischen '0'und '100'. '0' stellt die minimale h rbare Lautst@rke dar, '100' die maximale ertr,gliche Lautst@rke.

Prozentwerte werden relativ zum geerbten Wert berechnet und dann auf den Bereich zwischen '0'und '100' zugeschnitten. silent Es wird berhaupt nichts ausgegeben. Der Wert '0' hat nicht dieselbe Bedeutung wie 'silent'. x-soft Entspricht '0'. soft Entspricht '25'. medium Entspricht '50'. loud Entspricht '75' x-loud Entspricht '100'.

Page size: 168,00 x 240,00 mm

Sandini Bib

In all diesen F@llen k=nnte dasselbe Autor-Stylesheet verwendet werden, indem die Einstellungen fr '0' und '100' auf der Client-Seite festgelegt werden.

19.3 Spracheigenschaften: 'speak' 'speak' Wert:

normal | none | spell-out | inherit

Ausgangswert:

Normal

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozents,tze:

N/A

Medium:

Aural

Cascading Style Sheets, Level 2

Diese Eigenschaft gibt an, ob und wie Text akustisch dargestellt wird (etwa vergleichbar mit der Eigenschaft 'display'). Die m=glichen Werte sind: none Unterdrckt die akustische Darstellung, so dass keine Zeit fr die Darstellung dieses Elements aufgewendet werden muss. Beachten Sie jedoch, dass Ableitungen diesen Wert berschreiben k=nnen und m=glicherweise gesprochen werden. (Um sicher zu gehen, dass die Darstellung eines Elements und seiner Ableitungen unterdrckt wird, verwenden Sie die Eigenschaft 'display'.) normal Verwendet sprachabh@ngige Ausspracheregeln fr die Darstellung eines Elements und seiner untergeordneten Elemente. spell-out Buchstabiert den Text (praktisch fr Akronyme und Abkrzungen). Beachten Sie den Unterschied zwischen einem Element, dessen 'volume'-Eigenschaft den Wert 'silent' hat, und einem Element, dessen 'speak'-Eigenschaft den Wert 'none' hat. Das erstere ben=tigt dieselbe Zeit, als w@re es ausgesprochen worden, inklusive der Pause vor und nach dem Element, aber es wird keine h=rbare Ausgabe erzeugt. Das letztere ben=tigt keine Zeit und wird nicht dargestellt (w@hrend seine Ableitungen sehr wohl dargestellt werden k=nnen).

< 820 >

Akustische Stylesheets

Page size: 168,00 x 240,00 mm

Sandini Bib

19.4 Pausen-Eigenschaften: 'pause-before', 'pause-after' und 'pause' 'pause-before' Wert:

| | inherit

Ausgangswert:

Vom Benutzerprogramm abh@ngig

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

Siehe Text.

Medium

Aural

Wert:

| | inherit

Ausgangswert:

Vom Benutzerprogramm abh@ngig

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

Siehe Text.

Medium:

Aural

Diese Eigenschaften geben eine Pause an, die vor (oder nach) dem Sprechen eines Elementinhalts eingehalten werden soll. Die Werte haben die folgenden Bedeutungen:

Gibt die Pause in absoluten Zeiteinheiten an (Sekunden und Millisekunden).

Bezieht sich auf das Inverse des Werts der 'speech-rate'-Eigenschaft. Betr@gt die Sprechgeschwindigkeit beispielsweise 120 W=rter pro Minute (das heißt ein Wort dauert eine halbe Sekunde oder 500 ms), bedeutet eine 'pause-before' von 100% eine Pause von 500 ms, und eine 'pause-before' von 20% bedeutet 100 ms. Die Pause wird zwischen dem Elementinhalt und dem Inhalt von 'cue-before' oder 'cue-after', falls vorhanden, eingefgt. Autoren sollten relative Einheiten verwenden, um angesichts großer Abweichungen der Sprechgeschwindigkeiten robustere Stylesheets zu erstellen.

Pausen-Eigenschaften

< 821 >

Cascading Style Sheets, Level 2

'pause-after'

Page size: 168,00 x 240,00 mm

Sandini Bib

'pause' Wert:

[[ | ]{1,2}] | inherit

Ausgangswert:

Vom Benutzerprogramm abh@ngig.

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentsatz:

Siehe Beschreibungen zu 'pause-before' und 'pause-after'.

Medium

Aural

Die 'pause'-Eigenschaft ist eine Abkrzung fr die Einstellung von 'pause-before' und 'pauseafter'. Werden zwei Werte angegeben, ist der erste Wert 'pause-before', der zweite Wert ist 'pause-after'. Ist nur ein Wert angegeben, gilt er fr beide Eigenschaften. Beispiel H1 { pause: 20ms } /* pause-before: 20ms; pause-after: 20ms */ H2 { pause: 30ms 40ms } /* pause-before: 30ms; pause-after: 40ms */ H3 { pause-after: 10ms } /* pause-before: ?; pause-after: 10ms */

19.5 Cue-Eigenschaften: 'cue-before', 'cue-after' und 'cue'

Cascading Style Sheets, Level 2

'cue-before' Wert:

| none | inherit

Ausgangswert:

none

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

N/A

Medium

Aural

'cue-after' Wert:

| none | inherit

Ausgangswert:

none

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

N/A

Medium

Aural

< 822 >

Akustische Stylesheets

Page size: 168,00 x 240,00 mm

Sandini Bib

Akustische Icons stellen eine weitere M=glichkeit dar, semantische Elemente voneinander zu unterscheiden. Kl@nge k=nnen vor und/oder nach dem Element abgespielt werden, um sie voneinander abzugrenzen. Die Werte haben die folgenden Bedeutungen:

Der URI gibt die Ressource fr ein akustisches Icon an. L=st sich der URI zu etwas anderem auf als zu einer Audio-Datei, beispielsweise zu einem Bild, sollte die Ressource ignoriert werden, und die Eigenschaft wird behandelt, als h@tte sie den Wert 'none'. none Es wurde kein akustisches Icon angegeben. Beispiel A {cue-before: url("bell.aiff"); cue-after: url("dong.wav") } H1 {cue-before: url("pop.au"); cue-after: url("pop.au") }

Wert:

[ | | ] | inherit

Ausgangswert:

Fr abkrzende Eigenschaften nicht definiert.

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentsatz:

N/A

Medium

Aural

Die 'cue'-Eigenschaft ist eine Abkrzung fr die Einstellung von 'cue-before' und 'cue-after'. Werden zwei Werte angegeben, bezieht sich der erste auf 'cue-before', der zweite auf 'cueafter'. Wird nur ein Wert angegeben, gilt er fr beide Eigenschaften. Beispiel Die beiden folgenden Regeln sind @quivalent: H1 {cue-before: url("pop.au"); cue-after: url("pop.au") } H1 {cue: url("pop.au") }

Kann ein Benutzerprogramm ein akustisches Icon nicht darstellen (wenn es beispielsweise die Umgebung des Benutzers nicht erlaubt), empfehlen wir, einen alternativen Hinweis zu erzeugen (z. B. die Anzeige einer Warnung, die Ausgabe eines Warntons usw.).

Cue-Eigenschaften: 'cue-before', 'cue-after' und 'cue'

< 823 >

Cascading Style Sheets, Level 2

'cue'

Page size: 168,00 x 240,00 mm

Sandini Bib

19.6 Misch-Eigenschaften: 'play-during' 'play-during' Wert:

mix? repeat? | auto | none | inherit

Ausgangswert:

auto

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozents,tze:

N/A

Medium:

Aural

Cascading Style Sheets, Level 2

Ohnlich den Eigenschaften 'cue-before' und 'cue-after' gibt diese Eigenschaft einen Sound an, der als Hintergrund abgespielt werden soll, w@hrend der Inhalt eines Elements gesprochen wird. Die Werte haben die folgenden Bedeutungen:

Der durch diesen angegebene Sound wird als Hintergrund abgespielt, w@hrend der Inhalt des Elements gesprochen wird. mix Falls dieses Schlsselwort angegeben ist, bedeutet es, dass der Sound, der von der 'playduring'-Eigenschaft des bergeordneten Elements geerbt wurde, weiterhin abgespielt der in angegebene Sound damit gemischt wird. Ist 'mix' nicht angegeben, ersetzt der Hintergrundton des Elements den des bergeordneten Elements. repeat Falls dieses Schlsselwort angegeben ist, bedeutet es, dass der Sound wiederholt wird, falls er zu kurz ist, um die Gesamtdauer des Elements abzudecken. Andernfalls wird der Sound einmal abgespielt und dann beendet. Das ist vergleichbar mit der 'background-repeat'Eigenschaft. Ist der Sound zu lang fr das Element, wird er abgebrochen, nachdem das Element gesprochen wurde. auto Der Sound des bergeordneten Elements wird weiterhin abgespielt (er wird nicht neu gestartet, was der Fall w@re, w@re diese Eigenschaft vererbt worden). none Dieses Schlsselwort bedeutet Stille. Der Sound des bergeordneten Elements (falls vorhanden) ist still, w@hrend das aktuelle gesprochen wird, und wird nach dem aktuellen Element fortgesetzt. Beispiel BLOCKQUOTE.sad { play-during: url("violins.aiff") } BLOCKQUOTE Q { play-during: url("harp.wav") mix } SPAN.quiet { play-during: none }

< 824 >

Akustische Stylesheets

Page size: 168,00 x 240,00 mm

Sandini Bib

19.7 R.umliche Eigenschaften: 'azimuth' und 'elevation' R@umliches Audio ist eine wichtige stilistische Eigenschaft fr die akustische Darstellung. Es bietet eine natrliche M=glichkeit, mehrere Stimmen voneinander zu unterscheiden, so wie im richtigen Leben (die Menschen stehen nur selten alle am selben Punkt in einem Raum). StereoLautsprecher erzeugen Soundquellen von verschiedenen Seiten. Bi-akustische Kopfh=rer oder die immer beliebter werdenden Heimkinos mit 5 Lautsprechern k=nnen vollst@ndigen Surround-Sound erzeugen, und Einstellungen mit mehreren Lautsprechern k=nnen ein wirklich dreidimensionales Klangbild erzeugen. VRML 2.0 beinhaltet ebenfalls r@umliches Audio, was bedeutet, dass es mit der Zeit auch immer mehr Hardware fr r@umliches Audio im Verbraucherpreisbereich geben wird.

'azimuth' Wert

| [[left-side | far-left | left | center-left | center | center-right | right | far-right | right-side] | | behind] | leftwards | rightwards | inherit

Ausgangswert:

center

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozents@tze:

N/A

Medium:

Aural

Die Position wird als Winkel im Bereich zwischen '-360deg' und '360deg' angegeben. Der Wert '0deg' steht fr eine Ausrichtung unmittelbar vorne im Mittelpunkt der Klangszene. '90deg' ist rechts, '180deg' hinten, und '270deg' (oder @quivalent dazu und gebr@uchlicher '-90deg') ist links. left-side Wie '270deg'. Mit 'behind', '270deg'. far-left Wie '300deg'. Mit 'behind', '240deg'. left Wie '320deg'. Mit 'behind', '220deg'. center-left Wie '340deg'. Mit 'behind', '200deg'. center Wie '0deg'. Mit 'behind', '180deg'. center-right Wie '20deg'. Mit 'behind', '160deg'. right Wie '40deg'. Mit 'behind', '140deg'.

R,umliche Eigenschaften: 'azimuth' und 'elevation'

< 825 >

Cascading Style Sheets, Level 2

Die Werte haben die folgenden Bedeutungen:

Page size: 168,00 x 240,00 mm

Sandini Bib

far-right Wie '60deg'. Mit 'behind', '120deg'. right-side Wie '90deg'. Mit 'behind', '90deg'. leftwards Verschiebt den Sound nach links, relativ zum aktuellen Winkel. Genauer gesagt, werden dabei 20 Grad subtrahiert. Die Arithmetik wird als modulo 360 Grad ausgefhrt. Beachten Sie, dass 'leftwards' genauer als „gedreht im Gegen-Uhrzeigersinn“ beschrieben wird, weil dabei immer 20 Grad subtrahiert werden, selbst wenn der geerbte Azimuth bereits hinter dem Zuh=rer liegt (in diesem Fall scheint der Sound nach rechts zu gehen). rightwards Verschiebt den Sound nach rechts, relativ zum aktuellen Winkel. Genauer gesagt, werden 20 Grad addiert. Die Arithmetik ist unter 'leftwards' beschrieben. Diese Eigenschaft wird am wahrscheinlichsten implementiert, indem dasselbe Signal in unterschiedliche Kan@le mit unterschiedlichen Lautst@rken gemischt wird. Dabei k=nnten auch eine Phasenverschiebung, eine digitale Verz=gerung oder andere, @hnliche Techniken verwendet werden, um die Illusion einer Klangbhne zu erzielen. Welche Mittel genau eingesetzt werden, um diesen Effekt zu erzielen, sowie die Anzahl der verwendeten Lautsprecher, sind vom Benutzerprogramm abh@ngig; diese Eigenschaft identifiziert nur das gewnschte Endergebnis. Beispiel

Cascading Style Sheets, Level 2

H1 { azimuth: 30deg } TD.a { azimuth: far-right } #12 { azimuth: behind far-right } P.comment { azimuth: behind }

/* 60deg */ /* 120deg */ /* 180deg */

Wird ein r@umlicher Azimuth angegeben und das Ausgabeger@t kann keine Sounds hinter der Position des Zuh=rers erzeugen, sollten die Benutzerprogramme Werte der rckw@rtigen Halbkugel in Werte der vorderen Halbkugel umwandeln. Eine Methode sieht wie folgt aus: if 90deg < x

Cascading Style Sheets, Level 2

H1 TR.a TR.b TR.c

Page size: 168,00 x 240,00 mm

Sandini Bib

Gibt die Sprechgeschwindigkeit in W=rtern pro Minute an, eine Maßzahl, die abh@ngig von der jeweiligen Sprache variiert, aber dennoch von Sprachsynthesizern allgemein untersttzt wird. x-slow Entspricht 80 W=rtern pro Minute. slow Entspricht 120 W=rtern pro Minute. medium Entspricht 180 – 200 W=rtern pro Minute. fast Entspricht 300 W=rtern pro Minute. x-fast Entspricht 500 W=rtern pro Minute. faster Addiert 40 W=rter pro Minute zur aktuellen Sprechgeschwindigkeit. slower Subtrahiert 40 W=rter pro Minute von der aktuellen Sprechgeschwindigkeit.

Cascading Style Sheets, Level 2

'voice-family' Wert:

[[ | ],]* [ | | inherit

Ausgangswert

Vom Benutzerprogramm abh@ngig

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozents,tze

N/A

Medium

Aural

Der Wert ist eine durch Kommas getrennte, nach Priorit@t geordnete Liste mit Sprachfamiliennamen (zu vergleichen mit 'font-family'). Die Werte haben die folgenden Bedeutungen:

Die Werte stellen Stimmfamilien dar. M=gliche Werte sind 'male', 'female' und 'child' (m@nnlich, weiblich, Kind).

Bei den Werten handelt es sich um spezifische Instanzen (z. B. Schauspieler, Trinoide, Carlos, Lani). Beispiel H1 { voice-family: announcer, male } P.part.romeo { voice-family: romeo, male } P.part.juliet { voice-family: juliet, female }

< 828 >

Akustische Stylesheets

Page size: 168,00 x 240,00 mm

Sandini Bib

Die Namen bestimmter Stimmen k=nnen in Anfhrungszeichen eingeschlossen werden. Sie mssen in Anfhrungszeichen eingeschlossen werden, wenn W=rter, aus denen sich der Name zusammensetzt, nicht den Syntaxregeln fr Bezeichner entsprechen. Außerdem wird empfohlen, dass bestimmte Stimmen in Anfhrungszeichen eingeschlossen werden, deren Namen sich aus mehreren W=rtern zusammensetzen. Werden die Anfhrungszeichen weggelassen, werden alle Leerraumzeichen vor und hinter dem Stimmnamen ignoriert und Folgen beliebig vieler Leerraumzeichen innerhalb des Stimmnamens zu einem einzigen Leerzeichen umgewandelt.

'pitch' Wert:

| x-low | low | medium | high | x-high | inherit

Ausgangswert:

medium

Angewendet auf:

Alle Elemente

Vererbt

Ja

Prozents@tze

N/A

Medium:

Aural

Gibt die durchschnittliche Stimmung der Sprechstimme in Hertz (Hz) an. x-low, low, medium, high, x-high Diese Werte sind keinen absoluten Frequenzen zugeordnet, weil sie von der Stimmfamilie abh@ngig sind. Benutzerprogramme sollten diese Werte geeigneten Frequenzen zuordnen, abh@ngig von der Stimmfamilie und der Benutzerumgebung. Die Benutzerprogramme mssen diese Werte jedoch in der richtigen Reihenfolge zuordnen (d. h. 'x-low' ist eine niedrigere Frequenz als 'low' usw.).

'pitch-range' Wert:

| inherit

Ausgangswert:

50

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozents@tze:

N/A

Medium:

Aural

Eigenschaften zur Sprachcharakteristik

< 829 >

Cascading Style Sheets, Level 2

Gibt die durchschnittliche Stimmung (eine Frequenz) der Sprechstimme an. Die durchschnittliche Stimmung einer Stimme ist von der Stimmfamilie abh@ngig. Die durchschnittliche Stimmung fr eine m@nnliche Standardstimme beispielsweise liegt bei etwa 120 Hz, fr eine weibliche Stimme etwa bei 210 Hz. Die Werte haben die folgenden Bedeutungen:

Page size: 168,00 x 240,00 mm

Sandini Bib

Gibt die Abweichung von der durchschnittlichen Stimmung an. Die wahrgenommene Stimmung einer menschlichen Stimme wird durch die Grundfrequenz festgelegt und weist normalerweise einen Wert von 120 Hz fr eine m@nnliche Stimme und 210 Hz fr eine weibliche Stimme auf; diese Abweichungen vermitteln zus@tzliche Bedeutung und Betonung. Eine hoch animierte Stimme, das heißt, eine Stimme, die stark abgewandelt ist, weist einen hohen Stimmungsbereich auf. Diese Eigenschaft bestimmt den Bereich, ber den diese Variationen auftreten, das heißt, wie stark die Grundfrequenz von der durchschnittlichen Stimmung abweichen darf. Die Werte haben die folgenden Bedeutungen:

Ein Wert zwischen '0' und '100'. Ein Stimmungsbereich von '0' erzeugt eine flache, monotone Stimme. Ein Stimmungsbereich von '50' erzeugt eine normale Variation. Stimmungsbereiche gr=ßer 50 erzeugen animierte Stimmen.

Cascading Style Sheets, Level 2

'stress' Wert:

| inherit

Ausgangswert:

50

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozents,tze:

N/A

Medium:

Aural

Gibt die H=he „lokaler Spitzen“ in der Intonationskontur einer Stimme an. Beispielsweise ist Englisch eine betonte Sprache, und unterschiedliche Abschnitte eines Satzes erhalten eine prim@re, sekund@re oder terti@re Betonung. Der Wert von 'stress' steuert die Abweichung, die aus diesen Betonungszeichen resultiert. Diese Eigenschaft begleitet die Eigenschaft 'pitch-range' und wird bereitgestellt, um den Entwicklern die M=glichkeit zu er=ffnen, professionelle akustische Ausgabeger@te zu nutzen. Die Werte haben die folgenden Bedeutungen:

Ein Wert zwischen '0' und '100'. Die Bedeutung dieses Werts ist von der gesprochenen Sprache abh@ngig. Ein Wert von '50' beispielsweise fr eine standardm@ßige englisch sprechende M@nnerstimme (durchschnittliche Stimmung = 122 Hz), die mit normaler Intonation und Betonung spricht, h@tte eine andere Bedeutung als der Wert '50' fr eine italienische Stimme.

< 830 >

Eigenschaften zur Sprachcharakteristik

Page size: 168,00 x 240,00 mm

Sandini Bib

'richness' Wert:

| inherit

Ausgangswert:

50

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozents@tze

N/A

Medium:

Aural

Gibt den Umfang der Sprechstimme an. Eine umfassende Stimme „tr@gt“ in einem großen Raum, eine glatte Stimme nicht. (Der Begriff „glatt“ bezieht sich auf die Darstellung der Wellenform.) Die Werte haben die folgenden Bedeutungen:

Ein Wert zwischen '0' und '100'. Je h=her dieser Wert ist, desto mehr tr@gt die Stimme. Ein geringerer Wert erzeugt eine sanfte, honigsße Stimme.

19.9 Spracheigenschaften: 'speak-punctuation' und 'speak-numeral' Eine zus@tzliche Spracheigenschaft, speak-header, ist im Kapitel 17 ber Tabellen beschrieben.

Wert:

code | none | inherit

Ausgangswert:

none

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozents,tze:

N/A

Medium:

Aural

Diese Eigenschaft legt fest, wie die Interpunktion ausgesprochen wird. Die Werte haben die folgenden Bedeutungen: code Die Interpunktion wie beispielsweise Semikolons, Klammern usw. werden w=rtlich ausgesprochen. none Die Interpunktion wird nicht gesprochen, sondern durch unterschiedliche natrliche Pausen dargestellt.

Spracheigenschaften

< 831 >

Cascading Style Sheets, Level 2

'speak-punctuation'

Page size: 168,00 x 240,00 mm

Sandini Bib

'speak-numeral' Wert:

digits | continuous | inherit

Ausgangswert:

continuous

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozents,tze:

N/A

Medium:

Aural

Diese Eigenschaft steuert, wie Zahlen ausgesprochen werden. Die Werte haben die folgenden Bedeutungen: digits Die Zahlen werden als einzelne Ziffern ausgesprochen. „237“ wird also als „Zwei Drei Sieben“ ausgesprochen. continuous Die Zahl wird als vollst@ndige Zahl ausgesprochen. „237“ wird also als „Zweihundertsiebenunddreißig“ ausgesprochen. Die Wortdarstellungen sind sprachabh@ngig.

Cascading Style Sheets, Level 2

A Ein Beispiel-Stylesheet f-r HTML 4.0 Dieser Anhang ist informell, nicht normativ. Dieses Stylesheet beschreibt die typische Formatierung aller HTML 4.0-Elemente ([HTML40]), basierend auf umfassenden Forschungen ber aktuelle Vorgehensweisen in Benutzerprogrammen. Den Entwicklern wird empfohlen, es als Standard-Stylesheet in ihren Implementierungen zu verwenden. Die vollst@ndige Darstellung einiger HTML-Elemente kann in CSS2 nicht ausgedrckt werden, unter anderem handelt es sich dabei um ersetzte Elemente (IMG, OBJECT), Skripting-Elemente (SCRIPT, APPLET), Formularsteuerungeselemente und Frame-Elemente. ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER, DIR, HR, MENU, PRE { display: block } LI { display: list-item }

< 832 >

Ein Beispiel-Stylesheet f#r HTML 4.0

Page size: 168,00 x 240,00 mm

HEAD { display: none } TABLE { display: table } TR { display: table-row } THEAD { display: table-header-group } TBODY { display: table-row-group } TFOOT { display: table-footer-group } COL { display: table-column } COLGROUP { display: table-column-group } TD, TH { display: table-cell } CAPTION { display: table-caption } TH { font-weight: bolder; text-align: center } CAPTION { text-align: center } BODY { padding: 8px; line-height: 1.33 } H1 { font-size: 2em; margin: .67em 0 } H2 { font-size: 1.5em; margin: .83em 0 } H3 { font-size: 1.17em; margin: 1em 0 } H4, P, BLOCKQUOTE, UL, FIELDSET, FORM, OL, DL, DIR, MENU { margin: 1.33em 0 } H5 { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 } H6 { font-size: .67em; margin: 2.33em 0 } H1, H2, H3, H4, H5, H6, B, STRONG { font-weight: bolder } BLOCKQUOTE { margin-left: 40px; margin-right: 40px } I, CITE, EM, VAR, ADDRESS { font-style: italic } PRE, TT, CODE, KBD, SAMP { font-family: monospace } PRE { white-space: pre } BIG { font-size: 1.17em } SMALL, SUB, SUP { font-size: .83em } SUB { vertical-align: sub } SUP { vertical-align: super } S, STRIKE, DEL { text-decoration: line-through } HR { border: 1px inset } OL, UL, DIR, MENU, DD { margin-left: 40px } OL { list-style-type: decimal } OL UL, UL OL, UL UL, OL OL { margin-top: 0; margin-bottom: 0 } U, INS { text-decoration: underline } CENTER { text-align: center } BR:before { content: "\A" } /* Formatierungsbeispiel fUr die ABR/ACRONYM-Elemente von HTML */ ABBR, ACRONYM { font-variant: small-caps; letter-spacing: 0.1em } A[href] { text-decoration: underline } :focus { outline: thin dotted invert } /* Anfang bidirektionale Einstellungen (nicht ]ndern) */ BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } *[DIR="ltr"] { direction: ltr; unicode-bidi: embed } *[DIR="rtl"] { direction: rtl; unicode-bidi: embed }

Ein Beispiel-Stylesheet f#r HTML 4.0

< 833 >

Cascading Style Sheets, Level 2

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

/* Elemente auf Blockebene in HTML4 */ ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME, NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER, DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT, COL, COLGROUP, TD, TH, CAPTION { unicode-bidi: embed } /* Ende bidirektionale Einstellungen */ @media print { @page H1, H2, H3, H4, H5, H6 BLOCKQUOTE, PRE UL, OL, DL } @media aural { H1, H2, H3, H4, H5, H6 H1 H2 H3 H4 H5 H6 LI, DT, DD DT PRE, CODE, TT EM STRONG DFN S, STRIKE I B U A:link A:visited A:active }

{ margin: 10% } { page-break-after: avoid; page-break-inside: avoid } { page-break-inside: avoid } { page-break-before: avoid }

{ { { { { { { { { { { { { { { { { { { {

voice-family: paul, male; stress: 20; richness: 90 } pitch: x-low; pitch-range: 90 } pitch: x-low; pitch-range: 80 } pitch: low; pitch-range: 70 } pitch: medium; pitch-range: 60 } pitch: medium; pitch-range: 50 } pitch: medium; pitch-range: 40 } pitch: medium; richness: 60 } stress: 80 } pitch: medium; pitch-range: 0; stress: 0; richness: 80 } pitch: medium; pitch-range: 60; stress: 60; richness: 50 } pitch: medium; pitch-range: 60; stress: 90; richness: 90 } pitch: high; pitch-range: 60; stress: 60 } richness: 0 } pitch: medium; pitch-range: 60; stress: 60; richness: 50 } pitch: medium; pitch-range: 60; stress: 90; richness: 90 } richness: 0 } voice-family: harry, male } voice-family: betty, female } voice-family: betty, female; pitch-range: 80; pitch: x-high }

B Xnderungen gegen-ber CSS1 Dieser Anhang ist informell, nicht normativ. CSS2 baut auf CSS1 auf, und alle gltigen CSS1-Stylesheets sind auch gltige CSS2-Stylesheets. Die Onderungen zwischen der CSS1-Spezifikation (siehe [CSS1]) und dieser Spezifikation k=nnen in drei Kategorien eingeteilt werden: neue Funktionen, aktualisierte Beschreibungen von CSS1-Funktionen und Onderungen an CSS1.

< 834 >

Bnderungen gegen#ber CSS1

Page size: 168,00 x 240,00 mm

Sandini Bib

B.1 Neue Funktionen Neben den Funktionen von CSS1 untersttzt CSS2: Das Konzept der Medientypen. Den 'inherit'-Wert fr alle Eigenschaften. Seitenmedien. Akustische Stylesheets. Mehrere Funktionsmerkmale im Bereich der Internationalisierung, unter anderem Stile fr die Listennummerierung, Untersttzung bidirektionaler Texte und Untersttzung sprachabh@ngiger Anfhrungszeichen. Einen erweiterten Mechanismus zur Schriftauswahl, unter anderem mit intelligentem Vergleich, Synthese und herunterladbaren Schriften. Darber hinaus wurde das Konzept von Systemschriften eingefhrt ebenso wie eine neue Eigenschaft namens 'font-size-adjust'. Tabellen, unter anderem mit neuen Werten fr 'display' und 'vertical-align'. Relative und absolute Positionierung, inklusive feststehender Positionierung. Neue Box-Typen (neben Block und Inline): Compact und Run-in. Die M=glichkeit, den berlauf, das Abschneiden und die Sichtbarkeit von Inhalt im visuellen Formatierungsmodell zu kontrollieren. Die M=glichkeit, minimale und maximale Breiten und H=hen im visuellen Formatierungsmodell anzugeben. Einen erweiterten Selektor-Mechanismus, unter anderem mit untergeordneten Selektoren, benachbarten Selektoren und Attribut-Selektoren. Erzeugten Inhalt, Z@hler und automatische Nummerierung sowie Markierungen. Textschatten – durch die neue Eigenschaft 'text-shadow'. Mehrere neue Pseudo-Klassen: :first-child, :hover, :focus und :lang. Systemfarben und -schriften. Cursor. Dynamische Umrisse.

· ·· ·· · · ·· ·· ··

B.2 Aktualisierte Beschreibungen Die CSS1-Spezifikation war kurz und pr@zise. Diese Spezifikation ist sehr viel umfassender und besser lesbar. Ein Großteil des erg@nzten Inhalts beschreibt neuen Funktionsumfang, aber auch die CSS1-Funktionsmerkmale sind hier ausfhrlicher beschrieben. Außer in einigen nachfolgend beschriebenen F@llen bedeuten die umformulierten Beschreibungen keine Onderungen in Syntax oder Semantik.

B.3 Semantische Xnderungen gegen-ber CSS1 Alle CSS1-Stylesheets sind gltige CSS2-Stylesheets, aber es gibt einige F@lle, wo das CSS1Stylesheet eine andere Bedeutung erh@lt, wenn es als CSS2-Stylesheet interpretiert wird. Die meisten Onderungen wurden aufgrund von Erfahrungen bei der Implementierung vorgenommen, die jetzt in die Spezifikation zurckfließen, aber es gibt auch ein paar Maßnahmen zur Fehlerkorrektur.

Neue Funktionen

< 835 >

Cascading Style Sheets, Level 2

·· ·· ·

Page size: 168,00 x 240,00 mm

Sandini Bib

· · · ·

Cascading Style Sheets, Level 2

·· · · ·· ·

Die Bedeutung von „!important“ hat sich ge@ndert. In CSS1 hatte „!important“ im Stylesheet eines Autors Priorit@t gegenber „!important“ im Stylesheet eines Benutzers. Das wurde in CSS2 umgekehrt. In CSS2 werden Farbwerte relativ zur Ger@te-Skala abgeschnitten, nicht relativ zur sRGBSkala, wie in CSS1. CSS1 sagte einfach aus, dass 'margin-right' ignoriert wird, wenn sowohl 'margin-left' als auch 'width' vorgegeben waren. In CSS2 ist es von der Schreibrichtung abh@ngig, ob 'margin-right' oder 'margin-left' ignoriert wird. In CSS1 hatten mehrere Eigenschaften (z. B. 'padding') Werte, die sich auf die Breite des bergeordneten Elements bezogen. Das war ein Fehler; der Wert sollte sich immer auf die Breite eines Elements auf Blockebene beziehen, und diese Spezifikation reflektiert dies durch Einfhrung des Begriffs „umschließender Block“. Der Ausgangswert von 'display' ist in CSS2 'inline', nicht 'block' wie in CSS1. In CSS1 wird die Eigenschaft 'clear' auf alle Elemente angewendet. Das war ein Fehler. In CSS2 wird die Eigenschaft nur auf Elemente auf Blockebene angewendet. In CSS1 schlossen sich ':link', ':visited' und ':active' wechselseitig aus; in CSS1 kann ':active' gleichzeitig mit ':link' oder ':visited' gesetzt werden. Der vorgeschlagene Skalierungsfaktor zwischen benachbarten 'font-size'-Indizies in der Tabelle der Schriftgr=ßen wurde von 1.5 auf 1.2 reduziert. Der berechnete Wert von 'font-size' wird vererbt, nicht der tats@chliche Wert. Die CSS1-Beschreibung von 'inside' (fr 'list-style-position') erlaubte die Interpretation, dass der linke Rand des Texts gemeint war, und nicht die Position der Kugel-Markierung. In CSS2 wurde diese Interpretationsm=glichkeit entfernt. Lesen Sie bitte auch den normativen Abschnitt ber die Unterschiede zwischen der CSS1und dem CSS2-Tokenbildung.

C Hinweise zur Implementierung und Performance von Schriften Dieser Anhang ist informell, nicht normativ.

C.1 Glossar f-r Schriftbegriffe DocLockZ Die DocLockj-Technologie von Bitstream stellt sicher, dass TrueDoc PFRs nur auf der Site verwendet werden k=nnen, fr die sie ver=ffentlicht wurden. Eine TrueDoc PFR, die auf eine andere Site verschoben oder auf die von einer anderen Site aus verwiesen wird, funktioniert nicht. Digitale Signatur Teil der Trust Management-Technologie; wird genutzt, um signierte Zusicherungen in Hinblick auf eine Ressource zu treffen.

< 836 >

Bnderungen gegen#ber CSS1

Page size: 168,00 x 240,00 mm

Schrift-Caching Das Schrift-Caching erlaubt, dass auf dem Client-System eine tempor@re Kopie von Schriften bereitgestellt wird. H@ufig werden sie zusammen mit anderen Elementen aus dem Cache auf der Festplatte gespeichert, wie beispielsweise Grafik, insbesondere fr den User Agent. Schriftart (Font Face) Ein „Handle“, der auf eine bestimmte Variante einer Schrift verweist, ohne dabei die Schriftgr=ße zu bercksichtigen. Schriftvergleich Ein Prozess, unter Verwendung einer oder mehrerer Attribute der prim@ren Schrift eine @hnliche Schrift auszuw@hlen. Gebr@uchliche Attribute sind unter anderem serif, sans-serif, weight, cap height, x-height, spacing, language und posture. Der Schriftvergleich ist von dem verwendeten Algorithmus und der zur Auswahl stehenden Schriften abh@ngig. Glyphen-Darstellung Untereinstellung Der Prozess, durch den unerwnschte Glyphen-Darstellungen (zusammen mit ihren Nebeneffekten und Kerning-Informationen) aus einer Prim@rschrift entfernt werden, um eine kleinere Schrift-Untermenge zu erzeugen, die ein bestimmtes Dokument oder mehrere Dokumente abdeckt. Das ist insbesondere ein Vorteil fr Dokumente, die ideographische Schriften (scripts) verwenden, bei denen der Glyphen-Vorrat der Grundschrift sehr groß sein kann. Die Untereinstellung der Glyphen-Darstellung fr Dokumente, die Schriften (scripts) einsetzen, fr die Ligaturen erforderlich sind, wie beispielsweise Arabisch, ist schwierig, wenn man die Ligatur-Regeln des endgltigen Anzeigesystems nicht kennt. Intellifont Die Intellifont-Technologie wurde von Agfa entwickelt und ist das systemeigene Format fr Hewlett-Packard und andere Drucker, die die Sprache PCL5 verwendet. Außerdem stellt es das systemeigene Schriftformat auf den Amiga-Computern dar. Infinifont Eine Schriftsynthesetechnik, die aus einer Panose-1-Zahl (und optional zus@tzlichen Schriftbeschreibungsdaten) eine Ersatzschrift erzeugen kann, ohne aus einem einzelnen MasterUmriss extrapolieren oder zwischen zwei oder mehr Umrissen interpolieren zu mssen (siehe [INFINIFONT]). Italic Eine Klasse von Buchstabenformen fr lateinische Schriften, die kursiver sind als „roman“ Buchstabenformen, aber weniger kursiv als Schreibschriften. H@ufig wird ein Schriftpaar entwickelt, das in Kombination verwendet wird; die eine ist eine serifen-behaftete Roman, die andere ist Italic. Andere Begriffe zur Beschreibung dieser Klasse von Buchstabenformen sind cursive oder (fr kyrillische Schriften) kursiv. Fr serifenlose Schriften ist die begleitende Schriftart h@ufig eine geneigte oder oblique Variante statt einer eigenen Klasse von Buchstabenformen.

Glossar f#r Schriftbegriffe

< 837 >

Cascading Style Sheets, Level 2

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

Kerning Eine Ver@nderung des Abstands zwischen ausgew@hlten Glyphen-Darstellungen, die andernfalls zu eng beisammen oder zu weit auseinander stehen wrden, um ein gleichm@ßigeres Schriftbild zu erzielen.

Multiple Master Font Ein Multiple Master Font enth@lt zwei Prim@rschriften, die mit Hilfe einer speziellen Darstellungssoftware eingesetzt werden, um ein interpoliertes Ergebnis zu erzielen. Adobe Systems stellt einen Mechanismus bereit, der erlaubt, dass die Ausgabeschrift oder die interpolierte Ausgabeschrift mit Hilfe von Parametern gesteuert wird. Diese Parameter beschreiben im Allgemeinen die Charakteristik einer Originalschrift, und das Multiple Master-Ergebnis wird als „synthetisierte Schrift“ bezeichnet.

< 838 >

Bnderungen gegen#ber CSS1

Page size: 168,00 x 240,00 mm

Open Type Open Type ist eine Erweiterung des TrueType-Schriftformats, die zus@tzliche Informationen enth@lt, um zus@tzliche M=glichkeiten fr Schriften zu bieten, die eine hochqualitative internationale Typographie untersttzen. Open Type kann einem einzelnen Zeichen mehrere Glyphen-Darstellungen oder einer einzelnen Glyphendarstellung eine Zeichenkombination (Ligaturbildung) zuordnen. Open Type beinhaltet zweidimensionale Informationen zur Untersttzung von Funktionsmerkmalen fr die komplexe Positionierung und GlyphenZuordnung. True Type Open und Open Type enthalten explizite Schrift- und Sprachinformationen, so dass eine Textverarbeitung ihr Verhalten entsprechend anpassen kann (siehe [OPENTYPE]). Server Font Eine Schriftressource, die sich auf dem Webserver befindet, auf den in der WebFont-Definition verwiesen wird. Das Benutzerprogramm kann diese Ressource fr die Darstellung der Seite verwenden. Speedo Diese Schrifttechnologie wurde von Bitstream entwickelt und ist das systemeigene Schriftformat fr Atari ST- und Falcon-Computer. Des weiteren wird sie von Computern unter dem X Window-System verwendet. TrueDoc Diese Technologie wurde von Bitstream entwickelt, um plattformunabh@ngige, skalierbare Schriftobjekte im Web erstellen, transportieren und darstellen zu k=nnen. Schriftobjekte werden mit Hilfe des True Doc Character Shape Recorders (CSR) erstellt, und die Darstellung erfolgt mit dem True Doc Character Shape Player (CSP). Die Technologie ist fr die Anzeige und das Drucken im Web vorgesehen. TrueDoc Portable Font Resource Eine PFR ist ein plattformunabh@ngiges Schriftobjekt, das durch einen CSP erzeugt wird. Die Eingabe kann TrueType oder Type 1 beliebiger Varianten unter Windows, Mac oder Unix sein. TrueDoc Portable Font Resource bietet gute Komprimierungsverh@ltnisse und ist plattformunabh@ngig, ist aber nicht ganz einfach zu installieren, weil es sich dabei nicht um ein systemeigenes Schriftformat (TrueType oder Type 1) handelt. TrueType TrueType ist ein von Apple entwickeltes und von Microsoft in Lizenz genommenes Schriftformat. TrueType ist das systemeigene Schriftformat fr Windows und Macintosh. Es enth@lt eine hierarchische Menge von Tabellen und Glyphen-Darstellungen. Buchstaben k=nnen auf Zeichen- und Punktgr=ße-Basis dargestellt werden, wodurch sich eine ausgezeichnete Qualit@t fr die verschiedenen Bildschirmaufl=sungen ergibt. TrueType-Schriften fr Windows und Mac weisen wenige Unterschiede auf, sind aber unterschiedlich genug, um eine plattformbergreifende Verwendung zu verhindern. TrueType Collection Eine TTC ist eine Erweiterung des TrueType-Formats, die Tabellen beinhaltet, die erlauben, dass mehrere TrueType-Schriften innerhalb einer einzigen TrueType-Schriftdatei enthalten sind. TTC-Dateien sind momentan noch relativ selten. TrueType GX Fonts TrueType GX Fonts enthalten Erweiterungen fr das TrueType-Standardformat, die ver@nderbare Schriften erlauben, @hnlich den Multiple Master Fonts. Es kann mehrere Mutationsachsen geben, wie beispielsweise Gewichtung, H=he oder Neigung. Die Achse kann

Implementierung und Performance von Schriften

< 839 >

Cascading Style Sheets, Level 2

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

fr fast jeden Effekt definiert werden. Darber hinaus untersttzt TrueType GX den Austausch alternativer Glyphen-Darstellungen fr Ligaturen, Kontextformen, Brche usw. Momentan steht TrueType GX nur auf dem Mac zur Verfgung (siehe [TRUETYPEGX]). URI-Bindung Der Prozess, eine bestimmten Schriftressource auf die Nutzung auf einer vorgegebenen Website zu beschr@nken. Dabei wird ein verschlsselter URI oder eine digital signierte Nutzungszusicherung in die Schriftressource eingebettet.

C.2 Schriften finden Es gibt viele verschiedene Schriftformate, die von vielen verschiedenen Plattformen genutzt werden. Um ein bevorzugtes Schriftformat auszuw@hlen, wird eine transparente Inhaltsabstimmung vorgenommen (siehe [NEGOT]). Es ist immer erkennbar, wann eine Schrift dereferenziert wird, weil der URI in der Schriftbeschreibung enthalten ist. Eine Implementierung weiß, welche herunterladbaren Schriftformate sie untersttzt, und kann damit den Formathinweis nutzen, um zu vermeiden, dass Schriften in einem nicht untersttzten Format heruntergeladen werden.

Cascading Style Sheets, Level 2

C.3 Bedeutung der Panose-Zahlen

Die Zahlen fr die Familie, Serifenstil und Proportion werden von Windows95 fr die Schriftauswahl und den Schriftvergleich verwendet. Die Bedeutung der zehn Zahlen und die erlaubten Werte (in Klammern angegeben) finden Sie nachfolgend. Dabei sind die gebr@uchlichsten F@lle bercksichtigt, mit „family“-Zahl gleich 2, Text und Digit. (Falls die erste Zahl einen anderen Wert hat, haben die anderen neun Zahlen andere Bedeutungen.) Weitere Informationen ber Panose-1 finden Sie in [PANOSE].

< 840 >

Bnderungen gegen#ber CSS1

Page size: 168,00 x 240,00 mm

Sandini Bib

Family

·· ·· ··

Any (0) No Fit (1) [PANOSE] Latin Text and Display (2) [PANOSE] Latin Script (3) [PANOSE] Latin Decorative (4) [PANOSE] Latin Pictorial (5)

Serif Style

·· ·· ·· ·· ·· ·· ·· ··

Any (0) No Fit (1) Cove (2) Obtuse Cove (3) Square Cove (4) Obtuse Square Cove (5) Square (6) Thin (7) Bone (8) Exaggerated (9) Triangle (10) Normal Sans (11) Obtuse Sans (12) Perp Sans (13) Flared (14) Rounded (15)

·· ·· ·· ·· ·· ··

Cascading Style Sheets, Level 2

Weight Any (0) No Fit (1) Very Light (2)[100] Light (3) [200] Thin (4) [300] Book (5) [400] (wie CSS1 'normal' ) Medium (6) [500] Demi (7) [600] Bold (8) [700] (wie CSS1 'bold' ) Heavy (9) [800] Black (10) [900] Extra Black/Nord (11) [900] (erzwinge Abbildung auf CSS1 100-900 Skala)

Bedeutung der Panose-Zahlen

< 841 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Proportion

·· ·· ·· ·· ··

Any (0) No Fit (1) Old Style (2) Modern (3) Even Width (4) Expanded (5) Condensed (6) Very Expanded (7) Very Condensed (8) Monospaced (9)

Contrast

·· ·· ·· ·· ··

Any (0) No Fit (1) None (2) Very Low (3) Low (4) Medium Low (5) Medium (6) Medium High (7) High (8) Very High (9)

Cascading Style Sheets, Level 2

Stroke Variation

·· ·· ·· ·· ·· ·

Any (0) No Fit (1) No Variation (2) Gradual/Diagonal (3) Gradual/Transitional (4) Gradual/Vertical (5) Gradual/Horizontal (6) Rapid/Vertical (7) Rapid/Horizontal (8) Instant/Horizontal (9) Instant/Vertical (10)

Arm Style

·· ·· ··

Any (0) No Fit (1) Straight Arms/Horizontal (2) Straight Arms/Wedge (3) Straight Arms/Vertical (4) Straight Arms/Single Serif (5)

< 842 >

Bnderungen gegen#ber CSS1

Page size: 168,00 x 240,00 mm

Sandini Bib

·· ·· ··

Straight Arms/Double Serif (6) Non-Straight Arms/Horizontal (7) Non-Straight Arms/Wedge (8) Non-Straight Arms/Vertical (90) Non-Straight Arms/Single Serif (10) Non-Straight Arms/Double Serif (11)

Letterform

·· ·· ·· ·· ·· ·· ·· ··

Any (0) No Fit (1) Normal/Contact (2) Normal/Weighted (3) Normal/Boxed (4) Normal/Flattened (5) Normal/Rounded (6) Normal/Off Center (7) Normal/Square (8) Oblique/Contact (9) Oblique/Weighted (10) Oblique/Boxed (11) Oblique/Flattened (12) Oblique/Rounded (13) Oblique/Off Center (14) Oblique/Square (15)

Midline Any (0) No Fit (1) Standard/Trimmed (2) Standard/Pointed (3) Standard/Serifed (4) High/Trimmed (5) High/Pointed (6) High/Serifed (7) Constant/Trimmed (8) Constant/Pointed (9) Constant/Serifed (10) Low/Trimmed (11) Low/Pointed (12) Low/Serifed (13)

Cascading Style Sheets, Level 2

·· ·· ·· ·· ·· ·· ··

XHeight

·· ·

Any (0) No Fit (1) Constant/Small (2)

Bedeutung der Panose-Zahlen

< 843 >

Page size: 168,00 x 240,00 mm

Sandini Bib

·· ·· ·

Constant/Standard (3) Constant/Large (4) Ducking/Small (5) Ducking/Standard (6) Ducking/Large (7)

Panose-2 (siehe [PANOSE2]) ist eine Spezifikation fr eine umfassendere Technologie der Schriftklassifizierung und -vergleich, die nicht auf lateinische Schriftarten begrenzt ist. Beispielsweise k=nnen die Serifen-Eigenschaften einer lateinischen Schriftform mit den Strichabschlssen einer Kanji-Schrift verglichen werden.

Cascading Style Sheets, Level 2

Der Panose-2-Wert wird nicht in bekannten Schriftformaten gespeichert, kann aber gemessen werden.

C.4 Ableitung von Unicode-Bereichen f-r TrueType Diese Information steht in der Schrift zur Verfgung, indem die 'ulUnicodeRange'-Bits in der 'OS/2'-Tabelle (falls vorhanden) nachgeschlagen werden, die eine Bitfeld-Darstellung der Menge enth@lt. Diese Tabelle ist in berarbeitung 1.66 der TrueType-Spezifikation von Microsoft definiert. Betrachtet man diese Information als Ganzes, entspricht jedes Element einem Unicode 1.1-Zeichenblock, und wenn ein Element in dieser Menge vorhanden ist, bedeutet das, dass die Schrift ein oder mehr Glyphen-Darstellungen besitzt, um mindestens ein Zeichen in diesem Block darzustellen. Die Menge besteht aus 128 Elementen, wie nachfolgend beschrieben. Die Reihenfolge entspricht dem Unicode 1.1-Standard. Diese Tabelle kann dazu verwendet werden, um die Information in einer TrueType-Schrift in einen 'unicode-range'-CSS-Deskriptor umzuwandeln.

< 844 >

Bnderungen gegen#ber CSS1

Page size: 168,00 x 240,00 mm

Block

Add

Block name

Unicode-Bereich

0

1

Basic Latin

U+0-7F

1

2

Latin-1 Supplement

U+80-FF

2

4

Latin-1 Extended-A

U+100-17F

3

8

Latin Extended-B

U+180-24F

4

1

IPA Extensions

U+250-2AF

5

2

Spacing Modifier Letters

U+2B0-2FF

6

4

Combining Diacritical Marks

U+300-36F

7

8

Greek

U+370-3CF

8

1

Greek Symbols and Coptic

U+3D0-3EF

9

2

Cyrillic

U+400-4FF

10

4

Armenian

U+530-58F

11

8

Hebrew

U+590-5FF

12

1

Hebrew Extended-A Hebrew Extended-B

?? welche Bereiche ??

13

2

Arabic

U+600-69F

14

4

Arabic Extended

U+670-6FF

15

8

Devanagari

U+900-97F

16

1

Bengali

U+980-9FF

17

2

Gurmukhi

U+A00-A7F

18

4

Gujarati

U+A80-AFF

19

8

Oriya

U+B00-B7F

20

1

Tamil

U+B80-BFF

21

2

Telugu

U+C00-C7F

22

4

Kannada

U+C80-CFF

23

8

Malayalam

U+D00-D7F

24

1

Thai

U+E00-E7F

25

2

Lao

U+E80-EFF

Ableitung von Unicode-Bereichen f#r TrueType

Cascading Style Sheets, Level 2

Sandini Bib

< 845 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

26

4

Georgian

U+10A0-10EF

27

8

Georgian Extended

U+10F0-10FF ??

28

1

Hangul Jamo

U+1100-11FF

29

2

Latin Extended Additional

-

30

4

Greek Extended

U+1F00-1FFF

31

8

General Punctuation

U+2000-206F

32

1

Superscripts and Subscripts

-

33

2

Currency Symbols

U+20A0-20CF

34

4

Combining Marks for Symbols

U+20D0-20FF

35

8

Letterlike Symbols

U+2100-214F

36

1

Number Forms

U+2150-218F

37

2

Arrows

U+2190-21FF

38

4

Mathematical Operators

U+2200-22FF

39

8

Miscellaneous Technical

U+2300-23FF

40

1

Control Pictures

U+2400-243F

41

2

Optical Character Recognition

U+2440-245F

42

4

Enclosed Alphanumerics

U+2460-24FF

43

8

Box Drawing

U+2500-257F

44

1

Block Elements

U+2580-259F

45

2

Geometric Shapes

U+25A0-25FF

46

4

Miscellaneous Symbols

U+2600-26FF

47

8

Dingbats

U+2700-27BF

48

1

CJK Symbols and Punctuation

U+3000-303F

49

2

Hiragana

U+3040-309F

50

4

Katakana

U+30A0-30FF

51

8

Bopomofo

U+3100-312F

52

1

Hangul Compatibility Jamo

U+3130-318F

53

2

CJK Miscellaneous

??

54

4

Enclosed CJK Letters and Months

U+3200-32FF

< 846 >

Bnderungen gegen#ber CSS1

Page size: 168,00 x 240,00 mm

55

8

CJK compatibility

U+3300-33FF

56

1

Hangul

U+AC00-D7FF

59

8

CJK Unified Ideographs

U+4E00-9FFF

60

1

Private Use Area

U+E000-F8FF

61

2

CJK Compatibility Ideographs

U+F900-FAFF

62

4

Alphabetic Presentation Forms

U+FB00-FB4F

63

8

Arabic Presentation Forms-A

U+FB50-FDFF

64

1

Combining Half Marks

U+FE20-FE2F

65

2

CJK compatibility Forms

U+FE30-FE4F

66

4

Small Form Variants

U+FE50-FE6F

67

8

Arabic Presentation Forms-B

U+FE70-FEFF

68

1

Halfwidth and Fullwidth Forms

U+FF00-FFEF

69

2

Specials

U+FFF0-FFFD

Das TrueType-Bitfeld-System weist das Problem auf, dass es an Unicode 1.1 gebunden ist und nicht mit der Unicode-Erweiterung zurechtkommt. Beispielsweise kann es kein Tibetanisch und auch keine anderen Schriften darstellen, die mit Unicode 2.0 oder sp@teren berarbeitungen eingefgt wurden.

C.5 Automatische Deskriptor-Erstellung Autorenwerkzeuge sollten es den Autoren von Stylesheets erlauben, Schriftdeskriptoren zu erg@nzen und zu bearbeiten. In einigen F@llen k=nnen Autorenwerkzeuge helfen, indem sie lokal installierte Schriften auswerten und automatisch Deskriptoren fr die Schriften erzeugen, auf die im Stylesheet verwiesen wird. Diese Funktion kann auch von Werkzeugen ausgefhrt werden, die Schriften fr den dynamischen Download umwandeln oder Untermengen daraus ermitteln. Die folgende Tabelle zeigt, wo diese Informationen fr gebr@uchliche Schriftformate gefunden werden k=nnen.

Automatische Deskriptor-Erstellung

< 847 >

Cascading Style Sheets, Level 2

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

Deskriptor

Type 1

TrueType und OpenType

TrueType GX [TRUETYPEGX]

'ascent'

'Ascender' in AFM/ PFM-Datei

'Ascender' in 'hhea'-Tabelle oder (vorzugsweise) 'sTypoAscender' in 'OS/2'-Tabelle

'horizontalBefore' in 'fmtx' table

'baseline'

bsln-Tabelle, siehe Hinweis

'bbox'

FontBBox, Schriftverzeichnis

'cap-height'

CapHeight in AFM/ PFM-Datei

'descent'

'Descender' in der AFM/PFM -Datei.

'xMin', 'xMax', 'yMin' und 'yMax' Eintr@ge in die 'head'-Tabelle

Cascading Style Sheets, Level 2

'mathline'

bsln-Tabelle

'font-family'

FamilyName, fontinfo-Verzeichnis

'stemh'

StdHW, privateVerzeichnis der AFM/PFM-Datei

'stemv'

/StdVW, privateVerzeichnis

name-Tabelle

cvt-Tabelle

'topline'

bsln-Tabelle

'unicode-range'

cmap-Datei

OS/2-Tabelle, siehe Anhang C

'units-per-em'

FontMatrix, Schriftverzeichnis

unitsPerEm, headTabelle

'widths'

hmtx-Tabelle

D Die Grammatik von CSS2 Dieser Anhang ist normativ. Die nachfolgende Grammatik definiert die Syntax von CSS1. Es handelt sich dabei jedoch in gewisser Hinsicht um eine Obermenge von CSS2, weil diese Spezifikation zus@tzliche semantische Beschr@nkungen einfhrt, die nicht in dieser Grammatik ausgedrckt sind. Ein konformes Benutzerprogramm muss außerdem die Regeln zum vorw@rtskompatiblen Parsing, die Eigen-

< 848 >

Die Grammatik von CSS2

Page size: 168,00 x 240,00 mm

Sandini Bib

schaft/Wert-Notation und die Einheitennotation bercksichtigen. Darber hinaus kann die Dokumentsprache Beschr@nkungen einfhren, z. B. legt HTML Beschr@nkungen zu den m=glichen Werten des „class“-Attributs fest.

D.1 Grammatik Die nachfolgende Grammatik ist LL(1) (beachten Sie jedoch, dass die meisten Benutzerprogramme sie nicht direkt verwenden sollten, weil sie die Parsing-Konventionen nicht ausdrckt, sondern nur die CSS2-Syntax). Das Format der Produktionen ist fr die menschliche Wahrnehmung optimiert, und es wird eine Art abkrzende Notation jenseits von Yacc (siehe [YACC]) verwendet: *: 0 oder mehrmals +: einmal oder mehrmals ?: 0 oder 1 |: trennt Alternativen [ ]: Gruppierung

·· ·· ·

Die Produktionen sind:

Grammatik

Cascading Style Sheets, Level 2

stylesheet : [ CHARSET_SYM S* STRING S* ';' ]? [S|CDO|CDC]* [ import [S|CDO|CDC]* ]* [ [ ruleset | media | page | font_face ] [S|CDO|CDC]* ]* ; import : IMPORT_SYM S* [STRING|URI] S* [ medium [ ',' S* medium]* ]? ';' S* ; media : MEDIA_SYM S* medium [ ',' S* medium ]* '{' S* ruleset* '}' S* ; medium : IDENT S* ; page : PAGE_SYM S* IDENT? pseudo_page? S* '{' S* declaration [ ';' S* declaration ]* '}' S* ; pseudo_page : ':' IDENT ; font_face : FONT_FACE_SYM S* '{' S* declaration [ ';' S* declaration ]* '}' S* ; operator : '/' S* | ',' S* | /* leer */ ; combinator : '+' S* | '>' S* | /* leer */ ; unary_operator : '-' | '+'

< 849 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

; property : IDENT S* ; ruleset : selector [ ',' S* selector ]* '{' S* declaration [ ';' S* declaration ]* '}' S* ; selector : simple_selector [ combinator simple_selector ]* ; simple_selector : element_name? [ HASH | class | attrib | pseudo ]* S* ; class : '.' IDENT ; element_name : IDENT | '*' ; attrib : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S* [ IDENT | STRING ] S* ]? ']' ; pseudo : ':' [ IDENT | FUNCTION S* IDENT S* ')' ] ; declaration : property ':' S* expr prio? | /* leer */ ; prio : IMPORTANT_SYM S* ; expr : term [ operator term ]* ; term : unary_operator? [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* | TIME S* | FREQ S* | function ] | STRING S* | IDENT S* | URI S* | RGB S* | UNICODERANGE S* | hexcolor ; function : FUNCTION S* expr ')' S* ; /* * Es gibt eine Beschr]nkung bezUglich der * Farbe, n]mlich, dass sie 3 oder * 6 Hex-Ziffern (i.e., [0-9a-fA-F]) hinter * dem "#" haben muss; e.g., "#000" ist OK, * "#abcd" nicht */ hexcolor : HASH S* ;

< 850 >

Die Grammatik von CSS2

Page size: 168,00 x 240,00 mm

Sandini Bib

D.2 Lexikalischer Scanner

%option case-insensitive h [0-9a-f] nonascii [\200-\377] unicode \\{h}{1,6}[ \t\r\n\f]? escape {unicode}|\\[ -~\200-\377] nmstart [a-z]|{nonascii}|{escape} nmchar [a-z0-9-]|{nonascii}|{escape} string1 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\" string2 \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\' ident {nmstart}{nmchar}* name {nmchar}+ num [0-9]+|[0-9]*"."[0-9]+ string {string1}|{string2} url ([!#$%&*-~]|{nonascii}|{escape})* w [ \t\r\n\f]* nl \n|\r\n|\r|\f range \?{1,6}|{h}(\?{0,5}|{h}(\?{0,4}|{h}(\?{0,3}|{h}(\?{0,2}|{h}(\??|{h}))))) %% [ \t\r\n\f]+ {return S;} \/\*[^*]*\*+([^/][^*]*\*+)*\/ /* Kommentare ignorieren */ "" {return CDC;} "~=" {return INCLUDES;} "|=" {return DASHMATCH;} {string} {return STRING;} {ident} {return IDENT;} "#"{name} {return HASH;} "@import" {return IMPORT_SYM;} "@page" {return PAGE_SYM;} "@media" {return MEDIA_SYM;} "@font-face" {return FONT_FACE_SYM;} "@charset" {return CHARSET_SYM;} "@"{ident} {return ATKEYWORD;} "!{w}important" {return IMPORTANT_SYM;} {num}em {return EMS;} {num}ex {return EXS;} {num}px {return LENGTH;} {num}cm {return LENGTH;} {num}mm {return LENGTH;} {num}in {return LENGTH;} {num}pt {return LENGTH;} {num}pc {return LENGTH;} {num}deg {return ANGLE;} {num}rad {return ANGLE;} {num}grad {return ANGLE;} {num}ms {return TIME;} {num}s {return TIME;}

Lexikalischer Scanner

< 851 >

Cascading Style Sheets, Level 2

Nachfolgend sehen Sie den Tokenizer, geschrieben in Flex-Notation (siehe [FLEX]). Der Tokenizer bercksichtigt keine Groß-/Kleinschreibung. Die beiden Vorkommen von „\377“ stellen die h=chste Zeichennummer dar, mit der aktuelle Versionen von Flex zurechtkommen (dezimal 255). Sie sollten als „\4177777“ (dezimal 1114111) gelesen werden, der h=chstm=gliche Codepunkt in Unicode/ISO-10646.

Page size: 168,00 x 240,00 mm

Sandini Bib

{num}Hz {return FREQ;} {num}kHz {return FREQ;} {num}{ident} {return DIMEN;} {num}% {return PERCENTAGE;} {num} {return NUMBER;} "url("{w}{string}{w}")" {return URI;} "url("{w}{url}{w}")" {return URI;} {ident}"(" {return FUNCTION;}

U\+{range} {return UNICODERANGE;} U\+{h}{1,6}-{h}{1,6} {return UNICODERANGE;} . {return *yytext;}

D.3 Vergleich der Tokenbildung zwischen CSS1 und CSS2 Es gibt einige Unterschiede zwischen der Syntax, wie sie in der CSS1-Empfehlung ([CSS1]) angegeben ist, und der oben gezeigten. Diese Unterschiede sind gr=ßtenteils durch neue Token in CSS2 bedingt, die es in CSS1 nicht gab. Andere Unterschiede sind entstanden, weil die Grammatik der besseren Lesbarkeit halber umformuliert wurde. Es gibt jedoch einige inkompatible Onderungen, die in der CSS1-Syntax als Fehler erkannt wurden. Sie sind nachfolgend beschrieben. CSS1-Stylesheets konnten nur in 1-Byte/Zeichen-Codierungen formuliert werden wie beispielsweise ASCII und ISO-8859-1. CSS2 weist keine solche Beschr@nkung auf. In der Praxis war es nicht schwierig, den CSS1-Tokenizer zu extrapolieren, und einige User Agents haben auch 2-Byte-Codierungen akzeptiert. CSS1 erlaubte nur vier hexadezimale Ziffern hinter dem Backslash (\), um auf Unicode-Zeichen zu verweisen, CSS2 erlaubt sechs. Darber hinaus erlaubt CSS2, dass die Escape-Folge durch ein Leerraumzeichen begrenzt wird. Gem@ß CSS1 z. B. umfasst der String „\abcdef“ 3 Buchstaben, (\abcd, e und f), gem@ß CSS2 nur einen (\abcdef). Das Tabulator-Zeichen (ASCII 9) war in Zeichenketten nicht erlaubt. Weil Zeichenketten in CSS1 jedoch nur fr Schriftnamen und URLs verwendet wurden, war die einzige M=glichkeit, wie dies zu Inkompatibilit@t zwischen CSS1 und CSS2 fhren konnte, dass ein Stylesheet eine Schriftfamilie enthielt, in deren Namen ein Tabulatorzeichen enthalten war. Auf @hnliche Weise waren in CSS1 auch keine Neuezeile-Zeichen (Escape mit Backslash) in Zeichenketten erlaubt. CSS2 parst eine Zahl unmittelbar gefolgt von einem Bezeichner als DIMEN-Token (d. h. eine unbekannte Einheit), CSS1 parst sie als Zahl und Bezeichner. Das bedeutet, in CSS1 war die Deklaration 'font: 10pt/1.2serif' korrekt, ebenso wie 'font: 10pt/12pt serif'; in CSS2 muss vor „serif“ ein Leerzeichen angegeben werden. (Einige Benutzerprogramme haben das erste Beispiel akzeptiert, nicht aber das zweite.) In CSS1 konnte ein Klassenname mit einer Ziffer beginnen („.55ft“), es sei denn, es handelte sich dabei um eine Gr=ße („.55in“). In CSS2 werden solche Klassen als unbekannte Gr=ßen geparst (um zuknftige Erg@nzungen um neue Einheiten zu untersttzen). Damit „.55ft“ eine gltige Klasse ist, muss in CSS2 die erste Ziffer als Escape gekennzeichnet werden („.\55ft“).

· Cascading Style Sheets, Level 2

· · · · ·

< 852 >

Die Grammatik von CSS2

Page size: 168,00 x 240,00 mm

Sandini Bib

E Literaturhinweise [COLORIMETRY] „Colorimetry, Second Edition“, CIE Publication 15.2-1986, ISBN 3-900-734-00-3. Verfgbar unter http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html [CSS1] „Cascading Style Sheets, level 1“, H. W. Lie und B. Bos, 17. Dezember 1996. Verfgbar unter http://www.w3.org/TR/REC-CSS1-961217.html [FLEX] „Flex: The Lexical Scanner Generator“, Version 2.3.7, ISBN 1882114213. [HTML40] „HTML 4.0 Specification“, D. Raggett, A. Le Hors, I. Jacobs, 8. Juli 1997. Verfgbar unter http://www.edition-w3c-de/TR/REC-html40. Die Empfehlung definiert drei Dokumenttypdefinitionen: Strict, Transitional und Frameset, die alle von der Spezifikation aus erreichbar sind. [IANA] „Assigned Numbers“, STD 2, RFC 1700, USC/ISI, J. Reynolds und J. Postel, Oktober 1994. Verfgbar unter ftp://ftp.internic.net/rfc/rfc1700.txt [ICC32] „ICC Profile Format Specification, version 3.2“, 1995. Verfgbar unter ftp://sgigate.sgi.com/pub/icc/ICC32.pdf [ISO8879] ISO 8879:1986 „Information Processing – Text and Office Systems – Standard Generalized Markup Language (SGML)“, ISO 8879:1986. Eine Liste der SGML-Entities finden Sie unter ftp://ftp.ifi.uio.no/pub/SGML/ENTITIES/ [ISO10646] „Information Technology - Universal Multiple- Octet Coded Character Set (UCS) - Part 1: Architecture and Basic Multilingual Plane“, ISO/IEC 10646-1:1993. Die aktuelle Spezifikation bercksichtigt auch die ersten fnf Nachtr@ge zu ISO/IEC 10646-1:1993. Praktische berblicke ber die BMP- und Plane 1-Dokumente zeigen, welche Skripts sich innerhalb welcher numerischer Bereiche befinden. [PNG10] „PNG (Portable Network Graphics) Specification, Version 1.0 specification“, T. Boutell Hrsg., 1 Oktober 1996. Verfgbar unter http://www.w3.org/pub/WWW/TR/REC-png-multi.html [RFC1808] „Relative Uniform Resource Locators“, R. Fielding, Juni 1995. Verfgbar unter ftp://ds.internic.net/rfc/rfc1808.txt [RFC2045] „Multipurpose Internet Mail Extensions (MIME) Part One: Format of Internet Message Bodies“, N. Freed und N. Borenstein, November 1996. Verfgbar unter ftp://ftp.internic.net/rfc/rfc2045.txt. Beachten Sie, dass die RFCs RFC1521, RFC1522, und RFC1590 nach diesem RFC veraltet sind.

Literaturhinweise

< 853 >

Cascading Style Sheets, Level 2

E.1 Normative Literaturhinweise

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

[RFC2068] „HTTP Version 1.1 „, R. Fielding, J. Gettys, J. Mogul, H. Frystyk Nielsen und T. Berners-Lee, Januar 1997. Verfgbar unter ftp://ftp.internic.net/rfc/rfc2068.txt [RFC2070] „Internationalization of the HyperText Markup Language“, F. Yergeau, G. Nicol, G. Adams und M. Drst, January 1997. Verfgbar unter ftp://ds.internic.net/rfc/rfc2070.txt [RFC2119] „Key words for use in RFCs to Indicate Requirement Levels“, S. Bradner, M@rz 1997. Verfgbar unter ftp://ds.internic.net/rfc/rfc2119.txt [RFC2318] „The text/css Media Type“, H. Lie, B. Bos, C. Lilley, M@rz 1998. Verfgbar unter ftp://ds.internic.net/rfc/rfc2318.txt [RFC1738] „Uniform Resource Locators“, T. Berners-Lee, L. Masinter und M. McCahill, Dezember 1994. Verfgbar unter ftp://ds.internic.net/rfc/rfc1738.txt [SRGB] „Proposal for a Standard Color Space for the Internet - sRGB“, M. Anderson, R. Motta, S. Chandrasekar, M. Stokes. Verfgbar unter http://www.w3.org/Graphics/Color/sRGB.html [UNICODE] „The Unicode Standard: Version 2.0“, The Unicode Consortium, Addison-Wesley Developers Press, 1996. Zur Bidirektionalit@t lesen Sie auch die Korrekturen unter http://www.unicode.org/unicode/uni2errata/bidi.htm. Weitere Informationen finden Sie auf der Homepage des Unicode Consortiums unter http://www.unicode.org/. Die neueste Version von Unicode. Weitere Informationen finden Sei auf der Homepage des Unicode Consortiums unter http://www.unicode.org/ [URI] „Uniform Resource Identifiers (URI): Generic Syntax and Semantics“, T. Berners-Lee, R. Fielding, L. Masinter, 18. November 1997. Verfgbar unter http://www.ics.uci.edu/pub/ietf/uri/draft-fielding-uri-syntax-01.txt. Dies ist eine fortlaufende Arbeit, die voraussichtlich [RFC1738] und [RFC1808] aktualisieren wird. [XML10] „Extensible Markup Language (XML) 1.0“ T. Bray, J. Paoli, C.M. Sperberg-McQueen, Hrsg., 10. Februar 1998. Verfgbar unter http://www.edition-w3c.de/TR/REC-xml [YACC] „YACC - Yet another compiler compiler“, S. C. Johnson, Technical Report, Murray Hill, 1975.

< 854 >

Literaturhinweise

Page size: 168,00 x 240,00 mm

Sandini Bib

E.2 Informelle Literaturhinweise [CHARSETS] Registrierte Zeichensatzwerte. Laden Sie sich eine Liste registrierter Zeichensatzwerte herunter unter ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets [DOM] „Document Object Model Specification“, L. Wood, A. Le Hors, 9. Oktober 1997. Verfgbar unter http://www.w3.org/TR/WD-DOM/ [ISO10179] ISO/IEC 10179:1996 „Information technology – Processing languages – Document Style Semantics and Specification Language (DSSSL)“ Verfgbar unter http://occam.sjf.novell.com:8080/dsssl/dsssl96 [GAMMA] „Gamma correction on the Macintosh Platform“, C. A. Poynton. Verfgbar unter ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf [HTML32] „HTML 3.2 Reference Specification“, Dave Raggett, 14. Januar 1997. Verfgbar unter http://www.w3.org/TR/REC-html32.html [INFINIFONT] Siehe http://www.fonts.com/hp/infinifont/moredet.html. [ISO9899] ISO/IEC 9899:1990 Programmiersprachen – C. [MONOTYPE] Siehe http://www.monotype.com/html/oem/uni_scrmod.html [NEGOT] „Transparent Content Negotiation in HTTP“, K. Holtman, A. Mutz, 9. M@rz 1997. http://gewis.win.tue.nl/~koen/conneg/draft-ietf-http-negotiationVerfgbar unter

Informelle Literaturhinweise

< 855 >

Cascading Style Sheets, Level 2

01.html

[OPENTYPE] Siehe http://www.microsoft.com/OpenType/OTSpec/tablist.htm [PANOSE] Weitere Informationen ber die PANOSE-Klassifizierungsmetrik finden Sie unter http://www.fonts.com/hp/panose/greybook und in den folgenden Kapiteln: Latin Text, Latin Script, Latin Decorative und Latin Pictorial. Panose-Nummern fr einige Schriften stehen online zur Verfgung und k=nnen abgefragt werden. [PANOSE2] Siehe http://www.w3.org/Fonts/Panose/pan2.html Panose-2 ist nicht auf lateinische Schriften beschr@nkt. [POSTSCRIPT] „The PostScript Language Reference Manual“, Second Edition, Adobe Systems, Inc., Addison-Wesley Publishing Co., Dezember 1990. [RFC1630] „Universal Resource Identifiers in WWW: A Unifying Syntax for the Expression of Names and Addresses of Objects on the Network as used in the World-Wide Web“, T. BernersLee, Juni 1994. Verfgbar unter ftp://ftp.internic.net/rfc/rfc1630.txt

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

[RFC1766] „Tags for the Identification of Languages“, H. Alvestrand, M@rz 1995. Verfgbar unter ftp://ftp.internic.net/rfc/rfc1766.txt [RFC1866] „HyperText Markup Language 2.0“, T. Berners-Lee und D. Connolly, November 1995. Verfgbar unter ftp://ds.internic.net/rfc/rfc1866.txt [RFC1942] „HTML Tables“, Dave Raggett, Mai 1996. Verfgbar unter ftp://ds.internic.net/rfc/rfc1942.txt [TRUETYPEGX] Detaillierte Informationen ber TrueType GX von Apple Computer finden Sie unter http://fonts.apple.com/TTRefMan/index.html, inklusive Beschreibungen der hinzugefgten Tabellen und Schriftqualit@tspezifikationen. [W3CSTYLE] W3C-Ressource ber Web-Stylesheets. http://www.w3.org/pub/WWW/Style [WAI-PAGEAUTH] „WAI Accesibility Guidelines: Page Authoring“ fr den Entwurf zugreifbarer Dokumente stehen zur Verfgung unter http://www.edition-w3c.de/TR/WD-WAI-PAGEAUTH

< 856 >

Literaturhinweise

Sandini Bib

Eigenschaftsindex < 857 >

Name

Werte

Ausgangswert

'azimuth'

| [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit

center

Ja

'background'

['background-color' || 'background-image' || 'backgroundrepeat' || 'background-attachment' || 'background-position'] | inherit

XX

Nein

'backgroundattachment'

scroll | fixed | inherit

scroll

Nein

visual

'backgroundcolor'

| transparent | inherit

transparent

Nein

visual

'backgroundimage'

| none | inherit

none

Nein

visual

'backgroundposition'

[ [ | ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit

0% 0%

'backgroundrepeat'

repeat | repeat-x | repeat-y | no-repeat | inherit

repeat

Cascading Style Sheets, Level 2

Angewendet auf (Standardwert: all):

Elemente auf Blockebene und ersetzte Elemente

Vererbt:

no

Nein

Prozentwerte (Standardwert: N/A)

Mediengruppen

aural

Erlaubt fr 'background-position'

Beziehen sich auf die Gr=ße der eigentlichen Box

visual

visual

visual

Page size: 168,00 x 240,00 mm

F Eigenschaftsindex

Sandini Bib

Cascading Style Sheets, Level 2

Siehe einzelne Eigenschaften

'border-collapse'

collapse | separate | inherit

collapse

Eigenschaftsindex

'border-color'

{1,4} | transparent | inherit

Siehe einzelne Eigenschaften

'border-spacing'

? | inherit

0

'border-style'

{1,4} | inherit

'border-top' 'border-right' 'border-bottom' 'borderleft' 'border-topcolor' 'borderright-color' 'border-bottom-color' 'border-leftcolor'

Nein

visual

Ja

visual

Nein

visual

Ja

visual

Siehe einzelne Eigenschaften

Nein

visual

[ 'border-top-width' || 'border-style' || ] | inherit

Siehe einzelne Eigenschaften

Nein

visual

| inherit

Der Wert der 'color'-Eigenschaft

Nein

visual

'table'- und 'inlinetable'-Elemente

'table'- und 'inlinetable'-Elemente

Page size: 168,00 x 240,00 mm

[ 'border-width' || 'borderstyle' || ] | inherit

< 858 >

'border'

Sandini Bib

none

Nein

visual

'border-topwidth' 'border-rightwidth' 'border-bottomwidth' 'border-left-width'

| inherit

medium

Nein

visual

'border-width'

{1,4} | inherit

Siehe einzelne Eigenschaften

Nein

visual

'bottom'

| | auto | inherit

auto

Positionierte Elemente

Nein

'caption-side'

top | bottom | left | right | inherit

top

'table-caption'-Elemente

Ja

visual

'clear'

none | left | right | both | inherit

none

Elemente auf Blockebene

Nein

visual

'clip'

| auto | inherit

auto

Elemente auf Blockebene und ersetzte Elemente

Nein

visual

< 859 >

| inherit

Cascading Style Sheets, Level 2

Beziehen sich auf die H=he des enthaltenden Blocks

visual

Page size: 168,00 x 240,00 mm

Eigenschaftsindex

'border-topstyle' 'borderright-style' 'border-bottom-style' 'border-leftstyle'

Sandini Bib

Cascading Style Sheets, Level 2

Vom Benutzerprogramm abh@ngig

Ja

visual

'content'

[ | | | attr(X) | openquote | close-quote | noopen-quote | no-close-quote ]+ | inherit

Leerer String

Nein

all

'counter-increment'

[ ? ]+ | none | inherit

none

Nein

all

'counter-reset'

[ ? ]+ | none | inherit

none

Nein

all

'cue'

[ 'cue-before' || 'cue-after' ] | inherit

XX

Nein

aural

'cue-after'

| none | inherit

none

Nein

aural

'cue-before'

| none | inherit

none

Nein

aural

'cursor'

[ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | swresize | s-resize | w-resize| text | wait | help ] ] | inherit

auto

Ja

visual, interactive

'direction'

ltr | rtl | inherit

ltr

Ja

visual

:before- und :afterPseudo-Elemente

Alle Elemente; siehe Text

Page size: 168,00 x 240,00 mm

Eigenschaftsindex

| inherit

< 860 >

'color'

Sandini Bib

< 861 >

inline | block | list-item | run-in | compact | marker | table | inline-table | tablerow-group | table-headergroup | table-footer-group | table-row | table-columngroup | table-column | tablecell | table-caption | none | inherit

inline

Nein

all

'elevation'

| below | level | above | higher | lower | inherit

level

Ja

aural

'empty-cells'

show | hide | inherit

show

'table-cell'-Elemente

Ja

visual

'float'

left | right | none | inherit

none

Alle, außer positionierte Elemente und erzeugter Inhalt

Nein

visual

'font'

[ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

Siehe einzelne Eigenschaften

Ja

'font-family'

[[ | ],]* [ | ] | inherit

Vom Benutzerprogramm abh@ngig

Ja

Cascading Style Sheets, Level 2

Erlaubt fr 'font-size' und 'line-height'

visual

visual

Page size: 168,00 x 240,00 mm

Eigenschaftsindex

'display'

Sandini Bib

Cascading Style Sheets, Level 2

medium

Ja, der berechnete Wert wird vererbt

Eigenschaftsindex

'font-size-adjust'

| none | inherit

none

Ja

visual

'font-stretch'

normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semicondensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit

normal

Ja

visual

'font-style'

normal | italic | oblique | inherit

normal

Ja

visual

'font-variant'

normal | small-caps | inherit

normal

Ja

visual

'font-weight'

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

normal

Ja

visual

'height'

| | auto | inherit

auto

Alle Elemente, außer nicht ersetzte Inline-Elemente, Tabellenspalten und Spaltengruppen

Nein

Beziehen sich auf die Schriftgr=ße des bergeordneten Elements

Siehe Text

visual

visual

Page size: 168,00 x 240,00 mm

| | | | inherit

< 862 >

'font-size'

Sandini Bib

| | auto | inherit

auto

'letter-spacing'

normal | | inherit

normal

Ja

'line-height'

normal | | | | inherit

normal

Ja

'list-style'

[ 'list-style-type' || 'list-styleposition' || 'list-style-image' ] | inherit

XX

Elemente mit 'display: list-item'

Ja

visual

'list-styleimage'

| none | inherit

none

Elemente mit 'display: list-item'

Ja

visual

'list-style-position'

inside | outside | inherit

outside

Elemente mit 'display: list-item'

Ja

visual

Eigenschaftsindex

'list-style-type'

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakanairoha | none | inherit

disc

Elemente mit 'display: list-item'

Ja

visual

< 863 >

'margin'

{1,4} | inherit

XX

Cascading Style Sheets, Level 2

Positionierte Elemente

Nein

Nein

Beziehen sich auf die Breite des enthaltenden Blocks

visual

visual Beziehen sich auf die Schriftgr=ße des eigentlichen Elements

Beziehen sich auf die Breite des enthaltenden Blocks

visual

visual

Page size: 168,00 x 240,00 mm

'left'

Sandini Bib

Cascading Style Sheets, Level 2

0

Nein

Beziehen sich auf die Breite des enthaltenden Blocks

visual

'marker-offset'

| auto | inherit

auto

Elemente mit 'display: marker'

Nein

visual

'marks'

[ crop || cross ] | none | inherit

none

Seitenkontext

N/A

visual, paged

'max-height'

| | none | inherit

none

Alle Elemente, außer nicht ersetzte Inline-Elemente und Tabellenelemente

Nein

Beziehen sich auf die H=he des enthaltenden Blocks

visual

'max-width'

| | none | inherit

none

Alle Elemente, außer nicht ersetzte Inline-Elemente und Tabellenelemente

no

Beziehen sich auf die Breite des enthaltenden Blocks

visual

'min-height'

| | inherit

0

Alle Elemente, außer nicht ersetzte Inline-Elemente und Tabellenelemente

no

Beziehen sich auf die H=he des enthaltenden Blocks

visual

'min-width'

| | inherit

UA dependent

Alle Elemente, außer nicht ersetzte Inline-Elemente und Tabellenelemente

no

Beziehen sich auf die Breite des enthaltenden Blocks

visual

Page size: 168,00 x 240,00 mm

Eigenschaftsindex

| inherit

< 864 >

'margin-top' 'margin-right' 'margin-bottom' 'marginleft'

Sandini Bib

| inherit

2

'outline'

[ 'outline-color' || 'outlinestyle' || 'outline-width' ] | inherit

'outline-color'

| invert | inherit

'outline-style' 'outline-width'

Eigenschaftsindex < 865 >

Ja

visual, paged

Siehe einzelne Eigenschaften

Nein

visual, interactive

invert

Nein

visual, interactive

| inherit

none

Nein

visual, interactive

| inherit

medium

Neine

visual, interactive

'overflow'

visible | hidden | scroll | auto | inherit

visible

Nein

visual

'padding'

{1,4} | inherit

XX

Nein

Beziehen sich auf die Breite des enthaltenden Blocks

visual

'padding-top' 'padding-right' 'padding-bottom' 'paddingleft'

| inherit

0

Nein

Beziehen sich auf die Breite des enthaltenden Blocks

visual

'page'

| auto

auto

Elemente auf Blockebene

Ja

visual, paged

'page-break-after'

auto | always | avoid | left | right | inherit

auto

Elemente auf Blockebene

Ja

visual, paged

'page-breakbefore'

auto | always | avoid | left | right | inherit

auto

Elemente auf Blockebene

Nein

visual, paged

'page-break-inside'

avoid | auto | inherit

auto

Elemente auf Blockebene

Ja

visual, paged

Cascading Style Sheets, Level 2

Elemente auf Blockebene

Elemente auf Blockebene und ersetzte Elemente

Page size: 168,00 x 240,00 mm

'orphans'

Sandini Bib

Cascading Style Sheets, Level 2

Vom Benutzerprogramm abh@ngig

Nein

Siehe Beschreibungen von 'pause-before' und 'pause-after'

aural

'pause-after'

| | inherit

Vom Benutzerprogramm abh@ngig

Nein

Siehe Text

aural

'pause-before'

| | inherit

Vom Benutzerprogramm abh@ngig

Nein

Siehe Text

aural

'pitch'

| x-low | low | medium | high | x-high | inherit

medium

Ja

aural

'pitch-range'

| inherit

50

Ja

aural

'play-during'

mix? repeat? | auto | none | inherit

auto

Nein

aural

'position'

static | relative | absolute | fixed | inherit

static

Nein

visual

'quotes'

[ ]+ | none | inherit

Vom Benutzerprogramm abh@ngig

Ja

visual

'richness'

| inherit

50

Ja

aural

Alle Elemente, außer auf erzeugten Inhalt

Page size: 168,00 x 240,00 mm

Eigenschaftsindex

[ [ | ]{1,2} ] | inherit

< 866 >

'pause'

Sandini Bib

< 867 >

| | auto | inherit

auto

Positionierte Elemente

Nein

'size'

{1,2} | auto | portrait | landscape | inherit

auto

Der Seitenkontext

N/A

visual, paged

'speak'

normal | none | spell-out | inherit

normal

Ja

aural

'speak-header'

once | always | inherit

once

Ja

aural

'speak-numeral'

digits | continuous | inherit

continuous

Ja

aural

'speakpunctuation'

code | none | inherit

none

Ja

aural

'speech-rate'

| x-slow | slow | medium | fast | x-fast | faster | slower | inherit

medium

Ja

aural

'stress'

| inherit

50

Ja

aural

'table-layout'

auto | fixed | inherit

auto

'table'- und 'inlinetable'-Elemente

Nein

visual

'text-align'

left | right | center | justify | | inherit

Vom Benutzerprogramm und der Schreibrichtung abh@ngig

Elemente auf Blockebene

Ja

visual

Cascading Style Sheets, Level 2

Elemente, die Tabellenkopf-informationen enthalten

Beziehen sich auf die Breite des enthaltenden Blocks

visual Page size: 168,00 x 240,00 mm

Eigenschaftsindex

'right'

Sandini Bib

Cascading Style Sheets, Level 2

none

Nein (siehe Text)

'text-indent'

| | inherit

0

'text-shadow'

none | [ || ? ,]* [ || ?] | inherit

none

Nein (siehe Text)

visual

'text-transform'

capitalize | uppercase | lowercase | none | inherit

none

Ja

visual

'top'

| | auto | inherit

auto

Positionierte Elemente

Nein

'unicode-bidi'

normal | embed | bidi-override | inherit

normal

Alle Elemente; Ausnahme: siehe Text

Nein

'vertical-align'

baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit

baseline

Inline- und 'tablecell'-Elemente

Nein

'visibility'

visible | hidden | collapse | inherit

inherit

Nein

visual

'voice-family'

[[ | ],]* [ | ] | inherit

Vom Benutzerprogramm abh@ngig

Ja

aural

Elemente auf Blockebene

Ja

visual

Beziehen sich auf die Breite des enthaltenden Blocks

Bezieht sich auf die H=he des enthaltenden Blocks

visual

visual

visual

Beziehen sich auf die 'line-height' des eigentlichen Elements

visual

Page size: 168,00 x 240,00 mm

Eigenschaftsindex

none | [ underline || overline || line-through || blink ] | inherit

< 868 >

'text-decoration'

Sandini Bib

| | silent | x-soft | soft | medium | loud | x-loud | inherit

medium

'white-space'

normal | pre | nowrap | inherit

normal

Elemente auf Blockebene

Ja

visual

'widows'

| inherit

2

Elemente auf Blockebene

Ja

visual, paged

'width'

| | auto | inherit

auto

Alle Elemente, außer nicht ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen

Nein

Ja

visual

Positionierte Elemente

Nein

visual

'word-spacing'

normal | | inherit

normal

'z-index'

auto | | inherit

auto

Eigenschaftsindex < 869 > Cascading Style Sheets, Level 2

Ja

Beziehen sich auf den geerbten Wert

Beziehen sich auf die Breite des enthaltenden Blocks

aural

visual

Page size: 168,00 x 240,00 mm

'volume'

Page size: 168,00 x 240,00 mm

Sandini Bib

Cascading Style Sheets, Level 2

G Deskriptor-Index Name

Werte

Ausgangswert

'ascent'

nicht definiert

'baseline'

0

'bbox'

, , ,

nicht definiert

'cap-height'

nicht definiert

'centerline'

nicht definiert

'definition-src'

nicht definiert

'descent'

nicht definiert

'font-family'

[ | ] [, [ | ]]*

vom Benutzerprogramm abh@ngig

'font-size'

all | [, ]*

alle

'font-stretch'

all | [ normal | ultra-condensed | extracondensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ] [, [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultraexpanded] ]*

normal

'font-style'

all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]*

alle

'font-variant'

[normal | small-caps] [,[normal | smallcaps]]*

normal

'font-weight'

all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]*

alle

'mathline'

nicht definiert

'panose-1'

[]{10}

0000000000

'slope'

0

'src'

[ [format( [, ]*)] | ] [, [format( [, ]*)] | ]*

nicht definiert

'stemh'

nicht definiert

'stemv'

nicht definiert

< 870 >

Deskriptor-Index

Page size: 168,00 x 240,00 mm

Sandini Bib

nicht definiert

'unicode-range'

[, ]*

U+0-7FFFFFFF

'units-per-em'

nicht definiert

'widths'

[ ]? [ ]+ [,[ ]? ]+]

nicht definiert

'x-height'

nicht definiert

Cascading Style Sheets, Level 2

'topline'

Deskriptor-Index

< 871 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Page size: 168,00 x 240,00 mm

Sandini Bib

Index ! !important-Regeln 606 #FIXED 58 #IMPLIED 58 #REQUIRED 58 %attrs; 60 %block; 56 %Character; 77 %Charset; 77 %Color; 75 %ContentType; 77 %Datetime; 77 %FrameTarget; 82 %inline; 56 %LanguageCode; 77 %Length; 76 %MediaDesc; 80 %MultiLength; 76 %Pixels; 76 %Script; 81 %Text; 74 %URI; 74 577 575

577 569 570 569 573 577 574 6berlauf 677 6berschriften positionieren und ausrichten 791 verschachtelt 103 6berstreichen 774 'width' 665 :active 594 :first 713 :first-child 591 :first-line 595 :focus 594, 817 :hover 594 :left 713 :right 713 @ 564 @font-face 746 @import 610 @import-Regel 604 @media 610 @media-Regel 604, 611 @page-Regel 709, 711, 713

A Abk>rzungen und Akronyme 117 Absatz, visuelle Darstellung 127 Abschneiden, Tabellentext 145 Abschnittsnummern, nummeriert 103 Absenden 260 Abstand, um Frame 248 Abstraktes Modul 393, 402 Abw@rtskompatibilit@t 553 Adressierungsmodell 553 after 684 Akustische Stylesheets 817 Alternativer Text, spezifizieren 216 Alternatives Stylesheet 225 andere 372 Anf>hrungszeichen, content 691 Anker 178 ASCII-Zeichen im Namen 186 Definition mit A 184 durch ein Skript setzen 184

Page size: 168,00 x 240,00 mm

Sandini Bib

Eindeutigkeit des Namens 186 Erstellung mit dem id-Attribut 187 Groß-/Kleinschreibung des Namens 186 mit A oder id 188 Namensraum 187 Nicht-ASCII-Zeichen in name 323 Syntax der Namen 186 Zeichenreferenzen im Namen 188 Anweisungen 564 Applet, Einbinden 194 application/x-www-form-urlencoded 262, 288 ascent, Deskriptor 756 At-Regeln 564 Attribut 53, 369, 556 #FIXED 58 #IMPLIED 58 #REQUIRED 58 Anf>hrungszeichen 53 Boolesches 60 Deklaration in DTD 58 Groß- und Kleinschreibung 53 Groß- und Kleinschreibung von Werten 58 minimiertes boolesches 60 Attribut-Selektoren 581, 585, 587 Attributminimierung 375 Attributwerte, DTD 587 AuflIsung einer relativen URI 193 Aufw@rtskompatibilit@t 553 aural 611–612 Ausgangsblock, umschließender 628 Ausgangswert 542 Ausrichtung 759, 773 fließen 233 fließender Text 234 horizontale 801 von Bildern 215

< 874 >

Index

von Block-Level-Elementen 231 von Objekten 215 von Tabelleninhalt 161 Auszeichnen 49 Auszeichnungssprache 49 Autor 61, 557 Autorenwerkzeug 61, 116 und Standard-StylesheetSprache 221 azimuth 825

B background 725 background-attachment 723 background-color 721 background-image 721 background-position 724 background-repeat 722 Backslash 563 baseline, Deskriptor 759 Basis-URI 192 bbox, Deskriptor 758 before 684 Beispiel-Stylesheet 832 Benutzer 61, 557 Benutzeroberfl@che 812, 814, 816 Benutzerprogramm 62, 369, 538, 549, 557 Behandlung von Imagemaps 210 Fehlersituationen 321 konformes 62 Konformit@t in XHTML 1.1 519 Script- und Style-Daten behandeln 73 Skript-Daten 300 Style-Daten 229 XHTML-Familie, Konformit@t 399 Beschriftung explizite Verkn>pfung mit Steuerelement 278

implizite Verkn>pfung mit Steuerelement 278 Beschriftungen, und Fokus 279 Best@ndiges Stylesheets 226 Bevorzugtes Stylesheet 225 Bidirektionalit@t 658–659 ausschalten 112 und Stylesheets 115 und Zeichenkodierung 113 Unicode-Algorithmus 109 Bild Ausrichtung 215 Breite und HIhe 214 Einbinden 194 lange Beschreibung 197 Leerraum um 215 nicht direkt in Frame 255 Rahmen um 215 visuelles Rendern 214 Bitmap 612 Blinken 774 Block, umschließender 628, 663 Block-Boxen, anonyme 629 Block-Level-Elemente, Bidirektionalit@t 110 Blockebene 550, 629 Blockelement 100 Blockelemente, Bidirektionalit@t 100 BODY, keiner in Frameset 98 Bogenmaß 577 Boolesches Attribut 60 minimiertes 60, 326 border 627 border-bottom 626 border-bottom-color 622 border-bottom-style 625 border-bottom-width 621 border-collapse 802 border-color 623 border-left 626 border-left-color 622 border-left-style 625 border-left-width 621

Page size: 168,00 x 240,00 mm

Sandini Bib

border-right 626 border-right-color 622 border-right-style 625 border-right-width 621 border-spacing 802 border-style 625 border-top 626 border-top-color 622 border-top-style 625 border-top-width 621 bottom 638 Box HIhe 671 Inhaltsbreite und -hIhe 614 InhaltshIhe 670 Maße 613 Polsterungseigenschaften 619 R@nder 671 Rahmeneigenschaften 621 Rahmenfarbe 622 Rahmenstileigenschaften 624 Randeigenschaften 617 Stapelebene 657 Box-Abst@nde 637 Box-Breite 614 Box-HIhe 614 Box-Modell 613–614, 616, 618, 620, 622, 624, 626 braille 611 Breite, maximal und minimal 668 Browser 549 Buchstabenabst@nde 777

C Canvas 552 cap-height, Deskriptor 756 caption 787 caption-side 791 cascading 228 cascading style sheets 228 CDATA 59, 73 Script- und Style-Daten 73

centerline, Deskriptor 759 CERN 44 Checkbox 260 class-Attribut, Rolle 99 clear 646 client-seitige Image Map 208 Anlegen 211 clip 680 cm 573 Code-Position 64 Codierungsvektor 763 col 787 colgroup 787 color 720 compact 688 containing block 663 content, Anf>hrungszeichen 691 Content-Language-Header 116 Content-Script-Type-Header 293 Content-Style-Type-Header 220 continuous 612 counter() 686 counter-increment 693 counter-reset 693 counters() 686 CSS-Dokumentdarstellung 578–579 CSS2-Verarbeitungsmodell 551 cue 823 cue-after 822 cue-before 822 Cursor 812

D Darf 368 dashed 624 Dateiauswahl 261 Dateiauswahl-Steuerelement, 6bertragung 286 Datentyp CDATA 73

ID 73 IDREF 73 IDREFS 73 NAME 73 NUMBER 73 Datenzelle, in Tabelle 156 Datum Format 77 von eingef>gtem und gelIschtem Text 128 Deaktivierte Steuerelemente 284 nicht erfolgreich 286 Definition, Konformit@t 397 definition-src, Deskriptor 758 deg 577 Deklaration 549, 566 Deklarationsblock 566 descent, Deskriptor 757 direction 659 display 634 document type declaration 84 document type definition Beispiele konform zu 63 Kommentare in 55 lesen 55 Documenttyp-Definition, Transitional 305 Dokument 370 dynamische Modifikation durch Skripte 298 einbinden 194, 208 SGML-Validierung 302 Wege einzubinden 256 XHTML-Familie, Konformit@t 399 Dokumentbaum 556 Dokumentdarstellung 578–579 Dokumentkonformit@t, XHTML 1.1 518 Dokumenttyp, hybrider 393 Dokumenttyp-Definition 50 DTD-Fragmente konform zu 63

Index

< 875 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Frameset 305 Strict 305 Dokumenttyp-Deklaration Frameset-DTD 84 Strict-DTD 84 Transitional-DTD 84 Dokumentzeichensatz 64 Squivalenz von ISO10646 und UNICODE 65 ISO10646 65, 302 dotted 624 double 624 DTD, Standardattributwerte 587 Dublin Core 96 Durchstreichen 774

E Effekte, visuelle 677 Eigenschaft 566 unbekannte 568 zusammenfassende 542 Einbinden von 199 Eingebettete Ereignisse 294 Einr>ckung 772 Einrahmungen 815 Element 370, 556 Blockelement 100 eindeutiger Identifikator 98 End-Tag 51 ersetztes 556 gleichrangiges 557 Groß- und Kleinschreibung 52 Inhalt 556 Inhaltsmodell 56 inzeilig 100 leer 51, 56 MaximalhIhe 673 MindesthIhe 673 nachfolgendes 557 Referenzen von Skripts 294 Start-Tag 51

< 876 >

Index

Typdeklaration 51, 56 Typen 51 untergeordnetes 556 Unterst>tzung f>r missbilligte 62 Unterst>tzung f>r obsolete 62 vorhergehendes 557 weglassen End-Tag 51 weglassen Start-Tag 51 elevation 826 em 570 em-Quadrat 762 embossed 611 empty-cells 804 End-Tag 51 optional 56 weglassen 51 End-Tags 375 Entity-S@tze, URIs f>r HTML 4.01 84 Entwurfskonzepte 553 Ereignisse 294 erfolgreiches Steuerelement 286 Escape 563 ex 570

F family-name 732 Farbe 719 Hintergrund 231 Farben 575 Fehler Behandlung durch Benutzerprogramme 321 Imagemap mit IMG in BUTTON 270 nicht verf>gbare Ressource 188 STYLE im Dokumenttext darstellen 222 Fehlerbedingungen 560 float 645 Floats 635, 642–643, 645

Fluss, normaler 635, 639 Fokus 281, 283, 817 Beschriftung gibt an Steuerelement 279 und Zugriffstaste 283 font 741 Font family 730 Font set 731 Font size 730 Font stretch 730 Font style 730 Font variant 730 Font weight 730 font-family, Deskriptor 749 font-size, Deskriptor 751 font-size-adjust 738 font-stretch, Deskriptor 750 font-style, Deskriptor 749 font-variant, Deskriptor 749 font-weight, Deskriptor 750 Formatierungsmodell 628 Formatierungsstruktur 552 Formular >bertragene Werte 286 6bertragung 285, 287, 289 6bertragungsmethode 285 Beschriftungen 277 Beschriftungen hinzuf>gen 277 Gruppieren von Steuerelementen in 280 Inhaltstyp f>r Kodierung 287 inkrementelle Darstellung 336 Kodieren der Daten 287 Methoden 287 Steuerelement 258 Steuerelementtypen 260 Tabulator-Reihenfolge 282 Tabulatornavigation 282 verarbeiten 287 Zur>cksetzen 259 Formulardatensatz 287 Kodieren 287 Fragmentbezeichner 43, 179

Page size: 168,00 x 240,00 mm

Sandini Bib

Frame Abstand um 248 Ausgangsinhalt 249 Einf>hrung 241 eingebettet 256 lange Beschreibung 255 Liste reservierte Namen von Ziel-Frames 82 Rahmen 248 URI-Probleme 253 Ziel 251, 253 Zielalgorithmus 338 Frameset alternativer 255 alternativer Inhalt 254 Daten teilen 246 Festlegen des Layouts 243 Navigationsprobleme 253 verschachtelt 246 Verwendung von NOFRAMES 254 Frameset-Dokument 243 Frameset-DTD Definition 305 Deklaration 84 Frequenzwerte 577 Funktionsmerkmale 370

G G>ltigkeitsbereich 694 Gammakorrektur 726 generic-family 732 GET, und Formular>bertragung 285 Glyphen 727 Glyphenbreite 763 Grad 577 Gradienten 577 Grammatik 848 grid 612 Groß- und Kleinschreibung von Attributen values 58 von Attributnamen 53 von Elementnamen 52

Groß-/Kleinschreibung 375, 563 Attributwerte 72 des Ankernamens 186 Farbnamen 75 in numerischen Zeichenreferenzen 70 Inhaltstypen 77 Linktyp 78 Maßwerte 76 Medien-Deskriptoren 81 Script-Daten 81, 409 Sprachcodes 77 Style-Daten 82 URIs 75 von Zeichen-EntityReferenzen 71 Zeichenkodierungen 77 Großschreibung 779 groove 624 Grundlinie mathematische 765 obere 766 untere 764 zentrale 763

H handheld 611 Hauptblock-Box 629 height 670 hidden 624 Hintergrund 719–720 Hintergrundbild 724 Hintergrundeigenschaften 721 Hintergrundfarbe 231 HTML 546 allgemeine Regeln 48 als SGML-Anwendung 63 Entwicklung von 44 Kommentare 54 Nicht-HTML-Daten 324 Version 2.0 44 Version 3.0 44 Version 3.2 45 Version HTML+ 44

HTML Working Group, Mitglieder 41 HTML-Dokument 61 HTTP Content-Language-Header 116 Content-Script-TypeHeader 293 Content-Style-TypeHeader 220 Content-Type-Header 69 Default-Style-Header 227 GET und POST mit Formularen 285 verwendet, um auf Stylesheets zu verweisen 230 Hybrider Dokumenttyp 393 Hyperlink-Quellanker 593 Hz 577

I ID 73 id-Attribut 377 gleicher Namensraum wie das name-Attribut 187 Rolle 98 id-Attribute 373 ID-Selektoren 581, 589 IDREF 73 Ignorieren 568 Image 209, 211, 213 Image Map 208 6berschneiden von Regionen 211 client-seitig 208 mit OBJECT 210 nicht gestattet f>r IMG in BUTTON 270 server-seitig 208 server-seitige 214 Zug@nglichkeit von 211 Imagemap 214 Implementierung 370 in 573

Index

< 877 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Inhalt 556 erzeugter 684 Position 684 Inhaltsbreite 665 InhaltshIhe 670 Inhaltsmodell 56 ausgeschlossene Elemente 58 Syntax in DTD 57 Inhaltstyp application/x-www-formurlencoded 288 f>r Kodierung von Formulardaten 287 multipart/form-data 288 text/html 63 inherit 603 Inline-Box, anonyme 631 Inline-Formatierungskontext 639 inline-table 787 inset 624 Integer 569 interactive 613 Internet Engineering Task Force (IETF) 44 inzeiliges Element 100 ISO 8879 37

K Kann 368 Kaskade, Seitenkontext 719 Kaskaden-Reihenfolge 605 Katalog f>r HTML 303 kHz 577 Klassen-Selektoren 581, 588 Kombinatorzeichen 582 Kommentare 568 in DTD 55 in HTML 54 informelle 63 nicht darstellen 63 verwendet zum Verbergen von Skript-Daten 300

< 878 >

Index

verwendet zum Verbergen von Stylesheet-Daten 229 Zeichenreferenzen 70 Konforme Benutzerprogramme 373 Konforme Dokumente 370 Konformit@t 62, 558 Benutzerprogramm der XHTML-Familie 399 Definition 397 Dokument der XHTML-Familie 399 Modul der XHTML-Familie 398 XHTML Host Language 397 XHTML Integration Set 398 zu XHTML 1.1 518 Koordinaten von Formular>bertragung Klick 265 von server-seitigen Imagemaps 214 Kopfzelle Abk>rzung 166 in Tabelle 156 Scope 166 Kreuzmarkierungen 712

L L@ngen 570 L@ngeneinheiten absolute 573 relative 570 lang-Attribut nicht f>r Richtung 109 wenn relevant 105 Lange Bildbeschreibung, Relation zu alt-Text 197 Lautst@rke 818–819 Leeraum 115 Leere Elemente 376 Leeres Element 56 Leerraum 780

reduzieren 116 um Bilder und Objekte 215 um Tabelleninhalt 164 vorformatiert in PRE 126 Zeichen 115 Leerraumzeichen 374 Leerzeichen 772 left 638 letter-spacing 777 line-height 675 Linie zwischen Block-Level-Elementen 240 zwischen Tabellenzellen 159 Link benutzen, um eine Ressource zu erreichen 178 Definition 178 Element 547 externe Stylesheets 190, 226 medienabh@ngige Stylesheets 229 Semantik Ziel-Frame 253 Standardziel 253 Titel 182 Typ 78, 548 ung>ltige Verschachtelung 186 vorw@rts und r>ckw@rts 190 Zeichenkodierung 182 zur Definition von Beziehungen benutzen 179 Link-Pseudoklassen 581, 592 Linktyp Groß-/Kleinschreibung 78 Liste bekannter 78 Profile f>r neue 80 list-style 707 list-style-image 705 list-style-position 705 list-style-type 703

Page size: 168,00 x 240,00 mm

Sandini Bib

Liste 684, 697 Definitionsliste 134–135, 137 geordnet 132 nummerieren 134 Stylesheets 136 ungeordnet 132 verschachteln 133 visuelle Darstellung 136 Listeneigenschaften 702

M margin-bottom 617 margin-left 617 margin-right 617 margin-top 617 Marker 697 marker-offset 701 Markierungen 697–698 marks 712 mathline, Deskriptor 759 max-height 673 max-width 669 MaximalhIhe 673 Medien-Deskriptor Groß-/Kleinschreibung 81 List bekannter 80 parsen 81 Medienabh@ngigkeit, von Stylesheets 610 Mediengruppen 612 Medientyp 610, 378, 611 Medium externe Stylesheets 229 verwendet mit Stylesheets 224 Men> 261 Darstellen von AuswahlmIglichkeiten 273 Gruppieren von AuswahlmIglichkeiten 271 visuelle Darstellung von Gruppierungen 274 Vorauswahlen 271

Meta-Daten 90 Metadaten LINK vs META 92 Profil 95 scheme f>r 95 MIME-Typ 378 min-height 673 min-width 668 MindesthIhe 673 Missbilligt 62 mm 573 Modul der XHTML-Familie, Konformit@t 398 Modularisierung von XHTML 390 Modulbasiertes XHTML 516 Modulimplementierungen 393 ms 577 multipart/form-data 262, 288 Muss 368 Mustervergleich 580

N Nachkomme 557 Nachrichteneinheit 63 NAME 73 name-Attribut 377 Namensraum 372 Namensraum f>r XTHML 371 Namensregeln, XHTML Host Language 401 Nicht spezifiziert 368 NUMBER 73 Numerische Zeichenreferenz 70 Nummerierung 684, 693

O Objekt Ausrichtung 215 Breite und HIhe 214 Deklaration 204 im Formular 261

im Kopf 199–200 in HEAD 246 Initialisierung 201 Leerraum 215 Mechanismus zur Darstellung 199 Namensschemata 203 Ort Implementation und Daten 199 Rahmen 215 Rangfolge des Renderns von 200 Regeln f>r Einbindung 200 visuelles Rendern 214 Objekt-Steuerelement 261, 286 Obsolet 62 Optional 368 Orphans 717 outline 815 outline-color 816 outline-width 815 outset 624 overflow 678

P padding 620 padding-bottom 619 padding-left 619 padding-right 619 padding-top 619 page 716 page-break-after 715 page-break-before 714 paged 612 panose-1, Deskriptor 755 Parameter-Entity %attrs; 60 %block; 56 %Character; 77 %Charset; 77 %Color; 75 %ContentType; 77 %Datetime; 77 %FrameTarget; 82 %inline; 56

Index

< 879 >

Page size: 168,00 x 240,00 mm

Sandini Bib

%LanguageCode; 77 %Length; 76 %MediaDesc; 80 %MultiLength; 76 %Pixels; 76 %Script; 81 %Text; 74 %URI; 74 Parameter-Entity-Definition 55 Parsing 370 Passworteingabe-Steuerelement 265 pause 822 pause-after 821 pause-before 821 Pausen-Eigenschaften 821 pc 573 pitch 829 pitch-range 829 Pixel 76 Platform for Internet Content Selection (PICS) 94 play-during 824 Polsterung 613 Polsterungseigenschaften 619 Position 636 Positionierung absolute 635, 647 relative 641 Positionierungsschema, Auswahl 636 POST f>r Nicht-ASCII-Formulardaten 286 Formular>bertragung 285 print 612 Profile 95 projection 612 Prozentwerte 573 Pseudo-Element 590, 595, 597, 599–600 Pseudo-Klassen 590–591, 593 Dynamic 581 dynamische 594

< 880 >

Index

Links 592 Sprache 595 pt 573 px 570

right 637 root-Element 556 run-in 688 Run-in-Box 633

Q

S

Quelldokument 556 quotes 689

s 577 Schaltfl@che 260 Schatteneffekte 776 scheme 95 Schl>sselwIrter 562 Schnittmarkierungen 712 Schreibgesch>tzte Steuerelemente 285 Schrift-Download 746 Schriftart mit 237, 239 mit HTML 236 Schriftauswahl 745, 747, 749, 751, 753, 755, 757, 759 Schriftbeschreibungen 746 Schriftcharakteristika 761, 763, 765 Schriftcodierung 763 Schriftcodierungstabelle 763 Schriftdaten 746 Schriftdatenbank 728 Schriftdatenqualifizierung 751 Schriftdehnung 730 Schriften 727 Schriftfamilie, generische 743 Schriftfamilienname 763 Schriftgewichtung 730 SchriftgrIße 730, 736 Schriftmenge 731 Schriftmodell 728 Schriftname, vollst@ndiger 761 Schriftnamensvergleich 745 Schriftspezifikation, Eigenschaften 730 Schriftstil 730, 733 Schriftsynthese 746 Schriftvariante 730

R R@nder 666–667 rad 577 Radio-Button 260 Rahmen 613, 802–803, 805, 807 um Bild 215 um eine Tabelle 159 um einen Frame 248 um Objekt 215 Rahmenbreite 621 Rahmeneigenschaften, zusammenfassende 626 Rahmenfarbe 622 Rahmenstile 808 Rahmenstileigenschaften 624 Rand 613 Randeigenschaften 617 Referenz, normative 37 Regel 566 Regelmenge 566 Registrierungsmarkierungen 712 Relativer URI 43 AuflIsung 43 Relatives Maß 76 Rendering 370 Reserviert 368 Resource Description Framework (RDF) 48, 90 richness 831 Richtung 143 Vererbung f>r eingeschlossene Elemente 110 von Text 108 ridge 624

Page size: 168,00 x 240,00 mm

Sandini Bib

Schriftvergleich Algorithmus 767, 769, 771 intelligenter 746 Scope, von Tabellenkopfzelle 166 screen 612 Script, Daten 81 Seite benannte 716 linke, rechte, doppelseitig 713 Randbereich 709 Seiten-Box 709 Seitenbereich 709 SeitengrIße 711 Seitenkontext, Kaskade 719 Seitenmedien 708 Seitenr@nder 710 Seitenumbruch 714–715, 717 bester 718 erlaubter 717 erzwungener 718 Selektor 566, 580 abgeleitete 580 abgeleiteter 583 Attribut 581 benachbart gleichrangig 584 benachbarte 581 einfacher 582 Gruppierung 582 ID 581 Klassen 581 Spezifizit@t 609 universeller 580, 582 untergeordnete 580 untergeordneter 584 Selektorsyntax 582 server-seitige Imagemap 208, 214 Klick-Koordinaten 214 SGML Anmerkungen 325 Anmerkungen zur Implementierung 324 Anwendung 50

Deklaration 50, 304 Deklaration von HTML 4 303 Dokumenttyp-Definition (DTD) 50 Dokumentvalidierung 302 Dokumentzeichensatz 64 Eigenschaften mit begrenzter Unterst>tzung 325 Einf>hrung 49 Elementtyp-Deklaration 51 Katalog 303 Katalog f>r HTML 303 Zeilenumbruch 324 SGML-Anwendung 37 Sicherheit Anmerkungen 339–339 von PassworteingabeSteuerelement 265 Sichtbarkeit 682–683 Silbentrennung 124 size 711 Skript ausgef>hrt bei Eintreten eines Ereignisses 291 ausgef>hrt w@hrend des Ladens 291 Einf>hrung 290 Implementierung 337 Kommentare zum Verbergen 300 Referenzen auf HTML-Elemente 294 reservierte Syntax 337 verwendet zur Modifikation des Dokuments 298 Verwendung 290 wenn nicht unterst>tzt 299 zum Setzen eines Ankers benutzen 184 Skriptsprache lokale Deklaration 293 Spezifikation 292 Standard 293

slope, Deskriptor 756 solid 624 Soll 368 Sollte 369 Spalte 781 Anzahl in einer Tabelle 150 Breite in einer Tabelle 151 Spaltengruppe 147 Spaltenselektoren 789 speak-header 809 speak-numeral 832 speak-punctuation 831 speech-rate 827 Spezifizit@t 609 Sprach-Pseudo-Klasse 595 Sprachcharakteristik 827 Sprache Code 105 einer verlinkten Ressource 182 Pseudo-Klasse 595 von Skripten 292 von Text 104 Spracheigenschaften 820, 831 src, Deskriptor 753 Standard Skriptsprache 293 Stylesheet-Sprache 220 Zeichenkodierung 69 Ziel-Frame 253 Standardattributwerte, DTD 587 Stapelebene 657 Start-Tag 51 weglassen 51 static 613 stemh, Deskriptor 755 stemv, Deskriptor 755 Steuerelement deaktiviert 284 Ereignisse 296 erfolgreich 286 schreibgesch>tzt 285 Typen 260

Index

< 881 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Steuerung 258 aktueller Wert 259 Anfangswert 259 Elementname 258 Tabulatornavigation 282 Zugriffstaste 283 Stilregeln 580 Streng konforme Dokumente 371 stress 830 Strichbreite horizontale 763 vertikale 766 Strichwinkel, vertikaler 766 Strict-DTD Definition 305 Deklaration 84 Strings 578 Style, Element 547 Stylesheet 547, 555 akustisches 817 alternativ 225 Angabe einer externen 226 Beispiel HTML 4.0 832 best@ndig 226 bevorzugtes 225 Daten 82 Einf>hrung 217 einzeilig 221 extern >ber Verweise 190 externes 225, 227 g>ltiges 555 kaskadierend 228 Kommentare zum Verbergen 229 medienabh@ngiges 610 Position 548 Regeln in HEAD 222 Specifikation von bevorzugtem 227 Typ 548 und Bidirektionalit@t 115 verwendet mit DIV und SPAN 223 Zielmedium 224 Stylesheet-Regeln 547

< 882 >

Index

Stylesheet-Sprache, Standard 220 Such-Robot, helfen 329 Suchmaschine helfen 93, 327 Links 191 Syntax 560–561, 563, 565, 567

T Tabelle 6berschrift 144 Algorithmen zur Auffindung von Kopfinformationen 172 Anzahl der Spalten 142, 150 Ausrichtung des Inhalts 161 Breite von Spalten 151 Datenzellen 156 inkrementelle Darstellung 143, 331 Kategorisieren von Zellen 168 Kopfzellen 156 Layout-Algorithmen 333 mehrere Zeilen/Spalten 157 nicht visuelle Darstellung 165 Rahmen und Linien 159 Richtung 143 Spaltengruppe in 147 visuelle Formatierung 159 Zeilengruppe 145 Zelldaten sprechen 172 Zellr@nder 164 Zusammenfassung des Inhalts 144 Tabellen 781, 783, 785 akustische 809 nicht f>r Formatierungen 47 Tabellenbreite 796 Tabellenebenen 794

Tabellenelemente 782 TabellenhIhe 798 Tabelleninhalt visuelles 793, 795, 797, 799, 801 visuelles Layout 793 Tabellenlayout automatisches 797 festes 797 Tabellenmodell 787 Tabellenobjekte, anonyme 788 table 787 table-caption 787 table-cell 787 table-column 787 table-column-group 787 table-footer-group 787 table-header-group 787 table-layout 796 table-row 787 table-row-group 787 Tabulator-Reihenfolge 282 Tabulatornavigation 282 tactile 612 target Frame, Standard 253 tbody 787 td 787 Text 772, 774, 776, 778, 780 Auszeichnungen f>r eingef>gten und gelIschten 128 fließen 234 Richtung 108 umbrechen 127 Umbruch im Absatz 127 vorformatiert 126 zitierter 119 text-align 773 text-decoration 774 text-indent 772 text-shadow 775 text-transform 779 text/html 63 Texteingabe 261

Page size: 168,00 x 240,00 mm

Sandini Bib

Texteingabe-Steuerelement einzeilig 265 mehrzeilig 276 Textrichtung 658 Textschatten 775 tfoot 787 th 787 thead 787 Titel eines Dokuments 88 verf>gbar f>r den Benutzer 88 verwendet, um Elemente mit Kommentaren zu versehen 89 Token 561 top 637 topline, Deskriptor 759 tr 787 Transitioal-DTD, Definition 305 Transitional-DTD, Deklaration 84 Transparenz 794 tty 612 tv 612 Typselektor 580, 583

U Umbruch, innerhalb von Elementen 717 Umflossene Objekte 233 Unicode-Bidirektional-Algorithmus 109 unicode-range, Deskriptor 751 units-per-em, Deskriptor 753 Universal Character Set 65 Universal Resource Identifier (siehe URI) 42 Unterst>tzt 369 Unterstreichen 774 URI 574 AuflIsung relativer 43, 193

Basis angeben 192 Groß-/Kleinschreibung 75 Nicht-ASCII-Zeichen in Attributwerten 323 relativer 43 Verwendung von in HTML 44 URL, Relation zu URI 43 URN 574 User Agent 538, 557 UTF-1 68 UTF-16 68

V Validierung 370 Vererbung 602–603 VergrIßerung 817 Verstecktes Steuerelement 261, 286 vertical-align 676 Verweis, Wiedergabe 184 Viewport 628 visibility 682 visual 612 voice-family 828 Vordergrundfarbe 720 Vorfahre 557

W Waisen 717 WebFonts 728 Weiches Trennzeichen 124 Werte 569, 571, 573, 575, 577 berechnete 601 spezifizierte 601 tats@chliche 602 white-space 780 widows 717 widths, Deskriptor 757 Winkel 577 Witwen 717 Wohlgeformtheit 370, 374 word-spacing 778 World Wide Web (Web) 41

Wortabst@nde 777 Wortzwischenraum 116

X x-height, Deskriptor 756 XHTML, Modularisierung 390 XHTML 1.1 516 Konformit@t zu 518 XHTML Host Language Konformit@t 397 Namensregeln 401 XHTML Integration Set, Konformit@t 398 XHTML und MathML 372 XHTML-Module, abstrakte 410 XML 549

Z Z@hler 575, 686 automatisch 693 verschachtelte 694 Z@hlerstil 696 z-index 657 Zahlen, reelle 569 Zeichen 563, 772 abstrakte 64 Behandlung von nicht darstellbaren 72 bester Weg darzustellen 105 nicht darstellbare 72 Zugriffstaste 283 Zeichen-Entity-Referenz 71 Zeichenfl@che 552 Zeichenkodierung 63, 65 f>r Formular>bertragung 262 h@ufig verwendete 66 Namen 77 Reihenfolge der Ermittlung im Benutzerprogramm 69 Spezifikation 68

Index

< 883 >

Page size: 168,00 x 240,00 mm

Sandini Bib

Standard 69 UTF-1 68 UTF-16 68 von Links 182 w@hlen 65 Zeichenkodierung und Bidirektionalit@t 113 Zeichenreferenz 70 f>r Richtung 114 Zeichenreferenzen 54 Zeichenvorrat 64 Zeilen, Anzahl in Tabellen 142 Zeilen-Box 639 Zeilengruppe 145 ZeilenhIhe 674 Zeilenumbruch 123 bidirektionaler Text 124 erzwingen 123

< 884 >

Index

erzwungener 687 Textfluss 234 verhindern 124 Zeit, Format 77 Zeitwerte 577 Zellen 781 Ziel-Frame Algorithmus 338 angeben 251, 253 reservierte Namen 82 Semantik 253 Ziel-Medientypen 611 Zielmedium 610 Zitat 119 Zitierter Text 119 Darstellung 119 Zug@nglichkeit alternativer Fame-Inhalt 254

alternativer Objektinhalt 200 alternativer Text 216 Features in HTML 4 46 lange Bildbeschreibung 197 lange Frame-Beschreibung 255 Stylesheets 218 von Imagemaps 208, 211 Zugriffstaste 283 Zugriffstaste 283 Zur>cksetzen 260 eines Formulars 259 Zusammenfassung, Tabelleninhalt 144

Sandini Bib

Copyright Daten, Texte, Design und Grafiken dieses eBooks, sowie die eventuell angebotenen eBook-Zusatzdaten sind urheberrechtlich geschützt. Dieses eBook stellen wir lediglich als Einzelplatz-Lizenz zur Verfügung! Jede andere Verwendung dieses eBooks und zugehöriger Materialien und Informationen, einschliesslich der Reproduktion, der Weitergabe, des Weitervertriebs, der Plazierung auf anderen Websites, der Veränderung und der Veröffentlichung bedarf der schriftlichen Genehmigung des Verlags. Bei Fragen zu diesem Thema wenden Sie sich bitte an: mailto:[email protected]

Zusatzdaten Möglicherweise liegt dem gedruckten Buch eine CD-ROM mit Zusatzdaten bei. Die Zurverfügungstellung dieser Daten auf der Website ist eine freiwillige Leistung des Verlags. Der Rechtsweg ist ausgeschlossen.

Hinweis Dieses und andere eBooks können Sie rund um die Uhr und legal auf unserer Website

(http://www.informit.de) herunterladen