Ihr Standort: Kostenloses Kurse / HTML - Medien und Gestaltung

HTML - Medien und Gestaltung - Der Kurs zum kostenlosen Lernen und Nachschlagen

Heinz Wittenbrink

HTML - Medien und Gestaltung
Kurs starten >>

Cascading Style Sheets (CSS) sind eine Technik zum Gestalten von digitalen Publikationen, die dem dynamischen Erscheinungsbild dieses Mediums Rechnung trägt. Sie ermöglichen es, mit wenigen Befehlen komplette Websites zu gestalten und zu verändern. Heute werden sie von allen verbreiteten Browsern unterstützt und sind der einzige Standard für die Gestaltung von HTML-Dokumenten. Cascading Style Sheets legen nicht einfach nur fest, wie ein Text oder ein anderer Inhalt aussieht, sondern wie er sich im Browser verhält. Mit Cascading Style Sheets kann man denselben Inhalt an unterschiedliche Ausgabemedien anpassen. Sie sind eine wichtige Voraussetzung für barrierefreies Webdesign. In diesem Kurs erfahren Sie zunächst, wie CSS-Regeln formuliert werden. Danach lernen Sie die wichtigsten Anwendungsgebiete von CSS kennen: Typografie, Layoutgestaltung und Positionierung von Bildern und Medien bei HTML-Dokumenten. Außerdem erklärt dieses Buch einige HTML-Elemente, die dazu dienen, Bilder und andere Medien in ein HTML-Dokument zu integrieren.

Inhalt

HTML - Medien und Gestaltung
- Vorwort
- 1 Wie funktionieren Cascading Style Sheets?
  - 1.1 Einführung in CSS
    - 1.1.1 Die Rolle von CSS im World Wide Web
    - 1.1.2 Mit welcher CSS-Version beschäftigen wir uns?
    - 1.1.3 Erste Schritte
  - 1.2 Übungsaufgaben
  - 1.3 Das CSS-Verarbeitungsmodell
    - 1.3.1 Erstellung des Dokumentbaums
    - 1.3.2 Das Box-Modell der Formatierung für die visuelle Darstellung
    - 1.3.3 Viewport und Canvas
- 2 HTML-Elementen einen Stil zuordnen
  - 2.1 Selektoren
    - 2.1.1 Elementtyp-Selektoren
    - 2.1.2 Mehrfach-Selektoren
    - 2.1.3 Der universale Selektor *
    - 2.1.4 Nachfahre-Selektoren
    - 2.1.5 Nachfolger-Selektoren
    - 2.1.6 Kindelement-Selektoren
    - 2.1.7 Attribut-Selektoren
    - 2.1.8 ID- und Klassen-Selektoren
    - 2.1.9 Selektoren für Pseudo-Elemente und Pseudo-Klassen
  - 2.2 Die Verbindung von class- und id-Selektoren mit den -Elementtypen span und div
- 3 HTML-Dokumenten Style Sheets zuordnen
  - 3.1 CSS-Regeln für einzelne Elemente angeben
  - 3.2 CSS-Regeln für ein ganzes Dokument festlegen
  - 3.3 CSS-Regeln für mehrere Dokumente festlegen
  - 3.4 Style Sheets für unterschiedliche Medien
  - 3.5 Kombination und Import von Style Sheets
  - 3.6 Übungsaufgaben
- 4 Layout und Positionierung mit CSS
  - 4.1 Die Eigenschaft display
    - 4.1.1 Block-Boxen und Inline-Boxen
    - 4.1.2 Beispiele für die Verwendung der Eigenschaft display
  - 4.2 Größen von Boxen
    - 4.2.1 Größenangaben
    - 4.2.2 Beispiele für die Festlegung der Breite und Höhe von Elementen
  - 4.3 Ränder und Abstände
    - 4.3.1 Ränder und Abstände: Eigenschaften und Untereigenschaften
    - 4.3.2 Beispiele für die Festlegung der Breite von Innen- und Außenrändern
  - 4.4 Koordinaten und Positionierung
    - 4.4.1 Koordinatensystem und Maßeinheiten
    - 4.4.2 Positionierungstypen
    - 4.4.3 Relative Positionierung
    - 4.4.4 Absolute Positionierung
    - 4.4.5 Feste Positionierung
    - 4.4.6 Weitere Beispiele für absolute und relative Positionierung
  - 4.5 Umfließen von Elementen
    - 4.5.1 Beispiele für das Umfließen von Elementen und flüssige Layouts
  - 4.6 Unsichtbare und beschnittene Objekte
    - 4.6.1 Beispiel für eine versteckte Box
  - 4.7 Ebenen
  - 4.8 Übungsaufgaben
