So gestalten Sie Links mit CSS: Ein ausführliches Anfänger-Tutorial

In diesem Tutorial werden wir darüber sprechen, wie man Weblinks über CSS gestaltet. Links sind ein zentraler Bestandteil jeder Website. Sie ermöglichen es Ihnen, Besucher zu anderen Teilen davon weiterzuleiten, auf Quellen zu verweisen, um Ihre Punkte zu unterstreichen, den Lesern zu helfen, relevantere Blog-Posts zu entdecken, und vieles mehr.

Wenn Sie lernen, wie Sie ihr Design ändern, können Sie sicherstellen, dass sie als Links erkennbar sind und zum Rest Ihrer Website passen. CSS bietet dafür viele verschiedene Möglichkeiten und Eigenschaften, also gehen wir sie nacheinander durch.

Link-Standards und Standard-Link-Styling

Bevor wir uns damit befassen, wie Sie Änderungen am Design Ihrer Links vornehmen können, wollen wir zunächst deren Aufbau verstehen. So sieht ein Link-Element in HTML aus:

 <a href="https://torquemag.io/">TorqueMag</a>

Wie Sie sehen können, besteht es aus mehreren Teilen:

• <a> – Dies ist der Operator zum Erstellen eines Link-Elements. Warum a ? Denn in HTML werden Links auch Anker-Tags genannt.
• href="" – Alles innerhalb der doppelten Anführungszeichen ist, wohin dieser Link zeigt. Es ist die Adresse, auf der jemand landet, der darauf klickt.
• TorqueMag – Das ist der Linktext, der auf der Seite erscheint, zB so (nicht anklicken, dieser Link führt nirgendwo hin).
• </a> – Die Teile, die das Linkelement schließen und dem Browser mitteilen, dass der Linktext hier endet.

So weit, so einfach.

Wie der Link standardmäßig aussieht

Interessant wird es, wenn Sie sich ansehen, wie diese Art von Link auf der Seite aussieht. Sie haben es wahrscheinlich schon einmal gesehen.

Wenn Sie einen alten Link in einem HTML-Dokument deklarieren und keine Styling-Informationen bereitstellen, wird das Standard-Styling übernommen:

1. Der Linktext ist blau und der Link selbst ist unterstrichen.
2. Wenn Sie mit der Maus darüber fahren, verwandelt sich der Cursor in ein kleines Handsymbol.
3. Wenn Sie darauf klicken, wird es für eine Sekunde rot.
4. Sobald Sie den Link aufgerufen haben, ändert sich seine Farbe in Lila.
5. Wenn Sie mit der Tabulatortaste auf Ihrer Tastatur zu dem Link navigieren, wird dieser blau umrandet.

Diese Standards wurden in den frühen Tagen des Internets etabliert und haben sich seit den 90er Jahren nicht wesentlich geändert. Das Lustige ist, auch wenn Sie nie bewusst darüber nachgedacht haben, auf einer bestimmten Ebene waren Ihnen die meisten der oben genannten Punkte wahrscheinlich nur durch das Surfen im Internet bewusst.

Lernen über Verbindungszustände

Aus dem Obigen wird auch deutlich, dass Links unterschiedliche Zustände haben, die ihr Aussehen beeinflussen. Diese können Sie gezielt mit verschiedenen CSS-Pseudoklassen ansteuern, mit denen Sie ihr individuelles Styling beeinflussen können. Diese sind:

• a – Dies ist das oben erwähnte Anchor-Tag. Es zielt auf alle Links in allen Phasen ab.
• a:link – Für den normalen, nicht besuchten Link. Technisch gesehen zielt :link auf alle Anchor-Tags ab, die ein href -Attribut haben. In Wirklichkeit wird es nicht so oft verwendet. Viele Leute verwenden einfach a , da Anchor-Tags ohne href -Attribut eher selten sind und diese Art der Unterscheidung oft nicht nötig ist.
• a:visited – Beschreibt einen Link, den der aktuelle Benutzer zuvor besucht hat, was bedeutet, dass er im Verlauf des Browsers vorhanden ist.
• a:hover – Zielt auf das Styling ab, das angezeigt wird, wenn ein Benutzer mit dem Mauszeiger über einen Link fährt.
• a:active – Kurzzeitig sichtbares Styling im Moment eines Linkklicks.
• a:focus – Ein fokussierter Link, z. B. zu dem ein Benutzer mit der Tabulatortaste navigiert ist. hover und focus werden oft zusammen gestaltet.

