HTMLの初心者なのですが、divについて少し分からない事がありまして

質問

HTMLの初心者なのですが、divについて少し分からない事がありまして質問します。
今まではデザインにテーブルぐらいしか使った事がなかったのですがスタイルシートを使ってみたいと
思いまして他のサイトの方の構成を見て勉強していたのですが、
<DIV class=A>
<DIV>

<DIV style="TEXT-ALIGN: left"><A title=あいうえお
href="http://www.abcdefg">あいうえお</A>
</DIV>
</DIV></DIV>

上記の部分なのですが・・
<DIV class=A><DIV>～</DIV>
この部分は～で挟まれた部分をクラスAで全てを定義するで合っていますでしょうか？

また上記の場合「あいうえお」と表記されリンクが貼られている状況になりますが、
クラスAで文字の色を変えてみても実際には青いままとなります。（青文字で「あいうえお」と表記されます。文字の大きさや背景は変更できました）

これはどうして変わらないのでしょうか。また「あいうえお」の上にマウスカーソルを
合わせると赤色になります。

このような（常に青文字表記、カーソルを合わせると赤色文字表記）定義がされている
所がまったく見当たりませんがどこに記載してあるのでしょうか。不必要なソースは
全て消してみてもさっぱり分かりません。

初歩的な質問だとは思いますがどなたかわかりやすく教えていただけると助かります。

回答No.2

ORUKA1951

きちんとインデントして書くとわかりやすいです。
<div class="A">
<!-- タグは小文字で。また属性値は""で囲む(XHTMLの規格に合わせる癖をつけておこう-->
　<div>
　　<p style="text-align:left">
　　　<a href="[URL]" title=""あいうえお">あいうえお</a>
<!-- 日本語や空白を含む時は""は必須 -->
　　</p><!-- この場合はpだね -->
　　<!-- divは汎用ブロックなのでpの代わりになるけど、本来の意味からはpで囲むべき -->
　<div>
</div>

　この場合、リンクの文字はどこにも指定されていないので、ブラウザのデフォルトのスタイルシートが適用されます。リンクの色は
a:link{ color: magenta;}の様に指定します。a{}だけだと、<a name="abc">にも適用されてしまう。
a:link{}
a::visited{}
a:focus{}
a:hover{}
a::active{}
　と、この順番で疑似要素を使って指定しましょう。

　この場合、
<div class="A">
　|-- <div>
　　　　|-- <p>
　　　　　　|-- <a href> にだけ指定したければ
div.A div p a:link{color:red;}だね。
　ただし、リンクの色などは、よほど理由がない限り変更しないほうが訪問者に優しい。混乱しないのでね。

回答No.1

metametamu

＞この部分は～で挟まれた部分をクラスAで全てを定義するで合っていますでしょうか？

基本的にはその通りなのですが、プロパティによって子孫要素まで値を継承するかどうかに違いが有ります。
例えばcolorは継承しますが、displayは継承しません。

今回の場合a要素の色が変わらないのは、ブラウザのデフォルトスタイルが指定されているためです。
デフォルトスタイルというのはブラウザでがそのタグの役割に応じて最初から指定しているスタイルのことです。
このようにa要素にスタイルが指定されている場合、その親・祖先要素のdivにいくらcolorを指定してもその値はa要素には継承されません。
なので、a要素に直に指定しデフォルトスタイルを上書きする必要があります。

div.A a {
color:green;
}