Link formatieren mit CSS: Unterstrich, Punkte, Farbe!

Links lassen sich sehr geschickt formatieren, um gut zum Rest der Seite zu passen: Möchte man zum Beispiel die Farbe ändern oder die Unterstreichung entfernen, geht das sehr einfach mit CSS. Außerdem lässt sich statt dem normalen Unterstrich auch eine gepunktete Linie nutzen oder eine Hintergrundfarbe.

Keine Unterstreichung unter dem Link:

Um den Unterstrich unter einem Link wegzulassen, fügt man das folgende CSS Kommando ein:

text-decoration: none;

Wir zeigen es hier direkt im Tag, alternativ lässt es sich aber auch als Klasse oder direkt im CSS für das gesamte Dokument setzen – das zeigen wir dann hier.

<a href="computerhilfen.html" style="text-decoration: none;">Linktext</a>

So sieht es aus:

Linktext

Farbige Unterstreichung bei Links:

Wer statt dem gewöhnlichen Unterstrich in Textfarbe lieber etwas Farbe haben möchte, muss zunächst die Unterstreichung abschalten: Es gibt nämlich keinen Befehl, um den Unterstrich einzufärben – dafür hilft die CSS Eigenschaft “border”, die einen Rahmen anzeigen kann: Dieser kann jetzt jede gewünschte Farbe haben:

text-decoration: none;
border-bottom: 1px solid red;

<a href="computerhilfen.html" style="text-decoration:none;border-bottom: 1px solid red;">Linktext</a>

So sieht es aus:

Linktext

Gepunktete Linie statt Unterstreichung:

Wer statt dem gewöhnlichen Unterstrich lieber eine gepunktete Linie unter den Link setzen möchte, muss zunächst die Unterstreichung abschalten: Es gibt nämlich keinen Befehl, um statt dem Unterstrich etwas anderes zu zeigen – dafür hilft die CSS Eigenschaft “border”, die einen Rahmen anzeigen kann: Dieser kann jetzt jede gewünschte Farbe haben – und statt

color:black;
text-decoration: none;
border-bottom: 1px dotted black;

<a href="computerhilfen.html" style="color:black;text-decoration:none;border-bottom: 1px dotted black;">Linktext</a>

So sieht es aus:

Linktext

 
Statt der feinen Punkte kann man auch etwas längere Unterstriche wählen. Dazu muss man bei “border” statt dem Attribut “dotted” jetzt “dashed” angeben:

color:black;
text-decoration: none;
border-bottom: 1px dashed black;

<a href="computerhilfen.html" style="color:black;text-decoration:none;border-bottom: 1px dashed black;">Linktext</a>

So sieht es aus:

Linktext

Fetter Text und andere Farbe statt Unterstrich:

Manchmal sieht es sehr schick aus, wenn man den Linktext einfach nur fett setzt und eine andere Farbe nimmt statt für den normalen Text: Dann braucht man die Unterstriche oft nicht, damit der Link auffällt:

color:white;
font-weight:bold;
text-decoration:none;

<a href="computerhilfen.html" style="color:white;font-weight:bold;text-decoration:none;">Linktext</a>

So sieht es aus:

Dies ist normaler Text, als Beispiel rund um den Link platziert. So sieht man, dass der Link auch ohne Unterstrich auffällt.

Hintergrund-Farbe für mehr Beachtung:

Soll der Link wirklich auffallen, kann man auch eine Hintergrundfarbe wählen, die den Link hervorhebt:

color:black;
background-color:white;
font-weight:bold;
text-decoration:none;

<a href="computerhilfen.html" style="color:black;background-color:white;font-weight:bold;text-decoration:none;">Linktext</a>

So sieht es aus:

Dies ist normaler Text, als Beispiel rund um den Link platziert. So sieht man, dass der Link auch ohne Unterstrich auffällt.

 
Das lässt sich mit weiteren CSS Befehlen noch optisch etwas aufwerten:

color:black;
background-color:white;
padding:2px 5px 2px 5px;
border-radius:3px;
font-weight:bold;
text-decoration:none;

<a href="computerhilfen.html" style="color:black;background-color:white;padding:2px 5px 2px 5px;border-radius:4px;font-weight:bold;text-decoration:none;">Linktext</a>

So sieht es aus:

Dies ist normaler Text, als Beispiel rund um den Link platziert. So sieht man, dass der Link auch ohne Unterstrich auffällt.

CSS Befehle für alle Links anwenden

Die CSS Befehle lassen sich auch automatisch für alle Links anwenden, ohne das man in jeden Link-Tag ein style-Attribut schreiben muss. Dazu bindet man entweder eine CSS Datei ein, in der man die Informationen kopiert, oder fügt in den <head&gt Bereich der Seite die gewünschten Style-Informationen ein, zum Beispiel so:

<style type="text/css">
a {
color:black;
background-color:white;
padding:2px 5px 2px 5px;
border-radius:3px;
font-weight:bold;
text-decoration:none;
}
</style>