CSS Grundlagen: Links stylen wie ein Profi

Das Web wurde auf Links gegründet. Die Idee, dass wir auf einen Link klicken/tippen und von einer Webseite zu einer anderen navigieren können, ist, wie Surfen im Web zu einem geflügelten Wort wurde.

Links in HTML sehen bereits ohne jegliches CSS-Styling anders aus als normaler Text.

Sie sind blau (lila, wenn besucht). Sie sind unterstrichen. Das ist ein Link in seiner reinsten Form.

Aber was, wenn wir die Dinge ein wenig ändern wollen? Vielleicht passt Blau nicht zum Design Ihrer Website. Vielleicht haben Sie eine Abneigung gegen Unterstreichungen. Was auch immer der Grund ist, CSS ermöglicht es uns, Links genauso zu stylen wie jedes andere Element. Wir müssen nur das <a>-Element in unserem Stylesheet ansprechen.

Möchten Sie eine andere Schriftart verwenden, die Farbe ändern, die Unterstreichung entfernen und alles in Großbuchstaben setzen? Klar, warum nicht?

a {
  color: red;
  text-decoration: none;
  text-transform: uppercase;
}

Jetzt geht die Post ab! Aber warum dort aufhören? Schauen wir uns ein paar andere Möglichkeiten an, wie wir Links gestalten können, um das Erlebnis abzurunden.

Jeden Link-Zustand stylen

Links haben verschiedene Zustände, was bedeutet, dass sie sich anpassen, wenn wir auf einer Webseite mit ihnen interagieren. Es gibt drei zusätzliche Zustände eines Links, die es wert sind, berücksichtigt zu werden, wann immer wir den Standardstil von Links ändern

• Link (:link): Dies ist wahrscheinlich der am wenigsten verwendete, aber er dient dem Stylen von <a>-Elementen, die ein href haben, im Gegensatz zu Platzhalterlinks.
• Besucht (:visited): Das Erscheinungsbild eines Links, auf den der Benutzer zuvor auf der Seite geklickt hat, wenn sich der Mauszeiger nicht darüber befindet. Die Stile, die Sie auf :visited anwenden können, sind aus Sicherheitsgründen eingeschränkt.
• Hover (:hover): Wenn der Mauszeiger über dem Link platziert wird, ohne zu klicken
• Aktiv (:active): Wenn der Link gerade angeklickt wird. Das kann sehr schnell gehen, aber dies ist der Moment, in dem die Maustaste gedrückt wurde und der Klick noch nicht beendet ist.
• Fokus (:focus): Ähnlich wie :hover, aber wenn der Link mit der Tabulator-Taste auf einer Tastatur ausgewählt wird. Hover- und Fokus-Zustände werden oft zusammen gestylt.

Beachten Sie, dass die Reihenfolge dort wichtig ist

1. Link
2. Besucht
3. Hover
4. Aktiv
5. Fokus

Wenn Sie dies nicht in dieser Reihenfolge tun (stellen Sie sich vor, Ihr :visited-Stil kommt nach Ihrem :hover-Stil), verhalten sich die Links nicht ganz so, wie Sie es möchten. In meinem imaginären Beispiel würde der :visited-Stil den :hover-Stil überschreiben, was höchst unwahrscheinlich ist, dass es das ist, was Sie wollen. Fokus ist ein Zugänglichkeitsmerkmal und steht daher zuletzt, weil es am wichtigsten ist.

Eine Eselsbrücke, um sich die Reihenfolge zu merken, ist LOVE and HATE. Das ist L(ink)OV(isited)E / H(over)A(ctive)TE.

Hier ist derselbe Link, den wir uns bisher angesehen haben. Bewegen Sie zunächst Ihre Maus darüber, ohne zu klicken, und Sie werden feststellen, dass er unterstrichen wird. Klicken Sie dann auf den Link, aber halten Sie die Maustaste kurz gedrückt, um zu sehen, wie der aktive Stil die Farbe des Links schwarz färbt. Lassen Sie schließlich die Maustaste los, und der Link sollte lila werden, bevor er technisch gesehen besucht wurde.

Links scheinen ein einfaches Konzept zu sein, aber oh Mann, sie haben viel zu bieten – und CSS gibt uns unglaubliche Möglichkeiten, das Erlebnis anzupassen!

Links als Buttons

Obwohl es darüber eine gewisse Debatte gibt, können wir CSS verwenden, um einen Textlink wie einen Button aussehen zu lassen.

Wie andere HTML-Elemente kann CSS Hintergrundfarben und Abstände zu Links hinzufügen, die es uns ermöglichen, das Aussehen eines Buttons zu erzeugen. Hier ist unser Link mit diesen Techniken

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

Großartig! Nun nutzen wir die Zustands-ändernden Kräfte, die wir im letzten Abschnitt kennengelernt haben, um unseren Faux-Button interaktiver zu gestalten. Wir machen den Button auf Hover dunkelgrau, auf Aktiv schwarz und auf Besuch hellgrau

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

a:hover {
  background-color: #555;
}

a:active {
  background-color: black;
}

a:visited {
  background-color: #ccc;
}

Einen Link als Button zu stylen und die Zustände zu nutzen, ermöglicht es uns, einige ziemlich coole Effekte zu erzielen. Zum Beispiel erstellen wir einen Button mit etwas Tiefe, der beim Aktivieren gedrückt zu werden scheint und beim Beenden des Klicks wieder hochspringt.

Ach ja, und Cursor!

Wir haben uns ziemlich tief mit dem Styling von Links beschäftigt, aber es gibt noch eine weitere Komponente, die wir nicht ignorieren können: den Cursor.

Der Cursor zeigt die Position der Maus auf dem Bildschirm an. Wir sind ziemlich an den Standard-Pfeil gewöhnt

Wir können den Pfeil auf den Handzeiger im Hover-Zustand (:hover) ändern, damit leichter erkennbar ist, dass der Link ein interaktives Element ist

a:hover {
  cursor: pointer;
}

Puh, das ist viel schöner! Jetzt haben wir einen ziemlich schicken Link, der wie ein Button mit ordentlichen interaktiven Hinweisen aussieht.

Aufleveln

Wir haben hier einiges behandelt, aber es kratzt nur an der Oberfläche dessen, wie wir den Stil von Links steuern können. Wenn Sie bereit sind, aufzulegen, finden Sie hier einige Ressourcen, mit denen Sie fortfahren können

• Mailto-Links – Eine gute Referenz zum Verknüpfen von E-Mail-Adressen anstelle von Webseiten.
• Der aktuelle Stand von Telefonlinks – Wussten Sie, dass Sie eine Telefonnummer verlinken können? Nun, hier ist, wie.
• Cursor – Der CSS-Tricks-Referenzleitfaden zum Anpassen des Cursors.
• Wann das Button-Element verwendet werden sollte – Wenn Sie sich über den Unterschied zwischen einem Link-Button und einem traditionellen Formular-Button wundern, ist dies ein guter Überblick mit Vorschlägen, was für bestimmte Kontexte besser geeignet ist.
• Button Maker – Eine kostenlose Ressource zum Generieren von CSS für Link-Buttons.