close

Anmelden

Neues Passwort anfordern?

Anmeldung mit OpenID

1 Was sind Cascading Stylesheets?

EinbettenHerunterladen
Im ersten Kapitel erkläre ich Ihnen, was sich hinter dem Begriff
»Cascading Stylesheets« verbirgt und welche Vorteile Sie davon haben,
mit Stylesheets zu arbeiten. Außerdem sehen Sie das erste Stylesheet
dieses Buchs.
1
Was sind Cascading Stylesheets?
Cascading Stylesheets sind Formatvorlagen für Websites. Zusammen mit dem
HTML-Markup eines Dokumentes ergeben sie das Aussehen einer Website. Sie
können sich Stylesheets wie die »Kleidung« einer Website vorstellen – ohne Stylesheets sieht man nur den nackten unformatierten Inhalt der Website. Wie bei
Kleidung kann eine Website mit verschiedenen Stylesheets völlig unterschiedlich
aussehen – auch wenn das HTML-Gerüst und die Inhalte gleich bleiben.
Abbildung 1.1 Ein HTML-Dokument erhält durch CSS unterschiedliche Kleidung
19
1
Was sind Cascading Stylesheets?
1.1
Warum sollten Sie Stylesheets nutzen?
Die Arbeit mit Cascading Stylesheets gibt uns Webdesignern die Möglichkeit,
gleichzeitig mehr Flexibilität im Design zu erreichen und dabei die grundlegenden Konzepte von HTML zu bewahren. Die Trennung von Struktur und Gestaltung ist dabei die wichtigste Voraussetzung, um barrierefreie Websites zu erstellen, die auch für Menschen mit Behinderungen zugänglich sind.
Neben dieser Trennung von Struktur und Gestaltung erweitern Stylesheets die
Möglichkeiten gewaltig, Elemente eines HTML-Dokumentes zu formatieren.
Neben der Schriftart, -größe und Schriftfarbe, die auch mit dem alten HTML-Tag
<font> beeinflusst werden können, erlauben Cascading Stylesheets beispielsweise die Einstellung der Zeilenhöhe, eines Einzugs sowie weiterer typografischer Parameter. Auch Größe und Platzierung von Elementen lassen sich nahezu
beliebig bestimmen. Mit Hilfe von CSS3-Eigenschaften können sogar Animationen erzeugt werden.
»CSS Zen Garden«
Welche Möglichkeiten eine konsequente Trennung von Inhalt und Design bietet,
demonstriert eindrucksvoll das Projekt »CSS Zen Garden«, in dem Designer Dave
Shea eine HTML-Seite bereitgestellt, die vollständig per CSS gestaltet wird. Er fordert andere Entwickler auf, ihre Gestaltungsvo§rschläge beizusteuern. Inzwischen
sind es Hunderte von Varianten, und die Bandbreite der Designs ist atemberaubend! Und als Grundlage dient immer dieselbe HTML-Datei (http://www.csszenð
garden.com/, Linkcode 0036)!
Abbildung 1.2 Die Vielfalt von CSS entdecken – im »CSS Zen Garden«
20
Warum sollten Sie Stylesheets nutzen?
»CSS Homer Simpson«
Ein völlig anderes – nicht weniger beeindruckendes – Beispiel der Leistungsfähigkeit von CSS liefert der Webdesigner Román Cortéz mit dem rein aus CSS und
HTML erstellten Porträt von Homer Simpson, siehe Abbildung 1.3. Das Original
sowie den CSS-Code finden Sie auf seiner Website: http://www.romancorð
tes.com/blog/homer-css/ (Linkcode 0501).
Abbildung 1.3 »Homer Simpson on CSS«
Der Einsatz von Cascading Stylesheets bietet für Webentwickler eine Reihe von
Vorteilen:
̈
Einfachere HTML-Dokumente
Durch die Trennung von Gestaltung und Inhalt wird eine HTML-Seite kleiner
und übersichtlicher. Spätere Änderungen werden einfacher.
̈
Mehr Kontrolle
Die CSS-Anweisungen erlauben mehr Kontrolle über die Formatierung eines
Dokuments. Gerade typografisch wichtige Anweisungen, wie beispielsweise
die Angabe der Zeilenhöhe, sind mit reinem HTML gar nicht möglich.
̈
Neue Möglichkeiten
Mit CSS ergeben sich neue Gestaltungsmöglichkeiten, die mit reinem HTML
nicht zu erreichen sind. Insbesondere das Ein- und Ausblenden von Elementen und die Möglichkeiten fixierter Bereiche eröffnen neue Horizonte.
21
1.1
1
Was sind Cascading Stylesheets?
̈
Zugängliche Websites
Durch den Verzicht auf Formatierungsanweisungen im HTML-Code werden
Ihre Seiten auch für Menschen mit Behinderungen oder speziellen Anzeigegeräten (z. B. iPhone oder WebTV) besser zugänglich. Zugänglichkeit oder Barrierefreiheit (englisch: accessibility) wird in den nächsten Jahren auch in
Deutschland für Websites immer wichtiger werden. Gesetzliche Bestimmungen, die zumindest für staatliche Websites Barrierefreiheit fordern, sind
bereits gültig.
̈
Zukunftssicherheit
Erfreulicherweise orientieren sich die wichtigsten Browserhersteller immer
mehr an den Standards für Websites, die vom Standardisierungsgremium
W3C (World Wide Web Consortium) veröffentlicht werden. CSS ist ein solcher
Standard. Websites, die sich an diese Standards halten, müssen nicht befürchten, mit der nächsten Browsergeneration nicht mehr zu funktionieren, wie es
beim Einsatz von HTML-Tricks schon einmal passieren kann.
̈
Qualitätsbeweis
Für professionelle Webentwickler ist auch die Frage der Gewährleistung
wichtig. Falls es einmal zum Streit um die Qualität einer Website kommt,
woran lässt sich dann die Güte von HTML-Code erkennen? Ein Browser, mit
dem eine Website schrecklich aussieht, lässt sich immer finden. Da kann es
sehr hilfreich sein, internationale Standards bei der Erstellung berücksichtigt
zu haben.
1.2
Das CSS-Prinzip
Einem HTML-Dokument kann durch eine Änderung des Stylesheets ein anderes
Aussehen gegeben werden. Für unterschiedliche Endgeräte, z. B. einen normalen
Desktop-Webbrowser und ein Mobiltelefon, können unterschiedliche Stylesheets bereitgestellt werden. Benutzer können sogar eigene Stylesheets verwenden, beispielsweise um bei einer Sehschwäche die Schriftgröße heraufzusetzen.
Die wesentliche Idee von Cascading Stylesheets ist es, Angaben zu Struktur und
Aussehen einer Website so weit wie möglich zu trennen:
̈
HTML-Befehle sind nur für die logische bzw. semantische Beschreibung eines
Dokuments zuständig.
̈
Zugeordnete Stilanweisungen sorgen für die Formatierung und das Aussehen
des Dokuments.
̈
Die Inhalte stehen als normaler Text zwischen den HTML-Tags.
22
Wie sieht ein Stylesheet aus?
Webseite
HTML-Code
Stylesheet
Abbildung 1.4 Aus HTML-Code und Stylesheet entsteht die Webseite
1.3
Wie sieht ein Stylesheet aus?
Um ihnen schon einmal einen Eindruck zu verschaffen, wie Cascading Stylesheets denn nun aussehen, hier ein einfaches Beispiel einer Webseite, die CSS als
Gestaltungsmittel nutzt:
1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2:
<html>
3:
<head>
4:
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
5:
<title>Ein einfaches Dokument</title>
6:
<style><!-7:
h1 {
8:
font-family: "Courier New", Courier, monospace;
9:
font-size: 200%;
10: }
23
1.3
1
Was sind Cascading Stylesheets?
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
p {
font-family: Verdana, Geneva, sans-serif;
color: #666666;
}
--></style>
</head>
<body>
<h1>Ein einfaches Dokument</h1>
<p>Dieses Dokument wird per CSS formatiert</p>
</body>
</html>
Listing 1.1 (Sehr) einfache Webseite mit CSS
Im Webbrowser sieht das aus wie in Abbildung 1.5.
Abbildung 1.5 Einfache Webseite im Browser Chrome
Sie erkennen sicher im unteren Teil des Listings den HTML-Code, der hier nur
aus den Elementen <h1> (Überschrift erster Ordnung) und <p> (Absatz) besteht.
Die per CSS bewirkte Formatierung wird im oberen Teil des Dokuments zwischen den Tags <style> und </style> definiert. Dort werden für die im HTMLBereich vorhandenen Elemente entsprechende Eigenschaften notiert. Für das
Element <h1> sind das:
font-family: "Courier New", Courier, monospace
und
font-size: 200%
Für den Absatz <p> haben wir
font-family: Verdana, Geneva, sans-serif
24
Wie sieht ein Stylesheet aus?
und
color: #666666
Es ist nicht schwer, sich vorzustellen, was die Anweisungen bewirken: fontfamily legt die Schriftart fest, font-size die Größe und color die Schriftfarbe
für die betroffenen Elemente in hexadezimaler Schreibweise.
Schriftarten mit Alternative
Ohne zu weit vorzugreifen, kann ich hier auch verraten, was die Nennung von mehreren Schriftarten in einer font-family-Anweisung bedeutet: Da ja im Web (bis vor
kurzem) nur Schriften verwendet werden konnten, die auf dem Rechner des Benutzers installiert waren, ermöglicht die Aufzählung mehrerer Schriftarten Alternativen.
font-family: Verdana, Geneva, sans-serif
bedeutet daher, dass der Browser die Schrift Verdana verwenden soll. Falls diese
nicht auf dem Rechner zu finden ist, soll er es mit Geneva versuchen (eine auf MacSystemen verbreitete Schriftart). Falls auch diese Schrift nicht zu finden ist, sorgt die
letzte Anweisung sans-serif dafür, dass zumindest eine serifenlose Schrift verwendet wird – diejenige, die im Browser des Benutzers als serifenlose Standardschrift eingestellt ist. (Serifen sind die kleinen »Häkchen« an den Enden der Buchstaben, wie sie
z. B. bei der Schrift Times zu finden sind. Verdana und Arial sind dagegen serifenlose
Schriften.)
Sie werden später sehen, dass die Einschränkung auf bestimmte Schriften, die Designer jahrelang gequält hat, dank CSS inzwischen nicht mehr gilt!
Probieren Sie es selbst einmal aus: Nehmen Sie das Listing von der DVD (oder
schreiben Sie den Code schnell ab – so viel ist es ja nicht), und ändern Sie die Schriftgröße oder Farbe. Können Sie auch der Überschrift eine andere Farbe zuweisen?
Etwas allgemeiner formuliert: Eine CSS-Anweisung besteht immer aus zwei Teilen – dem Selektor und der Deklaration. Der Selektor beschreibt, was (also welches Element, z. B. <p>) formatiert werden soll, und die Deklaration bestimmt, wie
dies geschehen soll (also z. B. welche Farbe das Element haben soll). Dabei befindet
sich links stets der Selektor und rechts die Deklaration in geschweiften Klammern.
Selektor
Eigenschaft
Wert
Deklaration
Abbildung 1.6 Aufbau einer CSS-Anweisung
25
1.3
1
Was sind Cascading Stylesheets?
Die Deklaration (in geschweiften Klammern notiert) selbst besteht wiederum aus
zwei Teilen: der Eigenschaft und dem dieser Eigenschaft zugeordneten Wert –
getrennt durch einen Doppelpunkt.
Die in diesem Beispiel verwendeten Eigenschaften und Werte sind natürlich nur
ein kleiner Ausschnitt der Möglichkeiten von CSS. Sie fragen sich vielleicht, ob
man die Schriftgröße nicht auch in Pixeln angeben kann (kann man) oder ob es
andere Möglichkeiten gibt, Farben anzugeben, als die etwas unintuitive hexadezimale Schreibweise (gibt es). Aber bevor wir weiter in die Details von CSS einsteigen, müssen wir uns ein wenig mit HTML befassen.
26
Document
Kategorie
Internet
Seitenansichten
34
Dateigröße
291 KB
Tags
1/--Seiten
melden