Stilierung von Links

Das erste, was man verstehen muss, ist das Konzept der Link-Zustände — verschiedene Zustände, in denen Links existieren können. Diese können mit verschiedenen Pseudoklassen gestylt werden:

• Link: Ein Link, der ein Ziel hat (d.h. nicht nur ein benannter Anker), gestylt mit der :link-Pseudoklasse.
• Visited: Ein Link, der bereits besucht wurde (existiert im Verlauf des Browsers), gestylt mit der :visited-Pseudoklasse.
• Hover: Ein Link, über den mit dem Mauszeiger eines Benutzers geschwebt wird, gestylt mit der :hover-Pseudoklasse.
• Focus: Ein Link, der fokussiert ist (z.B. durch eine Tastaturbenutzer mit der Tab-Taste oder ähnlich bewegt, oder programmgesteuert mit HTMLElement.focus() fokussiert) — dieser wird mit der :focus-Pseudoklasse gestylt.
• Active: Ein Link, der aktiviert wird (beispielsweise angeklickt wird), gestylt mit der :active-Pseudoklasse.

Das folgende Beispiel zeigt, wie ein Link standardmäßig aussieht und sich verhält; obwohl der CSS den Text vergrößert und zentriert, um ihn mehr hervorzuheben. Sie können das Aussehen und Verhalten der Standardstile im Beispiel mit dem Aussehen und Verhalten anderer Links auf dieser Seite vergleichen, auf die mehr CSS-Stile angewendet wurden. Standardlinks haben die folgenden Eigenschaften:

• Links sind unterstrichen.
• Nicht besuchte Links sind blau.
• Besuchte Links sind lila.
• Wenn über einen Link geschwebt wird, ändert sich der Mauszeiger zu einem kleinen Hand-Symbol.
• Fokussierte Links haben einen Umriss — Sie sollten in der Lage sein, die Links auf dieser Seite mit der Tastatur zu fokussieren, indem Sie die Tabulatortaste drücken.
• Aktive Links sind rot. Versuchen Sie, die Maustaste auf dem Link gedrückt zu halten, während Sie darauf klicken.

<p><a href="#">A simple link</a></p>

p {
  font-size: 2rem;
  text-align: center;
}

Interessanterweise sind diese Standardstile fast die gleichen wie in den Anfängen der Browser in den frühen 1990er Jahren. Dies liegt daran, dass Benutzer dieses Verhalten kennen und erwarten — wenn Links anders gestylt würden, würde das viele Menschen verwirren. Das bedeutet nicht, dass Sie Links überhaupt nicht stilisieren sollten. Es bedeutet einfach, dass Sie sich nicht zu weit vom erwarteten Verhalten entfernen sollten. Sie sollten mindestens:

• Verwenden Sie Unterstreichungen für Links, aber nicht für andere Dinge. Wenn Sie Links nicht unterstreichen wollen, heben Sie sie zumindest auf eine andere Weise hervor.
• Lassen Sie sie in irgendeiner Weise reagieren, wenn sie überfahren/fokussiert werden, und auf eine leicht andere Weise, wenn sie aktiviert werden.

Die Standardstile können mit den folgenden CSS-Eigenschaften ausgeschaltet/geändert werden:

• color für die Textfarbe.
• cursor für den Stil des Mauszeigers — Sie sollten dies nicht ausschalten, es sei denn, Sie haben einen sehr guten Grund.
• outline für den Textumriss. Ein Umriss ist ähnlich wie ein Rahmen. Der einzige Unterschied besteht darin, dass ein Rahmen im Box-Modell Platz einnimmt und ein Umriss nicht; er sitzt einfach über dem Hintergrund. Der Umriss ist ein nützliches Hilfsmittel für die Barrierefreiheit und sollte nicht entfernt werden, ohne eine andere Methode zur Anzeige des fokussierten Links hinzuzufügen.

Nachdem wir uns nun die Standardzustände im Detail angesehen haben, betrachten wir nun eine typische Reihe von Link-Stilen.

Um zu beginnen, schreiben wir unsere leeren Regelsets aus:

a {
}

a:link {
}

a:visited {
}

a:focus {
}

a:hover {
}

a:active {
}

Diese Reihenfolge ist wichtig, da Link-Stile aufeinander aufbauen. Zum Beispiel gelten die Stile in der ersten Regel für alle nachfolgenden. Wenn ein Link aktiviert wird, wird er normalerweise auch überfahren. Wenn Sie diese in der falschen Reihenfolge anordnen und in jedem Regelset die gleichen Eigenschaften ändern, funktioniert es nicht wie erwartet. Um sich die Reihenfolge zu merken, können Sie ein Akronym wie LoVe Fears HAte verwenden.

Nun fügen wir etwas mehr Informationen hinzu, um dies richtig zu stilisieren:

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline-color: transparent;
}

a:link {
  color: #6900ff;
}

