webentwicklung-frage-antwort-db.com.de

Verschiedene Farbverknüpfungen auf derselben HTML-Seite

Hallo, ich versuche verschiedene farbige Links auf derselben Seite zu haben. Ich möchte, dass einige Links blau und einige Links schwarz sind. Ich bin neu in HTML und CSS, also danke im Voraus!

-Spencer

10
Spencer

CSS:

A.class1 {color:red;}
A.class1:link  {text-decoration: none; color: red;}
A.class1:visited {text-decoration: none; color: red;}
A.class1:hover {text-decoration: underline; color: red;}
A.class1:active {text-decoration: none; color: red;}


A.class2 {color:blue;}
A.class2:link {text-decoration: none; color: blue;}
A.class2:visited {text-decoration: none; color: blue;}
A.class2:hover {text-decoration: underline; color: blue;}
A.class2:active {text-decoration: none; color: blue;}

HTML:

<a href="http://www.google.com" class="class1">Google</a>
<a href="http://stackoverflow.com" class="class2">Stackoverflow</a>

Demo : http://cssdesk.com/qukaq

30
sv88erik

setzen Sie einfach einen Klassennamen auf Ihre Hyperlinks <a> und schreiben Sie das CSS entsprechend den Anforderungen Ihrer Anforderungen

zum Beispiel

CSS

<style>
.red { 
 color : #f00; text-decoration : none;
}

.green { 
 color : #0f0; text-decoration : none;
}

.blue { 
 color : #00f; text-decoration : none;
}

</style>

Markup :

<a href="#" class="red" > Link0 </a>
<a href="#" class="green" > Link1 </a>
<a href="#" class="blue" > Link2 </a>

Eine einfache Demo

2
user372551

Sie können den Links verschiedene Klassen geben:

<a href="..." class="internal">Link to some internal page</a>
<a href="..." class="external">Link to some external page</a>

Und schreibe CSS-Regeln wie:

a.internal {
    color: ...;
}

a.external {
    color: ...;
}

a.internal bedeutet Alle a- Elemente mit der Klasse internalauswählen.

Erfahren Sie mehr über CSS.

2
Felix Kling
<a href="http://" style="color: red">RED</a>

<a href="http://" style="color: blue">RED</a>

Wie Sie oben sehen, geben Sie einfach style = "color: ###" in der a href ein, um es auf das zu setzen, was Sie möchten, wenn Sie jeden einzelnen Link setzen möchten. :)

Für allgemeinere verwenden

<a href="http://" class="red">RED</a>

<a href="http://" class="blue">RED</a>

und in Ihrem CSS-Dateizustand

.red {
color: red;
}

.blue {
color: blue;
}
1
Mantar

Sie müssen eine Möglichkeit angeben, welche Links welchen Stil haben sollen, und es gibt mehrere Möglichkeiten, aus denen Sie wählen können. Einige Beispiele:

Alle Links innerhalb des Elements mit id="Main" sind schwarz:

#Main a { color: #000; }

Alle Links, die sich in einem Element mit class="Message" befinden, sind blau:

.Message a { color: #00f; }

Alle Links, die selbst class="command" haben, sind schwarz:

a.command { color: #000; }

Alle Links innerhalb eines li-Elements sind dunkelblau:

li a { color: #009; }

Sie können den Stil auch direkt für einen bestimmten Link angeben.

<a href="page.html" style="color:#000;">
1
Guffa