web-dev-qa-db-ja.com

同じHTMLページ上の異なる色のリンク

こんにちは私は同じページに異なる色のリンクを張ろうとしています。一部のリンクを青に、一部のリンクを黒にしたい。私はhtmlとCSSを初めて使用するので、よろしくお願いします。

-スペンサー

htmlcsscolorshyperlink
11
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>

デモ： http://cssdesk.com/qukaq

34
sv88erik

クラス名をurハイパーリンクに設定するだけです<a>と、ur要件に従ってCSSを記述します

例えば

[〜＃〜] 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>

簡単なデモ

3
user372551

リンクに次のようなさまざまなクラスを与えることができます。

<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- elementsを選択することを意味します。

CSSの詳細をご覧ください。

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

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

上記のように、a hrefにstyle = "color：###"を入力するだけで、個々のリンクを設定する場合は、好きなように設定できます。 :)

より一般的には、

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

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

そしてあなたのCSSファイル状態で

.red {
color: red;
}

.blue {
color: blue;
}
1
Mantar

どのリンクにどのスタイルを設定するかを指定する方法が必要であり、いくつかの選択肢から選択できます。いくつかの例：

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;">
1
Guffa