✔ Styles für mehrere Verweise

Status
Nicht offen für weitere Antworten.
S

Scared

Mitglied
Ich möchte zwei verschieden Arten von verweisen haben aber ich weiß nicht wie ich das umsetzten kann.
Für den ersten Stil habe ich folgenden Style angeben:
a:link { color:#C0C0C0; text-decoration:none; background-color:#000000; font-weight:normal;}
a:visited { color:#C0C0C0; text-decoration:none; background-color:#000000; font-weight:normal;}
a:hover { color:#FFFFFF; text-decoration:none; background-color:#000000; font-weight:normal;}
a:active { color:#C0C0C0; text-decoration:none; background-color:#000000; font-weight:normal;}

Nun möchte ich für den zweiten Stil eine andere Farbe verwenden.
Habe dann einfach in dem jeweiligen <a href> tag mit style="color" eine andere Farbe angegeben was auch funktioniert hat allerdings funktioniert hier der Hover effekt nun nicht mehr.

Jemand eine Idee? Oder hab ich nur mal wieder was falsch gemacht? *g*

MfG
Scared
 
wie soll das gehen? tu ich das nicht?
ich denk man kann nur mit a:link, a:visited usw. auf die verweise "zugreifen"
wie kann ich denn dann noch ne klasse machen die diese werte beeinflusst?

MfG
Scared
 
Das schreibst du in die CSS - Datei:

A.irgendwas: link {
FONT-WEIGHT: lighter; COLOR: #666666
}

A.irgendwas:avtive {
FONT-WEIGHT: bold; COLOR: #ff3300
}

A.irgendwas:visited {
FONT-WEIGHT: bold; COLOR: #ff3300
}

A.irgendwas:hover {
FONT-WEIGHT: bold; COLOR: #ff3300
}

und das ist der Aufruf aus der HTML - Datei

<A class=irgendwas href="irgendwas.html">link</A>


Wenn es nicht klar ist, einfach nochmal schreiben :)

mfg wuz
 
Hallo Scared,

prinzipiell hast du nichts falsch gemacht. Aber wahrscheinlich ist dir der Umgang mit Klassen bei den a-Tags (Verweisen) nicht geläufig.
Deshalb nachfolgende Beispieldatei mit den beide Klassen "verw1" und "verw2", natürlich ist die Definition beliebig vieler Klassen möglich.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS-Test</title>
<style type="text/css">
<!--
a {
text-decoration: none;
font-weight: normal;
}
a.verw1 {
background-color: #000000;
}
a.verw1:link {
color: #C0C0C0;
}
a.verw1:visited {
color: #C0C0C0;
}
a.verw1:hover {
color: #FFFFFF;
}
a.verw1:active {
color: #C0C0C0;
}
a.verw2 {
background-color: white;
}
a.verw2:link {
color: blue;
}
a.verw2:visited {
color: green;
}
a.verw2:hover {
color: red;
}
a.verw2:active {
color: lime;
}
-->
</style>
</head>
<body>
<p>Hier sind die unterschiedlichen Verweise:
<a class="verw1" href="#">Verweis 1</a>
und
<a class="verw2" href="#">Verweis 2</a>.
</p>
</body>
</html>
Ich habe bei der CSS-Definition ein paar Vereinfachungen getroffen:
Die CSS-Eigenschaften, die bei allen Pseudoformaten (':link', ':visited', ':hover' und ':active') gleich sind, habe ich mit 'a.verwX {Eigenschaften}' zusammengefasst.
Ebeso kann man alle Eigenschaften, die bei allen Klassen gleich sind, unter 'a {Eigenschaften}' zusammenfassen.

Wenn du einem Tag im Body mit 'style="Eigenschaft;"' eine neue CSS-Eigenschaft zuweist, dann hat das gegenüber den CSS-Definitionen im Header höhere Priorität. Wenn du also im Body einem a-Tag mit 'style="color:[neueFarbe];"' eine neue Schriftfarbe zuweist, dann sind die voherigen Definitionen bezüglich der Schriftfarbe wirkungslos.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück