Seit der Erfindung der Hypertext-Auszeichnungssprache HTML haben sich die Konzepte des Layouts und Layouts von Webdokumenten dramatisch verändert. Durch die nahezu vollständige Unterstützung gängiger Browser für die Cascading Stylesheet-Standards CSS und CSS2 ist es möglich geworden, nahezu jeden Aspekt der visuellen Präsentation eines Dokuments zu beeinflussen. Sie können beispielsweise den Hintergrund eines Links farbig gestalten, mit einem Bild füllen und sich auch abhängig von den Aktionen des Benutzers ändern.
Notwendig
- - die Möglichkeit, den Text des Dokuments oder den Text der Dokumentstilvorlagen zu bearbeiten;
- - ein Texteditor, mit dem Sie das Dokument in der Originalkodierung speichern können
Anweisungen
Schritt 1
Machen Sie den Hintergrund des Links gleichmäßig mit einer zufälligen Farbe, indem Sie Inline-Stilinformationen zum Element A hinzufügen. Fügen Sie Stil zu den Attributen des A-Elements hinzu, die dem Link entsprechen, dessen Hintergrund Sie ändern möchten. Platzieren Sie im Inhalt des style-Attributs die CSS-Eigenschaft background-color mit dem angegebenen Wert, der der richtige Bezeichner für die Hintergrundfarbe ist. Es könnte zum Beispiel so aussehen:
Link Text
Schritt 2
Definieren Sie den Hintergrund des Links in einem externen oder eingebetteten Stylesheet in Ihrem Dokument. Fügen Sie im entsprechenden Stylesheet eine Reihe von Regeln hinzu, die von einem Selektor mit akzeptabler Spezifität angesprochen werden. Geben Sie im Regelsatz die Eigenschaft background-color auf die gleiche Weise wie im vorherigen Schritt ein. Wählen Sie die Spezifität des Selektors basierend auf den CSS2-Kaskadierungsregeln und dem gewünschten Umfang aus. Wenn Sie also nur die Farbe eines Links festlegen müssen, ist es sinnvoll, einen ID-Selektor zu verwenden, gibt es mehrere solcher Links, ist es besser, einen Attributselektor basierend auf dem Klassenwert zu verwenden.
Um beispielsweise einen grünen Hintergrund für einen bestimmten Link in einem Dokument festzulegen, können Sie dem Stylesheet eine Reihe von Regeln hinzufügen:
A # ID_GREEN
{
Hintergrundfarbe: # 00FF00;
}
Außerdem sollten Sie das ID-Attribut des A-Elements entsprechend dem gewünschten Link auf ID_GREEN setzen:
Link Text
Schritt 3
Füllen Sie den Hintergrund des Links mit einem Bild. Befolgen Sie die in den Schritten eins und zwei beschriebenen Methoden, verwenden Sie jedoch anstelle der CSS-Eigenschaft background-color background-image. Beispielsweise:
Link Text
Fügen Sie bei Bedarf eine background-repeat-Eigenschaft zum CSS-Regelsatz hinzu, um Optionen zum horizontalen und vertikalen Duplizieren des Hintergrundbilds zu definieren.
Schritt 4
Ändern Sie den Hintergrund des Links, wenn Sie mit der Maus darüber fahren oder sich der Fokus verschiebt. Hinzufügen von Regelsätzen zu einem externen oder eingebetteten Dokument-Stylesheet, die den Hintergrund eines Links oder einer Linkgruppe in verschiedenen Zuständen definieren. Verwenden Sie ID- und Attributselektoren in Verbindung mit den dynamischen Pseudoklassen: hover,: active und: focus. Damit beispielsweise der Hintergrund eines Links mit dem ID-Attributwert ID_DYNAMIC_BACKGROUND im inaktiven Zustand rot und im Zustand unter dem Mauszeiger grün ist, müssen dem Stylesheet die folgenden Regelsätze hinzugefügt werden:
A # ID_DYNAMIC_BACKGROUND
{
Hintergrundfarbe: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: schweben
{
Hintergrundfarbe: # 00FF00;
}
Sie können dasselbe tun, um einen Hintergrund mit einem sich dynamisch ändernden Bild zu erstellen.
