D3kjd3Di38lk323nnm xiii 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS......................... 1 1.1.1 lnline-formate............................. 3 1.1.2 Eingebettete Formate........................ 3 1.1.3 Externe Stylesheets......................... 4 1.2 CSS-Selektoren.................................. 5 1.2.1 Type-Selektoren............................ 6 1.2.2 Klassen-Selektoren.......................... 6 1.2.3 ID-Selektoren............................. 8 1.2.4 Selektoren als Nachfahren.................... 8 1.2.5 Kind-Selektoren............................ 9 1.2.6 Selektoren für Pseudoklassen................. 10 1.3 Zusammenfassung............................... 11 2 Textauszeichnungen und andere Grundlagen 13 Problem 1 Wie ersetze ich <font>-tags durch CSS?............ 13 Problem 2 Problem 3 Problem 4 Problem 5 Sollte ich Pixel, Punkt, em oder etwas anderes für Schriftgrößen benutzen?............. 14 Wie kann ich Text in einem bestimmten Font anzeigen?............................. 22 Wie entferne ich die Unterstreichung von meinen Links?.............................. 23 Wie erzeuge ich einen Link, der beim Überfahren mit der Maus die Farbe ändert?.................. 25
xiv Problem 6 Wie kann ich die Links einer Seite mit zwei verschiedenen Formaten anzeigen?........... 27 Problem 7 Wie hebe ich das erste Element einer Liste hervor?.... 29 Problem 8 Wie füge ich einer Überschrift eine Hintergrundfarbe hinzu?...................... 30 Problem 9 Wie unterstreiche ich Überschriften?.............. 31 Problem 10 Wie verringere ich den großen Abstand zwischen einem <h1>-tag und nachfolgendem Text?......... 32 Problem 11 Wie hebe ich Text hervor?...................... 35 Problem 12 Wie ändere ich die Zeilenhöhe (Zeilenabstand) in meinem Text?............................ 36 Problem 13 Wie richte ich Text aus?....................... 37 Problem 14 Wie gestalte ich eine horizontale Linie?............ 38 Problem 15 Wie rücke ich Text ein?........................ 39 Problem 16 Wie zentriere ich Text?........................ 41 Problem 17 Problem 18 Problem 19 Problem 20 Wie wandle ich einen Text mit CSS in Großbuchstaben um?....................... 42 Wie ändere oder entferne ich die Aufzählungszeichen für Listeneinträge?........... 44 Wie kann ich ein Bild als Aufzählungszeichen verwenden?............................... 46 Wie vermeide ich die Einrückung links von einer Liste?................................ 46 Problem 21 Wie ordne ich eine Liste horizontal an?............ 47 Problem 22 Problem 23 Problem 24 Wie füge ich Kommentare in meine CSS-Datei ein?.............................. 48 Wie kann ich ohne Attribute im <body>-tag vorgegebene Seitenränder abschalten?............ 49 Wie kann ich die im Browser voreingestellten Innen- und Außenabstände von allen Elementen beseitigen?........................ 49 Zusammenfassung........................... 51
xv 3 CSS und Bilder 53 Problem 25 Wie rahme ich ein Bild ein?..................... 53 Problem 26 Problem 27 Wie kann ich mit CSS das veraltete border-attribut bei Bildern ersetzen?......................... 55 Wie füge ich mit CSS ein Hintergrundbild in meine Seite ein?........................... 56 Problem 28 Wie positioniere ich mein Hintergrundbild?......... 59 Problem 29 Wie binde ich ein fixiertes Hintergrundbild ein?...... 62 Problem 30 Wie kann ich Hintergrundbilder in andere Elemente einfügen?.................. 64 Problem 31 Wie lege ich Text über ein Bild?.................. 66 Problem 32 Problem 33 Wie füge ich mehrere Hintergrundbilder in mein Dokument ein?....................... 68 Wie kann ich in meinen Seiten Transparenz einsetzen?....................... 69 Zusammenfassung.......................... 72 4 Navigation 73 Problem 34 Problem 35 Problem 36 Problem 37 Problem 38 Problem 39 Problem 40 Wie ersetze ich die Bilder in der Navigation durch CSS?................................ 74 Wie mache ich aus einer strukturierten Liste ein Navigationsmenü?........................ 79 Wie erzeuge ich einen Rollover-Effekt für ein Menü ohne Bilder oder JavaScript?............ 83 Wie erzeuge ich mit CSS und Listen mehrstufige Navigationssysteme?......................... 85 Wie erstelle ich ein horizontales Menü mit CSS und Listen?............................. 89 Wie erzeuge ich mit CSS ein Menü im Button-Stil?............................... 92 Wie erzeuge ich mit CSS ein Menü mit Karteireitern?.............................. 95
xvi Problem 41 Wie ändere ich den Typ des Cursors?............. 104 Problem 42 Problem 43 Wie erzeuge ich Rollover-Effekte ohne JavaScript?............................... 106 Kann ich ausklappbare Menüs nur mit CSS erstellen?............................. 110 Zusammenfassung.......................... 116 5 Tabellarische Daten 117 Problem 44 Problem 45 Problem 46 Problem 47 Problem 48 Problem 49 Problem 50 Problem 51 Wie gestalte ich ein Layout für eine Kalkulationstabelle?........................ 118 Meine tabellarischen Daten sollen zugänglich und zugleich ansprechend sein................. 119 Wie rahme ich eine Tabelle ein, ohne das HTML-Attribut border zu verwenden?..... 122 Wie vermeide ich Zwischenräume zwischen den einzelnen Tabellenzellen?................. 125 Wie stelle ich Daten einer Kalkulationstabelle ansprechend und zugänglich dar?............... 126 Wie zeige ich die Zeilen einer Tabelle in abwechselnden Farben an?.................. 129 Wie erziele ich einen Hover-Effekt für eine Tabellenzeile?......................... 132 Wie stelle ich Tabellenspalten in unterschiedlichen Farben dar?................. 135 Problem 52 Wie stelle ich mit CSS einen Kalender dar?......... 138 Zusammenfassung.......................... 148 6 Formulare und Benutzerschnittstellen 149 Problem 53 Wie gestalte ich Formularelemente mit CSS?....... 150 Problem 54 Problem 55 Wie weise ich Feldern innerhalb desselben Formulars verschiedene Formate zu?............. 154 Wie stelle ich mein Formular als Inline-Element dar?......................... 156
xvii Problem 56 Problem 57 Problem 58 Wie erstelle ich einen Submit-Button, der aussieht wie Text?....................... 157 Wie können Benutzer mit textbasierten Geräten mein Formular ausfüllen?.............. 158 Wie erstelle ich mit CSS ein zweispaltiges Formular ohne Tabelle?...................... 161 Problem 59 Wie gruppiere ich zusammengehörige Felder?...... 166 Problem 60 Problem 61 Problem 62 Problem 63 Wie formatiere ich die Hinweise für Zugriffstasten (»accesskey«)?.................. 170 Wie hebe ich die Einträge in einer Auswahlbox mit verschiedenen Farben hervor?.............. 173 Wie gestalte ich mit CSS ein Formular als Arbeitsblatt?.............................. 174 Wie hebe ich die Tabellenzelle hervor, die der Benutzer anklickt?.................... 181 Zusammenfassung......................... 182 7 Browserübergreifende Techniken 183 Problem 64 Problem 65 Problem 66 Problem 67 Problem 68 In welchen Browsern sollte ich meine Internetseiten testen?....................... 184 Wie kann ich mit einem Betriebssystem in mehreren Browsern testen?................. 184 Gibt es einen Testservice für die verschiedenen Browser?..................... 189 Kann ich verschiedene Versionen des Internet Explorers auf Windows installieren?....... 191 Wie binde ich ein Stylesheet für ganz alte Browser ein?.............................. 193 Problem 69 Wie verberge ich CSS vor anderen Browsern?....... 197 Problem 70 Problem 71 Wie stelle ich unterschiedliche Stilregeln für einen bestimmten Browser zur Verfügung?..... 201 Wie erreiche ich Alpha-Transparenz im Internet Explorer 6?......................... 203
xviii Problem 72 Problem 73 Problem 74 Problem 75 Was ist DOCTYPE-Switching und wie setze ich es ein?............................ 208 Ich habe womöglich einen CSS-Fehler gefunden. Was mache ich nun?......................... 211 Was ist zu tun, wenn e zeitweilig im Internet Explorer 6 verschwinden?............ 214 Was bedeuten die Fehlermeldungen und Warnungen im W3C-Validator?................. 219 Zusammenfassung.......................... 221 8 Zugänglichkeit und alternative Geräte 223 Problem 76 Wie teste ich meine Seiten in einem Textbrowser?... 224 Problem 77 Wie teste ich meine Seite mit einem Screenreader?... 226 Problem 78 Problem 79 Problem 80 Wie erstelle ich Stylesheets für andere Geräte, wie etwa Screenreader oder WebTV?............. 227 Wie erstelle ich ein Stylesheet für die Druckausgabe?............................ 229 Wie kann ich meiner Seite alternative Stylesheets hinzufügen?............. 238 Problem 81 Wie realisiere ich einen Stylesheet-Wechsel?....... 244 Problem 82 Wie benutze ich alternative Stylesheets, ohne den Code zu duplizieren?................. 247 Zusammenfassung.......................... 252 9 CSS-Positionierung und -Layout 253 Problem 83 Problem 84 Problem 85 Problem 86 Wie entscheide ich, wann ich eine Klasse und wann ich eine ID benutzen soll?............. 253 Kann ich ein Inline-Element als Blockelement anzeigen und umgekehrt?.................... 255 Wie setzt CSS die Eigenschaften margin und padding um?........................... 257 Wie kann ich ohne das HTML-Attribut align Text um ein Bild fließen lassen?................. 261
xix Problem 87 Problem 88 Problem 89 Wie verhindere ich, dass nachfolgende Elemente nach oben rutschen, nachdem ich float verwendet habe?.................... 264 Wie richte ich e am rechten und linken Rand aus, ohne eine Tabelle zu benutzen?.... 268 Wie bestimme ich die Position eines Elements innerhalb einer Seite mit CSS?................. 272 Problem 90 Wie zentriere ich einen Block auf der Seite?........ 276 Problem 91 Problem 92 Problem 93 Problem 94 Problem 95 Wie erstelle ich ein dynamisches, zweispaltiges Layout?................................. 278 Kann ich dieses Layout umkehren und das Menü auf der rechten Seite anzeigen?............ 285 Wie erstelle ich ein zentriertes, zweispaltiges Layout mit fester Breite?..................... 287 Wie erreiche ich, dass alle Spalten eines Layouts gleich hoch sind?..................... 297 Wie füge ich einen Schlagschatten in mein Layout ein?............................... 300 Problem 96 Wie erstelle ich ein dreispaltiges CSS-Layout?...... 302 Problem 97 Problem 98 Problem 99 Wie füge ich eine Fußleiste in ein dynamisches Layout ein?............................... 308 Wie erzeuge ich eine Bildergalerie mit Vorschaubildern ohne Tabelle?.............. 311 Kann man mit CSS Boxen mit abgerundeten Ecken erzeugen?........................... 317 Zusammenfassung......................... 324 Index 325