Links sind auf Webseiten sehr häufig, aber viele Webdesigner erkennen nicht die Fähigkeit von CSS, ihre Links effektiv zu manipulieren und zu verwalten. Sie können Verknüpfungen mit besuchten, Hover- und aktiven Status definieren. Sie können auch mit Rahmen und Hintergründen arbeiten, um Ihren Links mehr Pizzaz zu verleihen oder sie wie Schaltflächen oder sogar Bilder aussehen zu lassen.
Die meisten Webdesigner beginnen mit der Definition eines Stils im ein Etikett:
eine {Farbe: Rot; }
Dadurch werden alle Aspekte des Links (Hover, besucht und aktiv) dargestellt. Um jedes Teil separat zu gestalten, müssen Sie Link-Pseudoklassen verwenden.
Pseudo-Klassen verknüpfen
Es gibt vier grundlegende Typen von Link-Pseudoklassen, die Sie definieren können:
- : link - Dies ist der Standardstil für den Link
- : besucht - nachdem ein Link angeklickt wurde
- : hover - wie sich eine Maus über einem Link befindet (Pre-Click)
- : aktiv - Rechts, wenn der Link angeklickt wird
Um eine Link-Pseudoklasse zu definieren, verwenden Sie sie mit der ein Tag in Ihrem CSS-Selector. Um die besuchte Farbe aller Links in Grau zu ändern, schreiben Sie:
a: besucht {Farbe: grau; }
Wenn Sie eine Link-Pseudo-Klasse formatieren, ist es eine gute Idee, alle zu formatieren. So werden Sie nicht durch fremde Ergebnisse überrascht. Wenn Sie also nur die besuchte Farbe in Grau ändern möchten, während alle anderen Pseudo-Eigenschaften Ihrer Links schwarz bleiben, schreiben Sie Folgendes:
a: link, a: hover, a: active {color: black; } a: besuchte {Farbe: grau; }
Ändern Sie die Verbindungsfarben
Die beliebteste Methode zum Stilisieren von Links ist das Ändern der Farbe, wenn der Mauszeiger darüber bewegt wird:
a {color: # 00f; } a: hover {color: # 0f0; }
Vergessen Sie nicht, dass Sie das Aussehen des Links beeinflussen können, während er mit der aktiven Eigenschaft:
a {color: # 00f; } a: active {color: # f00; }
Oder wie der Link aussieht, nachdem Sie ihn mit der besuchten Eigenschaft besucht haben:
a {color: # 00f; } a: besuchte {color: # f0f; }
Um alles zusammenzufassen:
a {color: # 00f; } a: besuchte {color: # f0f; } a: hover {color: # 0f0; } a: active {color: # f00; }
Fügen Sie den Links Hintergründe hinzu, um Symbole oder Aufzählungszeichen hinzuzufügen
Wenn Sie ein wenig mit dem Hintergrund spielen, können Sie einen Link erstellen, dem ein Symbol zugeordnet ist. Wählen Sie ein Symbol aus, das ungefähr 15 x 15 Pixel groß ist, es sei denn, Ihr Text ist größer. Platzieren Sie den Hintergrund auf einer Seite des Links und setzen Sie die Wiederholungsoption auf Keine Wiederholung. Füllen Sie dann den Link so auf, dass der Text innerhalb des Links so weit nach links oder rechts verschoben wird, dass das Symbol angezeigt wird.
a {padding: 0 2px 1px 15px; Hintergrund: #fff url (ball.gif) links in der Mitte keine Wiederholung; Farbe: # c00; }
Sobald Sie Ihr Symbol erhalten haben, können Sie ein anderes Bild als Hover-, Aktiv- und Besuchssymbole festlegen, um die Verknüpfung zu ändern:
a {padding: 0 2px 1px 15px; Hintergrund: #fff url (ball.gif) links in der Mitte keine Wiederholung; Farbe: # c00; } a: hover {background: #fff url (ball2.gif) linkes Zentrum ohne Wiederholung; } a: active {background: #fff url (ball3.gif) linkes Zentrum ohne Wiederholung; }
Machen Sie Ihre Links wie Buttons aussehen
Schaltflächen sind sehr beliebt, aber bis CSS eingeführt wurde, mussten Schaltflächen mithilfe von Bildern erstellt werden, sodass das Laden der Seiten länger dauert. Glücklicherweise gibt es einen Rahmenstil, mit dem Sie mit CSS auf einfache Weise einen schaltflächenähnlichen Effekt erstellen können.
a {border: 4px Beginn; Polsterung: 2px; Textdekoration: keine; } a: active {border: 4px Einfügung; }
Wenn Sie Farben für den Anfang und die Einfügungsstile verwenden, rendern Browser diese wahrscheinlich nicht so, wie Sie es erwarten. Hier ist ein schicker Button mit farbigen Rändern:
ein {border-style: solid; Randbreite: 1px 4px 4px 1px; Textdekoration: keine; Polsterung: 4px; Rahmenfarbe: # 69f # 00f # 00f # 69f; }
Sie können auch den Schwebeflug und die aktiven Stile eines Schaltflächenlinks beeinflussen. Verwenden Sie einfach diese Pseudoklassen:
a: link {border-style: solid; Randbreite: 1px 4px 4px 1px; Textdekoration: keine; Polsterung: 4px; Rahmenfarbe: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }
