Sinn und Zweck von Stylesheets
Stylesheets sind eine unmittelbare Ergänzung zu (X)HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner (X)HTML-Elemente. Mit Hilfe von Stylesheets kannst du beispielsweise bestimmen, dass Überschriften 1. Ordnung1) einen großen Schriftgrad aufweisen, in der Schriftart Helvetica, aber nicht fett erscheinen und mit einem Abstand von 1,75 Zentimeter zum darauffolgenden Absatz versehen werden. Angaben 2) dieser Art sind mit reinem HTML nicht möglich.
Das ist aber nur der Anfang. Stylesheets bieten noch viel mehr Möglichkeiten. So kannst du (X)HTML-Elemente - egal ob Textabsätze, Listen, Tabellenzellen oder Formulare - mit einer eigenen Hintergrundfarbe3), einem eigenen Hintergrundbild4) (Wallpaper) oder mit diversen Rahmen5) ausstatten. Du kannst Elemente im Anzeigefenster des WWW-Browsers positionieren. Für Print-Layouts stehen Möglichkeiten zur Definition von Seiten-Layout und Textflusskontrolle bereit. Für die akustische Wiedergabe von Web-Seiten gibt es ein ganzes Arsenal an Eigenschaften, um die künstliche Sprachausgabe zu steuern.
Einige CSS-Eigenschaften sind auch in der Lage, das Anzeigefenster des Browsers zu beeinflussen, so etwa das Aussehen des Cursors. Spezielle Filter schließlich, die allerdings rein Microsoft-spezifisch sind, erlauben Grafik-Effekte bei normalen Texten, die aus Grafikprogrammen wie Photoshop bekannt sind.
Ein weiteres wichtiges Leistungsmerkmal von CSS ist die Möglichkeit, zentrale Formate zu definieren. So kannst du beispielsweise im Kopf einer (X)HTML-Datei zentrale Definitionen zum Aussehen eines Elements notieren. Alle Elemente der entsprechenden (X)HTML-Datei erhalten dann die Formateigenschaften, die einmal zentral definiert sind. Das spart Kodierarbeit und macht die (X)HTML-Dateien kleiner.
Du kannst deine Stylesheet-Definitionen sogar in separaten Dateien notieren. Die Stylesheet-Dateien kannst du in beliebig vielen (X)HTML-Dateien referenzieren. Auf diese Weise kannst du für große Projekte einheitliche Layouts entwerfen. Mit ein paar kleinen Änderungen in einer zentralen Stylesheet-Datei kannst du dann für hunderte von HTML-Dateien ein anderes Aussehen bewirken.
Stylesheets unterstützen also die professionelle Gestaltung beim Web-Design und helfen beim Corporate Design für große Projekte oder für unternehmensspezifische Layouts.
(Quelle: SelfHTML )
Fragen
CSS-Formate und CSS-Eigenschaften
Stylesheets bestehen aus Formaten, die du für bestimmte (X)HTML-Elemente oder für eine bestimmte Auswahl von (X)HTML-Elementen definierst. Zum Auswählen einer bestimmten Gruppe von (X)HTML-Elementen, für die ein Format gelten soll, gibt es in CSS die Syntax der so genannten Selektoren. CSS-Formate lassen sich entweder
- in einem zentralen Style-Bereich,
- in einer externen CSS-Datei oder
- direkt im einleitenden Tag eines (X)HTML-Elements definieren.
CSS-Formate bestehen aus einer oder mehreren Eigenschaften und Wertzuweisungen an diese Eigenschaften. So kannst du beispielsweise ein Format für Überschriften 3. Ordnung definieren, bei dem du für Eigenschaften wie Schriftgröße, Schriftfarbe und Absatz-Abstand entsprechende Werte bestimmst.
CSS-Begriffe
Die nachfolgende Regel setzt sich aus dem Selektor, der die gewünschten Elemente selektiert (auswählt) und einer Eigenschaft sowie dem ihr zugewiesenen Wert zusammen:
Selektor { Eigenschaft:Wert; }
Die Kombination aus Eigenschaft und Wert wird als Deklaration bezeichnet.
(Quelle: SelfHTML)
Fragen
- Kopiere folgende Datei in dein "09if"-Verzeichnis und entpacke ihn: meineHP.zip.
Achtung! Das einzige, was Du verändern darfst, sind die Styles!!! - Öffne nun die "index.html". Kannst du eine Struktur erkennen?
- Erstelle im
<head>-Teil einen<style>-Bereich (Tipp: siehe auch obiges Bild)- Gib den selector "
body" gefolgt von einer öffnenden ("{") und schließenden ("}") geschweiften Klammer an. - Wir wollen die Hintergrundfarbe auf ein helles blau setzen; benutze hierzu die Eigenschaft "
background-color". Gib sie in die geschweifte Klammer gefolgt von einem Doppelpunkt (":"), dem Wert für die helle blaue Farbe und einem Semikolon (";") ein. - Ändere nun auch die Schriftfarbe. Dazu benutzt man die Eigenschaft "
color". Diese musst du wieder in die geschweifte Klammern nach dem Selektor für<body>'reinschreiben. - Schau dir nun das Ergebnis im Browser an. Was fällt dir auf? Ist alles auf der Seite nun formatiert?
- Wir wollen nun auch die Verweise (
<a>) formatieren. Ändere die Verweisfarbe auf dunkelgrün. Welchen Selektor musst du nun benutzen? - Für besonders Flinke: Bei SelfHTML findest du eine Beschreibung zu Pseudoformaten. Probiere verschiedene Formatierungen aus. Ändere dann die Formatierung bei "
:hover" so, dass der Hintergrund einen hellen roten Ton hat. - Es bestehen schon 3 fertige Layouts für diese Seite. Sie werden im
<head>-Bewreich integriert:
<link rel="STYLESHEET" type="text/css" href="css/layoutX.css" />
Ersetze das "X" durch "1", "2" oder "3" und schau dir die Ergebnisse an. Wo sind die *.css-Dateien hierzu? - Für den Unterricht in der nächsten Stunde: css_selektoren.zip
