大体の感じを教えて

博士Ｈ：

ここからはCSSの書き方を教えていくぞい。

そうじゃの、まずは、
実物をチョイと覗いてもらう事にしようなのじゃ。

ここのサイトのCSS

生徒Ｂ：

なんでー、ただのテキストファイルじゃん。

博士Ｈ：

そうじゃ、CSSの特徴の一つに、
誰でも簡単に書けるというのがあるからの。

生徒Ｂ：

おー、なんかスゲー簡単そうだな。
何々・・・

生徒Ａ：

博士、基本的に
要素名 { 変えたいところ : 変える値 }
なんですね！

博士Ｈ：

そうじゃの、それが基本形じゃ。
要素名の部分はセレクタ、
変えたいところはプロパティ、
変える値は値
と言うのじゃよ。
プロパチィと値のセットを宣言と言うのじゃ。
書くと、こうなるの。
セレクタ { プロパティ : プロパティ値 }

生徒Ｂ：

・・???
前に : とか . とか付いた、妙なのがあるな・・・なんだろ。
@マークの付いた、妙なものもあるな。

で、博士、これってナンな訳?

博士Ｈ：
生徒Ａ：

へ？

博士Ｈ：

セッカチじゃのぉ。
次の章で説明するで、もう少し待つのじゃ。

生徒Ｂ：

へーい。

博士Ｈ：

それでじゃな、
宣言部分やセレクタ部分は、
グループ化と言って、簡略化することが出来るのじゃ。
宣言をグループ化する場合は、
こんな感じじゃ。


body { margin: 2em 1em 2em 70px }
body { background : white }
body { background-position : top left }
body { background-attachment : fixed }
body { background-repeat : no-repeat }
body { background-image : url("logo.gif") }
博士Ｈ：

これをこんな風に簡略化できるんじゃ。


body {
  margin: 2em 1em 2em 70px;
  background: white;
  background-position: top left;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-image: url("logo.gif");
}
生徒Ａ：

じゃ、セレクタをグループ化する場合は、こうなんですか?

h1; h2; h3; h4 { text-align : left }

博士Ｈ：

いやいや、セレクタは,(カンマ)で区切るのじゃ。

h1, h2, h3, h4 { text-align : left }

生徒Ａ：

簡単・・・

博士Ｈ：

そうじゃろ、そうじゃろ。
CSSの骨組みは、こんなモンじゃよ。
終りに、コメントの挿入のし方を書いておこうかの。
HTMLと同じく、覚え書きをしておくのに良いじゃろ。
書き方はこうじゃ。


/* コメントコメントコメントコメントコメントコメントコメント
　コメントコメントコメントコメントコメントコメントコメント */
生徒Ｂ：

なんか洗脳されそうだ・・

生徒Ａ：

博士、書く場所は決まってないんですか?

博士Ｈ：

いやいや、もちろん決まっとるよ。
{ と } と : と ; の前後じゃ。
font-/* fontとは文字のこと */family : serif ;
なんてのはボツ。
そんなところじゃな。

今日はここまで。

生徒Ｂ：

ちょ、ちょっと博士、@マークの解説ぅぅー；