- 5 Schriften in CSS
  - 5.1 CSS-Eigenschaften für die typografische Gestaltung
    - 5.1.1 Bestimmung der Schriftart mit der Eigenschaft font-family
    - 5.1.2 Die Eigenschaft font-size zur Festlegung der Schriftgröße
    - 5.1.3 Zeilenabstände mit der Eigenschaft line-height bestimmen
    - 5.1.4 Textauszeichnung mit font-style, font-variant, font-weight
    - 5.1.5 Schrift-Eigenschaften im HTML-Element body
  - 5.2 Aufzählungen (Listen)
    - 5.2.1 Listen für die Navigation
  - 5.3 Übungsaufgaben
- 6 Farben, Bilder und Hintergründe
  - 6.1 Farben
    - 6.1.1 Notationen der Farbdefinition
    - 6.1.2 Der Hexadezimalcode und RGB-Angaben für Farben in HTML
    - 6.1.3 Ein wenig Theorie zu Hexadezimalzahlen
    - 6.1.4 Umrechnung in den hexadezimalen RGB-Code
    - 6.1.5 Websichere Farben
    - 6.1.6 Textfarbe
    - 6.1.7 Die Hintergrundfarbe
  - 6.2 Bilder
    - 6.2.1 Dateiformate für Bilder
    - 6.2.2 Die Entscheidung für ein Format
    - 6.2.3 Bildgröße
    - 6.2.4 Die Wahl der richtigen Bildgröße
    - 6.2.5 Bildrand
    - 6.2.6 Bildtext
    - 6.2.7 Anordnung von Text und Bild
    - 6.2.8 Vertikale Anornung von Inline-Bildern
  - 6.3 Image Map
  - 6.4 Einbinden von Multimediaobjekten
    - 6.4.1 Alternativen für nichtdarstellbare Inhalte
    - 6.4.2 object innerhalb von object
    - 6.4.3 object innerhalb des head eines HTML-Dokuments
    - 6.4.4 Verwendung des Elements object
    - 6.4.5 Übergabe von Parametern an object
  - 6.5 Gestalten mit Hintergrundbildern
  - 6.6 Übungsaufgaben
- 7 Tabellen und CSS
  - 7.1 Tabellen mit CSS formatieren
    - 7.1.1 Die Zeilen und Zellen von Tabellen formatieren
    - 7.1.2 Feste Einstellung der Breite und Höhe von Tabellen
    - 7.1.3 Das Verhalten der Ränder von Zellen steuern
    - 7.1.4 Formatierung von Spalten und Spaltengruppen bei Tabellen
    - 7.1.5 Noch nicht allgemein unterstützte Tabelleneigenschaften
  - 7.2 Übungsaufgaben
- 8 Bugs im Internet Explorer
  - 8.1 Tanteks Box Model Hack
  - 8.2 Der Holly Hack und Bugs bei der Darstellung von floatenden Elementen
  - 8.3 Verschwindender Hintergrund bei Listen in floatenden, relativ positionierten div-Elementen.
  - 8.4 Browserweichen mit Conditional Comments
  - 8.5 Weitere Informationsquellen
