Leseprobe. »CSS kennenlernenselektoren, Einheiten und Farben in CSSDas Box-ModellOrdnung halten und aufräumen« Inhaltsverzeichnis. Index.

Transkript

1 Wissen, wie s geht. Leseprobe In seinem Buch erklärt Ihnen Peter Müller unterhaltsam und kurzweilig die Grundlagen und Raffinessen von CSS. In dieser Leseprobe legen Sie die Basis für ein umfangreiches Verständnis von CSS. Außerdem können Sie einen Blick in das vollständige Inhalts- und Stichwortverzeichnis des Buches werfen.»css kennenlernenselektoren, Einheiten und Farben in CSSDas Box-ModellOrdnung halten und aufräumen«inhaltsverzeichnis Index Der Autor Leseprobe weiterempfehlen Peter Müller Einstieg in CSS Webseiten gestalten mit HTML und CSS 524 Seiten, broschiert, 2. Auflage ,90 Euro, ISBN

2 Kapitel 7 CSS kennenlernen Schriften, Farben und Hyperlinks Worin Sie Cascading Style Sheets kennenlernen, indem Sie Text formatieren, einige Farben definieren und Hyperlinks gestalten. 7 Die Themen im Überblick: 왘 Ein Stylesheet ist eine Sammlung von Formatvorlagen, Seite 105 왘 Überblick: CSS und das Gestalten der HTML-Kästchen, Seite 106 왘 Das erste eigene Stylesheet, Seite 107 왘 Farben für Hintergrund und Schrift definieren, Seite 109 왘 Schriftgestaltung mit»font-family«und»font-size«, Seite 113 왘 Textgestaltung: Die Kontaktadresse im Fußbereich, Seite 115 왘 Hyperlinks gestalten, Seite 116 왘 Styles können an drei verschiedenen Stellen definiert werden, Seite 121 왘 Auf einen Blick, Seite 123 CSS (kurz für Cascading Style Sheets) ist eine Sprache, die speziell zur Gestaltung von HTML-Elementen erfunden wurde und die Sie in den folgenden Kapiteln von Grund auf kennenlernen. 7.1 Ein Stylesheet ist eine Sammlung von Formatvorlagen Was genau sind diese Cascading Style Sheets? Ein Blick auf die einzelnen Teile des Begriffes hilft, das Ganze besser einzuordnen: 왘 Ein Style ist eine Formatvorlage, eine gespeicherte Gestaltungsanweisung. 왘 Ein Sheet ist ein Blatt Papier oder im übertragenen Sinn eine Sammlung. 왘 Ein Stylesheet ist also nichts anderes als eine Sammlung von Formatvorlagen, mit denen HTML-Elemente gestaltet werden. 105

3 7 CSS kennenlernen Schriften, Farben und Hyperlinks 7.3 Das erste eigene Stylesheet Und Cascading? Laut Duden ist eine»kaskade«unter anderem ein»stufenförmiger Wasserfall«oder ein»wagemutiger Sprung«. Beides stimmt, sagt in Bezug auf CSS aber eher wenig aus. Was es mit dem Cascading auf sich hat, ist vorab schwierig zu erklären, weshalb ich dieses Unterfangen auf später verschiebe und ihm dann dafür gleich ein ganzes Kapitel widme (siehe Kapitel 15,»Der Browser und das CSS: Kaskade, Vererbung oder Standardwert«). 7.3 Das erste eigene Stylesheet In diesem Abschnitt erstellen Sie im Übungsordner mit den HTML-Dateien und der Logo-Grafik ein leeres Stylesheet, schreiben einen CSS-Kommentar hinein und verbinden es dann mit den Beispielseiten index.html und kontakt.html. 7.2 Überblick: CSS und das Gestalten der HTML-Kästchen Im Schnelldurchlauf in Kapitel 2 haben Sie bereits gesehen, dass CSS die mit HTML erstellten rechteckigen Kästchen gestaltet. Die Gestaltungsmöglichkeiten kann man grob in folgende Bereiche unterteilen: Schriften und Farben: den Inhalt der Kästchen gestalten Abstände und Rahmenlinien: die Kästchen selbst gestalten Positionierung: die Kästchen auf der Webseite verschieben Mehrspaltige Layouts: die Kästchen nebeneinander in Spalten anordnen In dieser Reihenfolge werden Sie CSS auf den folgenden Seiten kennenlernen. Zunächst beschäftigen Sie sich mit der Gestaltung der HTML-Elemente selbst: In Kapitel 7 und Kapitel 8 geht es zunächst um den Inhalt der Kästchen, also um Text, Farben und Links. Ab Kapitel 9 lernen Sie mit dem Box-Modell die Gestaltung von Abständen und Rahmenlinien kennen und gestalten unter anderem ein Kontaktformular und eine horizontale Navigation. Danach lernen Sie dann, wie man HTML-Elemente auf Webseiten verschiebt: In den Kapiteln 16 bis 19 lernen Sie die grundlegenden Techniken zur Positionierung der Kästchen auf einer Webseite und deren Anwendung. Ab Kapitel 20 folgt schließlich die Erstellung von Layouts für kleine und große Bildschirme. Zwischendurch gibt es immer mal wieder Wissenswertes zu den grundlegenden Konzepten von CSS, damit Sie das Gelernte auch wirklich verstehen. Aber los geht es ganz sinnig mit dem ersten eigenen Stylesheet Ein Stylesheet erstellen und einen CSS-Kommentar schreiben Im ersten Schritt erstellen Sie zunächst eine leere Datei, in der später die auch Styles genannten CSS-Regeln gespeichert werden. ToDo: Ein Stylesheet und einen CSS-Kommentar erstellen 1. Erstellen Sie mit Ihrem Lieblingseditor eine leere Datei. 2. Speichern Sie die Datei unter dem Namen bildschirm.css, und zwar im selben Ordner wie die HTML-Seiten. 3. Fügen Sie in der ersten Zeile der Datei folgenden CSS-Kommentar ein: /* Stylesheet für die Beispielsite aus "Einstieg in CSS" */ 4. Speichern Sie die Datei. Der Dateiname des Stylesheets sollte den üblichen Regeln für Dateinamen auf Webseiten entsprechen (keine Leerstellen, keine Sonderzeichen und Kleinschreibung) und die Endung.css haben. Die Datei darf kein HTML-Grundgerüst enthalten. CSS ist eine eigene Sprache, und es gibt darin weder ein HTML-Grundgerüst noch HTML-Tags. Kommentare stehen in CSS anders als in HTML zwischen /* und */ (Schrägstrich Sternchen und Sternchen Schrägstrich) und dürfen nicht verschachtelt werden. Innerhalb eines Kommentars darf also kein weiterer Kommentar stehen. /* CSS-Kommentare ganz einfach */ Wenn Sie auf der Tastatur einen Ziffernblock haben, geht das Erstellen von CSS-Kommentaren wirklich einfach: Der Schrägstrich (/) ist das Symbol für»geteilt durch«(division). Das Sternchen (*) ist das Malzeichen (Multiplikation) direkt daneben. Das erspart Ihnen das Drücken von (ª) + (7) und (ª) + (+)

