Различные цветные ссылки на одной и той же странице HTML

Question

Привет. Я пытаюсь использовать разные цветные ссылки на одной странице. Я хочу, чтобы некоторые ссылки были голубыми, а некоторые - черными. Я новичок в HTML и CSS, поэтому заранее спасибо!

-Spencer

Answer 1

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>

Демо : http://cssdesk.com/qukaq

Answer 2

Вы можете присвоить ссылкам разные классы, такие как:

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

И написать правила CSS, такие как:

a.internal {
    color: ...;
}

a.external {
    color: ...;
}

a.internal означает выбрать все a -элементыс классом internal.

Узнайте больше о CSS.

Answer 3

просто установите имя класса для ваших гиперссылок <a> и напишите CSS в соответствии с требованиями

для примера

CSS

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

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

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

</style>

Разметка :

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

Простая демонстрация

Answer 4

Вам нужен какой-то способ указать, какие ссылки должны иметь какой стиль, и есть несколько вариантов выбора.Некоторые примеры:

Все ссылки, которые находятся внутри элемента с id="Main", являются черными:

#Main a { color: #000; }

Все ссылки, которые находятся внутри любого элемента с class="Message", являются синими:

.Message a { color: #00f; }

Все ссылки, которые сами имеют class="command", являются черными:

a.command { color: #000; }

Все ссылки, которые находятся внутри элемента li, являются темно-синими:

li a { color: #009; }

Вы можететакже укажите стиль непосредственно для конкретной ссылки.

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

Answer 5

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

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

Как видно выше, вы просто вводите style = "color: ###" в a href, чтобы установить его на то, что вы хотите, если хотите установить каждую отдельную ссылку. :)

Для более общего использования используйте

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

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

и в вашем состоянии CSS-файла

.red {
color: red;
}

.blue {
color: blue;
}