Frank L. Schad Responsive Webdesign mit CSS3 · Frank L. Schad Responsive Webdesign mit CSS3 Das...

28

Transcript of Frank L. Schad Responsive Webdesign mit CSS3 · Frank L. Schad Responsive Webdesign mit CSS3 Das...

Frank L. Schad

Responsive Webdesign mit CSS3Das umfassende CSS-Lernbuch

Ein Webmasters Press Lernbuch

Version 1.0.5 vom 04.04.2019

Autorisiertes Curriculum für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm

— www.webmasters-europe.org —

Inhaltsverzeichnis13Vorwort

15Einführung

17CSS verwenden

17Einbinden von CSS-Vorgaben in den Dateikopf

18Allgemeine Syntax

19Schriftarten definieren

20Schriftgröße ändern

21Maßeinheiten

22Kommentare

22Browserspezifische Eigenschaften mit Herstellerpräfix (Vendor Specific Prefix)

23Fragen zur Selbstkontrolle

26Einbindung von CSS und Testen von Websites

26Auslagerung der CSS-Vorgaben in eine externe Datei

27Inline-Formatierungen

28Webseiten testen

28Der Web Inspector

29Mobilgeräte testen

30Fragen zur Selbstkontrolle

31Die Verwendung von Farben

31Das RGB-Farbmodell

31Hexadezimale Farbzuweisung

34Dezimale Farbzuweisung

35Fragen zur Selbstkontrolle

37Allgemeine Vorgaben für Ihr Dokument

37Vererbung

38Hintergrundfarben definieren

39Die Maßeinheiten em und rem

42Überschriften formatieren

43Gleichzeitiges Anwenden von Eigenschaften auf mehrere Elemente

43Die Darstellung von strong, b, em und i definieren

44Weitere Eigenschaften zur Textformatierung

45Den Zeilenabstand erhöhen

45Automatische Silbentrennung aktivieren

47Hyperlinks formatieren

47Das grundlegende Erscheinungsbild von Links ändern

47Verschiedene Zustände für Hyperlinks definieren

49Zusammenfassung

50Fragen zur Selbstkontrolle

1

2

2.1

2.2

2.3

2.4

2.5

2.6

2.7

2.8

3

3.1

3.2

3.3

3.3.1

3.3.2

3.4

4

4.1

4.2

4.3

4.4

5

5.1

5.2

5.3

5.4

5.5

5.6

5.7

5.7.1

5.7.2

5.8

5.8.1

5.8.2

5.9

5.10

53Klassen und IDs

53Klassen

55IDs

56Fragen zur Selbstkontrolle

58Layoutbereiche festlegen und gestalten

58HTML-Tags für das Seitenlayout

61Außenabstände

62Festlegen von Konturen

62Konturstärke

62Randstil

63Konturfarbe

63Innenabstände

64Listen gestalten

64Verwendung von Listen im modernen Webdesign

65Ändern oder Entfernen der Listenpunkte

67Entfernen des Einzugs

67Ändern der Anzeigeart von Elementen

73Fragen zur Selbstkontrolle

74Hintergründiges

74Einbinden von Hintergrundbildern

75Kachelmuster steuern

75Hintergrundbild positionieren

76Wasserzeicheneffekt

76Zusammenfassen der Eigenschaften

77Größenangaben für Hintergrundbilder

78Praxisbeispiel: Buttons mit Rollover-Effekt

83Here Be Dragons: Farbverläufe in CSS

84Lineare Farbverläufe

87Radiale Farbverläufe

88Look Mom, No Graphics! — CSS-basierte Rollover-Buttons

92Fragen zur Selbstkontrolle

94Transitions

94Weiche Übergänge erzeugen

96Fragen zur Selbstkontrolle

98Einfache Layouts gestalten

98Größenangaben

98Angaben für Breite und Höhe

99Übersatz

101Mindest- und Maximalgrößen

101Die Maßeinheiten vw und vh

102Elemente nebeneinanderstellen mit float

102Textumfluss für Bilder

105Einfache Layouts mit float

106Fragen zur Selbstkontrolle

6

6.1

6.2

6.3

7

7.1

7.2

7.3

7.3.1

7.3.2

7.3.3

7.4

7.5

7.5.1

7.5.2

7.5.3

7.6

7.7

8

8.1

8.1.1

8.1.2

8.1.3

8.1.4

8.1.5

8.1.6

8.2

8.2.1

8.2.2

8.2.3

8.3

9

9.1

9.2

10

10.1

10.1.1

10.1.2

10.1.3

10.1.4

10.2

10.2.1

10.2.2

10.3

107Bedingte Selektoren

107Positionsbedingte Auswahlen

107Descendant Selector (Nachfahren-Selektor)

108Child Selector (Kind-Selektor)

109Adjacent Sibling Selector (Selektor für »benachbarte Geschwister«)

110General Sibling Selector (Selektor für alle nachfolgenden Geschwister)

110Attribut-Selektoren

110Einfacher Attribut-Selektor

111Tag mit Attribut-Selektor

111Wertabhängige Attribut-Selektoren

112Der Stern-Selektor

112Fragen zur Selbstkontrolle

116Positionierung von Elementen

116position: static

117position: relative

117position: absolute

121position: fixed

122position: sticky

125Fragen zur Selbstkontrolle

128Web Fonts

128Goodbye, Arial!

128Unterstützte Formate

129Konvertierung

131Einbettung mit CSS

135Awesome Icons — Font Awesome

137Fragen zur Selbstkontrolle

139Pseudoklassen und Pseudoelemente

139Pseudoklassen

139Elemente automatisch durchzählen

143Tricks mit :target

148Überblick Pseudoklassen

149Pseudoelemente

150Initialen und andere typographische Effekte

151Eigene Auswahlfarben definieren

151Pseudoelemente für automatisch erzeugten Inhalt

157Eigene Radiobuttons und Checkboxen gestalten mit :checked und ::before

161Fragen zur Selbstkontrolle

162Flexible Layouts mit Flexbox

162Grundlagen des Flexbox-Modells

163Ein Flex-Layout gestalten

165Alle Flexbox-Eigenschaften im Überblick

165Eigenschaften für den Container

167Eigenschaften für die enthaltenen Elemente

169Fragen zur Selbstkontrolle

11

11.1

11.1.1

11.1.2

11.1.3

11.1.4

11.2

11.2.1

11.2.2

11.2.3

11.3

11.4

12

12.1

12.2

12.3

12.4

12.5

12.6

13

13.1

13.1.1

13.1.2

13.1.3

13.2

13.3