Es ist wichtig zu beachten, dass Sie beim gleichzeitigen Ändern des Stils für mehrere Linkstatus dies in der folgenden Reihenfolge tun müssen.

1. a
2. a:link
3. a:visited
4. a:focus
5. a:hover
6. a:active

Das Styling für Verbindungszustände baut aufeinander auf und kaskadiert nach unten. Daher ist die Reihenfolge wichtig, um sicherzustellen, dass sie wie beabsichtigt funktionieren.

Benutzererwartungen erfüllen

Die letzte Nebenbemerkung, bevor wir uns damit befassen, wie Sie Änderungen am Link-Stil über CSS vornehmen können, ist, über die Erwartungen der Benutzer zu sprechen. Der Grund, warum Sie die Standardlinks höchstwahrscheinlich leicht als Links erkannt haben, liegt darin, dass bestimmte Standardeinstellungen in uns als Benutzern seit sehr langer Zeit verwurzelt sind.

Infolgedessen haben wir – und alle anderen – sehr klare Erwartungen daran, wie Links aussehen. Erwartungen, die, wenn sie nicht erfüllt werden, es für Menschen schwierig machen können, Links als das zu erkennen, was sie sind. Aus diesem Grund tun Sie gut daran, bei der Arbeit an Ihrem Website-Design diesen Erwartungen nahe zu bleiben.

In der Praxis bedeutet das:

• Stellen Sie sicher, dass Links auf irgendeine Weise hervorgehoben werden. Farben oder Unterstreichungen sind in Ordnung, solange Sie Links auf der Seite hervorheben. Vermeiden Sie Dinge wie Kursivschrift oder Fettdruck .
• Geben Sie Feedback, indem Sie Links ändern, wenn sie mit der Maus bewegt und in geringerem Maße angeklickt werden ( a:active , erinnern Sie sich?). Sie sollten sich auch nicht damit herumschlagen, dass sich der Cursor in ein Handsymbol verwandelt, um ein interaktives Element anzuzeigen.

Im Folgenden erklären wir Ihnen, wie Sie alle oben genannten ändern können. Denken Sie jedoch daran, dass Sie dies in Maßen tun sollten, um Ihre Benutzer nicht zu frustrieren.

So ändern Sie das Styling Ihres Linktextes per CSS

Lassen Sie uns zuerst darüber sprechen, wie man den Textteil des Links ändert, denn das ist es, was den Kern des Links ausmacht.

Ändern der Link-Textfarbe

Die Dinge, die wir in diesem Abschnitt behandeln, sind unserem Artikel über das Deklarieren von Farben über CSS relativ ähnlich. Wenn Sie also wirklich ins Detail gehen wollen, empfehle ich Ihnen, sich auch diesen Beitrag anzusehen.

Sie können die Farbe des Linktextes auf verschiedene Arten ändern: Wörter einfärben und verschiedene Farbnotationssysteme wie HEX-Code, rgb() / rgba() , hsl() / hsla() , etc.

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

So sieht das obige auf der Seite aus:

Am häufigsten verwenden Sie etwas wie HEX oder rgb() . Die Verwendung von Farbnamen ist außerhalb einfacher Testfälle äußerst selten.

Welches Farbsystem Sie verwenden, hängt von verschiedenen Faktoren ab, z. B. der Browserkompatibilität oder ob Sie Transparenz benötigen oder nicht. Wie Sie jedoch sehen können, ist das Zuweisen von Farben zu Links über die color ziemlich einfach und funktioniert auf die gleiche Weise für alle anderen Linkstatus. Folglich können Sie auch die Textfarbe für :hover oder :focus problemlos ändern.

Passen Sie die Hintergrundfarbe an