a:visited {
  color: #a5c300;
}

a:focus {
  text-decoration: none;
  background: #bae498;
}

a:hover {
  text-decoration: none;
  background: #cdfeaa;
}

a:active {
  background: #6900ff;
  color: #cdfeaa;
}

Wir stellen auch einige Beispiel-HTML zur Verfügung, auf das der CSS angewendet wird:

<p>
  There are several browsers available, such as <a href="#">Mozilla Firefox</a>,
  <a href="#">Google Chrome</a>, and <a href="#">Microsoft Edge</a>.
</p>

Das Zusammenführen der beiden ergibt folgendes Ergebnis:

Was haben wir hier gemacht? Dies sieht sicherlich anders aus als das Standard-Styling, bietet aber dennoch eine ausreichend vertraute Erfahrung, damit Benutzer wissen, was passiert:

• Die ersten beiden Regeln sind in dieser Diskussion nicht so interessant.
• Die dritte Regel verwendet den a-Selektor, um den Fokusumriss zu entfernen (welcher sich ohnehin zwischen den Browsern unterscheidet).
• Als nächstes verwenden wir die Selektoren a:link und a:visited, um ein paar Farbvariationen auf nicht besuchte und besuchte Links anzuwenden, damit sie sich unterscheiden.
• Die nächsten beiden Regeln verwenden a:focus und a:hover, um fokussierte und überfahrene Links ohne Unterstreichungen und mit unterschiedlichen Hintergrundfarben zu versehen.
• Schließlich wird a:active verwendet, um den Links ein invertiertes Farbschema zu geben, während sie aktiviert werden, um klarzumachen, dass etwas Wichtiges passiert!

Für diese Aufgabe möchten wir, dass Sie unser leeres Regelset nehmen und Ihre eigenen Deklarationen hinzufügen, um die Links wirklich cool aussehen zu lassen. Nutzen Sie Ihre Fantasie, lassen Sie Ihrer Kreativität freien Lauf. Wir sind sicher, dass Sie mit etwas Cooleres und genauso Funktionalem wie unser obiges Beispiel aufwarten können.

1. Klicken Sie auf "Play" im Code-Block unten, um das Beispiel im MDN Playground zu bearbeiten.
2. Geben Sie den Links ein Standardstyling, das jederzeit auf sie angewendet wird. Sie müssen sich nicht nur auf die Textfarbe beschränken, aber stellen Sie sicher, dass die Links weiterhin als Links erkennbar sind.
3. Geben Sie besuchten Links eine leicht andere Farbe als die von Ihnen festgelegten Standard-Links-Stile.
4. Verleihen Sie den Fokus- und Hover-Zuständen eine ausgeprägte Stilrichtung, die sie gegenüber anderen Links hervorhebt. Entfernen Sie auch die Standard-Unterstreichung, wenn Links fokussiert/überfahren werden.
5. Geben Sie dem aktiven Zustand wieder einen anderen Stil.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit der Zurücksetzen-Schaltfläche im MDN Playground löschen. Wenn Sie wirklich nicht weiterkommen, können Sie eine Beispiel-Lösung unter dem Beispiel-Ausgang anzeigen.

<p>
  There are several browsers available, such as
  <a href="https://www.mozilla.org/firefox/new/" target="_blank">Mozilla Firefox</a>,
  <a href="https://www.google.co.uk/chrome/" target="_blank">Google Chrome</a>, and
  <a href="https://www.microsoft.com/edge" target="_blank">Microsoft Edge</a>.
</p>

p {
  font-size: 1.2rem;
  font-family: sans-serif;
  line-height: 1.4;
}

a {
}

a:visited {
}

a:focus,
a:hover {
}

a:active {
}

a {
  outline-color: transparent;
  padding: 2px 1px 0;
  color: #265301;
}

a:visited {
  color: #437a16;
}

a:hover,
a:focus {
  background: #bae498;
  text-decoration: none;
}

a:active {
  background: #265301;
  color: #cdfeaa;
}

Eine gängige Praxis ist das Hinzufügen von Symbolen auf Links, um einen besseren Hinweis darauf zu geben, zu welcher Art von Inhalt der Link führt. Schauen wir uns ein wirklich einfaches Beispiel an, das ein Symbol für externe Links hinzufügt (Links, die zu anderen Seiten führen). Ein solches Symbol sieht normalerweise aus wie ein kleiner Pfeil, der aus einem Kasten zeigt. Für dieses Beispiel verwenden wir externes Link-Symbol von icons8.com.

Sehen wir uns etwas HTML und CSS an, das uns den gewünschten Effekt verschafft. Zuerst etwas einfaches HTML zum Stilisieren:

<p>
  For more information on the weather, visit our <a href="#">weather page</a>,
  look at <a href="https://en.wikipedia.org/">weather on Wikipedia</a>, or check
  out
  <a href="https://www.nationalgeographic.org/topics/resource-library-weather/">
    weather on National Geographic</a>.
