CSS - Links: Ein umfassender Leitfaden für Anfänger

Hallo, angehende Web-Entwickler! Heute tauchen wir in die wunderbare Welt der CSS-Links ein. Als jemand, der dies seit Jahren unterrichtet, kann ich Ihnen sagen, dass das Beherrschen von Links wie das Lernen, die Schuhbänder zu binden, ist - es scheint initially knifflig, aber wenn Sie es einmal gelernt haben, werden Sie sich fragen, wie Sie jemals ohne leben konnten!

CSS - Links

Verständnis der Link-Zustände

Bevor wir uns dem Code zuwenden, lassen Sie uns über Link-Zustände sprechen. Stellen Sie sich Links als Chamäleons vor - sie ändern ihre Erscheinung basierend auf unserer Interaktion mit ihnen. Es gibt vier Hauptzustände:

a:link - Ein normaler, nicht besuchter Link
a:visited - Ein Link, den der Benutzer besucht hat
a:hover - Ein Link, wenn der Benutzer mit der Maus darüber fährt
a:active - Ein Link im Moment des Klicks

Hier ist eine praktische Tabelle, um diese Zustände zu merken:

Zustand	Beschreibung
a:link	Normaler, nicht besuchter Link
a:visited	Link, den der Benutzer besucht hat
a:hover	Link, wenn mit der Maus darüber gefahren wird
a:active	Link im Moment des Klicks

Standard-Stile von Links

Standardmäßig stylen Browser Links auf eine bestimmte Weise. Sie haben wahrscheinlich bemerkt:

Nicht besuchte Links sind blau und unterstrichen
Besuchte Links sind lila und unterstrichen
Aktive Links sind rot

Aber keine Sorge, das werden wir gleich ändern!

CSS-Links - Grundlegendes Beispiel

Lassen Sie uns mit einem einfachen Beispiel beginnen:

a {
color: #FF0000;
text-decoration: none;
}

Dieser Code macht alle Ihre Links rot und entfernt die Unterstreichung. quite cool, oder? Lassen Sie uns das aufschlüsseln:

a wählt alle Link-Elemente aus
color: #FF0000; setzt die Farbe auf rot
text-decoration: none; entfernt die Unterstreichung

CSS-Links - Styling einiger Links

Nun, lassen Sie uns einen Schritt weiter gehen und unsere Links für verschiedene Zustände stylen:

/* nicht besuchter Link */
a:link {
color: #FF0000;
}

/* besuchter Link */
a:visited {
color: #00FF00;
}

/* Link, wenn mit der Maus darüber gefahren wird */
a:hover {
color: #FF00FF;
}

/* ausgewählter Link */
a:active {
color: #0000FF;
}

Dieser Code gibt Ihnen:

Rote nicht besuchte Links
Grüne besuchte Links
Rosa Links, wenn Sie mit der Maus darüber fahren
Blaue Links, wenn Sie sie anklicken

Denken Sie daran, die Reihenfolge ist hier wichtig! Die richtige Reihenfolge ist: Link, besucht, hover, aktiv. Ich likes es zu merken als "LoVe HAte" (Link, besucht, hover, aktiv).

Hinzufügen von Symbolen zu Links

Möchten Sie Ihre Links noch bardziej auffällig machen? Lassen Sie uns einige Symbole hinzufügen!

Zuerst benötigen Sie ein Symbolbild. Angenommen, wir haben eine kleine Pfeil-Symbolnamen 'arrow.png'.

a {
background: url('arrow.png') no-repeat left center;
padding-left: 20px;
}

Dieser Code fügt das Pfeil-Symbol links neben Ihren Link-Text hinzu. Das padding-left stellt sicher, dass der Text nicht mit dem Symbol überlappt.

CSS-Links - Hinzufügen von Symbolen

Lassen Sie uns einen Schritt weiter gehen und unterschiedliche Symbole für verschiedene Arten von Links hinzufügen:

/* Symbol zu externen Links hinzufügen */
a[href^="http"] {
background: url('external-link.png') no-repeat right center;
padding-right: 20px;
}

/* PDF-Symbol zu Links zu PDFs hinzufügen */
a[href$=".pdf"] {
background: url('pdf-icon.png') no-repeat right center;
padding-right: 20px;
}

Dieser Code wird:

Ein externes Link-Symbol zu Links hinzufügen, die mit "http" beginnen
Ein PDF-Symbol zu Links hinzufügen, die mit ".pdf" enden

Links als Buttons

Manchmal möchten Sie, dass Ihre Links wie Buttons aussehen. CSS macht das einfach!

.button-link {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

Jetzt wird jeder Link mit der Klasse "button-link" wie ein stilvolles grünes Button aussehen!

CSS-Links - Links als Buttons

Lassen Sie uns unsere button-links noch interaktiver machen:

.button-link {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.button-link:hover {
background-color: #45a049;
}

.button-link:active {
background-color: #3e8e41;
}

Dieser Code wird:

Ein grünes button-like Link erstellen
Die Farbe des Buttons leicht dunkler machen, wenn er hovered wird
Die Farbe des Buttons noch dunkler machen, wenn er angeklickt wird
Einen fließenden Farbübergangseffekt hinzufügen

Und das war's! Sie sind jetzt mit dem Wissen ausgestattet, um atemberaubende, interaktive Links zu erstellen, die Ihre Webseiten zum Leben erwecken. Denken Sie daran, Übung macht den Meister,also fürchten Sie sich nicht, verschiedene Stile und Kombinationen auszuprobieren.

Wie ich meinen Schülern immer sage, CSS ist wie Kochen - Sie beginnen mit grundlegenden Zutaten (Eigenschaften), aber es ist die Art und Weise, wie Sie sie kombinieren, die ein Meisterwerk schaffen. Also, machen Sie sich auf den Weg und erstellen Sie Ihre CSS-Link-Meisterwerke!

Credits: Image by storyset