4 7 CSS kennenlernen Schriften, Farben und Hyperlinks 7.4 Farben für Hintergrund und Schrift definieren Die Verbindung zwischen HTML und CSS»link«In Kapitel 6 haben Sie die beiden Beispielseiten per link-element mit einem vom W3C geliehenen Stylesheet verbunden. Wenn Sie jetzt Ihr eigenes Stylesheet erstellen, müssen Sie im link-element nur die Wegbeschreibung ändern, um die Seiten mit Ihrem eigenen Stylesheet zu gestalten. ToDo: Die Webseite mit Ihrem (noch leeren) Stylesheet verbinden 1. Öffnen Sie die beiden HTML-Dateien index.html und kontakt.html im Editor. 2. Ändern Sie auf beiden HTML-Seiten die Wegbeschreibung zum Stylesheet wie folgt: <link href="bildschirm.css" rel="stylesheet" media="screen"> 3. Speichern Sie die beiden Webseiten, und betrachten Sie sie in einem Browser. Die Formatierungen des W3C-Stylesheets, das Sie am Ende von Kapitel 6 eingebaut haben, sollten nicht mehr zu sehen sein, und die beiden Webseiten sind somit wieder völlig ohne Styling. Die Attribute im link-element haben folgende Bedeutung: href gibt (wie immer) den Pfad zu einer Datei an. Ein Dateiname ohne Pfadangabe bedeutet wie immer»ist im selben Ordner gespeichert«. rel ist kurz für relation (Beziehung). rel="stylesheet" heißt:»die verknüpfte Datei ist ein Stylesheet zur Gestaltung dieser Datei.«media besagt, dass der Browser das Stylesheet nur für ein bestimmtes Ausgabemedium benutzen soll, in diesem Fall für die Ausgabe auf einem Bildschirm (screen). Die in bildschirm.css gespeicherten Styles gelten für alle HTML-Dateien, die mit dem Stylesheet verbunden sind, egal ob das wie im Beispiel momentan 2, 200 oder 2000 sind. Das Attribut»type«ist beim Element»link«nicht mehr notwendig In früheren HTML-Versionen war das Attribut type="text/css" Pflichtprogramm. Es teilte dem Browser mit, dass bildschirm.css eine in CSS geschriebene Textdatei ist. Dieses Attribut ist in HTML5 nicht mehr nötig, sofern das Stylesheet in CSS geschrieben ist. 7.4 Farben für Hintergrund und Schrift definieren Im ersten Schritt zur Gestaltung der Beispielseiten definieren Sie die Hintergrund- und Schriftfarben für body und danach für den»schutzumschlag«<div id="wrapper"> Hintergrund- und Schriftfarbe für»body«das folgende ToDo gestaltet die Schrift- und die Hintergrundfarbe für das Element body. Um ein Element zu gestalten, müssen Sie es im CSS zunächst auswählen, und dazu schreiben Sie einfach den Namen des Elements hin, also schlicht und einfach body. Die gewünschten Gestaltungsanweisungen folgen dann zwischen geschweiften Klammern. Es empfiehlt sich übrigens beim Schreiben der Styles, die schließende geschweifte Klammer direkt nach der öffnenden zu schreiben, dann vergisst man sie nicht so leicht. Achten Sie auch darauf, dass jede Anweisung mit einem Semikolon endet. Die Hintergrundfarbe eines Elements wird mit der CSS-Eigenschaft background-color gestaltet, und die Eigenschaft für die Schriftfarbe heißt einfach nur color, nicht textcolor oder font-color. ToDo: Schrift- und Hintergrundfarbe für»body«gestalten 1. Schreiben Sie die folgenden Zeilen unterhalb des bereits vorhandenen Kommentars. Die Kommentare in den Listings dienen lediglich der Erläuterung und müssen nicht abgetippt werden: /* Gestalte das HTML-Element mit dem Namen body */ body { background-color: #8c8c8c; /* Hintergrundfarbe */ color: white; /* Schriftfarbe */ 2. Speichern Sie das Stylesheet, und betrachten Sie die beiden Webseiten index.html und kontakt.html (nicht das Stylesheet) in einem Browser. Nach diesem Schritt sieht die Startseite im Browser ungefähr so aus wie in Abbildung 7.1. Die Webseite ist jetzt grau mit weißer Schrift. Das ist nicht besonders hübsch, aber die Veränderung ist deutlich sichtbar. Ein Wort noch zur Definition von Farben: Hexadezimale Farbangaben wie #8c8c8c kennen Sie vielleicht bereits aus HTML, aber in CSS können Sie für einige Farben auch englische Farbnamen wie white oder black benutzen. Mehr dazu erfahren Sie in Abschnitt 8.8,»Farben definieren hexadezimal, RGB und Namen«

5 7 CSS kennenlernen Schriften, Farben und Hyperlinks 7.4 Farben für Hintergrund und Schrift definieren 7 Abbildung 7.1»body«mit grauem Hintergrund und weißer Schrift Abbildung 7.2»body«in Grau,»#wrapper«in Weiß Hintergrund- und Schriftfarbe für»div#wrapper«um den»schutzumschlag«<div id="wrapper"> innerhalb von body zu gestalten, müssen Sie im CSS zunächst wieder den Namen des Elements hinschreiben. Da es auf der Seite aber mehrere div-elemente gibt und Sie nicht alle gestalten möchten, ergänzen Sie danach noch die ID, die mit einem #-Zeichen an den Elementnamen gehängt wird. Das div- Element mit der ID wrapper heißt in CSS also div#wrapper. ToDo: Schrift- und Hintergrundfarbe für»#wrapper«gestalten 1. Schreiben Sie im Stylesheet bildschirm.css die folgenden Zeilen unterhalb des Styles für body: /* Gestalte das div mit id="wrapper" */ div#wrapper { background-color: white; color: black; 2. Speichern Sie das Stylesheet, und betrachten Sie die beiden Webseiten im Browser. Wenn alles geklappt hat, sind die Start- und die Kontaktseite jetzt wieder etwas besser lesbar (siehe Abbildung 7.2). Der Text sitzt noch sehr dicht am Rand, und auch sonst ist die Seite nicht sonderlich hübsch, aber es ist ein Anfang. Vielleicht ist Ihnen aufgefallen, dass die für body mit color: white definierte Schriftfarbe auf der Seite momentan gar nicht zum Einsatz kommt, denn der gesamte Text steht innerhalb von div#wrapper und wird deshalb schwarz. Es ist aber trotzdem eine gute Angewohnheit, Schrift- und Hintergrundfarbe immer zusammen zu definieren, damit sich nicht durch seltsame Zufälle unbeabsichtigte Kombinationen wie weiße Schrift auf weißem Grund ergeben. Übrigens: Sie könnten beim Selektor div#wrapper das div auch weglassen und einfach nur #wrapper schreiben, aber zumindest am Anfang ist es mit dem div davor deutlicher. Mehr über Selektoren und ihre möglichen Schreibweisen folgt in Kapitel 8. Die doppelte Rolle der»raute«(#) Das Rautezeichen # (engl. number sign) hat in unserem Alltag viele unterschiedliche Namen und Bedeutungen, so auch im CSS: Vor den geschweiften Klammern steht im Beispiel div#wrapper. Hier heißt die Raute:»Gestalte das div-element mit dem Attribut id="wrapper".«innerhalb der geschweiften Klammern findet sich die Zeichenfolge backgroundcolor: #8c8c8c. Die Raute vor einer Farbangabe bedeutet lediglich:»es folgt ein hexadezimaler Wert.«Auf de.wikipedia.org/wiki/doppelkreuz_(schriftzeichen) finden Sie bei Bedarf weitere Informationen zu diversen Namen und zur Verwendung der Raute

6 7 CSS kennenlernen Schriften, Farben und Hyperlinks 7.5 Schriftgestaltung mit»font-family«und»font-size«7.4.3 Hintergrund- und Schriftfarben im Kopfbereich Der auf beiden Webseiten vorhandene Kopfbereich, im HTML <header id="kopfbereich">, soll ebenfalls eine Hintergrundfarbe bekommen, und wie eben gesehen definieren Sie im folgenden ToDo die Schriftfarbe am besten gleich mit. Danach erscheint der Kopfbereich auf beiden Seiten in einem gelborangen Farbton. color: black; 2. Speichern Sie das Stylesheet, und betrachten Sie die Webseiten im Browser. Abbildung 7.3 zeigt, wie der Kopfbereich der Beispielseiten jetzt im Browser aussieht. ToDo: Eine Hintergrundfarbe für den Kopfbereich definieren 1. Fügen Sie am Ende des Stylesheets bildschirm.css folgende CSS-Regel ein: header#kopfbereich { background-color: #f3c600; /* Gelb-Orange */ color: black; 7 2. Speichern Sie das Stylesheet, und betrachten Sie die Webseiten im Browser. Die Logo-Grafik ist ein transparentes GIF-Bild und wurde für einen weißen Hintergrund optimiert. Deshalb ist bei dem dunkleren Hintergrund im Kopfbereich um die Buchstaben herum ein leichter»heiligenschein«zu sehen. Per CSS können Sie dem HTML-Element img einen weißen Hintergrund geben, der dann im Browser sichtbar wird, weil das Logo wie gesagt ein transparentes GIF ist. Zur Erinnerung: Die Grafik hat im HTML die Klasse logo: <img src="little-boxes-logo.gif" class="logo" alt="little Boxes" width="222" height="32"> Eine im HTML vergebene Klasse spricht man im CSS mit einem vorangestellten Punkt an. Im CSS können Sie das Logo also ganz einfach mit img.logo selektieren und anschließend gestalten. ToDo: Eine Hintergrundfarbe für die Grafik im Kopfbereich definieren 1. Fügen Sie am Ende des Stylesheets bildschirm.css folgende CSS-Regel ein: /* Gestalte das img-element mit dem Attribut class="logo" */ img.logo { background-color: white; Abbildung 7.3 Kopfbereich und Logografik mit Hintergrundfarbe 7.5 Schriftgestaltung mit»font-family«und»font-size«webseiten bestehen wie erwähnt aus ineinander verschachtelten Kästchen, und für diese Kästchen gilt in CSS für viele Eigenschaften das sogenannte Vererbungsprinzip. So erben zum Beispiel alle Kästchen innerhalb von body die Schriftformatierungen, die Sie für body festgelegt haben. body eignet sich also hervorragend zur Einstellung der grundlegenden Schriftgestaltung. ToDo: Schrifteinstellungen für die Webseite definieren 1. Ergänzen Sie die bereits vorhandene CSS-Regel für body um die zwei Anweisung zur Gestaltung der Schrift: body { background-color: #8c8c8c; color: white;

7 7 CSS kennenlernen Schriften, Farben und Hyperlinks 7.6 Textgestaltung: Die Kontaktadresse im Fußbereich font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 87.5%; /* Schriftgröße 14px */ 2. Speichern Sie das Stylesheet, und betrachten Sie die Webseiten im Browser. Auf beiden Webseiten haben sich die Schrifteinstellungen geändert, und zwar durch die Vererbung für (fast) alle HTML-Elemente. Mehr zur Vererbung von CSS-Eigenschaften erfahren Sie in Abschnitt 15.6, hier sind erst einmal die beiden neuen Eigenschaften im Detail: font-family definiert die Schriftart. Da Sie als Autor des Stylesheets nicht wissen, welche Schriftarten der Browser des Betrachters zur Verfügung hat, äußern Sie einfach mehrere Wünsche, jeweils durch Komma getrennt. Für den Browser heißt das Folgendes:»Bitte benutze die Schriftart Verdana, und wenn du die nicht hast, nimm Arial oder Helvetica. Ansonsten nimm bitte irgendeine Schriftart ohne Häkchen an den Buchstaben (sans-serif).«font-size gestaltet die Schriftgröße. Über die ideale Methode zur Definition der Schriftgröße gibt es im Web intensive Diskussionen, aber für den Anfang ist 87.5% eine gute Grundlage. Die Browser haben fast immer eine Standardschriftgröße von 16 px, und 87.5% reduziert diesen Wert auf meist gut lesbare 14 px. Verdana ist übrigens eine gut lesbare Schrift mit großer Laufweite, die auf fast allen Systemen vorhanden ist. Abbildung 7.4 zeigt diese Änderungen im Überblick. Webfonts: Schriftarten aus dem Web einbinden Normalerweise muss die im CSS gewünschte Schriftart wie gesagt auf dem Gerät des Benutzers vorhanden sein, aber in Abschnitt 13.1 sehen Sie, wie Sie mit Webfonts dem Browser die gewünschte Schriftart gleich mitliefern können. Dort werden Sie auch sehen, wie man für Überschriften und Fließtext verschiedene Schriftarten einsetzt und welche Kombinationen sich dafür anbieten. 7.6 Textgestaltung: Die Kontaktadresse im Fußbereich Am Ende der Webseite steht im Element address eine (fiktive) Kontaktadresse. Die meisten Browser-Stylesheets stellen dieses Element kursiv dar, aber das muss natürlich nicht so bleiben. Das folgende ToDo zentriert die Kontaktadresse, verfeinert die Schriftgestaltung und verändert den Zeilenabstand. Einheiten wie Pixel (px) und Prozent (%) lernen Sie im nächsten Kapitel noch genauer kennen. Am besten speichern Sie im ToDo nach jeder Anweisung (also nach jedem Semikolon, aber vergessen Sie nicht die schließende geschweifte Klammer) und betrachten die Webseiten kurz im Browser. Dann können Sie die Auswirkungen Schritt für Schritt nachvollziehen. ToDo: Die Schrift für das Element»address«gestalten 1. Schreiben Sie folgende CSS-Regel an das Ende des Stylesheets: address { text-align: center; /* zentrieren */ font-size: 85%; /* etwas kleiner als der Rest */ font-style: normal; /* normale Schrift, nicht kursiv */ letter-spacing: 2px; /* Abstand zwischen den Buchstaben */ line-height: 1.5; /* Zeilenabstand, ohne Einheit */ 2. Speichern Sie das Stylesheet, und betrachten Sie die Webseiten im Browser. 7 Abbildung 7.5 zeigt den Text von address vor und nach diesem ToDo. Abbildung 7.4»body«mit anderer Schriftart und -größe Abbildung 7.5»address«mit Formatierungen

8 7 CSS kennenlernen Schriften, Farben und Hyperlinks 7.7 Hyperlinks gestalten Die folgenden im CSS verwendeten Eigenschaften kennen Sie noch nicht: text-align regelt die Ausrichtung des Textes. Mögliche Werte sind zum Beispiel left, center oder right. font-style legt die Schriftlage fest. Der Wert normal bewirkt gerade Buchstaben, italic hingegen steht für kursiv. letter-spacing regelt den Abstand zwischen den einzelnen Buchstaben. line-height gestaltet den Zeilenabstand, und der Wert wird meist ohne Einheit benutzt. 1.5 erhöht den Zeilenabstand auf das Anderthalbfache der aktuellen Schriftgröße. Gewöhnungsbedürftig ist das Kursiv- und Fettformatieren von Zeichen: kursiv bekommen Sie einen Text mit font-style: italic;. fett erreichen Sie hingegen mit font-weight: bold;. ToDo: Die Unterstreichung für alle Hyperlinks entfernen 1. Fügen Sie am Ende von bildschirm.css die folgende CSS-Regel ein: a { text-decoration: none; main a { text-decoration: underline; 2. Speichern Sie das Stylesheet, und betrachten Sie die Webseiten im Browser. Nach diesem ToDo sieht die Startseite so aus wie in Abbildung 7.6. In der Navigationsliste sind die Links nicht unterstrichen 1, im Inhaltsbereich hingegen wohl Hyperlinks gestalten Die Gestaltung von Hyperlinks mit CSS ist ein sehr beliebtes Thema. Hier finden Sie zunächst eine kleine Einführung. Später geht es mit der Gestaltung der Navigationsliste weiter Hyperlinks das HTML-Element»a«Hyperlinks werden im Quelltext mit dem Element a markiert. Mit CSS können Sie Hyperlinks völlig neu gestalten, zum Beispiel könnten Sie die Unterstreichung der Links entfernen. Viele Designer lieben diesen Trick, da sie die Unterstreichung hässlich finden, aber man sollte immer darauf achten, dass Hyperlinks auf Anhieb zu erkennen sind. In Linklisten oder in einer Navigation ist die Unterstreichung von Links meist nicht nötig, im Fließtext hingegen ist sie oft sinnvoll. Die Eigenschaft text-decoration regelt die Unterstreichung der Links. Der Standardwert ist underline, der Wert none entfernt die Unterstreichung. Im folgenden ToDo entfernen Sie im ersten Style die Unterstreichung und fügen sie im zweiten Style für Links im Inhaltsbereich main wieder hinzu. Dazu benutzen Sie den Selektor main a (mit einer Leerstelle dazwischen), der nur Links selektiert, die sich im Inhaltsbereich main befinden. Mehr zu solchen Selektoren erfahren Sie in Abschnitt 8.4. Abbildung 7.6 Hyperlinks mit und ohne Unterstreichung Besuchte und nicht besuchte Hyperlinks Links können je nach Zustand ihr Aussehen verändern: Unbesuchte Hyperlinks werden vom Browser traditionell blau dargestellt, besuchte hingegen lila. Ob ein Link bereits besucht wurde, erkennt der Browser anhand seiner eigenen Surfgeschichte, die je nach

9 7 CSS kennenlernen Schriften, Farben und Hyperlinks 7.7 Hyperlinks gestalten Browser Chronik oder Verlauf genannt wird. Wenn Sie diese löschen, gelten alle Links wieder als unbesucht, was zum Beispiel beim Testen manchmal sehr hilfreich ist. Für die verschiedenen Zustände eines Hyperlinks kennt CSS sogenannte Pseudoklassen, die mit einem Doppelpunkt hinter den Elementnamen a gehängt werden. Tabelle 7.1 zeigt die beiden wichtigsten Linkzustände und die entsprechenden CSS-Selektoren Wenn die Maus darüber schwebt»a:hover«und Kollegen CSS kennt noch drei weitere Pseudoklassen für Hyperlinks, die in Tabelle 7.2 aufgelistet werden. Hyperlink CSS-Selektor Hyperlink zu einer noch nicht besuchten Seite zu einer besuchten Seite CSS-Selektor a:link a:visited wenn der Mauszeiger darüber schwebt beim Durchsteppen per (ê)-taste im Moment des Klicks a:hover a:focus a:active 7 Tabelle 7.1 Besuchte und nicht besuchte Hyperlinks und die entsprechenden CSS-Selektoren Tabelle 7.2 Weitere Pseudoklassen für Links Im folgenden ToDo sehen Sie ein Beispiel für die Formatierung von besuchten und nicht besuchten Hyperlinks: ToDo: Die Farben für besuchte und unbesuchte Links ändern 1. Fügen Sie am Ende des Stylesheets die folgenden CSS-Regeln hinzu: a:link { color: #d90000; a:visited { color: #cc6666; 2. Speichern Sie das Stylesheet, und betrachten Sie die Webseiten im Browser. Unbesuchte Hyperlinks werden nach diesem ToDo dunkelrot eingefärbt (#d90000) und besuchte etwas dunkler und blasser (#cc6666). Falls Sie die Farben für Hyperlinks ändern, sollten Sie darauf achten, dass die Unterscheidung von besuchten und unbesuchten Hyperlinks möglich bleibt, sofern dies von Ihnen gewünscht wird. Der Doppelpunkt und die Leerstellen Wie das Rautezeichen hat auch der Doppelpunkt in CSS eine doppelte Funktion: Ein Doppelpunkt im Selektor, also vor den geschweiften Klammern, verbindet den Namen eines Elements mit einer Pseudoklasse: a:link. Hier darf vor oder nach dem Doppelpunkt keine Leerstelle stehen, da sonst der Selektor nicht funktioniert. Innerhalb der geschweiften Klammern trennt ein Doppelpunkt Eigenschaft und Wert, zum Beispiel color: #d Hier sind Leerstellen vor und nach dem Doppelpunkt optional. Die ersten beiden Pseudoklassen ähneln sich in gewisser Weise, die dritte macht etwas ganz anderes: :hover verändert den Hyperlink, während der Mauszeiger darüber schwebt. :focus gestaltet den Hyperlink, wenn der Link per Tastatur ausgewählt wird. :active formatiert den Hyperlink, wenn die Maustaste über dem Link gedrückt wird, also im Moment des Klicks. In der Praxis bedeutet das, dass Sie :hover und :focus häufig gemeinsam deklarieren, da :focus in gewisser Weise die Tastaturentsprechung zu :hover ist. Schreiben Sie dazu die beiden Selektoren wie im folgenden ToDo durch ein Komma getrennt vor den Deklarationsblock. ToDo: Pseudoklassen für Hyperlinks definieren 1. Ergänzen Sie am Ende des Stylesheets die folgenden CSS-Regeln: a:hover, a:focus { text-decoration: none; a:active { background-color: #d90000; color: white; 2. Speichern Sie das Stylesheet, und betrachten Sie die Webseiten im Browser

10 7 CSS kennenlernen Schriften, Farben und Hyperlinks 7.8 Styles können an drei verschiedenen Stellen definiert werden Diese Regeln bewirken, dass bei :hover und :focus die Links nicht unterstrichen sind. Bei den Links in der Navigationsliste hat das keine Auswirkungen, aber im Inhaltsbereich wohl. Im zweiten Style werden mit der Pseudoklasse :active im Moment des Klicks Hintergrund- und Schriftfarbe geändert, was mit ein bisschen Fantasie so aussieht, als ob ein Schalter gedrückt wird (Abbildung 7.7). fast wie ein Heiligenschein aussieht. Sie können das ausprobieren, indem Sie einfach mit der (ê)-taste durch die Links steppen. Der jeweils aktive Link wird hervorgehoben. Diese Hervorhebung wird mit der Eigenschaft outline erzeugt, und Sie können sie mit outline: none entfernen: a:focus, a:active { outline: none; Das sollten Sie allerdings nur tun, wenn der Rahmen wirklich stört und die beiden Linkzustände :focus und :active aufgrund anderer Styles trotzdem deutlich erkennbar sind. Ohne die Hervorhebung durch outline können Tastaturbenutzer beim Navigieren per Tastatur (zum Beispiel mit der (ê)-taste) ansonsten nicht erkennen, welcher Link gerade ausgewählt ist. 7 Abbildung 7.7 Der Link im Moment des Klicks mit der Pseudoklasse»:active«Beim Definieren der Pseudoklassen in Ihrem Stylesheet sollten Sie übrigens die richtige Reihenfolge beachten: CSS-Referenzen zum Nachschlagen Falls Sie Details zu bestimmten CSS-Eigenschaften suchen, finden Sie in Abschnitt 26.6,»Referenzen und Websites zu HTML und CSS«, einige sehr gute Online-Nachschlagewerke. 1. a:link 2. a:visited 3. a:hover und a:focus (Reihenfolge egal) 4. a:active Ein Merkspruch wäre love-hate. Darin ist zwar kein f enthalten, aber die Pseudoklasse :focus gehört einfach zu :hover. Auf Touchscreens gibt es keinen Hover-Effekt Die Gestaltung für den über einem Element schwebenden Mauszeiger sollten Sie nicht übertreiben, denn auf Touchscreens, zum Beispiel auf Smartphones oder Tablets, gibt es weder einen Mauszeiger noch einen Hover-Effekt »outline«die Umrisslinie um Elemente mit Fokus Bei den Pseudoklassen :focus und :active erhalten Hyperlinks in einigen Browsern übrigens eine gepunktete Umrisslinie oder eine andere Hervorhebung, die viele Webdesigner als unschön empfinden. Chrome zum Beispiel benutzt eine hellblaue Linie, die 7.8 Styles können an drei verschiedenen Stellen definiert werden Bis jetzt kennen Sie nur CSS-Regeln in einem externen Stylesheet, aber es gibt drei verschiedene Möglichkeiten, CSS-Regeln zu speichern Möglichkeit 1: Extern CSS-Regeln in einer eigenen CSS-Datei CSS-Regeln werden wie auch in diesem Kapitel meist in einer eigenen Datei mit der Endung.css gespeichert. Die Verbindung zwischen Webseite und CSS-Datei erfolgt im head des HTML-Quelltextes, zum Beispiel mithilfe des Elements link: <head> <!-- Andere HTML-Elemente --> <link href="dateiname.css" rel="stylesheet"> </head> Listing 7.1 Die Verbindung zum Stylesheet mit dem Element»link«

11 7 CSS kennenlernen Schriften, Farben und Hyperlinks 7.9 Auf einen Blick Möglichkeit 2: Zwischen <head> und </head> im Element»style«Wie Sie in Kapitel 2,»HTML und CSS im Schnelldurchlauf«, bereits gesehen haben, können CSS-Regeln mit dem HTML-Element style auch im head einer HTML-Datei gespeichert werden: <head> <!-- Andere HTML-Elemente --> <style> body { background-color: pink; /* nur für diese eine Webseite */ </style> </head> Listing 7.2 Das HTML-Element»style«im»head«einer Webseite In diesem Styleblock stehen zwischen den Tags <style> und </style> ganz normale CSS- Regeln, die aber nur für die eine Webseite gelten, auf der sie gespeichert sind. In früheren HTML-Versionen benötigte das Anfangs-Tag <style> noch das Attribut type="text/ css", aber das darf in HTML5 fehlen Möglichkeit 3: Direkt im HTML-Element mit dem Attribut»style«Die dritte Methode ist, CSS-Regeln direkt in das Anfangs-Tag eines HTML-Elements zu schreiben. Diese Methode wird manchmal auch Inline-Style genannt, weil die CSS- Deklarationen direkt im HTML-Element stehen (ohne geschweifte Klammern drumherum): <p style="background-color: #c0c0c0; color: red;">rot auf Grau!</p> Listing 7.3 Das Attribut»style«im Anfangs-Tag eines HTML-Elements Roter Text und grauer Hintergrund. Diese beiden Deklarationen gelten nur für diesen einen Absatz. Besonders zum Experimentieren während der Erstellung einer Webseite sind Inline-Styles sehr praktisch. Auch für Redakteure, die Inhalte in Content-Management-Systemen pflegen müssen, sind Inline-Styles eine Möglichkeit, die vom System vorgegebene Gestaltung in Ausnahmefällen zu überschreiben Vorfahrt welche Styles gewinnen? Die Dreiteilung von Styles als externe Datei, als Element im HTML-Head und als Attribut direkt im Anfangs-Tag des Elements ist hierarchisch gestaffelt, sodass der Browser immer genau weiß, welche Regel er anwenden muss. Der Grundsatz lautet:»je dichter am zu gestaltenden Text, desto wichtiger«: CSS-Regeln im HTML-Element haben Vorrang vor denen im head einer Seite. Bei CSS-Regeln im head ist die Reihenfolge im Quelltext wichtig: Die in einem Styleblock im Head deklarierten Styles»gewinnen«, sofern sie nach dem per link eingebundenen externen Stylesheet stehen. Durch diese Staffelung können Sie in einer separaten CSS-Datei ein einheitliches Aussehen für die ganze Site festlegen und Abweichungen davon für jede einzelne Webseite und sogar für jedes einzelne HTML-Element definieren. Bei der Einbindung von CSS empfiehlt sich folgende Vorgehensweise: Schreiben Sie so viel wie möglich in eine externe CSS-Datei (siehe Listing 7.1). Benutzen Sie Styles im HTML-Quelltext so sparsam wie möglich (siehe Listing 7.3). Die Teilung der Styles ist Teil der Kaskade Die Speicherung der Styles an drei verschiedenen Orten ist Teil der Kaskade von CSS. Details zur kompletten Kaskade finden Sie in Kapitel 15,»Der Browser und das CSS: Kaskade, Vererbung oder Standardwert«. 7.9 Auf einen Blick Hier sind noch einmal die wichtigsten Punkte dieses Kapitels im Überblick: Ein Stylesheet ist eine Sammlung von Formatvorlagen. Die Gestaltungsmöglichkeiten von CSS lassen sich in folgende Gruppen unterteilen: Schriften und Farben: den Inhalt der Kästchen gestalten Abstände und Rahmenlinien: die Kästchen selbst gestalten Positionierung: die Kästchen auf der Webseite verschieben Mehrspaltige Layouts: die Webseite in Spalten unterteilen Das Element link verbindet eine HTML-Datei mit einem Stylesheet

12 7 CSS kennenlernen Schriften, Farben und Hyperlinks 왘 Häufig genutzte CSS-Eigenschaften zur Gestaltung von Elementen sind unter anderem: background-color für die Hintergrundfarbe color für die Schriftfarbe font-family für die gewünschte Schriftart font-size für die gewünschte Schriftgröße 왘 Mit dem Selektor a können Sie Hyperlinks gestalten. 왘 Zur Gestaltung der verschiedenen Linkzustände gibt es diverse Pseudoklassen: a:link und a:visited a:hover und a:focus a:active 왘 Zur Speicherung von Styles gibt es drei Möglichkeiten: in einer externen CSS-Datei im head zwischen <style> und </style> im HTML-Element selbst mit dem Attribut style="..." 왘 Die empfohlene Vorgehensweise ist, die CSS-Regeln so weit wie möglich in externen Dateien zu speichern. 124

13 Kapitel 8 Selektoren, Einheiten und Farben in CSS Worin Sie verschiedene Arten von Selektoren und ein Punktesystem kennenlernen, das den Namen»Spezifität«trägt. Außerdem erfahren Sie, welche Einheiten Sie in CSS verwenden können und wie man Farben definiert. 8 Die Themen im Überblick: 왘 Style der Aufbau einer CSS-Regel, Seite 125 왘 Ein Selektor wählt das zu gestaltende Kästchen aus, Seite 126 왘 Überblick: Die HTML-Elemente im DOM-Baum, Seite 128 왘 Selektoren kombinieren Nachfahren auswählen, Seite 130 왘 Eigene Namen vergeben»id«und»class«, Seite 132 왘 Spezifität das Punktesystem für Selektoren, Seite 136 왘 Werte und Maße in CSS die Qual der Wahl, Seite 139 왘 Farben definieren hexadezimal, RGB und Namen, Seite 141 왘 Auf einen Blick, Seite 143 Der Umgang mit Selektoren ist eine der wichtigsten Fertigkeiten beim Erlernen von CSS, und deshalb bekommen Selektoren fast ein ganzes Kapitel für sich. Danach erfahren Sie das Wichtigste zu Maßen und Einheiten sowie zu Farbdefinitionen in CSS. 8.1 Style der Aufbau einer CSS-Regel CSS ist eine Sprache, und jede Sprache kennt Vokabeln und Grammatik. Nachdem Sie ein paar Beispiele gesehen haben, folgen jetzt der schematische Aufbau einer CSS-Regel und die wichtigsten Vokabeln dazu: 125

14 8 Selektoren, Einheiten und Farben in CSS 8.2 Ein Selektor wählt das zu gestaltende Kästchen aus Selektor { Eigenschaft: Wert; Eigenschaft: Wert; Listing 8.1 Ein einfacher Elementselektor Eine CSS-Regel (engl. style oder css rule) besteht aus folgenden Einzelteilen: Selektor (selector) Der Selektor steht vor der geschweiften Klammer und wählt aus (selektiert), welche Kästchen auf der Seite gestaltet werden sollen. Deklaration (declaration) Zwischen geschweiften Klammern stehen eine oder mehrere Deklarationen, auch Anweisungen genannt. Sie beschreiben die Gestaltung der Elemente, auf die der Selektor zutrifft. Jede Deklaration besteht aus einem Eigenschaft-Wert-Paar und wird mit einem Semikolon beendet. Eigenschaft (property) Die zu gestaltende Eigenschaft (Farbe, Schriftart etc.) des Elements steht vor dem Doppelpunkt. Leerstellen vor und nach dem Doppelpunkt sind zwar optional, aber häufig finden Sie zwischen dem Doppelpunkt und dem Wert eine Leerstelle, denn das entspricht der allgemein üblichen Rechtschreibung. Wert (value) Der Wert, den die Eigenschaft annehmen soll, steht nach dem Doppelpunkt. Danach folgt ein Semikolon, um die Deklaration zu beenden. Die Begriffe Style, CSS-Regel, Gestaltungsanweisung und Formatvorlage werden übrigens mehr oder weniger synonym gebraucht. Manche Autoren und Programme verwenden auch die Bezeichnung Stil, Stilregel oder Formatdefinition. 8.2 Ein Selektor wählt das zu gestaltende Kästchen aus Jede CSS-Regel beginnt also mit mindestens einem Selektor. Selektoren wählen aus, welches Kästchen auf der Webseite gestaltet werden soll, und beziehen sich auf eines von drei Dingen (oder eine Kombination davon): den Namen eines HTML-Elements eine ID (id) eine Klasse (class) 8.2.1»Der Name der Kiste«einfache Elementselektoren Eine CSS-Regel wie die folgende kennen Sie bereits: h2 { font-size: 130%; Der einfachste Selektor ist der Name des Kästchens, das gestaltet werden soll. Er wird auch Elementselektor oder Typselektor genannt, weil er alle Elemente eines bestimmten Typs auswählt: Der Selektor h2 selektiert auf den zu gestaltenden Webseiten also alle Überschriften der zweiten Ebene Mehrere Kästchen auf einmal Selektoren gruppieren mit Komma Schauen Sie sich die folgenden zwei Regeln zur Gestaltung von Überschriften an: h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 150%; h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 130%; Listing 8.2 Zwei einfache Elementselektoren mit einer identischen Deklaration Für beide Überschriften wird dieselbe Schriftartfamilie definiert, nur die Schriftgröße ist unterschiedlich. Durch eine Gruppierung der Selektoren mit einem Komma können Sie sich ein bisschen Tipparbeit sparen und die Übersichtlichkeit erhöhen: h1, h2 { font-family: Verdana, Arial, Helvetica, sans-serif; h1 { font-size: 150%; h2 { font-size: 130%; Listing 8.3 Eine Gruppe von Selektoren, durch Komma getrennt Wenn Sie jetzt irgendwann den Überschriften eine andere Schriftart zuweisen möchten, brauchen Sie nur noch eine Zeile zu ändern

15 8 Selektoren, Einheiten und Farben in CSS 8.3 Überblick: Die HTML-Elemente im DOM-Baum Bei der Gruppierung das Komma nicht vergessen Bei der Gruppierung von Selektoren dürfen Sie das Komma zwischen den einzelnen Selektoren nicht vergessen, sonst erhalten Sie versehentlich einen Nachfahrenselektor, der weiter unten vorgestellt wird und etwas völlig anderes bewirkt. Abbildung 8.1 zeigt den Inspektor 1 im Firefox. Links sehen Sie die Hierarchie der HTML-Struktur der Startseite index.html als Baum 2. Rechts oben können Sie übrigens die Einstellungen ändern und die Position des Fensters festlegen Alle Kästchen auf der Seite der Universalselektor»*«Sie werden ihn nur selten benutzen, aber es gibt ihn: das Sternchen * als universellen Selektor, der»alle Kästchen«auf einer Webseite selektiert: 8 * { padding: 0; margin: 0; Listing 8.4 Das Sternchen als universeller Selektor Dieses Beispiel setzt die Eigenschaften padding und margin für alle HTML-Elemente auf null und wird in Abschnitt 9.3,»Kalibrierung Abstände per Reset vereinheitlichen«, genauer erklärt. 8.3 Überblick: Die HTML-Elemente im DOM-Baum Bevor Sie im nächsten Abschnitt kombinierte Selektoren kennenlernen, möchte ich Ihnen kurz einen ganz besonderen Baum vorstellen, nämlich den DOM-Baum, der die Basis einer jeden Webseite bildet. Eine HTML-Datei ist im Grunde genommen nichts anderes als eine hierarchische Verschachtelung von HTML-Elementen. Wenn ein Browser vom Webserver einen Quelltext bekommt, versucht er zunächst, sich eine Übersicht über diese Hierarchie zu verschaffen, und erstellt dazu ein Modell, das Document Object Model (abgekürzt DOM) genannt wird, weil es ein Modell der Objekte, also der Dinge auf einer Webseite, ist. Um sich ein Bild von diesem Modell zu machen, klicken Sie im Firefox oder im Chrome mit der rechten Maustaste irgendwo ins Browserfenster und wählen im Kontextmenü den Befehl Element untersuchen. Daraufhin erscheinen in der unteren Hälfte des Browserfensters die Entwickler-Tools. Abbildung 8.1 Der Stammbaum der Startseite im Inspektor des Firefox Wie bei Computern üblich, steht auch dieser Baum auf dem Kopf, und die Zweige wachsen nur nach rechts: Das oberste Element einer jeden Webseite ist html. Das Stammelement. Abraham. Der Urvater aller Elemente auf dieser Seite. Von html gehen zwei Elemente ab: head und body. Man kann also sagen, dass sowohl head als auch body Kindelemente von html und somit Geschwister sind. body hat nur ein Kindelement namens div#wrapper. Umgekehrt ist body das Elternelement von div#wrapper. div#wrapper wiederum hat vier Kinder, nämlich die Elemente header, nav, main und footer

16 8 Selektoren, Einheiten und Farben in CSS 8.4 Selektoren kombinieren Nachfahren auswählen Und so ist das ganze HTML-Dokument eine schrecklich nette Familie mit diversen verwandtschaftlichen Beziehungen. Begriffe wie Kindelement oder Elternelement sind anfangs eher ungewohnt, und Sätze wie»li ist ein Kind von ul«führen bei manchen Novizen zu einem leichten Grinsen. Aber diese Begriffe umschreiben die Beziehungen der Elemente ziemlich genau, und man gewöhnt sich daran. Sie sind kein Browser und müssen nicht für jede Webseite einen solchen Stammbaum entwerfen, aber bei der Arbeit mit Selektoren ist ein Blick unter die Motorhaube mit einem Entwicklerwerkzeug im Browser durchaus hilfreich, da kombinierte Selektoren auf genau diese Hierarchie Bezug nehmen. 8.4 Selektoren kombinieren Nachfahren auswählen Die Kombination von mehreren Selektoren wird in der Praxis ausgiebig eingesetzt, denn sie ermöglicht es, HTML-Elemente aufgrund Ihrer Position im DOM-Baum auszuwählen. Im Folgenden möchte ich Ihnen zunächst die Nachfahrenselektoren vorstellen, die es erlauben, Elemente nur in einem bestimmten Bereich der Seite zu gestalten. In Abschnitt 7.7 haben Sie mit main a bereits ein Beispiel kennengelernt, mit dem nur die Hyperlinks im Inhaltsbereich gestaltet werden. Hier folgen jetzt noch weitere Beispiele Beispiel 1: Schriftgestaltung nur für den Slogan im Kopfbereich In diesem Abschnitt soll das Wort»Grundlagen.«im Kopfbereich rot eingefärbt werden. Der Trick ist dabei wie so oft der Selektor zur Auswahl des Elements. Erinnern Sie sich noch an das span aus der HTML-Einführung? Das kommt jetzt zum Einsatz. Falls Ihnen das span nicht mehr ganz gegenwärtig ist, zeigt das folgende Listing den etwas verkürzten HTML-Quelltext für den Kopfbereich: <header id="kopfbereich"> <h1><img src="little-boxes-logo.gif"...></h1> <p class="slogan">webseiten gestalten mit HTML und CSS. <span>grundlagen.</span></p> </header> Listing 8.5 HTML das»span«im Kopfbereich Das folgende ToDo gestaltet nur das Wort»Grundlagen.«inklusive des Punktes dahinter. ToDo: Das Wort»Grundlagen.«im Slogan rot hervorheben 1. Schreiben Sie den folgenden Style an das Ende von bildschirm.css: p.slogan span { color: #d90000; /* Schriftfarbe */ 2. Speichern Sie das Stylesheet, und betrachten Sie die Webseiten im Browser. Der Selektor p.slogan span wählt auf der Beispielseite nur das Wort»Grundlagen.«aus, inklusive Punkt. Abbildung 8.2 zeigt den fertigen Kopfbereich im Browser. Abbildung 8.2 <span>grundlagen.</span> wird rot hervorgehoben Beispiel 2: Aufzählungszeichen nur in ungeordneten Listen gestalten Ein anderes Beispiel: Sie möchten statt der üblichen runden Aufzählungszeichen gerne quadratische verwenden. Um das zu erreichen, versuchen Sie es zunächst mit folgender CSS-Regel in Ihrem Stylesheet: li { list-style-type: square; Listing 8.6 Quadratische Aufzählungszeichen auch in Nummerierungen Auf den ersten Blick scheint alles okay zu sein, und Aufzählungen mit ul bekommen tatsächlich ein kleines Quadrat. li ist aber ein einfacher Typselektor und selektiert alle Elemente vom Typ li, und so bekäme auch eine Nummerierung (ol) statt einer Zahl ein kleines Quadrat. Hoppla. Eine Lösung bietet die Kombination von Selektoren: ul li { list-style-type: square; Listing 8.7 Quadratische Aufzählungszeichen nur für ungeordnete Listen

17 8 Selektoren, Einheiten und Farben in CSS 8.5 Eigene Namen vergeben»id«und»class«dieser Selektor beschränkt das Wirkungsgebiet der quadratischen Aufzählungszeichen auf ungeordnete Listen. Die Listenelemente innerhalb von ol-nummerierungen sind davon nicht betroffen Beispiel 3: Unterschiedlich nummerierte Ebenen bei geordneten Listen Die Kombination von Selektoren ist nicht auf eine Ebene begrenzt. Um Ihnen einen kleinen Vorgeschmack auf die Möglichkeiten zu geben, folgt hier ein Beispiel zur Nummerierung von Listen: ol li { list-style-type : decimal; ol ol li { list-style-type : lower-alpha; Listing 8.8 Unterschiedliche Nummerierung mit kombinierten Selektoren Die mit den beiden obigen Styles gestalteten nummerierten Listen sehen so aus wie in Abbildung Es kann nur einen geben»id«, der Selektor mit der Raute Das Attribut id haben Sie bereits mehrfach eingesetzt. ID ist die Kurzform für Identität und im Englischen unter anderem die Abkürzung für einen»ausweis«. Die Frage»Can I see your ID, please?«meint, ob man sich ausweisen kann. Da ein Ausweis in der Regel einmalig ist, darf ein und dieselbe ID frei nach dem Highlander-Prinzip»Es kann nur einen geben«pro Webseite nur ein einziges Mal vorkommen: <header id="kopfbereich">... </div> Listing 8.9 Der Kopfbereich ein HTML-Element mit dem Attribut»id«Um dieses Element im CSS zu gestalten, benutzen Sie den Namen des Elements und das Rautenzeichen (#), gefolgt von der ID als Selektor: header#kopfbereich {... Listing 8.10 Gestalte das»header«-element mit dem Attribut»id="kopfbereich"«8 Abbildung 8.3 Unterschiedlich nummerierte Ebenen in geordneten Listen Sie können ID-Selektoren übrigens auch ohne den Namen des Elements davor schreiben, denn eine ID darf ja pro Seite nur einmal auftauchen: #kopfbereich {... Listing 8.11 Gestalte das Element mit dem Attribut»id="kopfbereich"«In Kapitel 12 lernen Sie noch Kind- und Attributselektoren kennen Bei der Gestaltung eines Kontaktformulars in Kapitel 12 lernen Sie noch Kind- und Attributselektoren kennen. 8.5 Eigene Namen vergeben»id«und»class«mit der Gruppierung und Kombination von Typselektoren kann man schon einiges erreichen, aber richtig praktisch wird die Sache erst durch die Möglichkeit, Elementen im HTML eigene Namenszusätze zu geben und diese dann im CSS zu gestalten. Um eigene Namenszusätze für bestehende Elemente zu ergänzen, gibt es im HTML zwei sogenannte Universalattribute, die Sie fast allen Elementen zuweisen können: id und class. Ein Element mit einer ID kann als Sprungziel für einen Hyperlink dienen, sodass Sie eine ganz bestimmte Stelle auf einer Webseite aufrufen und direkt anspringen können: <a href="#wrapper">nach oben</a> springt auf der Beispielseite direkt zu dem Element <div id="wrapper">. <a href="index.html#inhaltsbereich">startseite - Inhalt</a> ruft die Startseite auf und springt dort direkt zum Inhaltsbereich Gruppenbildung»class«, der Selektor mit dem Punkt Stellen Sie sich vor, dass Sie auf Ihren Webseiten farbig hinterlegte und mit einem Rahmen versehene Infoboxen haben möchten, so ähnlich wie die Hinweiskästen in diesem Buch. Um mehrere Absätze auf der Seite gleich zu gestalten, ist ein einfacher Selektor wie p zu ungenau, da er alle Absätze auswählt, und eine ID ist nicht geeignet, weil der Wert einer ID pro Webseite nur einmal vorkommen darf. Für solche Situationen gibt es Klassen

18 8 Selektoren, Einheiten und Farben in CSS 8.5 Eigene Namen vergeben»id«und»class«jeder Absatz, der wie ein solcher Hinweiskasten aussehen soll, bekommt im HTML das Attribut class mit einem bestimmten Wert: <p class="infobox">dieser Text ist eine Infobox.</p> Listing 8.12 Ein HTML-Element mit dem Attribut»class«Um alle so markierten Absätze auszuwählen, schreiben Sie im CSS nach dem Namen des Elements einen Punkt, gefolgt vom Namen der Klasse: p.infobox { background-color: #8c8c8c; color: black; border: 3px solid #ecf7dd; Listing 8.13 Der Selektor mit dem Punkt wählt Elemente einer Klasse aus. Wichtig ist der unscheinbare kleine Punkt. Dadurch weiß der Browser, dass diese Regel für alle p-elemente mit dem Attribut class="infobox" gilt. Sie können im CSS den Elementnamen genau wie bei einer ID auch weglassen, sodass der Selektor mit dem Punkt beginnt:.infobox { background-color: #8c8c8c; color: black; border: 3px solid #ecf7dd; Listing 8.14 Der Selektor mit dem Punkt, ohne den Namen des Elements Dieses Element wird sowohl von.clearing als auch von.galerie gefunden. Wenn Sie im CSS Elemente auswählen möchten, die im HTML mehrere Klassen haben sollen, schreiben Sie die Namen der Klassen einfach ohne Leerstelle hintereinander weg. Für das obige Beispiel sähe das so aus:.galerie.clearing {... Listing 8.16 Ein Element mit mehreren Klassen selektieren ID oder Klasse wann nimmt man was? Der Unterschied zwischen class und id bereitet vielen CSS-Einsteigern Probleme, ist aber im Grunde ganz einfach: ID und Klasse bieten die Möglichkeit, eigene Namenszusätze für HTML-Elemente zu vergeben. Eine id ist einmalig und darf auf einer Webseite nur einmal vorkommen. Eine class darf auf einer Webseite mehrfach verwendet werden. Wenn Sie einen Bereich auf einer Webseite per Hyperlink aufrufen möchten, dann sollten Sie ihm eine ID geben, denn das geht mit einer Klasse nicht. Ansonsten sollte man mit IDs sehr sparsam umgehen. Die Hauptbereiche der Beispielseite wie #kopfbereich oder #inhaltsbereich bekommen eine id, weil sie pro Seite einmalig sind. Infoboxen hingegen können auf einer Seite mehrfach auftreten und bekommen deshalb eine class, auch wenn es auf der Seite nur eine Infobox geben sollte. Einen weiteren Unterschied zwischen ID und Klassen lernen Sie gleich in Abschnitt 8.6,»Spezifität das Punktesystem für Selektoren«, kennen. Eine ID bekommt dort nämlich 100 Punkte, während für eine Klasse nur 10 Punkte verteilt werden. 8 Mit dem Selektor.infobox wählt der Browser alle HTML-Elemente mit dem Attribut class="infobox" aus, egal ob es Absätze, Listen oder sonst etwas sind. Sinnvoll ist dies unter anderem, wenn verschiedene HTML-Elemente, wie zum Beispiel p und div, dieselbe Klasse haben sollen. Man kann einem HTML-Element übrigens auch mehrere Klassen mit auf den Weg geben. Die einzelnen Klassen werden dabei im HTML jeweils durch eine Leerstelle getrennt. Im folgenden Beispiel werden einem div-element die beiden Klassen galerie und clearing zugewiesen: <div class="galerie clearing">... </div> Listing 8.15 Mehrere CSS-Klassen für ein HTML-Element IDs, Klassen und Content-Management-Systeme (CMS) Auf vielen Webseiten wird der HTML-Quelltext nicht von Hand geschrieben, sondern von einem Content-Management-System wie WordPress, Contao oder Drupal automatisch erzeugt. Dabei werden für die HTML-Elemente meist auch entsprechende Klassen und IDs vergeben, damit sie per CSS leichter gestaltet werden können. Falls Sie ein CMS einsetzen, sollten Sie den Quelltext erforschen und sich mit den Namenskonventionen für IDs und Klassen vertraut machen

19 8 Selektoren, Einheiten und Farben in CSS 8.6 Spezifität das Punktesystem für Selektoren Sinnvolle Namen»id«und»class«sollten die Bedeutung des Elements beschreiben Der Vorteil der Vergabe von eigenen Namen ist, dass Sie damit wirklich jedes Element auf einer Seite ansprechen können. Ein möglicher Nachteil ist, dass eine Änderung der Namen im HTML und im CSS erfolgen muss, sodass es sich lohnt, über die Namen für IDs und Klassen ein bisschen nachzudenken. Oberster Grundsatz bei der Auswahl der Namen ist, dass diese die Bedeutung des Elements beschreiben sollten und nicht dessen Gestaltung. Hier ein Beispiel: Stellen Sie sich vor, Sie wollen die Schrift in einigen Absätzen rot hervorheben, weil sie wichtig sind, und Sie weisen diesen Absätzen im HTML deshalb das Attribut class="rot" zu. Im CSS gestalten Sie diese Absätze mit.rot { color: red;. Falls Sie die Schriftfarbe später in Blau ändern, bekommen Sie folgenden Style.rot { color: blue;. Sie haben dann eine Klasse rot, die den Text dann blau oder gelb oder sonstwie färbt. Das ist Täuschen und Tarnen. Ein Name sollte nicht das Aussehen des Elements beschreiben, sondern dessen Bedeutung: Ein besserer Klassenname wäre beispielsweise wichtig oder warnung. 8.6 Spezifität das Punktesystem für Selektoren Sobald Stylesheets ein bisschen länger werden, gibt es früher oder später für ein HTML- Element mehrere CSS-Regeln, die sich zum Teil widersprechen. Die Frage ist, wie der Browser in solchen Konfliktfällen entscheidet Einer wird gewinnen so funktioniert Spezifität Die Lösung für dieses Entscheidungsproblem ist ganz einfach: Der Browser berechnet anhand eines Punktesystems, welcher Selektor der wichtigste ist. Im CSS-Jargon heißt dieses Punktesystem specificity, auf Deutsch Spezifität oder manchmal auch Spezifizität ein schwieriges Wort für eine eigentlich ganz einfache Sache. Tabelle 8.1 zeigt zunächst einmal die Punkteverteilung. Selektortyp Beispiel Punkte einfacher Typselektor p 1 Klasse.infobox 10 Pseudoklasse :visited 10 ID #navibereich 100 Attribut style=" " style="color: red;" 1000 Tabelle 8.1 Spezifität das Punktesystem für Selektoren Ein paar Beispiele für die Punktewertung Tabelle 8.2 zeigt ein paar Beispiele für die Spezifität von Selektoren. Bei kombinierten Selektoren werden die Punktezahlen für die einzelnen Selektoren addiert, bei gruppierten Selektoren hingegen nicht. Selektor Beschreibung Punkte Gesamt body Typselektor 1 1 h1, h2 gruppiert 1 1 a:visited Typ + Pseudo-Klasse infobox Klasse p.infobox Typselektor + Klasse #navibereich ID nav#navibereich Typselektor + ID #navibereich a ID + Typ #navibereich a:visited ID + Typ + Pseudo-Klasse <p style="color: red;"> Attribut style Tabelle 8.2 Spezifität Beispiele für die Punkteverteilung bei Selektoren Bei einem Unentschieden gibt es übrigens weder Verlängerung noch Elfmeterschießen. Bei gleichem Punktestand entscheidet die Reihenfolge im Stylesheet: Es gewinnt die am weitesten unten notierte Regel, ganz nach dem biblischen Motto»Die Letzten werden die Ersten sein«