Neben der Änderung der Textfarbe können Sie auch die Hintergrundfarbe Ihrer Links und ihre verschiedenen Zustände ändern. Dies ist so einfach wie die Verwendung der Eigenschaft background-color .

Hier ist das Markup für das obige Beispiel:

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

Andere Textgestaltungsoptionen

Da Links nichts anderes als Text sind, gelten alle anderen Möglichkeiten, Text in CSS zu gestalten, auch für sie. Das heißt, Sie können Links und ihren verschiedenen Zuständen andere Eigenschaften zuweisen und sie die Schriftgröße, Schriftfamilien oder andere Dinge ändern lassen, wenn Benutzer mit der Maus darüber fahren.

Dies kann für bestimmte Designs sinnvoll sein, ist jedoch weniger üblich, um Links über CSS zu gestalten.

Hier ist das Markup, um die oben genannten Effekte zu erzielen:

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

Arbeiten Sie mit Unterstreichungen

Wie wir am Anfang gelernt haben, werden Links standardmäßig unterstrichen. Wenn Sie das loswerden wollen, können Sie text-decoration: none; (Dies ist die häufigste Verwendung der text-decoration Eigenschaft).

 a { text-decoration: none; }

Einige Leute ziehen es auch vor, eine Unterstreichung nur beim Hover hinzuzufügen, aber nicht für den normalen Link. Dies ist auch einfach zu tun.

 a { text-decoration: none; } a:hover { text-decoration: underline; }

Zusätzlich können Sie border: bottom; statt text-decoration: underline; um eine Zeile unter Ihren Links hinzuzufügen. Früher wurde dies verwendet, weil es bessere Styling-Optionen bot. Heutzutage haben wir jedoch neue Eigenschaften für die Standard- underline , die mehr Anpassungen ermöglichen.

Mit text-underline-offset können Sie beispielsweise den Abstand zwischen dem Text und der darunter liegenden Linie steuern, wenn Sie text-decoration verwenden. text-decoration-thickness können Sie eine benutzerdefinierte Linienbreite festlegen. Der Weg über die border ist also nicht mehr so ​​notwendig wie früher.

Abgesehen davon gibt es wirklich viele Möglichkeiten, wie Sie mit der Linie unter Links arbeiten können, einschließlich Animationen. Genau darüber könnte man wahrscheinlich einen weiteren Artikel schreiben.

Ändern des Cursor-Stils beim Hover

Wie wir bereits besprochen haben, ändert sich der Mauszeiger, wenn Sie mit der Maus über einen Link fahren, von einem kleinen Pfeil zu einer winzigen Hand, die darauf zeigt.

Das ist mittlerweile das universelle Zeichen dafür, dass es sich um ein klickbares HTML-Element handelt. Möglicherweise ist Ihnen jedoch nicht bewusst, dass Sie den Cursor auch in andere Dinge ändern können, von einem Fadenkreuz über Größenänderungspfeilen bis hin zu einer Ladeanzeige.

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

Wenn Sie neugierig sind, probieren Sie die oben genannten Funktionen in einer lokalen Entwicklungsumgebung aus, um ihre Wirkung zu sehen. Es gibt noch viel mehr Möglichkeiten, die Sie hier finden.

Da der Zeiger jedoch so universell ist, ist dies definitiv das, was Benutzer erwarten, und Sie sollten sich normalerweise daran halten. Wenn es aus irgendeinem Grund für Ihre Links nicht funktioniert, können Sie es mit dem folgenden Codestück korrigieren:

 a { cursor: pointer; }

Es ist sogar möglich, benutzerdefinierte Bilder zu verwenden, wenn Sie Ihre eigenen Cursor auf Ihrer Website verwenden möchten. Beispielsweise verwendet ein deutscher Online-Shop für Musik-Merchandise einen eigenen, thematischen Zeiger-Cursor.

Wenn Sie untersuchen, wie sie es über Ihre Browser-Entwicklertools tun, finden Sie den folgenden Code:

 a { cursor: url(../images/hand.cur),pointer; }

