CSS (Cascading Style Sheets)

Arbeitsumgebung und vorgeschlagene Tools

Da CSS ein Standard des W3C ist, gibt es viele verschiedene Tools, um Webseiten und Bildinhalte zu erstellen und diese anzuzeigen. Aus technischen und menschlichen Gründen sind Open Source Programme für die Verwendung im Unterricht ideal. Da der Kurs leider auf Microsoft Windows (und nicht auf einer von mir bevorzugten Linuxdistribution) basiert schlage ich folgende Tools vor:

  • Texteditor: Notepad++
    • Einstieg ist einfach, daher geht keine Zeit für das Erlernen verloren; dennoch sehr mächtig und flexibel
    • auch für CSS, Javascript, PHP und viele andere Sprachen geeignet
    • [Strg]+[Alt]+[Shift]+X lädt die aktuell editierte Seite in Firefox
    • Codevervollständigung mit [Strg]+[Space]
    • Wortvervollständigung mit [Strg]+[Shift]+[Space]
    • Unterstützt Zen Coding
  • Webbrowser: Firefox oder Chromium
    • schnell, einfach zu bedienen, relativ sicher und sehr gute Implementierung der W3C Standards
    • schnelle Source-Ansicht per [Strg]+[u]
    • kann den Source einzelner Frames anzeigen
    • Personal Bookmark leiste zum schnellen Öffnen von Seiten
    • Bookmark drag & drop
    • zahllose Erweiterungen, die den HTML Code einer Seite lokal auf Fehler überprüfen und beim Entwickeln helfen
    • IE und andere Browser sollten aber auch zum Testen der Seiten verwendet werden
  • FTP Client: Filezilla
    • kann neben FTP auch sichere Übertragungsprotokolle wie SFTP
    • der beste mir bekannte FTP Client für Microsoft Windows
  • Bildbearbeitungsprogramm: GIMP (GNU Image Manipulation Program)
    • sehr mächtiges Bildbearbeitungsprogramm, dass vor allem fuer die Aufbereitung von Bildern für Websteiten, aber auch für den Druck sehr gut geeignet ist
    • gutes Tool zur Farbauswahl fü HTML und CSS

Alle Programme stehen für mehrere Betriebssysteme (Windows, Linux,...) zur Verfügung. Um einen reibungslosen Ablauf zu gewährleisten, steht während dem Kurs ein Linuxrechner mit dem Apache Webserver und PHP und MySql Unterstützung zur Verfügung. Weiters ist auf dem Rechner ein FTP und ein SSH Server installiert, um beim Upload der Dateien keine Zeit zu verlieren.

Einführung

Moderne XHTML Dokumente werden nicht durch ihre tags formatiert, sondern mit einer Formatierungssprache namens CSS. Die Tags dienen lediglich dazu, den Dokumenten eine semantische Struktur zu geben. Um einem tag eine Formatierung mit CSS zuzuweisen, kann man das style Attribut verwenden.

<tag style="">

Um zum Beispiel den Text eines Absatzes in rot und unterstrichen darzustellen, genügt folgender Code

<p style="color: red; text-decoration: underline";>

Die wirkliche Stärke von CSS liegt aber darin, nicht jedem tag einzeln eine Formatierung zuweisen zu müssen. Es genügt, die Formatierung entweder einmal per XHTML Dokument zuzuweisen und es ist sogar möglich, nur eine Formatdefinition für mehr als eine Seite zu verwenden. Ich empfehle stets eine eigene Datei für die CSS Definitionen zu verwenden. Dateiweite Definitonen werden in den <head> einer Datei geschrieben

<style type="text/css">
  tag { attribut: wert;
        attribut: wert;
        ...
        attribut: wert; }
  tag2 { attribut: wert;
         attribut: wert;
         ...
         attribut: wert; }
  ...
</style>

Wenn man eine eigene Datei, zum Beispiel style.css, anlegen möchte, so muß in jeder html Datei, die diese Styles verwenden soll, entweder

<style type="text/css">
  @import "style.css";
</style>

oder

<link rel="stylesheet" type="text/css" href="style.css" />

im <head> inkludiert sein. @import "filename.css" kann auch ein oder mehrmals am Anfang einer CSS Datei vorkommen, um andere CSS Dateien zu importieren. Dadurch können die Formatierungsregeln logisch strukturiert auf mehrere SDateien aufgeteilt und von einer zentralen Datei importiert werden.

Selektoren

Selektoren (selectors) dienen dazu, mittels CSS auszuwaehlen, welchen tags eine gewisse Formatierung zuzuordnen ist. Da die folgenden Beispiele der Illustration der Selektoren dienen, verwende ich nur eine sehr simple Formatierung, die nicht sehr ansprechend ist. Dabei gibt es verschiedene Möglichkeiten, die, je mächtiger sie werden, immer komplizierter werden. Am einfachsten ist es, alle Tags eines bestimmten Typs zu verändern ("type selectors"). So kann man zum Beispiel alle h1 Überschriften in roter Schrift darstellen

h1 { color: red; }

Eine etwas feinere Auswahl wird durch "descendant selectors" ermöglicht. Dabei können zum Beispiel Links nur dann anders formatiert werden, wenn sie innerhalb von Listenelementen auftreten. Genau das demonstriert der folgende Code, bei dem die Unterstreichung der Links entfernt wird

