上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

HTMLを書くときに、まずその先頭でDocument Typeを宣言します。

たとえば、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
などです。

ある程度違いは理解していたつもりでしたが、今回、ここではまりました。
DOCTYPE と CSSの関係です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
と宣言したときは、cssの大文字・小文字を区別します。

例えば、test{color:red} と Test{color:blue} は別物です。

しかし、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
という省略形で宣言すると、cssの大文字・小文字を区別しません。

例えば、test{color:red} と Test{color:blue} は同じものとして扱われます。
つまり、<p id="test"> というようなタグの中が赤色ではなく、後で設定している青色で上書きされるということです。

以上はInternetExplorer6の場合で、Firefoxで見た場合はどちらも青色となります。

ただし、Firefoxでも、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
と宣言したときに、css 内で #test{color:yellow}のように設定して<p id="Test">としても文字は黄色になりませんが、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
と宣言して、css 内で #test{color:yellow}のように記述し<p id="Test">とすると文字は黄色になります

例を作ってみましたので、ご覧ください。

DOCTYPEとCSSの大文字・小文字
Related Posts

Thoughts on スポンサーサイトDOCTYPEとCSSの大文字・小文字

Leave a Reply

* less than 16 characters
* less than 24 characters
* less than 16 characters
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。