CSSのカスケード処理
まず、CSSのカスケード処理を押さえておいてください。
過去ログに詳細な説明があります。
デフォルトスタイルシート
一般にスタイルシートと呼称されると、style要素やlink要素内で指定されたスタイルを指す事が多いですが、それは制作者スタイルシート(上記日本語訳仕様上では「通常の作者宣言」)と呼ばれるもので、スタイルシートの一端に過ぎません。
制作者スタイルシートよりも優先順位が低い宣言にデフォルトスタイルシート(上記日本語訳仕様上では「通常の UA 宣言」)があります。
img要素のwidth属性/height属性は位置的にはデフォルトスタイルシートとほぼ同じと思われます。
(実際にはデフォルトスタイルシートよりも優先順位が低い可能性がありますが、優先順位から逆残すれば、立ち位置は大きく外れてないと思います)
イメージ的には下記スタイルシートがUA宣言されているのに近いといえます。
CSS
1img[width="100"] { width: 100px; }
2img[width="101"] { width: 101px; }
3img[width="102"] { width: 102px; }
カスケードの有効性
では、一番優先順位が低いデフォルトスタイルシートに異議はないかと言えば、そんなことはなく、
- 何も制作者スタイルシートで指定されていなければ、
<img width="100" height="100">
が有効となる
これがメリットといえます。
実際、制作者スタイルシートだけをとってもそういう状況はあります。
HTML
1<style>
2p { margin: 1em 0; }
3.foo { margin: 2em 0; }
4p.foo { margin: 3em 0; }
5</style>
6</head>
7<body>
8<p class="foo">sample</p>
上記CSSだけなら p {}
や .foo {}
が無駄ですが、よく考えれば、次のHTMLで優先順位別にスタイルが適用されるメリットに気が付きます。
HTML
1<p>sample1</p>
2<div class="foo">sample2</p>
3<p class="foo">sample3</p>
結論としては、デフォルトスタイルシートは「製作者が何もスタイルシートを適用しなければ、有効なこと」がメリットです。
Re: ryoo_chksl さん