Wissen, wie’s geht. Leseprobe Mit CSS gestalten Sie Ihre Website. Lernen Sie hier, was Cascading Stylesheets sind und wie Sie sie sinnvoll einbinden. Außerdem ent- hält diese Leseprobe das Inhaltsverzeichnis und das gesamte Stich- wortverzeichnis des Buchs. »Was sind Cascading Stylesheets?« »HTML und CSS« »Das erste Stylesheet« »Einbinden von Stylesheets in HTML-Dateien« »Layout mit CSS« Inhaltsverzeichnis Index Der Autor Leseprobe weiterempfehlen Kai Laborenz CSS – Das umfassende Handbuch 825 Seiten, gebunden, 3. Auflage 2015 39,90 Euro, ISBN 978-3-8362-3876-2 www.rheinwerk-verlag.de/3932 3876.book Seite 17 Montag, 30. November 2015 4:25 16 Kapitel 1 1 1 Was sind Cascading Stylesheets? 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 Buches. Cascading Stylesheets sind Formatvorlagen für Websites. Zusammen mit dem HTML-Markup eines Dokuments ergeben sie das Aussehen einer Website. Sie kön- nen sich Stylesheets wie die »Kleidung« einer Website vorstellen – ohne Stylesheets sieht man nur den nackten unformatierten Inhalt. Wie bei Kleidung kann eine Web- site mit verschiedenen Stylesheets völlig unterschiedlich aussehen (siehe Abbil- dung 1.1) – auch wenn das HTML-Gerüst und die Inhalte gleich bleiben. Abbildung 1.1 Ein HTML-Dokument erhält durch CSS unterschiedliche Kleidung. 1.1 Warum sollten Sie Stylesheets nutzen? Die Arbeit mit Cascading Stylesheets gibt uns Webdesignern die Möglichkeit, mehr Flexibilität im Design zu erreichen und dabei gleichzeitig die grundlegenden Kon- 17 3876.book Seite 18 Montag, 30. November 2015 4:25 16 3876.book Seite 19 Montag, 30. November 2015 4:25 16 1 Was sind Cascading Stylesheets? 1.1 Warum sollten Sie Stylesheets nutzen? zepte von HTML zu bewahren. Die Trennung von Struktur und Gestaltung ist dabei CSS Minion 1 auch eine wichtige Voraussetzung, um barrierefreie Websites zu erstellen, die auch Ein völlig anderes – nicht weniger beeindruckendes – Beispiel der Leistungsfähigkeit für Menschen mit Behinderungen zugänglich sind und von Suchmaschinen optimal von CSS liefert die Webentwicklerin Rachel Bull (@rachel_web) mit einem rein aus wahrgenommen werden. CSS und HTML erstellten Minion (siehe Abbildung 1.3). Das Original und den CSS- Abgesehen von dieser Trennung von Struktur und Gestaltung erweitern Stylesheets Code finden Sie auf Codepen: http://codepen.io/rachel_web/pen/pjzowB/ die Möglichkeiten gewaltig, Elemente eines HTML-Dokuments zu formatieren. Neben einfachen gestalterischen Optionen wie der Einstellung von Schriftart, -größe und -farbe, die auch mit dem alten HTML-Tag <font> beeinflusst werden können, erlauben Cascading Stylesheets beispielsweise die Einstellung der Zeilenhöhe, eines Einzugs und weiterer typografischer Parameter. Auch Größe und Platzierung von Elementen lassen sich nahezu beliebig bestimmen. Mithilfe von CSS3-Eigenschaften können inzwischen auch Elemente verändert (z. B. verzerrt oder gedreht) und Ani- mationen 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 hat, die vollständig per CSS gestaltet wird. Er for- derte andere Entwickler auf, ihre Gestaltungsvorschläge beizusteuern. Inzwischen sind es Hunderte von Varianten, und die Bandbreite der Designs ist atemberau- bend (siehe Abbildung 1.2)! Und als Grundlage dient immer dieselbe HTML-Datei (www.csszengarden.com)! Abbildung 1.3 Nicht mit einem 3D-Animationsprogramm erstellt, sondern reines CSS: ein »Minion« Der Einsatz von Cascading Stylesheets bietet für Webentwickler eine Reihe von Vor- teilen: ̈ Einfachere HTML-Dokumente Durch die Trennung von Struktur und Gestaltung 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 Gestaltungsmöglichkeiten, die mit reinem HTML nicht zu erreichen sind. Insbesondere das Ein- und Ausblenden von Elementen und die Möglichkeiten von Animationen eröffnen neue Horizonte. Abbildung 1.2 Die Vielfalt von CSS entdecken – im »CSS Zen Garden« 18 19 3876.book Seite 20 Montag, 30. November 2015 4:25 16 3876.book Seite 21 Montag, 30. November 2015 4:25 16 1 Was sind Cascading Stylesheets? 1.3 Wie sieht ein Stylesheet aus? ̈ Zugängliche Websites 1 Durch den Verzicht auf Formatierungsanweisungen im HTML-Code werden Ihre Seiten auch für Menschen mit Behinderungen oder speziellen Anzeigegeräten (z. B. Smartphones oder WebTV) besser zugänglich. Gesetzliche Bestimmungen, die zumindest für staatliche Websites Barrierefreiheit fordern, sind in Deutsch- land seit Jahren gültig. Und der Anteil mobiler Surfer nimmt immer weiter zu. ̈ Zukunftssicherheit Erfreulicherweise orientieren sich die wichtigsten Browserhersteller inzwischen recht gut 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. ̈ 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, inter- nationale Standards bei der Erstellung berücksichtigt zu haben. 1.2 Das CSS-Prinzip Abbildung 1.4 Aus HTML-Code und Stylesheet entsteht die Webseite. Einem HTML-Dokument kann durch eine Änderung des Stylesheets ein anderes Aussehen gegeben werden. Für unterschiedliche Endgeräte, z. B. einen normalen 1.3 Wie sieht ein Stylesheet aus? Desktop-Webbrowser und ein Smartphone, können unterschiedliche Stylesheets be- Um Ihnen schon einmal einen Eindruck zu verschaffen, wie Cascading Stylesheets reitgestellt werden. Benutzer können sogar eigene Stylesheets verwenden, beispiels- denn nun aussehen, hier ein einfaches Beispiel einer Webseite, die CSS als Gestal- weise um bei einer Sehschwäche die Schriftgröße heraufzusetzen. tungsmittel nutzt: Die wesentliche Idee von Cascading Stylesheets ist es, Angaben zu Struktur und Aus- <!DOCTYPE HTML> sehen einer Website so weit wie möglich zu trennen (siehe Abbildung 1.4): <html> ̈ HTML-Auszeichnungen sind nur für die logische bzw. semantische Beschreibung eines Dokuments zuständig. <head> ̈ Zugeordnete Stilanweisungen sorgen für die Formatierung und das Aussehen des <title>Ein einfaches Dokument</title> Dokuments. <style> h1 { ̈ Die Inhalte stehen als reiner Text zwischen den HTML-Tags. font-family: "Courier New", Courier, monospace; font-size: 200%; } 20 21 3876.book Seite 22 Montag, 30. November 2015 4:25 16 3876.book Seite 23 Montag, 30. November 2015 4:25 16 1 Was sind Cascading Stylesheets? 1.3 Wie sieht ein Stylesheet aus? p { Für den Absatz <p> haben wir 1 font-family: Verdana, Geneva, sans-serif; font-family: Verdana, Geneva, sans-serif color: #666; } und </style> </head> color: #666666 <body> Es ist nicht schwer, sich vorzustellen, was die Anweisungen bewirken: font-family <h1>Ein einfaches Dokument</h1> legt die Schriftart fest, font-size die Größe und color die Schriftfarbe für die betref- <p>Dieses Dokument wird per CSS formatiert</p> fenden Elemente in hexadezimaler Schreibweise. </body> Schriftarten mit Alternative </html> Ohne zu weit vorzugreifen, kann ich hier auch verraten, was die Nennung von meh- Listing 1.1 (Sehr) einfache Webseite mit CSS reren Schriftarten in einer font-family-Anweisung bedeutet: Da ja im Web lange Zeit nur Schriften verwendet werden konnten, die auf dem Rechner des Benutzers Im Webbrowser sieht das aus wie in Abbildung 1.5. 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 Mac- Systemen verbreitete Schriftart). Falls auch diese Schrift nicht zu finden ist, sorgt die letzte Anweisung sans-serif dafür, dass zumindest eine serifenlose Schrift verwen- det 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 serifen- lose Schriften). Sie werden später sehen, dass die Einschränkung auf bestimmte Schriften, die Desi- gner jahrelang gequält hat, dank CSS inzwischen nicht mehr gilt! Abbildung 1.5 Einfache Webseite im Browser Chrome Probieren Sie es selbst einmal aus: Nehmen Sie das Listing 1.1 aus dem Download- Sie erkennen sicher im unteren Teil des Listings den HTML-Code, der hier nur aus paket (oder schreiben Sie den Code schnell ab – so viel ist es ja nicht), und ändern Sie den Elementen <h1> (Überschrift erster Ordnung) und <p> (Absatz) besteht. die Schriftgröße oder Farbe. Können Sie auch der Überschrift eine andere Farbe Die per CSS bewirkte Formatierung wird im oberen Teil des Dokuments zwischen zuweisen? den Tags <style> und </style> definiert.