CSS Active Link
Beispiel 1
Öffnen Sie Ihre HTML -Datei, um Links zu erstellen. Um diese Links zu stylen, werden wir unsere CSS -Datei erstellen. Wir verwenden das Visual Code Studio, um diese Beispiele durchzuführen. Wir erstellen also die HTML -Datei, und der HTML -Code wird auch hier angegeben. Speichern Sie ihn nach Abschluss des Codes mit dem “.HTML ”Erweiterung.
Im vorherigen HTML -Code erstellen wir drei verschiedene Links. Der erste Link, den wir erstellt haben, ist der Link "Google", der zweite Link ist der Link "Yahoo" und der letzte Link ist der Link "Firefox". Wir werden diese Links auch in CSS stylen. Diese HTML -Datei ist hier, um diese Links nur zu erstellen. Gehen Sie nun in die folgende CSS -Datei und sehen Sie, wie Sie diese Links stylen können.
CSS -Code
Im vorherigen Bild verwenden wir den Selektor „: Active“, mit dem wir diesem Link Stil verleihen. Wenn der Benutzer diesen Link drückt, wird die Hintergrundfarbe des Links "Gelb". Dann haben wir den ": link" -Ausokustor, der den Link stilft, der nicht besucht wird, und die Farbe des nicht besuchten Links zu "Blau" verändert und "Blau" verändert. Es wird auf dem Bildschirm "blau" erscheinen. Danach verwenden wir den Selektor ": besucht", und dieser besuchte Selektor ändert die Farbe des besuchten Links zu "Lila". Schließlich haben wir den Selektor ": schweben", in dem wir die Farbe des Links zu einer "roten" Farbe ändern, wenn sich der Cursor über den Link bewegt. Wenn Sie Ihre Maus auf diese Links verschieben, ändert sich die Farbe dieser Links zu „Rot“. In diesem Beispiel haben wir die Farbe des Links geändert, wenn Sie darauf schweben und den Link oder die Farbe des nicht besuchten Links besuchen.
Ausgang
Sie können drei Links im vorherigen Bild sehen. Die ersten beiden Links sind Farbe „lila“, so dass diese beiden Links besucht werden. Die Farbe des dritten Links ist „blau“, was bedeutet, dass dieser dritte Link nicht besucht wird, da wir diese Farben im CSS -Code für die besuchten und unbevölkerten Links festlegen. Wenn wir auf einem Link schweben, verwandelt sich die Farbe in eine „rote“ Farbe. Wenn wir auf einen Link klicken, erscheint die Farbe des Hintergrunds des Links "Gelb". Wenn wir auf den ersten Google -Link klicken, wird die Google -Seite auf dem Bildschirm angezeigt, wie im folgenden Bild gezeigt:
Beispiel 2
Dies ist ein weiteres Beispiel, in dem wir einen Zusammenhang zwischen dem Absatz erstellen und diesem Link in CSS Stile geben. Mal sehen, wie der Link zwischen den Absätzen aktiv ist.
Im vorherigen Bild können Sie sehen, dass wir einen Absatz mit HTML erstellt und einen Link zwischen dem Absatz hinzugefügt haben. Wir werden in diesem Beispiel CSS verwenden, um die Farbe des Links und der Absätze zu ändern.
CSS -Code
In der vorherigen CSS -Datei können Sie feststellen, dass wir die Farbe des Links in „Blau“ in den lockigen Klammern von „: link“ geändert haben, sodass dieser Link zwischen den Absätzen blau erscheint. Dann verwenden wir eine „rote“ Farbe für den besuchten Link. Für "Hover" wählen wir die Hintergrundfarbe als "Gelb" aus. Die „aktive“ Farbe des Link. Wenn der Link aktiv ist, ändert er die Farbe des Links sowie die Hintergrundfarbe des Absatzes.
Ausgang
In dieser ersten Ausgabe sehen Sie, dass die Farbe des Links im Absatz „blau“ erscheint, da wir sie in unserer CSS -Datei als „blau“ festlegen.
In der zweiten Ausgabe wendet sich die Farbe des Links zu „Rot“, was bedeutet, dass wir den Link hier besucht haben, sodass seine Farbe von „Blau“ zu „Rot“ geändert wird.
Beispiel 3
In diesem dritten Beispiel werden wir die Schriftgröße, den Schriftart und die Farben des Links mit CSS ändern. Dafür müssen wir verschiedene Links in HTML erstellen.
In der vorherigen HTML haben wir fünf verschiedene Links mit den verschiedenen Klassen innerhalb des "" erstellt. Wir geben den Namen der Klasse als "link1", "link2", "link3", "link4" und "link5" an. Wir verwenden diese Namen, um den Stil des Links zu ändern.
CSS -Code
Wir verwenden den Namen "Link1" der Klasse und wenden den Stil auf diesen ersten Link an. Der erste Link erscheint "rot", wenn er "aktiv" ist. Dann ändern wir die „Schriftgröße“ des zweiten Links. Wenn wir über diesen Link schweben, erhöht sich die Größe dieses Links auf „150%“. Wir setzen die "Hintergrundfarbe" des dritten Links auf "Rot". Wir ändern den Schriftart des vierten Links, indem wir die Eigenschaft „Schriftfamilie“ verwenden. Wir verwenden die "Textdekoration" im fünften Link und setzen sie auf "Untersteuerung". Der Ausgang wird angezeigt.
Ausgang
Diese Ausgabe ändert seine Farbe, wenn wir über den ersten Link schweben. Wenn wir über den zweiten Link schweben, ändert sich seine Schriftgröße. Wenn es um den dritten Link geht, ändert sich seine Hintergrundfarbe. Der Schriftstil ändert sich zu „Monospace“, wenn Sie über den vierten Link schweben.
Beispiel 4
In diesem Beispiel werden wir zwei Link -Schaltflächen mit Links in den Schaltflächen erstellen. Auf dem ersten Knopf platzieren wir den Link von "Google Mail". In der zweiten Schaltfläche setzen wir den Link von "Facebook" ein. Wenn Sie also auf die Schaltfläche klicken, wird die Google Mail -Seite geöffnet. Wenn Sie auf die zweite Schaltfläche klicken, wird die Facebook -Seite geöffnet. Jetzt möchten wir auch den Stil dieser Links anwenden.
Wenn dieser Link aktiv ist, erscheint die Farbe dieses Link. Wenn wir über diesen Link schweben, der sich in der Schaltfläche befindet, wird die Farbe der Schaltfläche „Pink“, während wir diese Farbe in der CSS -Datei einstellen. Nach dem Besuch dieser Links wird die Farbe „blau“ sein und die Farbe des Hintergrunds der Knopf ist „weiß“ sein.
Ausgang
Die vorherige Ausgabe zeigt zwei Link -Schaltflächen, in denen wir zwei verschiedene Links haben, und Sie können sehen, dass die Farbe beider Links „blau“ ist, was bedeutet, dass beide Links besucht werden.
Abschluss
Wir haben in diesem Handbuch etwas über den „aktiven Link“ erfahren. Wir haben mit den CSS -Eigenschaften unterschiedliche Styling auf unterschiedlichen Links angewendet. Wir haben hier vier verschiedene Beispiele durchgeführt, da wir wissen, dass der Link beim Drücken aktiv ist. Hier haben wir den Stil des aktiven Links, die Schriftgröße des Links geändert, wenn wir darüber schweben, und die Farbe nach dem Besuch des Links. Wir haben verschiedene Farben für die besuchten und nicht besuchten Links in diesem Leitfaden verwendet. Wir haben gelernt, diese aktiven Links in CSS im Detail zu stylen.