[CSS] Wie können Links in einer Seite unterschiedliche Schriftfarben erhalten?

Maik · 19. April 2008

Wie können Links in einer Seite unterschiedliche Schriftfarben erhalten?

Die Ausgangssituation: Der Autor einer Website wünscht sich, innerhalb des Dokuments die Hyperlinks mit unterschiedlichen Schriftfarben auszustatten.

Möglichkeit Nr.1:

Der Einsatz von CSS-Klassen, um für die einzelnen Linkgruppen eine Fallunterscheidung bezüglich ihrer Textfarbe vornehmen zu können.

Code:

<div id="wrapper">
     <ul>
         <li><a href="#" class="style1">link_style1</a></li>
         <li><a href="#" class="style1">link_style1</a></li>
     </ul>
     <ul>
         <li><a href="#" class="style2">link_style2</a></li>
         <li><a href="#" class="style2">link_style2</a></li>
     </ul>
     <ul>
         <li><a href="#" class="style3">link_style3</a></li>
         <li><a href="#" class="style3">link_style3</a></li>
     </ul>
</div>

Code:

a.style1:link, a.style1:visited {
color:#cfcfcf;
}
a.style1:hover, a.style1:active {
color:#00c0ff;
}

a.style2:link, a.style2:visited {
color:#00c0ff;
}
a.style2:hover, a.style2:active {
color:#cfcfcf;
}

a.style3:link, a.style3:visited {
color:#cfcfcf;
}
a.style3:hover, a.style3:active {
color:#ff9f00;
}

Möglichkeit Nr.2:

Die Seitenbereiche, in denen die Links eingebettet sind, mit einem ID- oder Klassen-Bezeichner auszeichnen, und die Formatierung mit dem Selektor für Nachfahren durchführen.

Code:

<div id="wrapper">
     <ul id="style1">
         <li><a href="#">link_style1</a></li>
         <li><a href="#">link_style1</a></li>
     </ul>
     <ul id="style2">
         <li><a href="#">link_style2</a></li>
         <li><a href="#">link_style2</a></li>
     </ul>
     <ul id="style3">
         <li><a href="#">link_style3</a></li>
         <li><a href="#">link_style3</a></li>
     </ul>
</div>

Code:

ul#style1 a:link, ul#style1 a:visited {
color:#cfcfcf;
}
ul#style1 a:hover, ul#style1 a:active {
color:#00c0ff;
}

ul#style2 a:link, ul#style2 a:visited {
color:#00c0ff;
}
ul#style2 a:hover, ul#style2 a:active {
color:#cfcfcf;
}

ul#style3 a:link, ul#style3 a:visited {
color:#cfcfcf;
}
ul#style3 a:hover, ul#style3 a:active {
color:#ff9f00;
}

mfg Maik

[CSS] Wie können Links in einer Seite unterschiedliche Schriftfarben erhalten?

Maik

Neue Beiträge