CSS - Hyperlinks
Link-Zustände
Unbesuchte Links
Unbesuchte Links sind der Standardzustand eines Links, der vom Benutzer noch nicht angeklickt wurde. Standardmäßig gestalten Browser unbesuchte Links meist mit einer Unterstreichung und blauer Farbe. Sie können diese Standardstile jedoch mit CSS ändern.
Um unbesuchte Links zu gestalten, können Sie den a-Selektor in Ihrem CSS-Code verwenden.
Beispiel: Unbesuchte Links mit benutzerdefinierten Stilen
a {
color: #ff0000;
text-decoration: none;
}Die unbesuchten Links haben eine rote Farbe (#ff0000) und die Unterstreichung wird entfernt (text-decoration: none).
Sie können verschiedene Stile auf unbesuchte Links anwenden, wie zum Beispiel die Änderung der Schriftstärke, Schriftgröße, Hintergrundfarbe oder das Hinzufügen von Rahmen.
Beispiel: Benutzerdefinierte Stile für unbesuchte Links
a {
color: #333;
font-weight: bold;
border-bottom: 2px solid #333;
transition: border-bottom-color 0.3s;
}Dieser Stil verleiht den unbesuchten Links eine dunkelgraue Farbe, fette Schrift und einen durchgezogenen unteren Rahmen, der beim Überfahren mit der Maus übergeht.
Besuchte Links
Besuchte Links sind solche, die bereits vom Benutzer angeklickt und besucht wurden. Browser gestalten besuchte Links normalerweise mit einer lila Farbe, um sie von unbesuchten zu unterscheiden.
Um besuchte Links zu gestalten, können Sie die :visited-Pseudoklasse in Ihrem CSS-Code verwenden.
Beispiel: Besuchte Links mit benutzerdefinierten Stilen
a:visited {
color: #800080;
}Besuchte Links haben eine lila Farbe (#800080).
Aus Datenschutzgründen sind die Stile für besuchte Links begrenzt. Sie können nur deren Farbeigenschaften wie Hintergrundfarbe oder Rahmenfarbe ändern.
Beispiel: Benutzerdefinierte Gestaltung besuchter Links
a:visited {
color: #999;
border-bottom-color: #999;
}Dies gibt besuchten Links eine hellgraue Farbe und einen passenden unteren Rahmen.
Hover-Zustand
Der Hover-Zustand wird ausgelöst, wenn Benutzer mit der Maus über einen Link fahren. Dies ermöglicht es, interaktive Effekte zu erstellen und visuelles Feedback zu geben.
Um Links im Hover-Zustand zu gestalten, verwenden Sie die :hover-Pseudoklasse in Ihrem CSS-Code.
Beispiel: Links im Hover-Zustand mit Farbwechsel
a:hover {
color: #ff0000;
text-decoration: underline;
}Wenn Benutzer mit der Maus über einen Hyperlink fahren, ändert sich dessen Farbe zu Rot (#FF0000) und wird unterstrichen.
Sie können auch verschiedene Stile auf Links im Hover-Zustand anwenden, wie zum Beispiel die Änderung von Hintergründen, Rahmen, Transformationen usw.
Beispiel: Benutzerdefinierte Hover-Effekte
a:hover {
background-color: #f5f5f5;
border-bottom-color: #FF0000;
transform: translateY(-2px);
}Dies würde zu einem hellgrauen Hintergrund, einem roten unteren Rahmen und einer leichten Aufwärtsbewegung führen.
Aktiver Zustand
Aktive Zustände werden ausgelöst, wenn ein Hyperlink angeklickt wird und bieten visuelles Feedback zum aktuellen Interaktionsstatus. Um aktive Hyperlinks zu gestalten, verwenden Sie die :active-Pseudoklasse im CSS-Code.
Beispiel: Aktive Hyperlinks mit benutzerdefinierten Stilen
a:active {
color: black;
background-color: #F5F5F5;
}Beim Klicken auf den Hyperlink wird seine Farbe schwarz, während der Hintergrund zu einem hellgrauen Ton (#F5F5F5) wechselt.
Verschiedene andere Gestaltungsmöglichkeiten können auf aktive Hyperlinks angewendet werden, einschließlich der Änderung von Schriftarten, Gewichten, Rahmen, Transformationen usw.
Beispiel: Fette Schrift und Skalierung bei aktivem Link
a:active {
font-weight: bold;
transform: scale(95%);
}Diese Gestaltung macht die Schrift fetter und verkleinert sie leicht durch Skalierung auf fünfundneunzig Prozent während des Klickereignisses. Beachten Sie, dass aktive Zustände nur vorübergehend sind und nur so lange anhalten, wie der Klick andauert. Danach kehren sie entweder in den Hover- oder den unbesuchten Zustand zurück.
Durch die Kombination von Stilen für verschiedene Link-Zustände (unbesucht, besucht, hover, aktiv) schaffen Sie visuell ansprechende interaktive Erlebnisse, die die Benutzerfreundlichkeit von Webseiten verbessern.
Link-Styling-Eigenschaften
CSS bietet Eigenschaften, um Links nach Ihren Designvorstellungen zu gestalten. Hier sind einige häufig verwendete Link-Styling-Eigenschaften:
Farbe
Die Eigenschaft color legt die Textfarbe des Links fest. Sie können Farbnamen, Hexadezimalwerte, RGB- oder HSL-Werte verwenden, um die gewünschte Farbe anzugeben.
Farbbeispiel
a {
color: #ff0000; /* Rote Farbe */
}Textdekoration
Die Eigenschaft text-decoration wird verwendet, um Unterstreichungen, Überstreichungen oder Durchstreichungen bei Links hinzuzufügen oder zu entfernen. Standardmäßig sind Links unterstrichen.
Textdekorationsbeispiel
a {
text-decoration: none;
}Hintergrundfarbe
Die Eigenschaft background-color legt die Hintergrundfarbe des Links fest. Dies kann nützlich sein, um Button-ähnliche Links zu erstellen oder wichtige Links hervorzuheben.
Hintergrundfarbenbeispiel
a {
background-color: #f5f5f5;
padding: 5px 10px;
}Rahmen
Mit der Eigenschaft border können Sie Rahmen um Links hinzufügen. Sie können die Rahmenbreite, den Stil und die Farbe mit den Eigenschaften border-width, border-style und border-color festlegen.
Rahmenbeispiel
a {
border: 2px solid #000;
padding: 5px 10px;
}Innen- und Außenabstand
Die Eigenschaft padding fügt Platz innerhalb des Links hinzu, während die Eigenschaft margin Platz außerhalb des Links hinzufügt. Diese Eigenschaften steuern die Größe und den Abstand von Links.
Innen- und Außenabstandsbeispiel
a {
padding: 10px;
margin: 5px;
display: inline-block;
}Schriftstile
Sie können die Schriften von Links mit Eigenschaften wie font-family, font-size, font-weight und font-style ändern.
Schriftstilbeispiel
a {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
}Übergänge und Animationen
CSS-Übergänge und -Animationen erzeugen sanfte Effekte beim Überfahren oder Anklicken von Links.
Übergangs- und Animationsbeispiel
a {
transition: color 0.3s ease;
}
a:hover {
color: #ff0000;
}Link-Icons und Grafiken
Sie können das Aussehen und die Benutzerfreundlichkeit von Links verbessern, indem Sie mit CSS Icons oder Grafiken hinzufügen. Icons oder Grafiken können den Zweck oder das Ziel eines Links verdeutlichen und ihn für Benutzer ansprechender machen.
Um Links Icons oder Grafiken hinzuzufügen, können Sie die Eigenschaft background-image zusammen mit anderen CSS-Eigenschaften wie background-position, background-repeat und background-size verwenden.
Icons mit Hintergrundbildern hinzufügen
a.icon-link {
padding-left: 25px;
background-image: url('path/to/icon.png');
background-repeat: no-repeat;
background-position: left center;
background-size: 20px 20px;
}Der Link mit der Klasse "icon-link" wird ein Icon links neben dem Linktext anzeigen. Die Eigenschaft padding-left schafft Platz für das Icon, und die Eigenschaft background-image gibt an, wo die Icon-Bilddatei zu finden ist.
Die Eigenschaft background-repeat ist auf no-repeat gesetzt, um Wiederholungen zu verhindern, und die Eigenschaft background-position platziert es in der linken Mitte. Die Eigenschaft background-size legt seine Größe auf 20 Pixel mal 20 Pixel fest.
CSS-Sprites für Link-Icons verwenden
Wenn Sie mehrere Icons oder Grafiken für verschiedene Links haben, können Sie CSS-Sprites verwenden, um sie in einer Bilddatei zu kombinieren. Dies reduziert HTTP-Anfragen und verbessert die Leistung.
a.sprite-link {
padding-left: 25px;
background-image: url('path/to/sprite.png');
background-repeat: no-repeat;
}
a.link-1 {
background-position:0 -0px;
}
a.link-2 {
background-position:-0 -50px;
}Ein Sprite-Bild enthält mehrere vertikal angeordnete Icons. Jeder Link hat eine spezifische Klasse (link-1, link-2), die seine Position innerhalb dieses Sprite-Bildes festlegt.
Positionierung und Größenanpassung von Link-Icons
Sie können steuern, wo ein Icon relativ zu Ihrem Text erscheint, indem Sie CSS-Eigenschaften wie Positionierung (horizontal/vertikal) verwenden
a.icon-link {
padding-left: 25px;
background-image: url('path/to/icon.png');
background-repeat: no-repeat;
background-position: 5px center;
}Hier sehen wir, wie unser Icon genau fünf Pixel horizontal entfernt platziert wird, während es vertikal immer noch im Hyperlink-Element zentriert ist!
Um die Größe dieser visuellen Hilfen auf dem Bildschirm zu ändern, passen Sie einfach ihre Abmessungen über das Attribut "Background Size" an:
a.icon-link {
padding-left: 35px;
background-image: url('path/to/icon.png');
background-repeat: no-repeat;
background-position: left center;
background-size: 30px 30px;
}Das Hinzufügen relevanter, konsistenter und zugänglicher Alternativtexte über ARIA-Label-Attribute stellt sicher, dass jeder gleichermaßen profitiert, unabhängig von eventuellen Behinderungen, die beim Navigieren durch Webseiten mit solch visuell verbesserten Hyperlinks auftreten können!