[ Start | Zurück | Weiter | Ende | Index ]

Cascading Style Sheets (CSS)

Warum Cascading Style Sheets?

• CSS: Dokument-Vorlagen, die (kaskadenförmig) aufeinander aufbauen
• Style Sheets gleichen folgende Nachteile von HTML aus:
  • HTML: keine Gestaltungs-, sondern Beschreibungssprache für Dokumente!
  • konkrete Anzeige, d.h. Aussehen legt Browser fest
  • HTML: typografisch unzulänglich, vor allem für Positionierung und Schriftgestaltung
• CSS bereiten Web-Dokumente fürs Desktop Publishing auf
• aufwandsarme Umsetzung der Corporate Identity einer Website
• Erstellen barrierefreier Websites! - siehe z.B. http://www.barrierefreies-webdesign.de/

Was können Cascading Style Sheets?

• CSS: "Stilvorlagen für Profis": Schriften, Farben, Positionieren!
• im Einzelnen:
  • Schriftart, -größe und -farbe
  • Textauszeichnungen wie fett, kursiv, unterstrichen...
  • Textausrichtung (links, rechts, zentriert, Blocksatz)
  • Zeilen- und Wortabstand
  • maximale Textbreite
  • Formatierung von Hypertextlinks und Eingabefeldern
  • Hintergrund mit Farbe oder Grafik
  • Rahmen um Elemente
  • Bereiche und Randabstände
  • pixelgenaue Positionierung

Einbinden der Style Sheets ins Dokument

1. als Definition in einer externen Datei
   <link type="text/css" rel="stylesheet" href="datei.css">
2. als importierte Datei (Funktionsweise wie 1.)
   <style type="text/css">
   . . .
   @import url(datei.css);
   . . .
   </style>
3. als Definition im HEAD des Dokumentes:
   <style type="text/css">
   . . .
   </style>
4. als Definition für einen Abschnitt/Bereich des Dokumentes
   dafür zwei "formatlose" HTML-Tags: DIV und SPAN
   • <DIV style=""> . . . </DIV>: ein Bereich, der zu den Block-Elementen gehört; erzeugt neuen Absatz
     Beispiele für Block-Elemente: Überschrift, Liste, Absatz, ...
     
   • <SPAN style=""> . . . </SPAN>: Bereich innerhalb eines Block-Elements
     Beispiel: ein Wort einer Überschrift anders darstellen als restliche Wörter (der Überschrift)
5. als Definition für ein bestimmtes Element
   Attribut style=""

Aufbau der Style Sheet Regeln

• Selektor: beschreibt, was formatiert werden soll
• Deklaration: legt fest, wie die Formatierung erfolgen soll
• Deklaration besteht aus einer oder mehreren Eigenschaft(en) und deren Wert(en)
• sinngemäße Bedeutung der Begriffe:
  Selektor = HTML-Tag; Eigenschaft = Attribut; Wert = Wert (des Attributs)

  Selektor { Eigenschaft1: Wert1 [; Eigenschaft2: Wert2; . . .] }

• Vererbung: HTML-Elemente in einem Dokument hierarchisch organisiert (siehe HTML-Grundgerüst);
  Style Sheet Regel für bestimmtes HTML-Element im BODY gilt auch für dessen Unter-Elemente!
• einige Arten von Selektoren, deren Schreibweise und Anwendung:
  • Typ-Selektor: HTML-Tag
    Style-Regel für alle HTML-Elemente dieses Typs im Dokument, z.B. für alle Überschriften H1
  • Klassen-Selektor: .Klassenname oder: HTML-Tag.Klassenname
    für alle oder nur die angegebenen Elemente im Dokument, die diesen - selbstgewählten - Klassenname verwenden
    - per Attribut class
    
  • ID-Selektor: #ID oder: HTML-Tag#ID
    wie Klassen-Selektor, aber nur für ein einziges Element pro Dokument - per Attribut id
  • weitere Selektoren: Nachfahre-Selektor, Kind-Selektor
• Selektor entfällt, wenn Angabe der Style Regel direkt im HTML-Element mit Attribut style erfolgt!

Ausgewählte Beispiele

Überschriften und Absätze aufpeppen, Typselektor

• Standardschriftarten wie Times New Roman etwas langweilig, aber verfügbar
• die Lösung: Schriftart hernehmen und "aufmotzen"
• Beispiel: Überschriften h1, h2 sowie Abstände zwischen Zeilen und Zeichen geändert
• verbessert Layout und Lesbarkeit!

Bereich im Dokument festlegen, per ID-Selektor

• Dokument möglichst vollständig in Bereiche einteilen
• Trennung des eigentlichen Inhalts von Infoboxen, Navigationsleisten, Bildern/Logo usw.
• Vorteil: jeder Bereich kann individuell "gestylt" und positioniert werden
• Einbinden ins Dokument mit oben genannten Tags SPAN (Inline) oder DIV (Block)
• Wichtig: Bereiche richtig positionieren!
  siehe dazu Selfhtml, Positionierung
• pragmatisch: Standard lassen → Elemente static (fortlaufend, im Textfluss) positioniert
• Auch simpel, dank CSS: zwei Elemente (Bereiche) nebeneinander positionieren:
  linkes Element mit float: left; ausrichten und feste Breite z.B. width: 140px; geben
  → das folgende Element wird automatisch rechts davon positioniert - siehe Übung
• Abstände der Bereiche zueinander:
  
  
• Beispiel für eine Navi-Leiste am oberen Dokument-Rand:

Laufschrift mit Rahmen und aufgepeppter Schrift, per style-Attribut

oS: CSS Editor Expertenmodus deaktivieren!! Regel (Symbol: Farbpalette) - Neue Style Regel - Style allen Elementen eines bestimmten Typs zuweisen ... - Element in leere Zeile eintragen - Style-Regel erstellen je nach Element Karteireiter anklicken: Text | Hintergrund | Begrenzung | usw. alle Style Regeln exportieren: linke Seite, aktivieren: Internes Stylesheet; rechts: Stylesheet exportieren und auf externes Stylesheet umstellen, bei Dateiname: einen eingeben, zum Beispiel styles.css KompoZer importiert die soeben erzeugte Style Sheet Datei automatisch ins aktuelle Dokument!

Style-Regeln erstellen: siehe oben div erzeugen: Format - Absatz - Generic container (div) span erzeugen: ein Wort schreiben und beliebig formatieren ID an div oder span zuordnen: Textstelle anklicken - in Struktur-Toolbar unten links - div bzw. span - re. Maus - ID - ID wählen ein beliebiges HTML-Element "stylen": wie ID zuordnen, aber nicht ID, sondern "Inline Styles" auswählen

    

[ Start | Zurück | Weiter | Ende | Index ]