CSS-Grundlagen

Herausforderungen beim Layout

HTML zeichnet Text logisch aus

Fließtext mit dynamischem Umbruch
keine feste Platzierung von Elementen
Darstellung folgt der Reihenfolge der Tags in der HTML-Datei
keine Überdeckung von Objekten
Browser stellt Inhalt passend für das Gerät des Benutzers dar

Ziel: Layout muss sich dynamisch an die Nutzung (PC, Tablet, Smartphone) anpassen können

Cascading Style Sheets (CSS)

Definiert physische Formatierung von HTML-Seiten
Formatierung kann definiert werden für

vorhandene logische Formatierungen (Überschriften, Listen, …)
eigene Formatklassen
einzelne Textblöcke

CSS Versionen

1.0: 1996
2.0: 1998
2.1: 2011
3.0: 2012

Cascading Style Sheets

Vielseitige Gestaltung der physischen Darstellung

Schriftart, Schriftgröße, Schriftstil
Zeichen- und Zeilenabstand, Einrückung
Text- und Hintergrundfarbe
Rahmen
Farben
freie Platzierung und Überlappung von Objekten
unterschiedliche Formate für Druck, Bildschirm, …

Vorteile von CSS

Exakte Bestimmung des Erscheinungsbilds
Optimierung für bestimmte Ausgabemedien
Wichtig für barrierefreies Webdesign
Strikte Trennung zwischen Inhalt und Darstellung

Inhalt wird logisch in HTML formatiert
Darstellung erfolgt separat (und parallel) in CSS
Arbeitsteilung Autor / Designer wird möglich

Wiederverwendung durch Kaskadierung

Vorbereitung für CSS-Formatierung

HTML-Seite als logische Sequenz von Blöcken

jeder Block wird mit einem Tag gekennzeichnet

mit einem passenden Standard-Tag z. B. <h1>...</h1>
oder sonst mit <div>...</div>

Elemente, die speziell formatiert werden sollen, aber keinen Block erzeugen sollen, werden durch <span>...</span> gekennzeichnet
Reihenfolge entspricht der logischen Reihenfolge

Blöcke werden dann mit CSS formatiert, positioniert und ausgerichtet

Einbinden von CSS: Eigene Datei

Eigene CSS-Datei

Normalfall in vielen Web-Projekten
Unterstützt Wiederverwendung (kann von mehreren HTML-Dateien genutzt werden)
Einbinden über <link>-Element im Header der Datei
<link rel="stylesheet" type="text/css" href="css/web.css"/>
Stylesheets können sich über @import url(...); gegenseitig einbinden
@import url(main.css);

Einbinden von CSS: Eingebettet

Eingebettet in HTML-Datei

Stylesheet nur in dieser Datei gültig
Keine Wiederverwendung
Über <style>-Element im Header der Datei

<style type="text/css">
  <!--
    /* ... Style-Sheet-Definitionen ... */
    h2 { font-style: italic; }
  -->
</style>

Einbinden von CSS: Inline

CSS-Befehle direkt beim HTML-Element

Bei jedem Element über style-Attribut möglich
Element <span>, um Bereiche für das Styling zu definieren
Verletzt Trennung zwischen Inhalt und Darstellung

<p style="color: red;">Hallo dies ist ein Absatz. Mit einem
<span style="font-weight: bold;">fetten</span> Stil mittendrin. </p>

Unterschiedliche Ausgabemedien

Verschiedene Medien in einer CSS-Datei

@media screen {
  /* Style-Sheet-Definitionen für den Bildschirm */
  h1 { color: blue; }
}

@media print {
  /* Style-Sheet-Definitionen zum Drucken */
  h1 { color: black; }
}

Einbinden unterschiedlicher CSS-Dateien

<link rel="stylesheet" media="screen" href="css/bildschirm.css"/>
<link rel="stylesheet" media="print"  href="css/drucker.css"/>
<link rel="stylesheet" media="speech" href="css/screenreader.css"/>

Medientypen

CSS sieht zur Zeit zehn Medientypen vor

all: Alle Medientypen
braille: Braille-Zeile
embossed: Braille-Drucker
handheld: PDA, Smartphone etc.
print: Drucker
projection: Projektor (Beamer etc.)
screen: Monitor
speech: Sprachausgabe per Screenreader
tty: Medien mit fester Zeichenbreiten (Terminal)
tv: TV-ähnliche Geräte