Wie Sie sehen können, können Sie einfach einen benutzerdefinierten Cursor verwenden, indem Sie die Adresse einer Bilddatei angeben.

Nehmen Sie Änderungen an a:focus vor

focus Styling ist eine wichtige Zugänglichkeitshilfe, also stellen Sie sicher, dass es in der Nähe bleibt. Standardmäßig erfolgt die Hervorhebung über die outline , wodurch ein Rahmen darum herum erscheint.

Warum outline und nicht border , fragen Sie?

Weil outline keinen Platz auf der Seite einnimmt. Es befindet sich stattdessen auf dem Hintergrund des Elements. Auf diese Weise ändert das Fokussieren eines Links nicht die Seitenlayoutsprünge oder ähnliches.

Welche anderen Styling-Optionen haben Sie also für einen fokussierten Link?

Viele von ihnen. Es braucht alles von background-color bis color , font-size , box-shadow , was auch immer.

So erreichen Sie das oben Gesagte:

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

Mit a:focus können Sie im Grunde alles tun, was Sie wollen. Eine der interessantesten Anwendungen könnte jedoch sein, dass Sie die Standardeinstellungen des Browsers auch einfach mithilfe der Eigenschaft outline anpassen können.

 a:focus { outline: 3px dotted green; }

So sieht das obige auf der Seite aus:

Link-Buttons und Boxen

Natürlich sind Links nicht nur Textlinks. An manchen Stellen erscheinen sie oft als Kästchen, z. B. als Navigationsmenüs, als Teile von Formularen oder als Handlungsaufforderungen.

Dies ist nicht allzu schwer zu erreichen. Im Grunde müssen Sie nur Wege finden, um den Linktext mit Platz zu versehen und einen Hintergrund oder Rahmen/Umriss bereitzustellen, damit er als Schaltfläche oder Kästchen angezeigt wird. Abgesehen davon sind sie immer noch dieselben Link-Elemente, die wir zuvor verwendet haben.

Es gibt mehrere Möglichkeiten, dies zu erreichen, angefangen beim einfachen Hinzufügen von Polstern zu Systemen wie Flexbox oder Grid. Unten ist nur ein Beispiel, wie Sie es tun können, es gibt viele weitere Optionen.

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

In diesem Fall enthält das CSS sowohl das Design für den Link als auch den Container, in dem er sich befindet. Natürlich können Sie die gleichen Linkstatus wie zuvor verwenden, um unterschiedliche Verhaltensweisen für verschiedene Szenarien einzubeziehen.

Fügen Sie Symbole in Ihre Links ein

Eine kurze Sache, die eine Erklärung verdient, ist, dass Sie auch die Möglichkeit haben, Symbole in Ihre Links einzufügen. Es ist das, was einige Leute tun, um noch deutlicher zu machen, dass etwas ein Outlink ist, der Benutzer von der aktuellen Seite wegführt.

Hier ist, wie das geht. Zuerst das HTML:

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

Dann das CSS:

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

Das a[href^="http"] zielt nur auf Anker-Tags ab, deren Adresse mit http im href="" beginnt. Zu diesen fügt das Markup ein Hintergrundbild hinzu, das das Symbol ist, setzt es auf keine Wiederholung, verschiebt es ganz nach rechts und zentriert es vertikal. Der Rest des Markups definiert die Symbolgröße und schafft etwas Abstand zwischen ihm und dem Text.

Abschließende Gedanken: CSS-Styling für Links

Das Ändern des Stils von Links über CSS ist nicht so schwierig, sobald Sie die Grundlagen beherrschen. Der wichtigste Teil ist das Verständnis, dass sie verschiedene Zustände annehmen, die von verschiedenen Operatoren und Pseudoklassen anvisiert werden. Danach müssen Sie nur noch allgemeine CSS-Eigenschaften verwenden, um das Design beliebig zu ändern. Sie haben jetzt alle Informationen, die Sie brauchen, um loszulegen.

Was ist Ihre bevorzugte Art, Links über CSS zu gestalten? Irgendwelche anderen Tipps zum Teilen? Bitte tun Sie dies in den Kommentaren!