Links können mit CSS unterschiedlich gestylt werden.
Links können gestylt werden mit folgenden CSS-Eigenschaften ( color, font-family, background, usw).
Links können je nach Status gestylt werden.
Die vier Link-Zustände(Status) sind:
| a:link | ein normal, unbesuchter Link |
| a:visited | Ein Link der vom User besucht wurde |
| a:hover | Ein Link-Status wenn man mit der Maus darüber bewegt |
| a:active | Ein Link wenn er angeklickt wird |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| /* unbesuchter Link */ |
| a.styling:link { |
| color: orange; |
| } |
| /* besuchter Link */ |
| a.styling:visited { |
| color: dodgerblue; |
| } |
| /* Maus über Link */ |
| a.styling:hover { |
| color: black; |
| } |
| /* angewählter Link */ |
| a.styling:active { |
| color: grey; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>CSS Links</h2> |
| <p><b><a class="styling" href="index.htm" target="_blank">Das ist ein Link</a></b></p> |
| <p><b>Bemerke:</b> a:hover muss nach a:link und a:visited in der Reihenfolge programmiert werden um zu funktionieren.</p> |
| <p><b>Bemerke:</b> a:active muss nach a:hover in der Reihenfolge programmiert werden um zu funktionieren.</p> |
| </body> |
| </html> |
Die text-decoration Eigenschaft wird oft verwendet um Unterstreichungen zu entfernen.
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| /* unbesuchter Link */ |
| a.deco:link { |
| color: orange; |
| text-decoration: none; |
| } |
| /* besuchter Link */ |
| a.deco:visited { |
| color: dodgerblue; |
| text-decoration: none; |
| } |
| /* Maus über Link */ |
| a.deco:hover { |
| color: black; |
| text-decoration: underline; |
| } |
| /* angewählter Link */ |
| a.deco:active { |
| color: grey; |
| text-decoration: underline; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>CSS Links</h2> |
| <p><b><a class="deco" href="index.htm" target="_blank">Das ist ein Link</a></b></p> |
| <p><b>Bemerke:</b> a:hover muss nach a:link und a:visited in der Reihenfolge programmiert werden um zu funktionieren.</p> |
| <p><b>Bemerke:</b> a:active muss nach a:hover in der Reihenfolge programmiert werden um zu funktionieren.</p> |
| </body> |
| </html> |
Die background-color Eigenschaft wird verwendet um dem Link eine Hintergrundfarbe zu geben:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| /* unbesuchter Link */ |
| a.backgroundColor:link { |
| color: dodgerblue; |
| background-color: black; |
| display: inline-block; |
| padding: 2%; |
| } |
| /* besuchter Link */ |
| a.backgroundColor:visited { |
| color: orange; |
| background-color: dodgerblue; |
| } |
| /* Maus über Link */ |
| a.backgroundColor:hover { |
| color: black; |
| background-color: grey; |
| } |
| /* angewählter Link */ |
| a.backgroundColor:active { |
| color: orange; |
| background-color: black; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>CSS Links</h2><br> |
| <p><b><a class="backgroundColor" href="index.htm" target="_blank">Das ist ein Link</a></b></p> |
| <p><b>Bemerke:</b> a:hover muss nach a:link und a:visited in der Reihenfolge programmiert werden um zu funktionieren.</p> |
| <p><b>Bemerke:</b> a:active muss nach a:hover in der Reihenfolge programmiert werden um zu funktionieren.</p> |
| </body> |
| </html> |
Dieses Beispiel demonstriert eine Kombination von einigen CSS-Eigenschaften zum darstellen eines Links als Button:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| a.button:link, a.button:visited { |
| background-color: dodgerblue; |
| color: black; |
| padding: 14px 25px; |
| text-align: center; |
| text-decoration: none; |
| display: inline-block; |
| border-radius: 10px; |
| } |
| a.button:hover, a.button:active { |
| background-color: black; |
| color: white; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>Link-Button</h2> |
| <p>Ein Link gestylt als Button:</p> |
| <a class="button" href="index.htm" target="_blank">Das ist ein Link</a> |
| </body> |
| </html> |
Unten wird gezeigt wie man Links stylen kann:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| a.eins:link {color:dodgerblue;} |
| a.eins:visited {color:black;} |
| a.eins:hover {color:orange;} |
| a.zwei:link {color:dodgerblue;} |
| a.zwei:visited {color:black;} |
| a.zwei:hover {font-size:150%;} |
| a.drei:link {color:black;} |
| a.drei:visited {color:red;} |
| a.drei:hover {background:grey;} |
| a.vier:link {color:dodgerblue;} |
| a.vier:visited {color:black;} |
| a.vier:hover {font-family:monospace;} |
| a.fuenf:link {color:dodgerblue;text-decoration:none;} |
| a.fuenf:visited {color:#0000ff;text-decoration:none;} |
| a.fuenf:hover {text-decoration:underline;} |
| </style> |
| </head> |
| <body> |
| <p>Bewege die Maus über die Links um die Veränderung zu sehen:</p> |
| <p><b><a class="eins" href="url.htm" target="_blank">Dieser Link wechselt die Farbe</a></b></p> |
| <p><b><a class="zwei" href="einführung.htm" target="_blank">Dieser Link wechselt die Schriftgrösse</a></b></p> |
| <p><b><a class="drei" href="editor.htm" target="_blank">Dieser Link wechselt die Hintergrundfarbe</a></b></p> |
| <p><b><a class="vier" href="grundlagen.htm" target="_blank">Dieser Link wechselt die Schrift-Familie</a></b></p> |
| <p><b><a class="fuenf" href="absaetze.htm" target="_blank">Dieser Link wechselt die Text-Dekoration</a></b></p> |
| </body> |
| </html> |