14

14.1

14.1.1

14.1.2

14.1.3

14.2

14.2.1

14.2.2

14.2.3

14.3

14.4

15

15.1

15.2

15.3

15.3.1

15.3.2

15.4

175Grafische Effekte

175Transformationen

175Elemente drehen, skalieren, neigen und versetzen

176Unterschiede zu anderen Eigenschaften

177Den Transformationspunkt festlegen

1783D-Transformationen

182Filter

183Unterschiede zu anderen Eigenschaften

184Variation: backdrop-filter

188Mischmodi

191Masken

192Bildmasken

194Clipping

195Fragen zur Selbstkontrolle

197Keyframe-Animationen

197Das Grundprinzip von CSS-Animationen

197Animation definieren

197Die @keyframes-Regel

198Keyframes definieren

200Animation zuweisen

203Einzelbildanimationen

204Fragen zur Selbstkontrolle

207Dynamisches CSS mit Kalkulationen und Variablen

207Rechnen mit calc( )

210Variablen in CSS

211Definition von Variablen

211Zuweisung von Variablen

212Geltungsbereich von Variablen

212Praxisbeispiel

214Fragen zur Selbstkontrolle

216Grundlagen des Responsive Designs

217Anpassung des Viewports

218Mobile Webseiten testen

218Live Test

219Testen im Browser

221Fluid Content, Liquid Layouts und Flexible Images

221Fragen zur Selbstkontrolle

222Media Queries

222Wann werden Media Queries benötigt?

222Medientypen und Media Queries

225Verwendung von Media Queries: Breakpoints

227Wo werden Media Queries eingefügt?

228Fragen zur Selbstkontrolle

229Praxisbeispiel: Das Store-Layout für Mobilgeräte optimieren

229Den Viewport anpassen

231Die Seitenleiste

16

16.1

16.1.1

16.1.2

16.1.3

16.1.4

16.2

16.2.1

16.2.2

16.3

16.4

16.4.1

16.4.2

16.5

17

17.1

17.2

17.2.1

17.2.2

17.3

17.4

17.5

18

18.1

18.2

18.2.1

18.2.2

18.2.3

18.2.4

18.3

19

19.1

19.2

19.2.1

19.2.2

19.3

19.4

20

20.1

20.2

20.3

20.4

20.5

21

21.1

21.2

234Die gefloateten Bilder

234Das Produkt-Raster

234Der Banner-Text

234Der Header

243Fine-tuning des Layouts

244Lösungen der Übungsaufgaben

247Lösungen der Wissensfragen

272Index

21.3

21.4

21.5

21.6

21.7

And out of things uncoloured and transparent, we canrepresent unto you all several colours. […] Also all coloura-tions of light; all delusions and deceits of the sight, in figu-res, magnitudes, motions, colours all demonstrations ofshadows. […] We have also houses of deceits of the senses;where we represent all manner of feats of juggling, falseapparitions, impostures, and illusions; and their fallacies.[…] These are, my son, the riches of Salomon's House.

Francis Bacon, New Atlantis, London 1627

Vorwort

Wenn man in Foren und Blogs über Cascading Style Sheets liest, dann lassen sich die Autoren nicht sel-ten zu solch poetischen Schwärmereien wie »The Beauty and Harmony of CSS« oder »CSS Zen Garden«hinreißen. Und in der Tat, die Herausarbeitung spezifischer Formen und Farben aus dem rohen, unbe-hauenen HTML-Quader gleicht einem alchimistischen Transformationsprozess: Objekte lassen sich freiauf einer Webseite positionieren und mit Konturen, Hintergrundfarben, Bildern, Schatten und Transpa-renzen versehen. Neben der Schriftart können Texte mit verschiedenen typografischen Mitteln wie Zei-lenabstand, Laufweite, Initialen oder Spaltensatz formatiert werden. Elemente können interaktiv gestal-tet werden, sodass sie ihr Aussehen verändern, ein- und ausblenden oder animiert werden, wenn manmit der Maus darüberfährt.

Doch über Jahrzehnte hinweg waren PCs die einzigen Geräte, mit denen man Websites betrachtenkonnte. Zwar gab es schon immer unterschiedliche Bildschirmgrößen, es gab Laptops und Netbooks,doch waren die Unterschiede nie so groß, dass sie ernsthaft Probleme bereitet hätten. Deshalb hattendie meisten Websites statische Größen. Sie hatten feste Breiten in Pixeln, man sprach gar von »Stan-dardauflösungen« (960–980px), und einige Designerinnen und Designer gingen sogar so weit, starreWeblayouts in Photoshop zu entwerfen und diese dann 1:1 in HTML und CSS umzusetzen (oder umset-zen zu lassen).

Als im Jahre 2007 das iPhone auf den Markt kam, änderte sich alles. Es war das erste Smartphone mitvergleichsweise großem Touchscreen-Bildschirm und einem Webkit-Browser, mit dem sich Websitesgenauso betrachten ließen wie auf einem Desktop-PC — zumindest theoretisch. Denn bald war klar,dass es doch ein enormer Unterschied ist, ob man eine Website an einem großen Flachbildschirm mitder Maus bedient oder — in der U-Bahn oder im Café sitzend — auf einem kleinen Smartphone-Displaymit den Fingern. Der Ruf nach anpassungsfähigen Layouts wurde laut.

Damit waren nicht nur skalierbare Layouts mit flexibler Breite gemeint — die gab es schon länger —sondern solche, die sich auf unterschiedlich großen Displays tatsächlich von selbst »umbauen«, um sichoptimal an die Gegebenheiten anzupassen: Menüleisten werden auf Icons minimiert, Seitenleisten wer-den nach unten versetzt oder eingeklappt, Inhalte aufs Wesentliche reduziert.

»Für Grafiker liegt eine Herausforderung in der konzeptionellen Abgrenzung zu klassischem Printdesign: Wo eseinst noch gewohnt und gelernt war, dass das Ausgabemedium eine bestimmte und unveränderbare Größe hatte,muss nun akzeptiert werden, dass starre Gestaltungen für eine Website nicht mehr übertragbar sind.«

de.wikipedia.org/wiki/Responsive_Webdesign, 19.02.2018