</p>

Als nächstes das CSS:

body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

a[href^="http"]::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.25em;

  background-size: 100%;
  background-image: url("external-link-52.png");
}

Was geschieht hier? Wir überspringen den Großteil des CSS, da es sich um die gleichen Informationen handelt, die Sie bereits gesehen haben. Die letzte Regel ist jedoch interessant: wir verwenden ::after-Pseudo-Element. Das 0.8rem x 0.8rem Pseudo-Element wird nach dem Ankertyp als Inline-Block eingefügt. Und das Symbol wird als background des Pseudo-Elements gerendert.

Wir haben eine relative Einheit em verwendet. Diese passt die Größe des Symbols proportional zur Textgröße des Ankers an. Wenn sich die Textgröße des Ankers ändert, passt sich die Symbolgröße entsprechend an.

Ein letztes Wort: Wie haben wir nur externe Links ausgewählt? Nun, wenn Sie Ihre HTML-Links richtig schreiben, sollten Sie nur absolute URLs für externe Links verwenden — es ist effizienter, relative Links zu verwenden, um auf andere Teile Ihrer eigenen Seite zu verlinken (wie beim ersten Link). Der Text "http" sollte daher nur in externen Links auftauchen (wie beim zweiten und dritten), und wir können dies mit einem Attributselektor auswählen: a[href^="http"] wählt <a>-Elemente aus, jedoch nur, wenn sie ein href-Attribut mit einem Wert haben, der mit "http" beginnt.

Das war's. Versuchen Sie, die Aufgabenabschnitt oben erneut zu besuchen und diese neue Technik auszuprobieren!

Die Werkzeuge, die Sie bisher in diesem Artikel erkundet haben, können auch in anderer Weise verwendet werden. Zum Beispiel können Zustände wie Hover verwendet werden, um viele verschiedene Elemente zu stilisieren, nicht nur Links — Sie könnten den Hover-Zustand von Absätzen, Listenelementen oder anderen Dingen stilisieren.

Außerdem werden Links in bestimmten Umständen häufig gestylt, um wie Schaltflächen auszusehen und sich zu verhalten. Ein Webseiten-Navigationsmenü kann als eine Gruppe von Links markiert werden, und diese kann gestylt werden, um wie eine Gruppe von Steuerknöpfen oder Registerkarten auszusehen, die dem Benutzer den Zugriff auf andere Teile der Seite ermöglichen. Sehen wir uns an, wie.

Zuerst etwas HTML:

<nav class="container">
  <a href="#">Home</a>
  <a href="#">Pizza</a>
  <a href="#">Music</a>
  <a href="#">Wombats</a>
  <a href="#">Finland</a>
</nav>

Und nun unser CSS:

body,
html {
  margin: 0;
  font-family: sans-serif;
}

.container {
  display: flex;
  gap: 0.625%;
}

a {
  flex: 1;
  text-decoration: none;
  outline-color: transparent;
  text-align: center;
  line-height: 3;
  color: black;
}

a:link,
a:visited,
a:focus {
  background: palegoldenrod;
  color: black;
}

a:hover {
  background: orange;
}

a:active {
  background: darkred;
  color: white;
}

Dies ergibt folgendes Ergebnis:

Das HTML definiert ein <nav>-Element mit einer "container"-Klasse. Das <nav> enthält unsere Links.

Das CSS enthält das Styling für den Container und die darin enthaltenen Links.

• Die zweite Regel sagt:
  • Der Container ist ein Flexbox. Die Elemente, die es enthält — in diesem Fall die Links — werden Flex-Elemente sein.
  • Der Abstand zwischen den Flex-Elementen beträgt 0.625% der Breite des Containers.
• Die dritte Regel stilisiert die Links:
  • Die erste Deklaration, flex: 1, bedeutet, dass die Breiten der Elemente so angepasst werden, dass sie den gesamten verfügbaren Platz im Container nutzen.
  • Als nächstes schalten wir die Standard-text-decoration und outline aus — wir wollen nicht, dass sie unser Aussehen beeinträchtigen.
  • Die letzten drei Deklarationen dienen dazu, den Text innerhalb jedes Links zu zentrieren, die line-height auf 3 zu setzen, um den Schaltflächen etwas Höhe zu verleihen (was auch den Vorteil hat, den Text vertikal zu zentrieren) und die Textfarbe auf Schwarz zu setzen.

Wir hoffen, dieser Artikel hat Ihnen alles vermittelt, was Sie im Moment über Links wissen müssen! Der letzte Artikel in unserem Modul zur Textstilisierung beschreibt, wie Sie benutzerdefinierte Schriftarten auf Ihren Webseiten verwenden können (oder Webfonts, wie sie besser bekannt sind).

• Zurück
• Übersicht: CSS-Textgestaltung
• Weiter