アメブロのＣＳＳについて

質問

今、ＣＳＳを勉強中で、勉強したことを復習するために、
ブログのＣＳＳを覗いてみてるのですが、

アメブロの編集可能ＣＳＳのところに、

/* 通常文字 */
.skinTextColor,.skinBaseTextColor,.skinBlock,body{
color:#333333;
}

というのがあります。

ＣＳＳは、セレクタ、プロパティ、値からなると勉強しました。

このセレクタのうち３つは、class指定されてるものだと思うのですが、
skinTextColorと、skinBaseTextColorは
ＨＴＭＬの中に見つけられませんでした。
（TeraPadに貼り付けて、検索機能でチェックしました）

そういうことってありえますか？

例えば、ＣＳＳが外部にあるように、
そのクラス指定のタブもどこか違うページにあるのでしょうか？

素人で、よくわかってないので、
質問がおかしかったらすみません

どなたかわかる方がいらっしゃいましたら、教えていただけると嬉しいです。

回答No.1

ORUKA1951 · ベストアンサー

.skinTextColor,.skinBaseTextColor,.skinBlock,body{}
はグループ化です。
.skinTextColor{}
.skinBaseTextColor{}
.skinBlock,body{}
に同じ指定をするときと同等です。
.skinTextColor{}
　と言う書きかたは、本来のセレクタの書き方ではありません。

現在のウェブ標準とされているCSS2.1では、
『単体セレクタは型セレクタもしくは 全称セレクタのいずれかの直後に、0個以上の属性セレクタ、IDセレクタ、擬似クラスが任意の順序で続くものである。セレクタの構成要素のすべてが一致する場合、単体セレクタはマッチする。( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#selector-syntax )』

【・・・いずれかの直後に】と必ず、基点となるセレクタを最初に書くことになっています。すなわち、
*.skinTextColor{}
　と全称セレクタを書きます。意味は全く同じです。
　CSS1との整合のために設けられた『全称セレクタが単体セレクタの唯一の構成要素でない場合、"*"を省略してよい。』で、システムとしては、.skinTextColor{}を*.skinTextColor{}と解釈しているに過ぎません。

＞例えば、ＣＳＳが外部にあるように、そのクラス指定のタブもどこか違うページにあるのでしょうか？
　他のページで登場する可能性があるから指定している。

＞このセレクタのうち３つは、class指定されてるものだと思うのですが、skinTextColorと、skinBaseTextColorはＨＴＭＬの中に見つけられませんでした。

　お気づきのように、そのようなHTMLやスタイルシートの書き方は良くはありません。どこにその宣言が適用されているかHTMLソースを検索して見ないとわからない・・・・なんてのは基本から間違っています。
　例えば、次のようなスタイルシートだとどうでしょう。

div.nav ol{
list-style:none;
margin:0;padding:0;
text-align:center;
}
div.header div.nav ol li{
display:inline-block;
margin:2px;
}
div.section div.nav ol li{
display:block;
margin:5px 0;
}

いちいち、HTML開かなくても、
・ナビゲーションリストはリスト表現しない。テキストはセンター配置
・ヘッダ内のナビゲーションは横並びブロック
・本文(section)内のナビゲーションはたて並びのブロック
　とすぐ分かる。

　これができるのは、HTMLのDIVやSPANは
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
　HTMLには文書構造が書かれているから。文書構造しか書いてないから。
　スタイルシートのセレクタは、HTMLの文書構造に基づいて書くようになっています。
　それが、スタイルシートでデザインする最大の目的
【構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )】

　ちなみに上記クラス名は、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )名と、その用途を参考にしています。将来HTML5に変更する際、楽です。

　HTMLもCSSも、文字通り簡単にわかりやすくなります。そのためにはまずHTMとCSSの仕様書を読みましょう。へんなサイトをいくら見ても参考にはなりません。かえって迷路に迷い込む。
　まず
・HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
・CSS 2.1仕様（日本語訳）( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )

お礼

大変丁寧なご説明ありがとうございます。
お礼が遅くなり申し訳ございません。
やはり基礎がないと苦労しますね。
一人で考えてもちんぷんかんぷんでしたが、
どこを理解すればいいのかちょっと分かった気がします。
教えて頂いた資料を読んで勉強を続けます。
お時間をとって教えて頂き、ありがとうございました。