li a { text-decoration: none; }

Um einiges flexibler ist die Zuteilung von Formatierungen durch vergebene IDs und durch Klassen. Die Verwendung einer Klasse empfiehlt sich nur, wenn man viele zusammengehörige Elemente gemeinsam formatieren will. Ein Beispiel dafür sind alle Absätze, die ein Datum enthalten (<p class="date">...</p>). Alle solchen Absätze werden mit folgendem CSS Code rot gefärbt

.date { color: red; }
Der Zugriff auf IDs ist sinnvoll, wenn genau ein Element eine spezifische Formatierung erhalten soll. Zum Beispiel könnte man eine Liste, die als Navigation dient (<ul id="mainNav">...</ul>) gesondert (in unserem Fall rot) formatieren 
#mainNav { color: red; }

Eine weitere Möglichkeit bieten Pseudoklassen - sie ändern Elemente in Abhängigkeit ihres Zustandes. Zum Beispiel kann ein Link auf einer Seite unterschiedlich dargestellt werden, bevor und nachdem er besucht wurde, wenn die Maus gerade darüber ist und wenn er angeklickt wird. Ebenfalls können die Zeile einer Tabelle über der der Mauscursor gerade steht und ein aktives Formularfeld hervorgehoben werden. Im folgenden Beispiel werden genau diese sechs Zustände dargestellt (eine Aufzählung mehrerer Selektoren bewirkt, dass die gewählte Formatierung auf jeden dieser angewendet wird). Bitte beachte, dass weder vor noch nach dem Doppelpunkt ein Leerzeichen stehen darf

a:link { color: red; }
a:visited { color: green; }
a:hover, a:active { background-color: blue; }
tr:hover { background-color: red; }
input:focus { background-color: yellow; }

Der letzte der einfachen Selektoren ist der universelle Selektor, der alle Elemente auswählt und im folgenden Beispiel blau färbt

* { color: blue; }

Obwohl diese Selektoren für den normalen gebrauch ausreichen, kann es sein, dass man noch mehr Kontrolle braucht. Die dafür nötigen erweiterten Selektoren sind im nächsten Unterabschnitt erklärt.

Erweiterte Selektoren

Die oben erwähnten descendend selectors erlauben es, alle Elemente innerhalb eines anderen Elements anzusprechen. Etwas mehr Kontrolle bietet hier der child selector, welcher es ermöglicht, nur Unterelemente der ersten Ebene anzusprechen. Ein Anwendungsfall ist zum Beispiel eine verschachtelte Liste, bei der nur die Listenelemente der obersten Ebene anders formatiert erscheinen sollen. Die Liste hat im folgenden Beispiel die ID #mainNav 
#mainNav > li { color: red; }
Will man eine Formatierung nur anwenden, wenn vor einem Element ein bestimmtes anderes Element war, so hilft der adjacent sibling selector. Dieser verlangt, dass beide aneinander angrenzente Elemente den gleichen Parent haben, also auf gleicher Ebene einem übergeordnetem Tag untergeordnet sind. Angenommen, man will den ersten Absatz nach jeder Überschrift 1 in einem simplen Dokument anders gestalten. Dies ist möglich, weil beide Elemente in diesem Fall body als gemeinsames, direktes parent-tag haben. Der dafür benötigte CSS Code sieht so aus 
h1 + p { color: red; }

Es ist auch möglich, eine Formatierung zuzuweisen, wenn ein bestimmtes Attribut bei einem tag vorhanden ist. Angenommen, alle Links, welche das title Attribut haben, sollen hervorgehoben werden

a[title] { color: red; }

Es ist sogar möglich, nur jene Elemente anders zu formatieren, bei denen ein Attribut einen speziellen Wert hat. Angenommen, man will alle Links zu Sponsoren gesondert kennzeichnen. Dies geschieht mit Hilfe des rel (relationship) Attributs

a[rel="sponsor"] { color: red; }
Dieser Selektor lässt sich aber wieder mit einer Pseudoklasse kombinieren 
a[rel="sponsor"]:hover { background-color: green }

CSS Kommentare

Um schwer verständliche Passagen zu erklären, ist es ratsam, Kommentare in seine CSS Dateien zu schreiben

/* this is a comment */
p { color: red; /* this is another comment */ }
/*
this comment
spans over more
than one row
*/

Empfohlene Bücher

Copyright © 2009-2023 Gerald Senarclens de Grancy
Das Anfertigen von Kopien, deren Verwendung und Verteilung sind erlaubt und erwünscht, solange dieses Copyrightstatement in allen Kopien angefügt bleibt.
Die vorliegende Dokumentation wurde ausschließlich in meiner Freizeit als Service für ehemalige Seminarteilnehmer erstellt. Daher wird sie lediglich so wie sie ist zur Verfügung gestellt, ohne jegliche vertragliche oder gesetzliche Gewährleistung und ohne den Anspruch auf Korrektheit oder für irgendeinen Zweck geeignet zu sein.

Haftungsausschluss: Da ich keinerlei Einfluss auf den Inhalt der Seiten, zu denen ich von meiner Homepage linke, habe, übernehme ich auch keinerlei Haftung für diese Seiten.

[Valid XHTML 1.1!]