Latest web development tutorials

CSS Link (Link)

Verschiedene Verbindungen können unterschiedliche Stile haben.

Verbindungs-Art

Style-Links können Sie alle CSS-Eigenschaften verwenden (wie Farbe, Schriftart, Hintergrund, etc.).

Spezielle Verbindungen können unterschiedliche Stile haben, je nachdem, welchem ​​Zustand sie sind.

Die vier Verbindungszustände sind:

  • a: link - Normal, nicht besuchte Links
  • a: visited - der Nutzer hat besuchte Links
  • a: Hover - wenn der Benutzer mit der Maus über den Link, wenn
  • a: aktiv - wird der Link in dem Moment angeklickt

Beispiele

a: link {color: # FF0000;} / * unvisited Link * /
a: visited {color: # 00FF00;} / * besuchte Links * /
a: Hover {color: # FF00FF;} / * die Maus auf den Link * bewegen /
a: active {color: # 0000FF;} / * Mausklick * /

Versuchen »

Bei einer Reihe von Link-State-Stil gesetzt, gibt es einige Regeln der Ordnung:

  • a: link und: a: Hover muss eine folgen später besuchte
  • a: active muss folgen: schweben hinter

Gemeinsame Link Stil

Gemäß dem Beispiel oben Link Farbe zu ändern, um zu sehen, in welchem ​​Zustand sie sich befindet.

Schauen wir uns einige andere gemeinsame Wege Link-Stil aussehen:

Text-decoration

text-decoration-Attribut wird in erster Linie verwendet, um die Unterstreichungen auf Links zu entfernen:

Beispiele

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Versuchen »

Hintergrundfarbe

Hintergrundfarbe Eigenschaft gibt die Hintergrundfarbe der Link:

Beispiele

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

Versuchen »

Beispiele

Weitere Beispiele

Fügen Sie verschiedene Arten von Hyperlinks
Dieses Beispiel zeigt, wie andere Stile zu Hyperlinks hinzuzufügen.

Erweitert - Links erstellen Box
Dieses Beispiel zeigt ein komplexeres Beispiel kombinieren wir eine Reihe von CSS-Eigenschaften als Kästchen angezeigt.