- 9 Referenz CSS-Eigenschaften
  - 9.1 background
  - 9.2 background-attachment
  - 9.3 background-color
  - 9.4 background-image
  - 9.5 background-position
  - 9.6 background-repeat
  - 9.7 border
  - 9.8 border-bottom
  - 9.9 border-bottom-color
  - 9.10 border-bottom-style
  - 9.11 border-bottom-width
  - 9.12 border-collapse
  - 9.13 border-color
  - 9.14 border-left
  - 9.15 border-left-color
  - 9.16 border-left-style
  - 9.17 border-left-width
  - 9.18 border-right
  - 9.19 border-right-color
  - 9.20 border-right-style
  - 9.21 bottom
  - 9.22 border-right-width
  - 9.23 border-spacing
  - 9.24 border-style
  - 9.25 border-top
  - 9.26 border-top-color
  - 9.27 border-top-style
  - 9.28 border-top-width
  - 9.29 border-width
  - 9.30 caption-side
  - 9.31 clear
  - 9.32 clip
  - 9.33 color
  - 9.34 display
  - 9.35 empty-cell
  - 9.36 float
  - 9.37 font
  - 9.38 font-family
  - 9.39 font-size
  - 9.40 font-size-adjust
  - 9.41 font-stretch
  - 9.42 font-style
  - 9.43 font-variant
  - 9.44 font-weight
  - 9.45 height
  - 9.46 left
  - 9.47 letter-spacing
  - 9.48 line-height
  - 9.49 list-style
  - 9.50 list-style-image
  - 9.51 list-style-position
  - 9.52 list-style-type
  - 9.53 margin
  - 9.54 margin-bottom
  - 9.55 margin-left
  - 9.56 margin-right
  - 9.57 margin-top
  - 9.58 max-height
  - 9.59 max-width
  - 9.60 min-height
  - 9.61 min-width
  - 9.62 overflow
  - 9.63 padding
  - 9.64 padding-bottom
  - 9.65 padding-left
  - 9.66 padding-right
  - 9.67 padding-top
  - 9.68 position
  - 9.69 outline-color
  - 9.70 right
  - 9.71 speak-header
  - 9.72 SVGA (selten)
  - 9.73 table-layout
  - 9.74 text-align
  - 9.75 text-decoration
  - 9.76 text-indent
  - 9.77 text-shadow
  - 9.78 text-transform
  - 9.79 top
  - 9.80 vertical-align
  - 9.81 VGA (veralteter Standard)
  - 9.82 visibility
  - 9.83 white-space
  - 9.84 width
  - 9.85 word-spacing
  - 9.86 XGA (Standard)
  - 9.87 z-index
- 10 Referenz HTML-Elemente
  - 10.1 a
  - 10.2 address
  - 10.3 area
  - 10.4 b
  - 10.5 base
  - 10.6 blockquote
  - 10.7 body
  - 10.8 br
  - 10.9 caption
  - 10.10 col
  - 10.11 colgroup
  - 10.12 dd
  - 10.13 dfn
  - 10.14 div
  - 10.15 dl
  - 10.16 dt
  - 10.17 em
  - 10.18 font
  - 10.19 h1
  - 10.20 h2
  - 10.21 h3
  - 10.22 h4
  - 10.23 h5
  - 10.24 h6
  - 10.25 head
  - 10.26 html
  - 10.27 hr
  - 10.28 i
  - 10.29 img
  - 10.30 kbd
  - 10.31 li
  - 10.32 link
  - 10.33 map
  - 10.34 meta
  - 10.35 object
  - 10.36 ol
  - 10.37 p
  - 10.38 param
  - 10.39 pre
  - 10.40 q
  - 10.41 samp
  - 10.42 span
  - 10.43 strike
  - 10.44 strong
  - 10.45 style
  - 10.46 sub
  - 10.47 sup
  - 10.48 table
  - 10.49 td
  - 10.50 th
  - 10.51 title
  - 10.52 tr
  - 10.53 tt
  - 10.54 u
  - 10.55 ul
  - 10.56 var
- Anhang A Verständnistest
- Anhang B Übersicht: CSS-Selektoren
- Anhang C Universelle Attribute
- Anhang D Musterlösungen zu den Übungen
  - D.1 Lösung zu Aufgabe 1:
  - D.2 Lösung zu Aufgabe 2:
  - D.3 Lösung zu Aufgabe 3:
  - D.4 Lösung zu Aufgabe 4:
  - D.5 Lösung zu Aufgabe 5:
  - D.6 Lösung zu Aufgabe 6:
  - D.7 Lösung zu Aufgabe 7:
  - D.8 Lösung zu Aufgabe 8:
  - D.9 Lösung zu Aufgabe 9:
  - D.10 Lösung zu Aufgabe 10:
- Literaturangaben