Kai Laborenz. CSS-Praxis. Browserübergreifende Lösungen. Galileo Press

Transkript

1 Kai Laborenz CSS-Praxis Browserübergreifende Lösungen Galileo Press

2 Vorwort Von HTMLzu CSS Was sind CSS? Kurze Geschichte der CSS Wie sehen CSS aus? »Hallo Welt!«auf CSS Vorteile und Grenzen des CSS-Einsatzes Selektoren Einfache Elementselektoren Kombinierte Selektoren Class-und ID-Selektoren Kind-Selektoren (CSS2) Folgeelement-Selektoren (CSS2) Attribut-Selektoren (CSS2) CSS3-Selektoren und -Elemente Tabellen-Selektoren Pseudo-Klassen und Pseudo-Elemente Universal-Selektor Vererbung Rangfolge und Kaskadierung Die Important-Anweisung Einbinden von Stylesheets in HTML-Dateien Stil-Anweisungen im HTML-Tag Stil-Anweisungen im Dokumentenkopf Verlinkte Stylesheets Importierte Stylesheets Medienspezifische Stylesheets (CSS2) Das Kastenmodell (Box Model) Benennungen und Werte für Stylesheets Namen für Stylesheets, Klassen und IDs Längen- und Größenangaben Prozentwerte (%) 76 5

3 2.6.4 Farben URLs(url) Schlüsselwörter CSS-Kommentare CSS CSS XHTML, XML und CSS Von HTML zu (X)HTML XML und CSS Der Box Acid Test Acid2-Test Mosaic, Netscape Navigator 3.x und früher, Internet Explorer 2.x und früher Netscape Navigator Problemkind Netscape Netscape Navigator 7 (Mozilla 1.0) Netscape Navigator 8.1 (Firefox 1.04) Mozilla und Firefox Mozilla Firefox Microsoft Internet Explorer Internet Explorer 3 und Internet Explorer 5.x Internet Explorer Internet Explorer 7 (beta) Bugs des Internet Explorers Opera Opera 7 und Opera Opera 9 (beta2) Konqueror Safari Lynx Weitere Browser Screenreader PDAs und Mobiltelefone 112 6

4 4.8 Browseranteile Doctypes und Doctype-Switching Doctype Switching Browser-Weichen und-hacks fjpimport-weiche Sternchen-Hack Box Model Hack Vereinfachter Box Model Hack und erweiterter vereinfachter Box Model Hack Hochpass-Filter media-attribut Kommentar-Trick Selektoren-Tricks OperaCatcher le/mac-hacks Important-Hack Conditional Comments Browser-Sniffer Hacks selber entwickeln Strategien für den CSS-Designer Mit Webstandards arbeiten Entwurfsverfahren für CSS-Sites Fehlersuche in CSS-Dateien Stylesheets organisieren Suchmaschinenoptimierung mit CSS Zugängliche Websites mit CSS (Barrierefreiheit) Grundsätze für zugängliche Websites Barrierefreie Sprunglinks Linkauszeichnungen - Nützlich und barrierefrei Testen Schriftgrößen Schlüsselwörter Relative Angaben Punkte Pixel Gemischte Angaben Fontsizer (einfach-fuer-alle.de) 168 7

5 5.5 Website-Layouts mit CSS Positionierungsvarianten Das float-aaodell Grundformen von CSS-Layouts YAML-ein Framework für CSS-Layouts Zentrierter Feststehende Bereiche CSS-Frames CSS-Menüs mit Listen Bildergalerie Schönere Formulare Tabellen und CSS Druckversion per CSS Stylesheet-Wechsler Simpler Styleswitcher mit HTML-Mitteln Styleswitcher mit JavaScript Styleswitcher mit PHP JavaScript mit Sicherheitsnetz Browserweiche für Stylesheets AJAX, JavaScript und CSS Aktion Mensch: Einfach für Alle EfA EfA EfA Der Code von Einfach für Alle EfA Lycos Deutschland CSS Zen Ocean - Ein Beispiellayout für den Zen Garden CSS-Editoren TopStyle Style Studio Cascade Morphon CSS-Editor Style Master Xyle Scope 401 8

6 7.1.7 Dreamweaver GoLiveCS PSPad CSS-Werkzeuge und weitere Tools User-Stylesheets Tidy Optool Calipers IrfanView Web-Designer-Toolbar Fangs - Der Firefox-Screenreader-Simulator Alphabetische Übersicht Pseudo-Elemente und Pseudo-Formate :link :visited :hover(css2) :focus(css2) :active :lang(css2) :first-line :first-letter :first-child (CSS2) :before und :after (CSS2) :not(css3) serzeugung content (CSS2, Änderung in CSS 2.1) countero und counters() counter-increment (CSS2) counter-reset (CSS2) quotes(css2) Schriftformatierungen font-family font-style font-variant font-weight font-size font-size-adjust (CSS, nicht in CSS 2.1) font-stretch (CSS2, nicht in CSS 2.1) 464 9

7 8.4.8 fönt 464 (CSS2, nicht in CSS 2.1) text-decoration text-shadow (CSS2, nicht in CSS 2.1) text-transform letter-spacing word-spacing (CSS2) white-space line-height text-indent text-align (Änderung in CSS 2.1) vertical-align direction (CSS2) unicode-bidi (CSS2) Farben und Hintergründe color background-color background-image background-repeat background-attachment background-position (Änderung in CSS 2.1) background Kastenformatierungen margin padding border-width border-color border-style border width height overflow (CSS2) clip (CSS2, Änderung in CSS 2.1) float clear position (CSS2) box-sizing (CSS3) top (CSS2) right(css2) bottom (CSS2)

8 left(css2) visibility (CSS2) opacity (CSS3) z-index (CSS2) list-style-type list-style-image list-style-position list-style Anzeigemodus display (CSS1, Erweiterung in CSS2 - table, Änderung in CSS 2.1, Erweiterung in CSS3 - icon) Tabellenformatierungen table-layout (CSS2) caption-side (CSS2, Änderung in CSS 2.1) border-collapse (CSS2, Änderung in CSS 2.1) border-spacing (CSS2) empty-cells (CSS2) speak-header (CSS2) Benutzeroberfläche Cursor (CSS2) outline (CSS2) scrollbars (MS-proprietär, kein offizieller CSS-Bestandteil) filter (AAS-proprietär, kein offizieller CSS-Bestandteil) Seitenlayout (CSS2) size (CSS2, nicht in CSS 2.1) marks (CSS2, nicht CSS 2.1) :left :right :first (CSS2) page-break-before, page-break-after (CSS2) page-break-inside (CSS2) page(css2, nicht CSS 2.1) orphans (CSS2) widows (CSS2) Sprachausgabe speak (CSS2, Änderung in CSS 2.1) volume (CSS2, Änderung in CSS 2.1) speech-rate (CSS2, Änderung in CSS 2.1) pause (CSS2, Änderung in CSS 2.1) cue (CSS2, Änderung in CSS 2.1) play-during (CSS2, Änderung in CSS 2.1)

9 voice-familiy (CSS2, Änderung in CSS 2.1) pitch (CSS2, Änderung in CSS 2.1) stress (CSS2, Änderung in CSS 2.1) richness (CSS2, Änderung in CSS 2.1) azimuth (CSS2, Änderung in CSS 2.1) elevation (CSS2, Änderung in CSS 2.1) speak-punktuation (CSS2, Änderung in CSS 2.1) speak-numeral (CSS2, Änderung in CSS 2.1) 568 A Die CD-ROM zum Buch 571 B Die Website zum Buch 573 C Die Referenzkarte 575 D Glossar 577 Index