web-dev-qa-db-ja.com

テキストをhrefリンク内で色付けしないで、テキストもdiv内に含めるにはどうすればよいですか？

Div全体をリンクとして作成するときに、テキストを青色ではなくするにはどうすればよいですか？

したがって、次のスニペットでは：

<a href="/link"><div><h2>LINK</h2></div></a>

div全体を別のページにリンクさせたいが、通常のリンクオブジェクトの場合のように文字列LINKを青色にしたくない。

次のCSSを書いたとき：

a {text-decoration: none; background-color: none; }

それはまったく変わりませんでした。

[更新]

多くの回答ありがとうございます。 divをa内に配置したいのは、ブロックをリンク可能なオブジェクトにしたいからです（ブロックをクリックして別のページに移動します）。最初にaをdivの内側に配置しましたが、機能しませんでした。そのため、divの外側に配置しました。 （そして私はHTML5とCSS3を使用しています）。

htmlcsshtml5css3colors
9
Blaszard

HTML 5では、これを簡単に使用できます。

<a href="/yourLinkAddress">
    <div class="link">
         <h2>Link Text</h2>
    </div>
</a>

CSS：

.link
{
   color:aqua;
   text-decoration: none; 
   background-color: none;
}
13
Majid

Html5仕様のリンク内でdivs/block-elementsを使用することは許可されているので、本質的に悪いことではありません。

背景はテキストの背後にあるものを意味します。つまり、以下のこのコードの背後は灰色です。色はあなたが求めているものです。

a {
    text-decoration: none; 
    color: black; 
}

編集：ソース：

後藤： http://validator.w3.org/check と検証してください：

<!doctype html>
<html>
<head>
<title>...</title>
</head>
<body>
    <a href="#stuff">
        <div>
            <h1>hi</h1>
        </div>
    </a>
</body>
</html>
4
OZZIE

試す

<a href="/link"><div class="link"><h2>LINK</h2></div></a>

次にクラスを適用します：

.link{
  background-color:none;
  color:blue;
 }

内部タグの使用が許可されていない場合は、の代わりにテーブルを使用してみてください。同じように動作するはずです。

2
Nelson Menezes

単にターゲットh2

a div h2 {
    color: #fff; /*Or whatever you want*/
}
2
markvicencio

css：

.link
{
  text-decoration: underline;
color: #0000EE;
font-size: 16px;
}

html：

<strong>Hello!</strong> you have already registered , you can login
<a href="http://www.example.com/"><span class="link">here</span></a>

参照：

デフォルトのHTML/CSSリンクの色 および this

Wikipedia Link Color は、さまざまなリンクの色とその意味を示しています。

お役に立てれば。

0
stom

text-decoration: none;受け入れられた回答には影響しません！

これはあなたのコードです

<a href="/link"><div><h2>LINK</h2></div></a>

正しいです;

<div class='editLink'> 
     <a href="/link">
       <h2>LINK</h2> 
    </a>
</div>

[〜＃〜] css [〜＃〜]

.editLink a {
  color: #FFFFFF;
  text-decoration: none;
}
0
ErcanE
a{text-decoration: none; background-color: none;color:gray; }

//希望の色を色付けします。

0
Sasidharan