Ethan Marcotte nannte dieses Prinzip im Jahr 2010 erstmals Responsive Webdesign(https://alistapart.com/article/responsive-web-design). Möglich machen das neue Techniken, die CSS3zur Verfügung stellt, allen voran die sogenannten Media Queries. Seitdem gilt:

»If it's not responsive, it's not web design.«

Andrew Clarke 2011 auf Twitter (https://twitter.com/Malarkey/status/113221032634093569)

Doch auch in anderen Bereichen hat CSS3 das Webdesign revolutioniert. »Flash-Killer« wurde es biswei-len genannt. Transformationen wie in Illustrator, Filter wie in Photoshop und vor allem eben Animatio-nen wie in Flash (nun ja, fast) sind nun möglich — ganz ohne JavaScript-Programmierung.

Dieser Kurs gibt Ihnen einen fundierten Einblick in diese verschiedenen neuen Techniken. Mit umfang-reichen Übungen lernen Sie zunächst die grundlegenden Funktionen von CSS kennen. Im zweitenSchritt lernen Sie, responsive Weblayouts mit Media Queries zu gestalten. Voraussetzung für diesen Kurssind fundierte HTML-Kenntnisse.

An vielen Stellen im Text finden sich Tipps, Hinweise und Warnungen vor Stolperfallen. Diese sindbesonders hervorgehoben.

Dieser Kurs enthält zahlreiche Übungen und Praxisbeispiele. Die Übungsdateien sowie Screen-shots oder Demo-Dateien zum besseren Verständnis finden Sie im Begleitmaterial zu diesem Kurs.Einen Hinweis auf die jeweilige Datei finden Sie bei den entsprechenden Übungen.

Frank L. SchadNürnberg, im September 2018

1Einführung

In dieser Lektion lernen Sie

➤ was Cascading Style Sheets sind und warum sie die Grundlage für für modernes Webdesignsind.

Wenn Sie schon einmal mit einem Layout- oder Textverarbeitungsprogramm gearbeitet haben, kennenSie vielleicht das Konzept der Stilvorlagen oder Formatvorlagen: Für die verschiedenen Bereiche IhresDokuments wie Absätze, Überschriften, Listen, Tabellen etc. werden verschiedene Eigenschaften(Schriftart, Schriftgröße, Farbe, Einzug usw.) definiert und diesen Bereichen einmal zugewiesen. WennSie nun die Eigenschaften einer Stilvorlage ändern, ändern sich automatisch alle Elemente im gesamtenDokument, die auf dieser Stilvorlage basieren.

Mit dem Wunsch, Webseiten immer aufwendiger und präziser zu gestalten, wurde dieses Konzept inForm von Cascading Style Sheets (CSS) auf HTML-Seiten übertragen. Mit CSS ist es möglich, universelleFormatierungsvorgaben für jedes einzelne Element Ihrer HTML-Seiten zu machen und diese Vorgabenzentral zu verwalten und nach Belieben zu ändern. Sie können mit Hilfe von CSS HTML-Elemente exaktauf Ihrer Seite positionieren, Größen, Randstile, Schrift- und Hintergrundfarben festlegen und Objektesogar auf verschiedenen Ebenen übereinander platzieren.

Weiterhin erlauben CSS die Vergabe unterschiedlicher Stilvorlagen für verschiedene Ausgabegeräte. Soist es z.B. möglich, für die Darstellung einer Webseite im Browser eine andere CSS-Vorgabe zu definie-ren als für die Ausgabe auf einem Drucker — dieselbe Webseite sieht dann im Druck komplett andersaus als im Browser. Es lassen sich auch CSS-Vorgaben für die Sprachausgabe definieren, die festlegen,mit welcher Stimme oder Betonung eine Webseite von einem Screenreader vorgelesen wird.

Unter dem Begriff Responsive Webdesign bekannt geworden ist eine Weiterentwicklung dieses Kon-zepts: Weblayouts lassen sich nun dynamisch an die Bildschirmgröße verschiedener Mobilgeräte anpas-sen — ist z.B. der Bildschirm zu schmal für eine Menüleiste, wird diese einfach auf ein Icon minimiert.

Mit Hilfe von CSS lässt sich also eine vollständige Trennung zwischen Form und Inhalt einer Seite errei-chen: Die Darstellung ist abhängig vom Ausgabemedium, der Inhalt ist stets derselbe und muss nichtverändert werden.

Aus diesem Grund haben CSS die ohnehin spärlichen Formatierungsmöglichkeiten, die HTML einst bot,mittlerweile vollständig ersetzt. Sie sollten daher in HTML nur noch strukturelle Tags verwenden, die dasDokument in logisch gegliederte Bereiche aufteilen (Navigation, Kopfbereich, Inhaltsbereich, Fußzeile,Überschriften, Absätze, Listen etc.). Die Vorgaben, wie diese Elemente genau auszusehen haben, wer-den mit Hilfe von CSS gemacht.

Neben CSS gibt es noch eine Reihe weiterer Stylesheet-Sprachen für unterschiedliche Zwecke (z.B.XSL1), für Webseiten haben sich jedoch CSS vollständig durchgesetzt. CSS sind selbst kein HTML, son-dern können als Ergänzung des HTML-Standards betrachtet werden.

Die erste CSS-Version von 1996 war noch recht rudimentär und beschränkte sich weitgehend auf Text-formatierung. Die Version 2 von 1998 beinhaltete eine Reihe neuer Funktionen wie absolute, relativeund feste Positionierung von Elementen, den z-Index (Ebenentiefe), das Konzept der Medientypen und

1. https://de.wikipedia.org/wiki/Extensible_Stylesheet_Language

15

neue Eigenschaften für Text. Die aktuelle Version ist CSS3 mit zahlreichen neuen, faszinierenden Funk-tionen, wie z. B. Animationen, Übergänge (Transitions) oder Filter.

Gleichzeitig stehen aber bereits weitere neue Features — allgemein »CSS4« genannt — in den Startlö-chern, die von modernen Browsern wie Chrome, Safari oder Firefox bereits zu einem großen Teil unter-stützt werden. Die neuen Gestaltungsmöglichkeiten von CSS4 haben jedoch in einigen Fällen noch denStatus eines Working Drafts (Arbeitsentwurf ), was bedeutet, dass noch nicht endgültig geklärt ist, obund wie genau sie letztlich verwendet werden. Hierauf wird im Kurs an den entsprechenden Stellen hin-gewiesen.

Ein Wort zur Versionierung

Ich verwende in diesem Kurs bisweilen die Bezeichnungen »CSS3« oder »CSS4«. Diese Versionsbezeich-nungen sind in der Online-Community weit verbreitet und dienen der groben Orientierung, treffen abereigentlich nicht mehr zu. Seit CSS3 werden die verschiedenen Bereiche der CSS-Spezifikation — Typo-graphie, Farben, Selektoren, Positionierung etc. — in Module aufgeteilt und separat versioniert. Sogibt es z.B. die CSS-Module Text, Fonts, Color, Grid Layout, Positioning, Pseudo-Elements, Filter Effects, Box-Model, Backgrounds & Borders, Selectors, Animations, Transforms, Media Queries usw., die sich in jeweilsunterschiedlichen Entwicklungsstadien befinden und somit auch unterschiedliche Versionsnummern— sogenannte Levels — tragen. So arbeitet die CSS Working Group zurzeit z.B. an Selectors Level 4 mitneuen Funktionen für die Selektoren, die auch bereits Teil von Level 3 (und 2 und 1) waren. SelectorsLevel 4 ist somit nicht CSS4, sondern Version 4 einer einzelnen Spezifikation — ein kleiner Teil von CSS.2

2. vgl. »Why there is no CSS4 — explaining CSS Levels« (https://rachelandrew.co.uk/archives/2016/09/13/why-there-is-no-css4-explaining-css-levels/)

16 1 Einführung

2.1

1

2

2CSS verwenden

In dieser Lektion lernen Sie

➤ wie Sie CSS in den Kopf einer HTML-Datei einbinden.➤ die allgemeine Syntax von CSS kennen.➤ Näheres über die Verwendung von Schriftarten.➤ welche Maßeinheiten Sie in CSS verwenden können.➤ wie Sie in CSS Kommentare einfügen.➤ das fragwürdige Konzept der Vendor Specific Prefixes kennen.

Sie haben prinzipiell drei Möglichkeiten, mit CSS Gestaltungsvorgaben für Ihre HTML-Dokumente zudefinieren:

1. Sie notieren die CSS-Vorgaben in einer separaten Datei, die mit beliebig vielen HTML-Dokumentenverknüpft werden kann. Die Vorgaben gelten dann für alle verknüpften Seiten, und Änderungen indieser Datei wirken sich auf alle verknüpften Seiten aus.

2. Sie notieren Ihre CSS-Vorgaben im <head> einer HTML-Datei. In diesem Fall gelten die Vorgabennur für diese eine Seite.

3. Sie notieren den CSS-Code direkt im <body> Ihrer HTML-Datei nur für ein bestimmtes Element,z. B. einen Absatz.

Diese drei Möglichkeiten können Sie nach Belieben kombinieren. Es versteht sich von selbst, dass dieerste Variante dem Grundgedanken von CSS am ehesten entspricht und deshalb im Normalfall benutztwerden sollte. Die anderen Varianten ergänzen höchstens die Vorgaben in der externen Datei. Dadurchkönnen Sie Ihre allgemeinen Vorgaben für eine spezielle Datei (z.B. Ihre Startseite) oder ein Element(z. B. eine besondere Grafik auf Ihrer Seite) erweitern oder außer Kraft setzen.

Einbinden von CSS-Vorgaben in den Dateikopf

Der Übersichtlichkeit halber wollen wir uns im Folgenden als Erstes Variante 2 näher ansehen: Wir notie-ren unsere CSS-Vorgaben in den head unserer HTML-Datei.

Übung 1: CSS-Vorgaben in den Dateikopf einbinden

Erstellen Sie sich dafür eine neue HTML-Datei mit dem gewohnten Grundgerüst und füllenSie den body mit etwas Text in mehreren Absätzen <p> .

Notieren Sie dann folgenden HTML-Code in den head Ihres Dokuments:

<head><title>Seite mit Stylesheets</title>

<style media="screen"></style>

</head>

Mit <style> definieren Sie in normaler HTML-Syntax den Bereich, in dem Sie Ihre CSS-Vorgaben notie-ren. Dieser Tag teilt dem Browser mit, dass nun CSS-Vorgaben folgen.3

17

2.2

Mit dem optionalen Attribut media können Sie das Ausgabemedium bestimmen, für das Ihre Vorgabengelten sollen. Neben der hier verwendeten Wertzuweisung

➤ media="screen" für die Bildschirmdarstellung

gibt es weitere mögliche Angaben, z. B.

➤ media="print" für den Druck (die Browser verwenden diese CSS-Vorgaben, wenn der Anwenderdie Webseite ausdrucken möchte),

➤ media="speech" für die Sprachausgabe,

➤ media="all" für alle Medien.

Durch die Definition mehrerer style-Bereiche mit jeweils unterschiedlichen media-Attributen können SieCSS-Vorgaben für verschiedene Ausgabemedien definieren. Das könnte dann etwa so aussehen:

<head><title>Seite mit Stylesheets</title>

<style media="all">/* Hier stehen allgemeine Formatierungsvorgaben */

</style>

<style media="screen">/* Hier stehen Formatierungsvorgaben für die Bildschirmdarstellung */

</style>

<style media="print">/* Hier stehen Formatierungsvorgaben für den Druck */

</style></head>

Codebeispiel 1 Definition verschiedener CSS-Vorgaben für unterschiedliche Ausgabemedien

In diesem Fall würden Sie unter all diejenigen Vorgaben notieren, die für sämtliche Ausgabemediengleichermaßen gelten (z.B. die verwendeten Schriftarten). In den anderen style-Bereichen notieren Siedann die speziellen Vorgaben nur für diese Ausgabegeräte (z.B. Farben für die Bildschirmdarstellung,Graustufen für den Druck).

Für unser Beispiel bleiben wir jedoch erst einmal bei media="screen" (Bildschirmdarstellung).

Innerhalb des <style> -Tags folgen nun unsere CSS-Vorgaben. Zu diesem Zeitpunkt verlassen wirHTML. Alles, was zwischen <style><style> und </style></style> steht, ist CSS-Syntax und folgt eigenenRegeln!

Allgemeine Syntax

Die einfachste Möglichkeit, mit CSS allgemeine Formatierungsvorgaben für Ihr Dokument zu definie-ren, ist die Zuweisung von Eigenschaften zu vorhandenen HTML-Tags. Sie können mit CSS jedem belie-bigen HTML-Element beliebige Eigenschaften zuweisen. Dies geschieht über sogenannte Selektoren.

Beispiel

Sie möchten alle Absätze <p> in Ihrem Dokument mit der Schriftart Helvetica formatieren. Dazu notie-ren Sie folgenden Code:

3. Früher war noch die Angabe des MIME-Typs text/css erforderlich. Dieser ist die Standardeinstellung für Stylesheets und wirdnicht mehr benötigt.

18 2 CSS verwenden

2.3

<style media="screen">p { font-familyfont-family: Helvetica; }

</style>

Notieren Sie dazu einfach p, allerdings ohne die aus HTML gewohnten spitzen Klammern. Diese habenin CSS nichts zu suchen! Auf diese Weise benutzen Sie einen Selektor für den p-Tag, Sie wählen also denp-Tag zur Formatierung aus. Das bedeutet, dass Sie sämtlichen p-Tags in Ihrem Dokument die gewählteSchriftart zuweisen.

Die Eigenschaften, die Sie für den p-Tag vergeben wollen, notieren Sie dahinter in geschweifte Klam-mern {{ }} . Innerhalb dieser Klammern steht die Eigenschaft, die Sie ändern wollen (hier die font-family), und nach einem Doppelpunkt der Wert, den Sie dieser Eigenschaft zuweisen wollen (hier Hel-vetica). Danach folgt ein Semikolon, nach dem Sie dem p-Tag weitere Eigenschaften zuweisen können.Die allgemeine Syntax für CSS-Vorgaben sieht also folgendermaßen aus:

selektor { eigenschafteigenschaft: wert; }

Dieses Konzept der Selektoren, Eigenschaften und Werte ist in etwa vergleichbar mit der objektorien-tierten Arbeitsweise in vektorbasierten Grafikprogrammen wie z. B. Adobe Illustrator:

Abb. 1 Vektorgrafikprogramm: Der Kreis ist zur Bearbeitung selektiert (rechteckiger Rahmen). Daneben die »Aussehen«-Palette mitden Eigenschaften des Objekts.

Schriftarten definieren

Die Schriftarten, die Sie auf diese Weise auf Ihren Seiten verwenden, müssen auf dem System desAnwenders installiert sein! Deshalb müssen Sie bei der Definition von Schriften darauf achten, dass Sienur solche verwenden, die auf allen gängigen Systemen (Windows, Mac, Linux) vorhanden sind. Es gibtnur wenige Schriftarten, auf die das zutrifft:

➤ Verdana, Helvetica und Arial als serifenlose Schriften,

➤ Times bzw. Times New Roman als Serifenschrift,

➤ Courier als Festbreitenschrift.

Daneben gibt es noch eine Reihe von Schriften, bei denen Sie davon ausgehen können, dass sie aufeinem Großteil der Systeme installiert sind. Dazu gehören z.B. Trebuchet MS, Tahoma, Georgia undLucida Grande (Mac) bzw. Lucida Sans Unicode (Windows).

Sie sollten aber in jedem Fall immer mehrere Schriftalternativen in der von Ihnen bevorzugten Rei-henfolge anbieten. Der Browser verwendet dann die erste, die er auf dem System findet:

font-family: "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;

Die Schriftalternativen werden durch Kommas getrennt. Schriftnamen, die Leerzeichen enthalten,müssen Sie dabei in Anführungszeichen setzen. Die letzte Angabe sans-serif (französisch für »serifen-

2.3 Schriftarten definieren 19

2.4

los«) ist keine bestimmte Schriftart, sondern sozusagen die »letzte Notlösung«: Wenn beim Anwenderkeine der genannten Schriften installiert ist, sucht sich der Browser selbst eine (beliebige) serifenloseSchrift aus.

Web Fonts

Eine zweite, völlig andere Möglichkeit ist, die gewünschte Schriftart auf dem Webserver zu hinterlegen,sodass sie der Browser bei Bedarf herunterladen kann. In diesem Fall können Sie jede beliebigeSchriftart verwenden (sofern Sie die geeignete Lizenz dafür haben). Bei diesen »Web Fonts« gibt esaber einige Besonderheiten zu beachten. Wir werden uns später noch näher damit beschäftigen.

Schriftgröße ändern

Neben der Schriftart wollen wir nun noch die Schriftgröße ändern. Dazu notieren wir nach dem Semi-kolon eine weitere Eigenschaft für den p-Selektor:

<style media="screen">p {

font-familyfont-family: Helvetica, Arial, sans-serif;font-sizefont-size: 14px;

}</style>

Dabei ist es in der Praxis unerheblich, in welcher Reihenfolge Sie die Eigenschaften notieren — ob Siealso zuerst die font-family oder die font-size definieren.

Theoretisch spielt es auch keine Rolle, ob Sie die Eigenschaften untereinander oder nebeneinanderschreiben. Auch die Verwendung von Leerzeichen ist optional. Obiges Beispiel könnte also auch so aus-sehen:

p{font-familyfont-family:Helvetica,Arial,sans-serif;font-sizefont-size:14px;}

Sie sehen jedoch, dass dadurch die Lesbarkeit erheblich erschwert wird.

20 2 CSS verwenden

2.5

Es ist daher in der Praxis unerlässlich, Ihren CSS-Code mit Einrückungen und Leerzeichen über-sichtlich zu strukturieren. Als Standard gilt:

➤ Nach dem Selektor steht ein Leerzeichen.

➤ Jede Eigenschaft wird in eine neue Zeile geschrieben.

➤ Auch die schließende geschweifte Klammer wird in eine eigene Zeile geschrieben.

➤ Alle Eigenschaften innerhalb der geschweiften Klammern werden mit einem Tabulator einge-rückt.

➤ Nach der Eigenschaft mit dem Doppelpunkt steht ein Leerzeichen.

Daraus ergibt sich folgende allgemeine Syntax:

selektor1 {eigenschafteigenschaft: wert;eigenschafteigenschaft: wert;eigenschafteigenschaft: wert;

}

selektor2 {eigenschafteigenschaft: wert;eigenschafteigenschaft: wert;

}

Auf diese Weise erhalten Sie »Blöcke« von Selektoren mit übersichtlichen »Listen« der verwende-ten Eigenschaften.

Maßeinheiten

In CSS müssen Sie Maßeinheiten für die Werte angeben (im obenstehenden Beispiel Pixel px). Zwi-schen dem Wert und der Maßangabe darf kein Leerzeichen stehen! Sie können in CSS verschiedeneMaßeinheiten verwenden, je nach Art der Anwendung und den Fähigkeiten des Ausgabemediums. Fol-gende Maßeinheiten können Sie in CSS verwenden:

px Pixel

% Prozent

em Vielfaches der Schriftgröße (eigentlich ein Geviert, die Breite des Großbuchstabens M in der aktuell verwen-deten Schriftgröße, daher der Name)

rem wie em, aber ausgehend von der verwendeten Schriftgröße im document root (dazu später mehr)

ex Höhe des Kleinbuchstabens x in der verwendeten Schriftgröße (in der Praxis kaum verwendet)

vw, vh viewport width, viewport height: prozentualer Anteil der Breite bzw. Höhe des Anzeigefensters (viewport)

vmin,vmax

prozentualer Anteil der Breite oder Höhe des Viewports, je nachdem, welche von beiden kleiner (vmin) bzw.größer (vmax) ist

in Zoll (Inch)

cm Zentimeter

mm Millimeter

pt Punkt (= 1/72 Zoll)

2.5 Maßeinheiten 21

2.6

2.7

pc Pica (= 1/6 Zoll)

deg Grad (degree), z.B. für Farbverlaufswinkel oder Rotationen

Die Maßeinheiten mm, cm, in, pt und pc sind ausschließlich für den Druck interessant und für dieDarstellung am Monitor ungeeignet. Für die Bildschirmdarstellung in einem Browser liegt natürlichzunächst die Verwendung von Pixeln oder Prozentangaben nahe. Pixel sind hier übrigens die einzigeabsolute Größe; die Angabe von Punktgrößen pt würde zu untertschiedlichen Schriftgrößen aufWindows-, Apple- und Android-Geräten führen.

Interessant im Zusammenhang mit flexiblen Layouts sind aber vor allem auch die Maßeinheiten embzw. rem. Dies sind relative Maße, die sich auf die aktuell mit font-sizefont-size angegebene Schriftgrößebeziehen. Dabei entspricht 1em der aktuellen Schriftgröße: Ist diese mit 12px angegeben, so bedeutet1em soviel wie 12px. Ist die Schriftgröße 15px, so steht 1em für 15px usw. Mehr dazu finden Sie inAbschnitt 5.3.

Kommentare

Ebenso wie in HTML können Sie auch in Ihren CSS-Quelltext Kommentare einfügen, um z.B. Merkhilfen,Beschreibungen, Hinweise oder Anmerkungen zu notieren, oder auch um Codebereiche »auszukom-mentieren« (zu deaktivieren). Die Syntax ist allerdings eine andere als in HTML:

/* Dies ist ein Kommentar in CSS */

/* Dies ist einmehrzeiliger Kommentar */

Eingeleitet wird der Kommentar mit einem Schrägstrich und einem Sternchen /* (ohne Leerzeichendazwischen). Mit der umgekehrten Zeichenfolge */ beenden Sie den Kommentar wieder. Anfang undEnde des Kommentars müssen nicht in der gleichen Zeile stehen, es sind auch beliebig viele Leerzeilenerlaubt. Kommentare dürfen jedoch nicht ineinander verschachtelt werden.

Browserspezifische Eigenschaften mit Herstellerpräfix (Ven-dor Specific Prefix)

Irgendwann haben die Browserhersteller damit begonnen, neue CSS-Eigenschaften oder -Werte zuunterstützen, die sich noch im experimentellen Stadium befinden, also noch bevor sie vom W3C offiziellverabschiedet worden sind. Um jedoch bereits im Vorfeld Konflikte zu vermeiden, die sich bei eineretwaigen Änderung der Spezifikationen seitens des W3C ergeben könnten, werden diese experimen-tellen Features als proprietäre, browserspezifische Features implementiert, die mit einem sogenanntenVendor Specific Prefix (Herstellerpräfix) versehen werden müssen.

Dazu gehört z.B. die automatische Silbentrennung hyphens, die wir uns später natürlich noch näheransehen werden. Wenn Sie solche Eigenschaften verwenden, müssen Sie sie bis auf Weiteres mindes-tens dreimal notieren: Einmal speziell für Webkit-basierte Browser (Safari, Chrome …) mit dem Präfix-webkit, einmal für Mozilla-Browser (Firefox) mit -moz und einmal ohne Präfix für Browser, die bereitsden offiziellen W3C-Standard verwenden. Im Einzelfall kommt auch noch der Internet-Explorer (-ms fürMicrosoft) hinzu. Auf solche Eigenschaften wird im Kurs jeweils hingewiesen.

22 2 CSS verwenden

2.8

Beispiel:

p {-webkit-hyphens-webkit-hyphens: auto;-moz-hyphens-moz-hyphens: auto;-ms-hyphens-ms-hyphens: auto;hyphenshyphens: auto;

}

Codebeispiel 2 Automatische Silbentrennung für Absätze aktivieren

Beachten Sie die Bindestriche vor -webkit, -moz und -ms.

Bei einigen Features ist auch tatsächlich der Fall eingetreten, dass das W3C zwischenzeitlich die Spezi-fikation geändert hat. In diesem Fall müssen Sie die Eigenschaften bzw. Werte für einen oder mehrereBrowser unterschiedlich notieren:

header {background-imagebackground-image: -webkit-linear-gradient(0deg, red, blue);background-imagebackground-image: -moz-linear-gradient(0deg, red, blue);background-imagebackground-image: linear-gradient(90deg, red, blue);

}

Codebeispiel 3 Horizontaler Farbverlauf von links nach rechts. Der Verlaufswinkel muss unterschiedlich notiert werden, um dasselbeErgebnis zu erhalten.

Der vorläufig extremste Fall der »Prefix Hell« ist das Flexbox-Layout (vgl. Lektion 15):

div {/* Darstellung als Flexbox: */displaydisplay: -ms-flexbox;displaydisplay: -moz-box;displaydisplay: -webkit-box;displaydisplay: -webkit-flex;displaydisplay: flex;

/* gleichmäßige Verteilung der Elemente in einer Flexbox: */-ms-flex-pack-ms-flex-pack: justify;-moz-box-pack-moz-box-pack: justify;-webkit-box-pack-webkit-box-pack: justify;-webkit-justify-content-webkit-justify-content: space-between;justify-contentjustify-content: space-between;

}

Alle CSS-Eigenschaften und Werte, die mit einem solchen herstellerspezifischen Präfix beginnen,sind natürlich nicht valide, d.h. der W3C-Validator kennt sie nicht und markiert sie als Fehler. Die-sen Umstand können Sie hier natürlich ignorieren.

Fragen zur Selbstkontrolle

1. Wie lautet die CSS-Definition, um einem Absatz folgende Eigenschaften zuzuweisen: Schriftgröße15 Pixel, Schriftfamilie Arial?

2. Welche Schriftarten können Sie auf Ihren Webseiten verwenden?

3. Was bedeutet die Angabe font-family: sans-serif ?

4. Wie erzeugen Sie in CSS einen Kommentar?

2.8 Fragen zur Selbstkontrolle 23

5. Wie binden Sie CSS-Vorgaben in Ihr Dokument ein, die nur für die Bildschirmdarstellung gelten sol-len?

Bitte ankreuzen:

a. <style media="display">b. <style media="screen">c. <style media="monitor">d. <style media="computer">e. <style media="device">

6. Wie binden Sie CSS-Vorgaben in Ihr Dokument ein, die nur für den Druck gelten sollen?

Bitte ankreuzen:

a. <style media="press">b. <style media="paper">c. <style media="print">d. <style media="printer">e. <style media="grayscale">

7. Wie weisen Sie einem Absatz die Schriftart Lucida Grande zu?

Bitte ankreuzen:

a. p { font-family: Lucida Grande; }b. p { font-family: 'Lucida Grande'; }c. p { font-family: LucidaGrande; }d. p { font-family: "Lucida Grande"; }e. p { font-family: Lucida-Grande; }

8. Was sind Sans-Serif-Schriften?

Bitte ankreuzen:

a. Schriften mit kleinen Linien (›Füßchen‹) am Ende der Buchstabenstriche (sogenannte Antiqua-Schriften).

b. Schriften ohne die kleinen Linien (›Füßchen‹) am Ende der Buchstabenstriche (sogenannteGrotesk-Schriften).

9. Wie setzen Sie die Schriftgröße eines Absatzes auf 16 Pixel?

Bitte ankreuzen:

a. p { font-size: 16 pixels; }b. p { font-size: 16 px; }c. p { font-size: "16px"; }d. p { font-size = 16 px; }e. p { font-size: 16px; }f. p = font-size: 16px;

g. p: font-size = 16px;

10. Welche Maßeinheiten stehen in CSS zur Verfügung?

Bitte ankreuzen:

a. ps

24 2 CSS verwenden

b. px

c. em

d. rem

e. vw

f. vh

g. m

h. cm

i. mm

j. pt

k. in

l. %

m. cl

n. deg

o. μ

11. Was bedeuten Präfixe wie -webkit und -moz in CSS-Eigenschaften und -werten?

Bitte ankreuzen:

a. Solche Eigenschaften und Werte werden nur von Touchscreen-Geräten des jeweiligen Herstel-lers erkannt.

b. Solche Eigenschaften und Werte sind offizielle W3C-Empfehlungen für bestimmte Hersteller.

c. Solche Eigenschaften und Werte werden nur von Browsern erkannt, die die jeweiligeRendering-Engine verwenden.

d. Solche Eigenschaften und Werte werden benötigt, um Websites auf Mobilgeräten anzuzeigen.

2.8 Fragen zur Selbstkontrolle 25

3.1

1

2

3

3 Einbindung von CSS und Testenvon Websites

In dieser Lektion lernen Sie

➤ wie Sie Ihre CSS-Vorgaben in eine externe Datei auslagern.➤ wie Sie CSS ›inline‹ verwenden.➤ wie Sie Webseiten testen können.

Auslagerung der CSS-Vorgaben in eine externe Datei

Sobald Sie mehr als eine HTML-Seite mit denselben CSS-Vorgaben formatieren möchten (was fastimmer der Fall sein dürfte), lohnt sich die Auslagerung in eine externe Datei. Änderungen, die Sie in die-ser Datei vornehmen, wirken sich dann auf alle HTML-Dokumente aus, die mit dieser Datei verknüpftsind.

Externe CSS-Dateien sind ebenfalls reine Textdateien und tragen die Endung .css. Diese Dateien ent-halten ausschließlich Ihre CSS-Vorgaben (Selektoren, Eigenschaften und Werte) und keinerlei HTML-Syntax. Auch das Element <style> und die HTML-Kommentarzeichen <!-- --> dürfen Sie hiernicht notieren.

Im head all Ihrer HTML-Dateien, auf die Sie diese CSS-Vorgaben anwenden wollen, notieren Sie anstelledes <style> -Blocks nur noch folgende Codezeile (die Reihenfolge der Attribute rel, href und mediaspielt wie immer keine Rolle):

<link rel="stylesheet" href="styles.css" media="screen"/>

Mit <link> leiten Sie den Verweis auf die externe Datei ein. Mit rel (engl. relationship, Beziehung)geben Sie an, dass sich der Link auf ein Stylesheet bezieht. Mit href geben Sie nach den üblichen Regelnden Pfad zu der externen Datei an. Der Name der CSS-Datei (hier styles.css) ist natürlich frei wählbar. Mitmedia schließlich definieren Sie wieder das Ausgabemedium, für das die CSS-Vorgaben gedacht sind.

Übung 2: Erste Schritte

Öffnen Sie die HTML-Datei first_steps.html aus dem gleichnamigen Ordner im Begleitmaterialin Ihrem Editor. Die Datei enthält Blindtext mit einer Überschrift <h1> , einigen Absätzen <p> ,einigen fetten <strong> und einigen kursiven <em> Textbereichen sowie ein paar Hyper-links <a href="#"> .

Legen Sie eine zweite, leere Textdatei ohne jeglichen Inhalt an und speichern Sie sie als sty-les.css im selben Verzeichnis wie Ihre HTML-Datei. Achten Sie in Ihrem Editor darauf, dass dieDatei ebenfalls mit UTF-8 kodiert ist.

Notieren Sie im head der HTML-Datei folgenden Code:

<link rel="stylesheet" href="styles.css" media="screen"/>

26 3 Einbindung von CSS und Testen von Websites

4

3.2

Notieren Sie nun in der externen CSS-Datei styles.css Ihre Formatierungsvorgaben:

p {font-familyfont-family: Helvetica, Arial, sans-serif;font-sizefont-size: 14px;

}

Speichern Sie die CSS-Datei und öffnen Sie die HTML-Datei im Browser. Die HTML-Datei über-nimmt sofort die Formatierungen.

Mit Hilfe des <link> -Tags können Sie nun beliebig viele HTML-Seiten mit dieser einen CSS-Datei ver-knüpfen. Änderungen an der CSS-Datei wirken sich dadurch auf alle verknüpften HTML-Seiten aus. Siesollten sich wegen der damit verbundenen Effizienz diese Methode zur Regel machen, wo immer esgeht.

Auch Ihre CSS-Dateien sollten Sie natürlich mit UTF-8 kodieren. In diesem Fall können Sie optionaleine zusätzliche Information für den Browser notieren, welche Kodierungsmethode Sie verwendethaben. Dies geschieht mit Hilfe einer sogenannten @-Regel. @-Regeln sind sozusagen die »Meta-Tags« für CSS-Dateien.

Notieren Sie ganz am Anfang Ihrer CSS-Datei folgende Zeile:

@charset@charset "utf-8";

Nach charset steht kein Doppelpunkt!

Wenn Sie in einem Projekt mehr als eine CSS-Datei verwenden, darf diese @-Regel allerdings nurin der zuerst referenzierten CSS-Datei stehen, da der Browser alle CSS-Dateien aneinanderhängtund sie so zu einer einzigen zusammenfasst.

Inline-Formatierungen

Die dritte Methode, CSS-Vorgaben zu definieren, ist die Inline-Formatierung. Diese Methode ist dieineffektivste und sollte nur in Ausnahmefällen verwendet werden.

Mit dieser Methode gelten Ihre CSS-Vorgaben nur für ein einzelnes HTML-Element und werden direktin den HTML-Code geschrieben. Sie eignen sich höchstens dafür, allgemeine CSS-Vorgaben für ein spe-zielles Element zu überschreiben.

Dafür steht Ihnen das HTML-Attribut style zur Verfügung, das Sie auf jeden beliebigen HTML-Tag anwen-den können. Als Wert werden diesem style-Attribut dann die CSS-Eigenschaften nach CSS-Syntax zuge-wiesen. Der HTML-Tag dient hier gewissermaßen als »Selektor«.

Beispiele

<h2 style="color: orange;">Überschrift</h2>die Überschrift wird orange dargestellt.

<p style="font-size: 18px; font-weight: bold;">Text</p>der Absatz hat eine Schriftgröße von 18px und wird fett dargestellt.

Wie erwähnt können Sie die drei Möglichkeiten der Einbindung von CSS problemlos miteinander kom-binieren. Es ist also möglich, die für die gesamte Website gültigen Vorgaben in eine externe Datei aus-zulagern, die zusätzlichen, für eine einzelne HTML-Seite benötigten Vorgaben im <head> der betref-

3.2 Inline-Formatierungen 27

3.3

3.3.1

fenden Seite zu platzieren, und in einzelnen Elementen noch zusätzliche Inline-Formatierungen vorzu-nehmen. Die externen Formatierungen sind dann so lange gültig, bis sie von den internen überschrie-ben werden. Es existiert hier also eine »kaskadierende« Hierarchie.

Webseiten testen

Websites werden heute auf einer Vielzahl unterschiedlicher Geräte mit unterschiedlichen Features und(sehr) unterschiedlichen Bildschirmgrößen benutzt. Es ist daher unerlässlich, dass Sie Ihre Website aufso vielen verschiedenen Geräten, Systemen und Browsern wie möglich testen. Verlassen Sie sich dabeinicht darauf, dass Ihre Besucher immer die jeweils neueste Version der Browser benutzen!

Der Web Inspector

Die meisten modernen Browser wie Firefox, Chrome und Safari beinhalten Entwicklerwerkzeuge, die beider Erstellung und beim Testen von Webseiten enorm hilfreich sein können. Dazu gehört vor allem derWeb Inspector, den Sie per Rechtsklick auf ein beliebiges Element auf einer Webseite über den BefehlElement-Informationen (Safari), Element untersuchen (Firefox) bzw. Untersuchen (Chrome) aufru-fen können. Mit dem Web Inspector lassen sich Seitenelemente umfangreich analysieren. (In Safari istder Web Inspector standardmäßig deaktiviert, lässt sich aber leicht über die Voreinstellungen aktivieren:Einstellungen→ Erweitert→Menü »Entwickler« in der Menüleiste anzeigen.)

Abb. 2 Ein Rechtsklick auf ein Element einer Webseite öffnet den Web-Inspector: Unten links der HTML-Quelltext, rechts daneben diespezifischen CSS-Eigenschaften des ausgewählten Elements.

Der Web-Inspector zeigt den HTML- und CSS-Quelltext der Seite bzw. des ausgewählten Elements an.Dieser Quelltext ist editierbar: Änderungen, die Sie im Web-Inspector vornehmen, werden direkt aufder Webseite angezeigt (aber natürlich nicht gespeichert ;-).

Nützlich bei der Fehlersuche ist zudem die Anzeige der berechneten CSS-Eigenschaften (computed sty-les). Hier werden alle CSS-Eigenschaften angezeigt, die der Browser auf ein bestimmtes Element anwen-det — unabhängig davon, ob diese explizit angegeben, von einem anderen Element geerbt oder vomBrowser standardmäßig angewendet wurden.

28 3 Einbindung von CSS und Testen von Websites

3.3.2 Mobilgeräte testen

Emulatoren für den Desktop

Da Websites nach wie vor hauptsächlich auf Desktop-Computern entwickelt werden, stellen die Herstel-ler mobiler Systeme kostenlose Emulations-Software zur Verfügung, mit der man direkt am Desktop-Rechner testen kann, wie eine Website auf dem entsprechenden Mobilgerät aussehen würde:

Emulator Verfügbar für Bezugsquelle

iOS Simulator (iPhone, iPad, Watch) Mac Bestandteil von Xcode(erhältlich im Mac App Store4)

Android Emulator Win/Mac/Linux Bestandteil von Android Studio,developer.android.com/sdk/5

Opera Mobile Emulator Win/Mac/Linux www.opera.com/developer/mobile-emulator6

Abb. 3 iPhone auf dem iOS-Simulator für Mac: In der Mitte der Startbildschirm, links und rechts verschiedene Websites

Geräteansicht im Browser

Eine einfachere, jedoch naturgemäß weniger verlässliche Methode hierfür bieten die Desktop-Versio-nen moderner Browser. Dort können Sie die Standardansicht umschalten und an verschiedene Mobil-geräte anpassen:

➤ Firefox: Menü Extras→Web-Entwickler→ Bildschirmgrößen testen,

➤ Chrome: Menü Anzeigen→ Entwickler→ Entwicklertools→ Button Toggle device toolbar,

➤ Safari: Menü Entwickler→ In Modus ›Responsive Design‹ wechseln.

Dieses Feature werden wir uns in Lektion 19 näher ansehen.

4. https://itunes.apple.com/de/app/xcode/id497799835

5. http://developer.android.com/sdk/

6. http://www.opera.com/developer/mobile-emulator

3.3 Webseiten testen 29

3.4

Abb. 4 Die Seite http://www.csszengarden.com im Modus ›Responsive Design‹ von Safari.

Fragen zur Selbstkontrolle

1. Wie binden Sie ein externes Stylesheet in eine HTML-Seite ein?

2. Wie werden interne Stylesheets in den Dateikopf von HTML-Seiten eingebettet?

3. Wie formatieren Sie einen einzelnen HTML-Tag mit Inline-CSS?

30 3 Einbindung von CSS und Testen von Websites