CSS lernen - HTML Links mit CSS gestalten

Links mit CSS gestalten

Links bzw. Hyperlinks sind ein wesentlicher Bestandteil einer Website. Sie ermöglichen den Besuchern, durch die Website zu navigieren. Daher ist das richtige Styling der Links ein wichtiger Aspekt beim Aufbau einer benutzerfreundlichen Website. Ein Link hat vier verschiedene Zustände — link, visited, active und hover. Diese vier Zustände eines Links können Sie mit den folgenden Anker-Pseudoklassenselektoren unterschiedlich gestalten:

• a:link - Definiert den Standardstil für normale oder nicht besuchte Links.
• a:visited - Definiert den Stil für Links, welche der Benutzer bereits besucht hat.
• a:hover - Definiert den Stil für einen Link, über welchen der Benutzer mit der Maus fährt.
• a:active - Definiert den Stil für Links die gerade angeklickt werden.

Sie können jedem dieser Selektoren jede beliebige CSS-Eigenschaft angeben, z.B. color, font, background, border uvm. Das Aussehen eines Links definieren Sie ansonsten genauso wie Sie es mit einem normalen Text tun. Ein Beispiel:

            
a:link {    /* unbesuchter Link */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {    /* besuchter Link */
    color: #ff00ff;
}
a:hover {    /* Link, wenn Maus drüber fährt */
    color: #00ff00;
    border-bottom: none;
}
a:active {    /* Link, wenn aktiviert */
    color: #00ffff;
}
            
            

Die Reihenfolge, in der Sie den Stil für die verschiedenen Status von Links festlegen, ist extrem wichtig, da die zuletzt definierten Stilregeln Vorrang vor den zuvor definierten Stilregeln haben.

Änderung der Standard-Link-Styles

In allen gängigen Webbrowsern wie Chrome, Firefox, Safari usw. sind Links auf den Webseiten unterstrichen und verwenden die Standardlinkfarben des Browsers, wenn Sie die Stile nicht explizit festlegen.

Standardmäßig werden Textlinks in den meisten Browsern wie folgt angezeigt:

• Ein nicht besuchter Link als unterstrichener blauer Text.
• Ein besuchter Link als unterstrichener lila Text.
• Ein aktiver Link als unterstrichener roter Text.

Im Hover-Zustand ändert sich das Erscheinungsbild des Links jedoch nicht. Er bleibt blau, lila oder rot, je nachdem in welchem ​​Zustand der Link sich befindet (d. h. nicht besucht, besucht oder aktiv). Sehen wir uns also an, wie Sie die Links anpassen, indem Sie den Standardstil überschreiben.

Einstellen von benutzerdefinierten Farbe für Links

Wie das geht? Verwenden Sie einfach die CSS-Eigenschaft color, um die Farbe Ihrer Wahl für verschiedene Status eines Links zu definieren. Achten Sie bei der Farbauswahl jedoch darauf, dass der Benutzer zwischen normalem Text und Links deutlich unterscheiden kann. Hier ein Beispiel, wie man andere Farben für die verschiedenen Status setzt:

a:link {
    color: #1ebea3;
}
a:visited {
    color: #ff05f4;
}
a:hover {
    color: #a761ff;
}
a:active {
    color: #fe9800;
}

Entfernen der Unterstreichung von Links

Wenn Ihnen die standardmäßige Unterstreichung von Links nicht gefällt, können Sie sie einfach mit der CSS-Eigenschaft text-decoration entfernen. Alternativ können Sie auch alle anderen Stile auf Links anwenden (z.B. Hintergrundfarbe, Rand, Fettschrift, uvm.) um den Link vom restlichen Text besser abzuheben. Das folgende Beispiel zeigt, wie Sie die Unterstreichung für verschiedene Status eines Links entfernen oder festlegen.

a:link, a:visited {
    text-decoration: none; 
}
a:hover, a:active {
    text-decoration: underline;
}

Links wie Schaltflächen (Buttons) aussehen lassen

Sie können Ihre normalen Textlinks auch mit CSS wie Schaltflächen aussehen lassen. Um dies zu tun , müssen wir einige CSS-Eigenschaften miteinander kombinieren. Sie werden in den folgenden Kapiteln über die im nächsten Beispiel genutzten Eigenschaften mehr erfahren.

a:link, a:visited {
    color: white;    
    background-color: #89c03d;    
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #5b7f28;
    text-decoration: none;
    text-align: center;
    font: 16px Arial, sans-serif;  
}
a:hover, a:active {
    background-color: #b2f951;
    border-color: #416d04;
    color: black;

}

Der Bearbeitung von Links ist durch die verschiedenen CSS-Eigenschaften keine Grenze gesetzt. Es sollte allerdings immer beachtet werden, dass die Lesbarkeit (also die Nutzbarkeit) eine höhere Priorität als das Aussehen bekommt.