fany: CSS-Format für Links

Wie gebe ich in einer HTML-Datei zwei verschiedenen Links verschiede Farben? Die Links (Farbe, Größe, usw..) lasse ich durch eine CSS beschreiben. Nur wie weise ich den links verschiedene farben zu?

mein CSS:

a:link {color:#D3D0D0;}
a:active {color:#D3D0D0;}
a:visited {color:#D3D0D0;}

  1. Hallihallo!

    Wie gebe ich in einer HTML-Datei zwei verschiedenen Links verschiede Farben? Die Links (Farbe, Größe, usw..) lasse ich durch eine CSS beschreiben. Nur wie weise ich den links verschiedene farben zu?

    Dazu gibt es (ganz spontan) zwei verschieden Möglichkeiten:

    1. (unelegant):
        Per inline-styles:
        <a href="..." style="color:#....; ">.....</a>

    2. oder Du verteilst Klassen für verschiedene links:
         <a class="erstevariante" href="....">.....</a>
         und
         <a class="diezweitevariante" href="...">.....</a>

    Diese beiden Varianten formatierst Du mit CSS folgendermassen:
       a.dieerstevariante { color:#.....; }
       a.diezweitevariante { color:#.....; }

    Natürlich kannst Du auch so die Pseudoformate link, visited, active und hover benutzen.

    Ich hoffe, ich konnte Dir helfen......

    Viele liebe Grüße,
    Der Dicki

    1. man ging das schnell, derbe lieb von dir!
      ich werd mich für die zweite variante entschieden!

      Hallihallo!

      Wie gebe ich in einer HTML-Datei zwei verschiedenen Links verschiede Farben? Die Links (Farbe, Größe, usw..) lasse ich durch eine CSS beschreiben. Nur wie weise ich den links verschiedene farben zu?

      Dazu gibt es (ganz spontan) zwei verschieden Möglichkeiten:

      1. (unelegant):
          Per inline-styles:
          <a href="..." style="color:#....; ">.....</a>
      1. oder Du verteilst Klassen für verschiedene links:
           <a class="erstevariante" href="....">.....</a>
           und
           <a class="diezweitevariante" href="...">.....</a>

      Diese beiden Varianten formatierst Du mit CSS folgendermassen:
         a.dieerstevariante { color:#.....; }
         a.diezweitevariante { color:#.....; }

      Natürlich kannst Du auch so die Pseudoformate link, visited, active und hover benutzen.

      Ich hoffe, ich konnte Dir helfen......

      Viele liebe Grüße,
      Der Dicki

      1. Hallihallo!

        man ging das schnell, derbe lieb von dir!
        ich werd mich für die zweite variante entschieden!

        Man tut, was man kann...

        Viele liebe Grüße,
        Der Dicki

        PS: Anmerkung fürs nächste Mal: Anrede und Gruß nicht vergessen, sonst regen sich hier viele auf, oder antworten gar nicht erst ;)

  2. Hallo,

    a:link {color:#D3D0D0;}
    a:active {color:#D3D0D0;}
    a:visited {color:#D3D0D0;}

    a.anders:link {...}
    a.anders:active {...}
    ...

    <a href="..." class="anders">...

    Gruß, Jan L.

    P.S.:die richtige Reihenfolge ist glaube ich link,visited,hover,active

  3. Hi,

    weiter unten wurden schon die wichtigsten Möglichkeiten genannt. Allerdings gibt es noch eine weitere, und zwar wenn du beispielsweise für die Navigationsleiste die Links auf eine bestimmte Weise formatieren willst. Wenn die Navigationsleiste ein DIV-Bereich ist, dann kannst du notieren

    div a {font-size:12pt; ...}
    div a:link {color: ...}
    div a:visited {...}
    div a:hover {...}
    div a:active {...}

    Die Reihenfolge ist wichtig.

    Wenn du verschiedene DIVs auf der Seite hast, dann werden alle Verweise, die in ein DIV eingebettet sind so eingefärbt. Dies kannst du umgehen, indem du dem DIV-Berei eine bestimmte Klasse zuweist. Dann sieht dein CSS so aus:

    div.navi a {font-size:12pt; ...}
    div.navi a:link {color: ...}
    div.navi a:visited {...}
    div.navi a:hover {...}
    div.navi a:active {...}

    und dannn im body: <div class="navi" ...>

    Logischer ist es aber, keine Klasse, sondern eine ID zuzuweisen. Alle Elemente, die diese ID aufweisen, werden dann so formatiert. Entsprechend musst du dann auch die CSS-Angaben verändern

    div#navi a {font-size:12pt; ...}
    div#navi a:link {color: ...}
    div#navi a:visited {...}
    div#navi a:hover {...}
    div#navi a:active {...}

    und die entsprechende Angabe im body: <div id="navi" ...>

    Näheres findest du unter http://selfhtml.teamone.de/css/formate/zentrale.htm. Da kannst du selber entscheiden, ob

    div a oder div > a usw. besser passt.

    MfG Dmitri