nav weiße links text aber schwarz links

[Ag-l]

hi leute,

ich hab ne css datei erstellt und die links weiß gemacht.
Hat bis jetzt auch super funktioniert, weil der hintergrund der der navigations schwarz ist.
nun wollte ich aber einen link im text einfügen, der dann natürlich auch weiß geworden ist. Das ist aber nicht so cool, weil der hintergrund des textes weiß ist.

meine Frage ist also, wie kann ich für verschiedene bereiche, verschieden css dateien wirksam machen oder kann ich auch alles in eine datei schreiben und bloß festlegen wo was gilt?

danke ag-l

 

[Nickless]

Hallo Ag-l,

da gibt es verschiedene Möglichkeiten. Entweder Du gibst dem Link eine ID (z.B. id="anderer-link") und formatierst ihn dann über CSS separat durch #anderer-link. Oder aber, Du legst eine Klasse fest, über class="links-im-text" und in CSS dann a.links-im-text. Und die dritte Möglichkeit, Du formatierst direkt über die Elemente. Wenn der Link sich z.B. in einem DIV befindet, gibst Du in CSS nur noch an: div a und so weiter. Alles klar?

Grüße,
Nico.

 

[Hilarious]

Um die einen Hyperlinks so zu gestalten, andere wiederum unterschiedlich, musst Du in Deinen CSS-Definitionen die jeweiligen Hyperlinks »selektieren«, also Deine CSS-Definitionen so formulieren, dass es sozusagen zwei klare Regeln gibt.

Angenommen Du hast diesen HTML-Code in Deiner WebSite:

<ul id="navigation">
    <li><a href="#">Eins</a></li>
    <li><a href="#">Zwo</a></li>
    <li><a href="#">Drei</a></li>
</ul>
<div id="seiteninhalt">
    <p>Ich bin ein Blindtext.</p>
    <p>Und so mancher <a href="#">Link</a> ziert meinen Inhalt.</p>
</div>

Hier siehst Du zwei Bereiche, gekennzeichnet durch »IDs«. Jetzt kannst Du die Abfolge der so genannten »Selektoren« in Deiner CSS-Definition formulieren:

/* CSS: */

/* Alle Links sind schwarz, ohne unterstrichen zu sein */
a:link, a:visited { color: black, text-decoration: none; }

/* Hier ist es schwarz im Hintergrund, und der Text ist weiß */
ul#navigation { color: white; background-color: black; }

/* Alle Links schwarz? Nein, diese im Speziellen nicht: */
ul#navigation li a:link, ul#navigation li:visited { color: white; text-decoration: none;}

Die Idee dabei ist, dass erst die allgemeinen Definitionen aufgeführt werden, und anschließend die Spezialfälle, je nachdem, was häufiger vorkommt oder weniger speziellen Gesetzmäßigkeiten folgt.