In diesem Artikel wird erläutert, wie Sie Cascading Style Sheets (CSS) verwenden, um Text auf einer Seite in Dreamweaver zu formatieren. Mit CSS können Sie Text auf eine Weise formatieren und positionieren, die mit HTML nicht möglich ist. Dadurch erhalten Sie mehr Flexibilität und Kontrolle über das Erscheinungsbild Ihrer Seite.
CSS verstehen
Cascading Style Sheets (CSS) sind eine Reihe von Formatierungsregeln, die das Erscheinungsbild von Inhalten auf einer Webseite steuern. Wenn Sie CSS zum Formatieren einer Seite verwenden, werden Inhalt und Präsentation getrennt gehalten. Der Seiteninhalt (HTML-Code) befindet sich in einer eigenen HTML-Datei, während sich die CSS-Regeln, die die Darstellung des Codes definieren, in einer anderen Datei (einem externen Stylesheet) oder einem anderen Teil des HTML-Dokuments (normalerweise ein Abschnitt) befinden. Die Verwendung von CSS bietet Ihnen große Flexibilität und eine größere Kontrolle über das Erscheinungsbild Ihrer Seite, von der präzisen Layoutpositionierung bis hin zu bestimmten Schriftarten und Stilen.
Mit CSS können Sie viele Eigenschaften steuern, die Sie mit HTML allein nicht steuern können. Beispielsweise können Sie für den ausgewählten Text unterschiedliche Schriftgrößen und Einheiten (Pixel, Punkte usw.) festlegen. Durch die Verwendung von CSS zum Festlegen der Schriftgröße in Pixeln können Sie außerdem einen einheitlicheren Ansatz für das Seitenlayout und das Erscheinungsbild in mehreren Browsern gewährleisten.
CSS-Formatierungsregeln bestehen aus zwei Teilen: Selektoren und Deklarationen. Selektoren sind Begriffe, die formatierte Elemente identifizieren (z. B. P, H1, Klassenname oder ID), während Deklarationen zum Definieren von Stilelementen verwendet werden. Im folgenden Beispiel ist H1 der Selektor und alles zwischen geschweiften Klammern ({}) ist eine Deklaration:
Hier
ist der zitierte Inhalt:
H1
{
font-size:16 pixels
;
Eine Deklaration besteht aus zwei Teilen: Eigenschaften (z. B. Schriftfamilie) und Werten (z. B. Helvetica). Das obige Beispiel erstellt einen Stil für das H1-Tag: Der Text aller mit diesem Stil verknüpften H1-Tags ist 16 Pixel groß und verwendet die Schriftart Helvetica und Fettdruck.
Der Begriff „Kaskadierung“ bezieht sich auf die Möglichkeit, mehrere Stile auf dasselbe Element oder dieselbe Webseite anzuwenden. Sie können beispielsweise eine CSS-Regel zum Anwenden von Farben und eine weitere Regel zum Anwenden von Rändern erstellen und dann beide auf denselben Text auf einer Seite anwenden. Die definierten Stile „kaskadieren“ auf die Elemente auf Ihrer Webseite und erzeugen letztendlich das gewünschte Design.
Der Hauptvorteil von CSS besteht darin, dass es einfach zu aktualisieren ist; solange eine CSS-Regel aktualisiert wird, wird die Formatierung aller Dokumente, die den definierten Stil verwenden, automatisch auf den neuen Stil aktualisiert.
Die folgenden Regeltypen können in Dreamweaver definiert werden:
Mit benutzerdefinierten CSS-Regeln (auch „Klassenstile“ genannt) können Sie Stileigenschaften auf jeden Textbereich oder Textblock anwenden. Alle Klassenstile beginnen mit einem Punkt (.). Sie können beispielsweise einen Klassenstil namens .red erstellen, die Farbeigenschaft der Regel auf Rot festlegen und den Stil dann auf einen Teil des formatierten Absatztextes anwenden.
HTML-Tag-Regeln definieren das Format bestimmter Tags (z. B. p oder h1) neu. Wenn Sie eine CSS-Regel für ein h1-Tag erstellen oder ändern, wird der gesamte mit dem h1-Tag formatierte Text sofort aktualisiert.
CSS-Selektorregeln (erweiterte Stile) definieren die Formatierung bestimmter Elementkombinationen oder anderer von CSS zugelassener Selektorformen neu (wenden Sie beispielsweise den Selektor td h2 immer dann an, wenn eine h2-Überschrift in einer Tabellenzelle erscheint). Erweiterte Stile können auch das Format von Tags neu definieren, die ein bestimmtes ID-Attribut enthalten (z. B. kann ein durch #myStyle definierter Stil auf alle Tags angewendet werden, die das Attribut/Wert-Paar id="myStyle" enthalten).
Erstellen Sie ein neues Stylesheet
Zunächst erstellen Sie ein externes Stylesheet, das CSS-Regeln enthält, die Absatztextstile definieren. Wenn Sie Stile in einem externen Stylesheet erstellen, können Sie das Erscheinungsbild mehrerer Webseiten gleichzeitig von einem zentralen Ort aus steuern, ohne Stile für jede Webseite einzeln festlegen zu müssen.
CSS-Regeln können sich an den folgenden Orten befinden:
Ein externes CSS-Stylesheet ist eine Reihe von CSS-Regeln, die in einer separaten externen CSS-Datei (keine HTML-Datei) gespeichert sind. Die CSS-Datei ist über Links im Kopfbereich des Dokuments mit einer oder mehreren Seiten der Website verknüpft.
Ein internes (oder eingebettetes) CSS-Stylesheet ist eine Reihe von CSS-Regeln, die im Style-Tag im Kopfbereich eines HTML-Dokuments enthalten sind. Im folgenden Beispiel wird beispielsweise die Schriftgröße für den gesamten Text in einem Dokument definiert, für das Absatz-Tags festgelegt sind:
:<head>
<Stil>
P{
Schriftgröße: 80px
}
</style>
</head>:
Inline-Stile werden innerhalb bestimmter Tag-Instanzen innerhalb des HTML-Dokuments definiert. Zum Beispiel,
„p style="font-size: 9px"“
Definiert die Schriftgröße nur für Absätze, die mit Tags formatiert sind, die Inline-Stile enthalten.
Dreamweaver rendert die meisten Stileigenschaften, die Sie anwenden, und zeigt sie im Dokumentfenster an. Sie können das Dokument auch in einem Browserfenster in der Vorschau anzeigen, um zu sehen, wie die Stile angewendet werden. Einige CSS-Stileigenschaften werden in Microsoft Internet Explorer, Netscape Navigator, Opera und Apple Safari unterschiedlich angezeigt.
Wählen Sie „Datei“ > „Neu“.
Wählen Sie im Dialogfeld „Neues Dokument“ in der Spalte „Kategorie“ die Option „Basisseite“ aus, wählen Sie in der Spalte „Basisseite“ die Option „CSS“ aus und klicken Sie dann auf „Erstellen“.
Im Dokumentfenster wird ein leeres Stylesheet angezeigt. Die Schaltflächen Entwurfsansicht und Codeansicht wurden deaktiviert. CSS-Stylesheets sind reine Textdateien und ihr Inhalt wird nicht zur Anzeige in einem Browser verwendet.
Speichern Sie diese Seite unter dem Namen „café_townsend.css“ („Datei“ > „Speichern“).
Wenn Sie Ihr Stylesheet speichern, achten Sie darauf, es im Ordner „cafe_townsend“ (dem Stammordner Ihrer Website) zu speichern.
Geben Sie den folgenden Code in das Stylesheet ein:
p{
Schriftfamilie: Verdana, serifenlos;
Schriftgröße: 11px;
Farbe: #000000;
Zeilenhöhe: 18px;
Polsterung: 3px;
}
Während Sie Code eingeben, verwendet Dreamweaver Codehinweise, um Optionen vorzuschlagen, die Ihnen beim Vervollständigen Ihrer Eingabe helfen. Wenn Sie Code sehen, den Dreamweaver für Sie ausführen soll, drücken Sie die Eingabetaste (Windows) bzw. die Eingabetaste (Macintosh).
Vergessen Sie nicht, am Ende jeder Zeile nach dem Attributwert ein Semikolon einzufügen.
Der fertige Code sieht wie im folgenden Beispiel aus:
Um das Handbuch anzuzeigen, wählen Sie „Hilfe“ > „Referenzen“ und wählen Sie dann „O'Reilly CSS-Referenz“ aus dem Popup-Menü im Bedienfeld „Referenzen“. Speichern Sie das Stylesheet.
Beigefügtes Stylesheet
Wenn Sie einer Webseite ein Stylesheet hinzufügen, werden die im Stylesheet definierten Regeln auf die entsprechenden Elemente auf der Seite angewendet. Wenn Sie beispielsweise das Stylesheet „café_townsend.css“ an die Seite „index.html“ anhängen, wird der gesamte Absatztext (mit Tags im HTML-Code formatierter Text) gemäß den von Ihnen definierten CSS-Regeln formatiert.
Öffnen Sie im Fenster „Dokumente“ die Datei index.html von Cafe Townsend. (Wenn die Datei bereits geöffnet ist, klicken Sie auf ihre Registerkarte.)
Wählen Sie den ersten Text aus, den Sie im Tutorial: Inhalt zur Seite hinzufügen in die Seite eingefügt haben.
Schauen Sie im Eigenschafteninspektor nach und stellen Sie sicher, dass der Absatz mit Absatz-Tags formatiert ist.
Wenn im Eigenschafteninspektor im Popupmenü „Format“ „Absatz“ angezeigt wird, wurde der Absatz mit dem Absatz-Tag formatiert. Wenn im Eigenschafteninspektor im Popupmenü „Format“ „Keine“ oder etwas anderes angezeigt wird, wählen Sie „Absatz“ aus, um den Absatz zu formatieren.
Wiederholen Sie Schritt 3 für den zweiten Absatz.
Klicken Sie im Bedienfeld „CSS-Stile“ („Fenster“ > „CSS-Stile“) auf die Schaltfläche „Stylesheet anhängen“ in der unteren rechten Ecke des Bedienfelds.
Klicken Sie im Dialogfeld „Externes Stylesheet anhängen“ auf „Durchsuchen“ und navigieren Sie zur Datei „cafe_townsend.css“, die im vorherigen Abschnitt erstellt wurde.
Klicken Sie auf OK.
Der Text im Dokumentfenster wird gemäß den CSS-Regeln im externen Stylesheet formatiert.
Entdecken Sie das Bedienfeld „CSS-Stile“.
Im Bedienfeld „CSS-Stile“ können Sie CSS-Regeln und -Eigenschaften verfolgen, die sich auf das aktuell ausgewählte Seitenelement oder das gesamte Dokument auswirken, und CSS-Eigenschaften ändern, ohne ein externes Stylesheet zu öffnen.
Bitte stellen Sie sicher, dass die Seite index.html im Dokumentfenster geöffnet ist.
Klicken Sie im Bedienfeld „CSS-Stile“ („Fenster“ > „CSS-Stile“) oben im Bedienfeld auf „Alle“ und überprüfen Sie dann Ihre CSS-Regeln.
Im Modus „Alle“ zeigt Ihnen das CSS-Panel alle CSS-Regeln an, die für das aktuelle Dokument gelten, unabhängig davon, ob sie sich in einem externen Stylesheet oder im eigenen Dokument befinden. Im Bereich „Alle Regeln“ sollten zwei Hauptkategorien angezeigt werden: eine Kategorie „Tags“ und eine Kategorie „café_townsend.css“.
Wenn die Etikettenkategorie nicht erweitert ist, klicken Sie auf das Pluszeichen (+), um die Kategorie zu erweitern.
Klicken Sie auf die Körperregel.
Die Eigenschaft „Hintergrundfarbe“ mit dem Wert #000000 wird im unteren Eigenschaftenbereich angezeigt.
Beachten Sie, dass Sie möglicherweise andere Bedienfelder, z. B. das Dateibedienfeld, ausblenden müssen, um das vollständige Bedienfeld „CSS-Stile“ anzuzeigen. Außerdem können Sie die Länge des Bedienfelds „CSS-Stile“ ändern, indem Sie den Rand zwischen den Bereichen ziehen.
Sie legen die Hintergrundfarbe der Seite im Tutorial: Erstellen eines tabellenbasierten Seitenlayouts mithilfe des Dialogfelds „Seiteneigenschaften ändern“ fest. Wenn Sie Seiteneigenschaften auf diese Weise festlegen, schreibt Dreamweaver einen CSS-Stil, der in das Dokument integriert wird.
Klicken Sie auf das Pluszeichen (+), um die Kategorie „café_townsend.css“ zu erweitern.
Klicken Sie auf pRule.
Alle im externen Stylesheet für die p-Regel definierten Eigenschaften und Werte werden im Eigenschaftenbereich unten angezeigt.
Klicken Sie im Dokumentfenster einmal irgendwo in die beiden Absätze, die Sie gerade formatiert haben.
Klicken Sie im Bedienfeld „CSS-Stile“ oben im Bedienfeld auf „Aktuell“ und überprüfen Sie dann Ihre CSS-Stile. Im aktuellen Modus zeigt Ihnen das CSS-Bedienfeld eine Zusammenfassung der Eigenschaften der aktuellen Auswahl. Die angezeigten Eigenschaften entsprechen den Eigenschaften der p-Regel im externen Stylesheet.
Im nächsten Abschnitt verwenden Sie das Bedienfeld „CSS-Stile“, um eine neue Regel zu erstellen. Das Erstellen neuer Regeln mit dem Bedienfeld „CSS-Stile“ ist viel einfacher als das manuelle Eingeben der Regeln, genau wie beim ursprünglichen Erstellen eines externen Stylesheets.
Erstellen Sie neue CSS-Regeln
In diesem Abschnitt verwenden Sie das Bedienfeld „CSS-Stile“, um eine benutzerdefinierte CSS-Regel oder einen Klassenstil zu erstellen. Mit Klassenstilen können Sie die Stileigenschaften eines beliebigen Textbereichs oder -blocks festlegen und auf jedes HTML-Tag anwenden. Weitere Informationen zu den verschiedenen Arten von CSS-Regeln finden Sie unter Grundlegendes zu CSS.
Klicken Sie im Bedienfeld „CSS-Stile“ unten rechts auf „Neue CSS-Regel“.
Wählen Sie im Dialogfeld „Neue CSS-Regel“ unter der Option „Selektortyp“ die Option „Klasse“ aus. Diese Option sollte standardmäßig ausgewählt sein.
Geben Sie .bold in das Textfeld „Name“ ein.
Stellen Sie sicher, dass Sie vor dem Wort „fett“ einen Punkt (.) eingeben. Alle Klassenstile müssen mit einem Punkt beginnen.
Wählen Sie im Popup-Menü „Definieren in“ die Datei „cafe_townsend.css“ aus. Diese Datei sollte standardmäßig ausgewählt sein.
Klicken Sie auf OK.
Das Dialogfeld „CSS-Regeldefinition“ wird angezeigt und zeigt an, dass Sie in der Datei „cafe_townsend.css“ einen Klassenstil namens „.bold“ erstellen.
Gehen Sie im Dialogfeld „CSS-Regeldefinition“ wie folgt vor:
Geben Sie im Textfeld „Schriftart“ „Verdana, sans-serif“ ein.
Geben Sie im Textfeld „Größe“ den Wert 11 ein und wählen Sie im Popup-Menü direkt rechts die Option „Pixel“ aus.
Geben Sie im Textfeld „Zeilenhöhe“ 18 ein und wählen Sie im Popup-Menü direkt rechts die Option „Pixel“ aus.
Wählen Sie „Fett“ aus dem Einblendmenü „Gewicht“ aus.
Geben Sie im Textfeld „Farbe“ den Wert „990000“ ein.
Tipp Weitere Informationen zu CSS-Eigenschaften finden Sie im O'Reilly-Referenzhandbuch, das in Dreamweaver enthalten ist. Um das Handbuch anzuzeigen, wählen Sie „Hilfe“ > „Referenzen“ und wählen Sie dann „O'Reilly CSS-Referenz“ aus dem Popup-Menü im Bedienfeld „Referenzen“.
Klicken Sie auf OK.
Klicken Sie oben im Bedienfeld „CSS-Stile“ auf die Schaltfläche „Alle“.
Wenn die Kategorie „café_townsend.css“ nicht erweitert ist, klicken Sie auf die Plus-Schaltfläche (+) neben der Kategorie.
Sie können sehen, dass Dreamweaver den Klassenstil .bold zur Liste der im externen Stylesheet definierten Regeln hinzugefügt hat. Wenn Sie im Bereich „Alle Regeln“ auf eine .bold-Regel klicken, werden die Eigenschaften der Regel im Bereich „Eigenschaften“ angezeigt. Die neuen Regeln werden auch im Popup-Menü „Stil“ des Eigenschafteninspektors angezeigt.
Wenden Sie den Klassenstil auf den Text an
Jetzt haben Sie eine Klassenregel erstellt und diese auf einen Absatztext angewendet.
Wählen Sie im Dokumentfenster die ersten vier Wörter des Textes im ersten Absatz aus: Cafe Townsends visionärer Koch.
Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) im Popup-Menü „Stil“ die Option „Fett“.
Auf Ihren Text wird der Stil „Fett“ angewendet.
Wiederholen Sie Schritt 2, um den Stil „fett“ auf die ersten vier Wörter des zweiten Absatzes anzuwenden.
Speichern Sie die Seite.
Formatieren Sie den Text der Navigationsleiste.
Als Nächstes verwenden Sie CSS, um Stile auf den Linktext der Navigationsleiste anzuwenden. Viele Webseiten verwenden farbige rechteckige Bilder mit eingebettetem Text, um Navigationsleisten zu erstellen. Wenn Sie jedoch CSS verwenden, müssen Sie lediglich den Linktext und einige Formatierungen festlegen. Indem Sie die Eigenschaft display:block verwenden und die Breite des Blocks festlegen, können Sie effektiv ein Rechteck erstellen, ohne ein zusätzliches Bild zu verwenden.
Erstellen Sie eine neue Regel für die Navigation.
Öffnen Sie die Datei „cafe_townsend.css“, falls sie noch nicht geöffnet ist, oder klicken Sie auf die entsprechende Registerkarte, um die Datei anzuzeigen.
Definieren Sie eine neue Regel, indem Sie den folgenden Code nach dem Klassenstil .bold in der Datei eingeben:
.navigation {
}
Dies ist eine leere Regel.
Der Code in der Datei sollte wie im folgenden Beispiel aussehen:
Speichern Sie die Datei „café_townsend.css“.
Als Nächstes verwenden Sie das Bedienfeld „CSS-Stile“, um der Regel Eigenschaften hinzuzufügen.
Wenn die Datei index.html nicht geöffnet ist, öffnen Sie die Datei.
Stellen Sie im Bedienfeld „CSS-Stile“ sicher, dass der Modus „Alle“ ausgewählt ist, wählen Sie die neue Navigationsregel aus und klicken Sie in der unteren rechten Ecke des Bedienfelds auf „Stile bearbeiten“.
Gehen Sie im Dialogfeld „CSS-Regeldefinition“ wie folgt vor:
Geben Sie im Textfeld „Schriftart“ „Verdana, sans-serif“ ein.
Wählen Sie „16“ aus dem Einblendmenü „Größe“ und wählen Sie dann „Pixel“ aus dem Einblendmenü direkt rechts daneben aus.
Wählen Sie „Normal“ aus dem Popup-Menü „Stil“.
Wählen Sie „Keine“ aus der Änderungsliste aus.
Wählen Sie „Fett“ aus dem Einblendmenü „Gewicht“ aus.
Geben Sie im Textfeld „Farbe“ #FFFFFF ein.
Um das Handbuch anzuzeigen, wählen Sie „Hilfe“ > „Referenzen“ und wählen Sie dann „O'Reilly CSS-Referenz“ aus dem Popup-Menü im Bedienfeld „Referenzen“.
Klicken Sie auf OK.
Jetzt verwenden Sie das Bedienfeld „CSS-Stile“, um der .navigation-Regel weitere Eigenschaften hinzuzufügen.
Stellen Sie sicher, dass im Bedienfeld „CSS-Stile“ die Regel „.navigation“ ausgewählt ist, und klicken Sie dann auf „Listenansicht anzeigen“.
Durch die Listenansicht werden im Eigenschaftenbereich alle verfügbaren Eigenschaften in alphabetischer Reihenfolge angezeigt (im Gegensatz zur Ansicht „Eigenschaften festlegen“, in der nur festgelegte Eigenschaften angezeigt werden).
Klicken Sie in die Spalte rechts neben der Eigenschaft „Hintergrundfarbe“.
Um den vollständigen Inhalt einer Eigenschaft anzuzeigen, platzieren Sie den Mauszeiger über der Eigenschaft.
Geben Sie den Hexadezimalwert #993300 ein und drücken Sie die Eingabetaste (Windows) oder die Eingabetaste (Macintosh).
Tipp Um die Auswirkungen Ihrer Arbeit auf ein externes Stylesheet zu sehen, lassen Sie die Datei „cafe_townsend.css“ im Dokumentfenster geöffnet, während Sie arbeiten. Wenn Sie im Bedienfeld „CSS-Stile“ eine Auswahl treffen, sehen Sie auch, dass Dreamweaver CSS-Code in das Stylesheet schreibt.
Suchen Sie die Anzeigeeigenschaft (möglicherweise müssen Sie nach unten scrollen), klicken Sie einmal in die rechte Spalte und wählen Sie im Popup-Menü den Block aus.
Suchen Sie die Eigenschaft „padding“, klicken Sie einmal in die rechte Spalte, geben Sie einen Wert von 8 Pixel ein und drücken Sie die Eingabetaste (Windows) bzw. die Eingabetaste (Macintosh).
Suchen Sie die Eigenschaft „Breite“, klicken Sie einmal in die rechte Spalte, geben Sie 140 in das erste Textfeld ein, wählen Sie „Pixel“ aus dem Popup-Menü und drücken Sie die Eingabetaste (Windows) bzw. die Eingabetaste (Macintosh).
Klicken Sie auf Einstellungen-Eigenschaften anzeigen, um nur die Eigenschaften anzuzeigen, die Sie im Eigenschaftenbereich festgelegt haben.
Klicken Sie auf die Datei „café_townsend.css“, um sie anzuzeigen. Sie werden sehen, dass Dreamweaver alle von Ihnen angegebenen Eigenschaften zur Datei hinzugefügt hat.
Speichern und schließen Sie die Datei „café_townsend.css“.
Jetzt haben Sie eine Regel erstellt, die den Text der Navigationsleiste formatiert. Als Nächstes wenden Sie die Regel auf die ausgewählten Links an.
Regeln anwenden
Klicken Sie bei geöffneter index.html-Seite im Dokumentfenster auf das Wort „Cuisine“, um die Einfügemarke irgendwo im Wort zu platzieren.
Klicken Sie in der Beschriftungsauswahl auf die Beschriftung ganz rechts.
Durch diesen Vorgang wird der gesamte Text für die angegebene Beschriftung oder den angegebenen Link ausgewählt.
Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) im Popup-Menü „Stil“ die Option „Navigation“ aus.
Im Dokumentfenster hat sich das Erscheinungsbild des Cuisine-Textes vollständig geändert. Der Text ist jetzt als Navigationsleistenschaltfläche formatiert, basierend auf den Eigenschaften, die Sie im vorherigen Abschnitt für die Navigationsregel definiert haben.
Wiederholen Sie die Schritte 1 bis 3 für jeden Link in der Navigationsleiste.
Sie müssen jeder Beschriftung oder jedem Link einen Navigationsklassenstil zuweisen. Daher ist es wichtig, jeden Link einzeln mit der Beschriftungsauswahl auszuwählen und dann jedem Link einzeln einen Klassenstil zuzuweisen.
Wenn Sie Probleme beim Formatieren des Linktexts haben, stellen Sie sicher, dass zwischen den einzelnen verknüpften Wörtern (oder Gruppen von verknüpften Wörtern) Leerzeichen (keine Zeilenumbrüche) stehen. Stellen Sie außerdem sicher, dass der Raum zwischen den beiden Links nicht selbst verknüpft ist. Wenn die Leerzeichen verknüpft sind, wählen Sie die verknüpften Leerzeichen sorgfältig aus, leeren Sie das Textfeld „Verknüpfen“ im Eigenschafteninspektor und drücken Sie die Eingabetaste (Windows) bzw. die Eingabetaste (Macintosh).
Wenn Sie mit der Formatierung aller Wörter in der Navigationsleiste fertig sind, speichern Sie die Seite und zeigen Sie eine Vorschau Ihrer Arbeit in einem Browser an (Datei > Vorschau im Browser).
Sie können auf den Link klicken, um sicherzustellen, dass es funktioniert.
Mouseover-Effekt hinzufügen
Jetzt fügen Sie einen Rollover-Effekt hinzu, der bewirkt, dass sich die Hintergrundfarbe der Navigationsleiste jedes Mal ändert, wenn der Mauszeiger über einen Link bewegt wird. Um einen Mouseover-Effekt hinzuzufügen, fügen Sie eine neue Regel hinzu, die die Pseudoklasse :hover enthält.
Über... Über:hover Pseudoklassen Pseudoklassen sind eine Möglichkeit, bestimmte Elemente in einem HTML-Dokument zu beeinflussen, nicht basierend auf dem HTML-Code des Dokuments selbst, sondern basierend auf anderen externen Bedingungen, die vom Webbrowser angewendet werden. Pseudoklassen können dynamisch sein, was bedeutet, dass Elemente auf der Seite bei der Interaktion des Benutzers mit dem Dokument Pseudoklassen gewinnen oder verlieren können.
Die Pseudoklasse :hover wirkt sich auf Änderungen an einem formatierten Seitenelement aus, wenn der Benutzer den Mauszeiger über das Element bewegt. Wenn Sie beispielsweise die Pseudoklasse :hover zu einem .navigation-Klassenstil (.navigation:hover) hinzufügen, um eine neue Regel zu erstellen, ändern sich alle mit der .navigation-Regel formatierten Textelemente basierend auf den Eigenschaften von .navigation: Hover-Regel.
Öffnen Sie die Datei „café_townsend.css“.
Wählen Sie die gesamte Navigationsregel aus.
Text kopieren („Bearbeiten“>„Kopieren“).
Klicken Sie einmal am Ende der Regel und drücken Sie dann noch einige Male die Eingabetaste (Windows) bzw. die Eingabetaste (Macintosh), um etwas Platz zu schaffen.
Fügen Sie den kopierten Text in den soeben erstellten Bereich ein („Bearbeiten“ > „Einfügen“).
Fügen Sie die :hover-Pseudoklasse wie folgt zum eingefügten .navigation-Selektor hinzu:
Ersetzen Sie in der neuen .navigation:hover-Regel die aktuelle Hintergrundfarbe (#993300) durch #D03D03.
Speichern und schließen Sie die Datei.
Öffnen Sie die Datei index.html im Dokumentfenster und zeigen Sie eine Vorschau der Seite in einem Browser an (Datei > Vorschau im Browser).
Wenn Sie den Mauszeiger auf einen beliebigen Link bewegen, können Sie den neuen Mouseover-Effekt sehen.