Gestalten-web
Start Zurück Weiter Ende Index

[ 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=""
Reihenfolge der Festlegungen im Dokument bestimmt, welche Style-Sheet-Regel gilt!

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!
<STYLE type="text/css">
<!--
h1 { font: italic 25px 'Times New Roman',Times,serif;
   letter-spacing: 0.33 em; }
h2 { font: italic 20px 'Times New Roman',Times,serif;
   letter-spacing: 0.1 em; }
p { text-align: justify; line-height: 150%; text-indent: 2cm; }
alle Überschriften H1: kursiv, 25 Pixel, Schriftart(en) (in Reihenfolge der Verfügbarkeit!), Buchstabenabstand: ein Drittel von einer Buchstabenbreite
alle Überschriften H2: selbsterklärend ;-)
Text innerhalb von Absätzen: in Blocksatz, vergrößerter Zeilenabstand, Texteinzug 2cm

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:

    Abstaende von Elementen
  • Beispiel für eine Navi-Leiste am oberen Dokument-Rand:
Schritt 1: Bereich per ID-Selektor und Style-Regel definieren:
<STYLE type="text/css">
<!--
#oben { padding-top: 10px; padding-bottom: 10px; width: 100%; text-align: center; } 		ID-Selektor heißt #oben
Bereich beginnt von oben, Abstände nach oben und unten (zum nächsten Element im Dokument) 10 Pixel, nutzt gesamte Breite, statisch (im Elementfluss), Text wird zentriert

Schritt 2: Bereich im Dokument-BODY ansprechen:
<BODY>
. . .
<DIV id="oben">
<!-- Hier mit Inhalt füllen! -->
</DIV> 		im Dokument einen SPAN-Teil definieren und Bezug auf den zuvor festgelegten ID-Selektor oben nehmen;
Inhalt des div-Bereiches: beliebige HTML-Elemente!

Laufschrift mit Rahmen und aufgepeppter Schrift, per style-Attribut

<BODY>
. . .
<MARQUEE style="border: medium inset red;
   width: 300px;
   font-family: Times New Roman;
   font-style: italic;">
+++ Das ist Laufschrift, von einem Rahmen umgeben! +++
</MARQUEE>
. . .
</BODY> 		+++ Das ist Laufschrift, von einem Rahmen umgeben! +++

Vielzahl weiterer Möglichkeiten mit Style Sheets denkbar!

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!

Übung

Alle (vorbereiteten) Bilder für das Beispiel stehen hier:
/afs/tucz/home/urz/s/stb/public_html/web-kurs-uebung/ bzw. U:\tucz\home\urz\s\stb\public_html\web-kurs-uebung\.

Legen Sie sich ein Übungsverzeichnis als Unterordner in H:\public_html an!
Kopieren Sie sich die genannten Bilder in Ihr soeben angelegtes Übungsverzeichnis!

Danach KompoZer starten; Datei - Datei öffnen . . . - muster.html
folgende Einstellungen vornehmen:
Farbe der Hypertextlinks: #7f6d69
Farbe aktiver und besuchter Links: #6c5d59
Weitere Grundeinstellungen vornehmen (Autor, Schlüsselwörter etc.), sofern noch nicht erfolgt;
folgende Typ-Selektoren und deren Style Regeln festlegen:

  • body: benutzerdefinierte Schriftart "Verdana"
  • body: Zeilenhöhe: 1.5em
  • body: Hintergrundbild bg-farbverlauf.jpg, Kacheln horizontal, kein Scrollen, Ausrichtung: zentriert, unten
  • alle Überschriften H1 bis H3: Text unterstrichen darstellen
  • p (Absatz): Text-Ausrichtung im Blocksatz
Danach Style-Regeln in extra Datei exportieren, als styles.css,
zuletzt das Dokument als muster.html abpeichern.

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

Übung

Weitere Angaben und die Navigation des Web-Dokumentes erstellen

  • KompoZer starten, muster.html öffnen und drei Bereiche oben, navi und inhalt festlegen und im Dokument einbinden:
    CSS Editor - styles.css - Neue Regel - Regel erstellen, Name eingeben, z.B. #oben
  • das Gleiche für die anderen Bereiche
  • im Dokument-BODY alle DIV-Bereiche erstellen:
    Empfehlung: je Bereich etwas Blindtext schreiben, jeweils auf neuer Zeile
    diesen Texten jeweils die oben definierten Bereiche zuordnen, über Struktur-Toolbar
  • die weiteren Einstellungen insbesondere zur Navileiste vom Dozent übernehmen (Musterlösung)
Zuletzt: muster.html abspeichern.

Ganz zuletzt: Wenn Sie genug "geübt" haben, bitte die erstellten Testdokumente wieder löschen!!!

Ergebnis: ein vollständig gestyltes Musterdokument, welches als Vorlage (Rahmen!) für alle Dokumente einer Website dienen kann!
Dafür jeweils das Musterdokument einfach kopieren und mit dem gewünschten Inhalt "füllen".


Start Zurück Weiter Ende Index

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


TUCaktuell