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:
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:
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:
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:
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> 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>
- datenschutz (4x gelesen)
- pc-einsteigerkurs (3x gelesen)
- windows-beschleunigen (2x gelesen)
- windows-schneller-starten-autostart-aufraeumen (2x gelesen)
- windows-defragmentieren-und-aufraeumen (1x gelesen)
Mehr Tipps zu Link formatieren mit CSS: Unterstric...
-
FHEM: JeeLink / LaCrosse Sensor: Batterie wechseln
Wer bei einem LaCrosse Temperatursensor die Batterien tauscht, muss eine Sache beachten - andernfalls wird die Hardware-ID zurückgesetzt und der Sensor wird unter einem neuen...
-
Mac: TP-Link WLAN Treiber entfernen (No Wireless NIC Plug in)
Wer einen USB-WLAN Adapter ausprobiert hat, hat in der Regel auch den passenden WLAN Treiber installiert: Dieser richtet ein Icon in der oberen Status-Leiste des...
-
Cinch Kabel Farbe: Das sind die Farben für links und rechts!
Das Cinch Kabel (nicht Chinch!) ist ein Standard-Audio-Kabel zum Verbinden verschiedener Hifi-Geräte. In der Regel hat man ein bis drei Kabel: Die Farben sind meistens...
-
Webmaster: Tabellenzeile mit CSS automatisch abwechselnd färben
Um die Hintergrundfarbe einer HTML Tabellenzeile mit einer Farbe zu versehen, hilft CSS. Für eine gute Lesbarkeit kann es aber gerade bei längeren Tabellen hilfreich...
-
Transparenter iFrame mit HTML und CSS
Transparenter iFrame - Dafür ist er praktisch: Mit einem transparenten iFrame kann man den Inhalt einer anderen Webseite in die aktuelle Seite einbetten. Ein vorhandenes...
-
Webmaster: Tabellenzeile mit CSS automatisch abwechselnd färben
Um die Hintergrundfarbe einer HTML Tabellenzeile mit einer Farbe zu versehen, hilft CSS. Für eine gute Lesbarkeit kann es aber gerade bei längeren Tabellen hilfreich...
- Windows 10 Blackscreen und blinkender Unterstrich bei Boot
- Schwartz und weise Punkte auf dem Destop
- Bildschirm: Blacksreens und blaue Punkte
- Rote Punkte und Bluescreen nach Grafikkartenwechsel
- farbe im dock
hallo erstmal,wie kann ich die dock farbe der geöffneten programme ändern? also, die p...
- Welche Farbe von Mac?
- Bei Excel Farbe ändern
Ich möchte in Windows XP bei Excel als Erstes "Schwarze Farbe" haben, dann erst wenn es n...
- Augenschonenste Farbe für die Konsole
Hallo zusammen,seit meinem neusten Job arbeite ich 24/7 am PC und dabei viel auf Linux/U...
Link formatieren mit CSS: Unterstrich, Punkte, Farbe!