So stylen Sie Links mit CSS?

Links sind Entitäten, die neue Standorte anzeigen. Diese Hyperlinks oder Links spielen in Websites eine wichtige Rolle, wenn Ihre Benutzer andere Inhalte online besuchen sollen. Diese bezeichnen entweder Inhalte, die auf derselben Website verfügbar sind, oder in anderen Websites, die auf anderen Websites verfügbar sind. Jetzt wissen wir, wie wichtig es ist, dass Ihre Website visuell erfreulich aussieht. Daher ist das Styling von Hyperlinks genauso wichtig wie ein anderes Element auf Ihrer Website zu stylen. Sie müssen darüber nachdenken, wie das geht. Halten Sie sich fest, denn dieser Beitrag leitet Sie alle über Styling -Links.

Wie man Links style?

Links oder Hyperlinks auf einer Website können mit verschiedenen CSS -Eigenschaften gestaltet werden. Styling -Links können ihre Farbe, Schriftgröße, Schriftfamilie usw. ändern, usw.

Beispiel
Angenommen, Sie möchten, dass ein Hyperlink auf Ihrer Website einen mutigen Stil haben und seine Farbe grün sein sollte. Verwenden Sie das folgende Code -Stück.

Ausgang

Die Farbe und das Schriftgewicht des Links wurden erfolgreich verändert.

Styling -Links nach Staaten

Auf einer Website angezeigte Links haben unterschiedliche Zustände und können basierend auf ihrem aktuellen Zustand gestaltet werden. Die verschiedenen Staaten, die eine Verbindung haben kann;

eine Verbindung (Ein Link, der vom Benutzer noch nicht besucht wurde)

A: Besucht (Ein Link, der vom Benutzer besucht wurde)

A: Schwebe (Der Zustand der Verbindung, wenn ein Mauszeiger über die Verbindung verschoben wird)

A: aktiv (Der Status des Links, wenn der Benutzer auf den Link klickt)

Styling -Links gemäß ihren Zuständen ist notwendig, da er den Benutzer den Zustand eines Links verstehen lässt und den Benutzer daran hindert, sich einer Verwirrung zu stellen.

Beispiel
Verwenden Sie das folgende Code -Snippet, um Links auf Ihrer Website gemäß ihrem Bundesstaat zu stylen.

Ausgang

1. Wenn der Link noch nicht vom Benutzer besucht wird.
   
2. Wenn der Benutzer den Link besucht.
   
3. Wenn der Benutzer die Maus über den Link bringt.
   
4. Wenn der Benutzer auf den Link klickt.
   

Notiz: Behalten Sie beim Stylen mehrerer Links die oben genannte Reihenfolge bei, damit sich Ihre Links entsprechend verhalten. Nehmen wir an, Sie stylen zuerst schwebe, anstatt zu einem Besuch zu stylen, dann wird der für besuchte Stil den Schwebungsstil überschreiben, und dies ist eine Situation, die man vermeiden muss.

So entfernen Sie die Standard -Unterstreichung von HPerLinks

Standardmäßig gibt es eine Unterstreichung von Links in einer Website, die manchmal unerwünscht sein kann. Sie können die Unterstreichung von Links mithilfe der textableitenden Eigenschaft von CSS entfernen. Das folgende Code -Snippet zeigt, wie es gemacht werden kann.

Im obigen Beispiel wird die Standard-Unterstreichung aus einem nicht besuchten Link entfernt, indem der Wert der textdekorationsbezogenen Eigenschaft auf "Keine" festgelegt wird. Sie können das obige Code -Snippet verwenden, um auch eine Unterstreichung aus anderen Zuständen eines Links zu entfernen.

Ausgang

Die Standardunterstunde wird erfolgreich aus dem nicht besuchten Link entfernt.

Links als Schaltflächen

Manchmal können die üblichen Textlinks, die auf einer Website angezeigt werden, langweilig sein. Daher können Sie, um sie attraktiver zu machen. Das Erstellen von Links als Schaltflächen verwendet mehrere CSS-Eigenschaften wie Polsterung, Rand, Hintergrundfarbe usw.

Das folgende Beispiel zeigt, wie Sie Links als Schaltflächen verwenden.

Im obigen Code -Snippet wird ein Link als Schaltfläche angezeigt. Die nicht besuchten und besuchten Zustände des Knopfes werden anders als der Schwebe- und aktive Zustände des Links gestaltet.

Ausgang

1. Der nicht besuchte und besuchte Status des Button -Links.
   
2. Der Schwebe- und aktive Zustände des Button -Links.
   

Ein Link in allen Staaten ist erfolgreich als Knopf konzipiert.

Abschluss

Styling Links oder Hyperlinks auf einer Website ist ebenso wichtig wie ein anderes Element zu stylen. Zum Zwecke des Styling-Links werden verschiedene CSS-Eigenschaften verwendet, z. B. Farbe, Hintergrundfarbe, Schriftfamilie, Schriftstil usw. Links können auch nach ihren Staaten gestylt werden, die nicht besucht, besucht, schweben und außerdem aktiv sind, um das Aussehen von Links zu verbessern, die auf Websites angezeigt werden. Sie können Links als Schaltflächen verwenden. In diesem Artikel wird erläutert.