WEBページ上の「見栄え」を定義するための新しい技術
  HTML は文書の意味( 構造 )だけを定義するべきで、
  文書の見栄えは定義するべきではない

  見栄えは HTML ではなく
  スタイルシートで記述 」というのが開発の理由

  ModelViewControl の考え方


___
■ CSS

   p#id { color : #ff3300 }
   {} 宣言 Block
   p#id" をセレクタ（選択子）といい、スタイルが適用される対象
   選択子 宣言  // だれに どのような情報をあてるか ?


___
■ box

  POINT
    各要素は box という四角い領域をもつ。
    StyleSheet の property は以下の設定をかえることで見た目を変更する 

    box
      margin
        background-color
          background-image
            border
              padding
                内容領域






___
■ 要素の種類と適用要素

  POINT
    要素には 大きく分けて２種類がある

    // Block 要素は 文章の塊を形成する。改行がはいる
    block 要素      
      table, tr, td, div, h*, pre

    // inline 要素は 文書の部分を形成する
    inline 要素
      span, em



  WARNING
    css の property はすべての要素に適用できるわけではない。
    スタイルは要素によって適用できる範囲が変わるので
    各要素がどれに分類されるか知っておくこと。
    おおまかに次の分類になる。

    すべての要素
    Block 要素のみ
    inline 要素のみ
    特定の要素



    // text-align は Block 要素のみ

    // BAD
    < span style="{ text-align : right}">test< /span>
    
    // OK
    < div style="{ text-align : right}">test< /div>


    // background-color は全要素に使える

    < p> test 
        < em style="{background-color : red}"> test < /em>
        test
    < /p> 




    // list-style-image は li, ul, ol 要素のみ

    < ol style={"list-style-image : url('test.gif')" }>
      < li> test
      < li> test
    < /ol>


___
■ 継承(Inheritance)


  DESC
    各要素は親子関係をもち、スタイルの値は子要素に継承されることがある。

    
    継承されるスタイル
    color
    font-weight


    margin


  body { color:red; } と定義されている時
  h1 要素の color:red がh1要素にも継承されて

  bbb の文字も赤くなる。

    < body>
        aaa
          < h1>bbb< /h1>   
        aaa
    < /body>

    




___
■ メリット

___
■ 見栄えを一度に指定できます
  DESC
    H1要素に < font color=red>〜< /font> を指定してまわるよりも
    スタイルシートで一度に指定した方がラクチン
    外部ファイルで指定すればなお OK 

___
■ きせかえOK 
  DESC
    好きな見栄えにできます

    IE
    [インターネットオプション] > [ユーザ補助] > [ユーザースタイルシート] 

    人のページに自分の好きなスタイルシートファイルを適用することができます 
    黒地に白文字が好き
    大きな字で読みたい
    自分好みのスタイルを適用できる。

    
___
■ 見た目と意味を分離できる
    Webページを自動収集して情報データベースを作成したり
    目の見えない人が音声ブラウザでWebページを読む場合など
    見栄えがあまり重要視されないケースもあります

    見栄えを別のページで記述することにより
    不要な見栄え情報を読み込んでくる煩わしさを解消できる。


___
■ おおまかな流れ

  SYNTAX
    宣言 == [ 特性(property) : 値 ] 



  タグに依存しない class も定義できる
  .red { color: red; }

  < h1 class=red>これはredクラスです< /h1>
  < p class=red>これもredクラスです< /p>


  IE5.0 以降は, 複数クラス を重複して指定できます
  < span class="black bold">黒くて太いのがスキ！< /span>

  // クラス名がなければ, 自動で反映されます

  // list はすべて太く
  li { font-weight : bold; }

  // r クラスは 赤
  li.r { color : red; }

  < ol>
  < li class=r> 赤くて太いリスト
  < /ol>





  任意の箇所に style を適用したいときは < span>, < div> をつかう
  < span> はインライン要素（前後で改行されない）
  < div> はブロック要素（前後で改行される）を囲む一般的なタグとして仕様される



  // タグに直接指定もできる
  < b style="color:#622D3C;font-family:'ＭＳ Ｐゴシック'">DESC< /b>





___
■ Group
  , を使って 複数の tag のクラスを定義する
  // h1, h2 のクラスを定義
  h1, h2 { color:red; }


  * 最後の属性値の ; は省略 OK

  // 見やすいのでこのフォーマットに統一
  H1 {

    // ; で区切り 複数の Attribute を決める

    // 改行は　あってもなくても OK 
    color: red;
    background: yellow
  }


___
■ Class
  DESC
  * クラスとはスタイルの集合につける名前 

    Tag ごとに 複数のスタイルを指定できる
    各タグ名に応じたクラスを定義できます

例

  < p> タグで redクラス, greenクラスをつくる

  < head>
  < style type="text/css">
  < !--
  P.red   { color: red; }
  P.green { color: green; }
  -->
  < /style>
  < /head>

  < body>
  < p class=red>  これはredクラスです  < /p>
  < p class=green>これはgreenクラスです< /p>
  < /body>



  タグ名に依存しないクラス名を指定できる
  .red { color: red; }

  < h1 class=red>これはredクラスです。< /h1>
  < p class=red>これもredクラスです。< /p>


  IE5.0 以降では、複数のクラスを重複して指定できる
  .red { color: red; }
  .bold { font-weight: bold; }

  < span class="red bold">赤い太字< /span>



___
■ 定義済みクラス
  DESC
    定義すみのクラスもあります

  POINT
    定義済みクラスはピリオド（ . ）ではなくコロン（ : ）で指定する



    // 状況に応じた クラスが用意されてます
  
    // 通常のリンク
    a:link { color: green; }

    // 読み込み済みのリンク
    a:visited { color: blue; }

    // クリックされた瞬間
    a:active { color: red; }


hover は CSS2 でサポートされたもので
マウスをその上に乗せた時のスタイルを指定します
  A:hover { color: red; }     /* IE4.0/N6.0〜 */


  その他にも次の定義済みクラスがある。
  P:first-line { color: red; }    /* 最初の1行 */
  P:first-letter { color: red; }  /* 最初の1文字 */
  P:first-child { color: red; }   /* 最初の1要素 */



___
■ ID
  DESC
    クラスの代わりに ID を指定できる


複数のタグに同じクラス名を指定することが可能ですが
ID はそれぞれの要素につける名前で
ひとつのドキュメント中に
複数の要素が同じ ID を持つことは許されません。

#elm123 { color:red; }
H1#elm124 { color:green; }

< span ID=elm123>あいうえお< /span>
< h1 ID=elm124>かきくけこ< /h1>

IDは一意なので H1#elm124 の H1 を記述するケースはあまりありませんが
ひとつのスタイルシートを複数のファイルから参照することも考慮してか
クラス定義とのバランスをとってか
仕様上は記述できるようになっている。



___
■ Include
  DESC
    定義部を他のファイルから読めるので、他の html file と共有できます

  < head>
  < title>Style Sheet Test< /title>
  < link rel="stylesheet" type="text/css" href="./xxx.css">
  < /head>


  
  # xxx.css 

  H1 { color:red; }
  H2 { color:blue; }

  WARNING 

  読み込む stylesheet は , 定義部分のみをかきます

  // BAD

  p.red { xxx; }
  p.red { xxx; }


  // OK

  < style>
  p.red { xxx; }
  p.red { xxx; }
  < /style>


___
■ 単位

  DESC
    HTML の height=100 や width=100 は単位を書きませんが
    CSS では単位は必須になる

    単位は大きくわけて 2 種類
    絶対単位
    相対単位



    // 相対単位 は display 解像度に対して相対になる

    10px ... 10ピクセル

    10em ... 文字の高さを基準とした1文字分の長さ（emは文字Mの大きさに由来）
    10ex ... 文字xの高さ




// 絶対的な大きさ
10in ... 10インチ（1in=2.54cm）
10cm ... 10センチメートル（1cm=10mm）
10mm ... 10ミリメートル（10mm=1cm）
10pt ... 10ポイント（1pt=1/72in）
10pc ... 10パイカ（1pc=12pt）



下記の図で、
  ○は絶対的（フォントサイズを変更しても大きさが変わらない）、
  ×は相対的（フォントサイズに合わせて大きさが変わる）な長さとして実装されています。

                  em  ex  px  in  cm  mm  pt  pc
IE6.0(Win)         ×  ×  ○  ○  ○  ○  ○  ○
Netscape 4.0(Win)  ×  ×  ○  ×  ×  ×  ×  ×
Netscape 6.0(Win)  ×  ×  ×  ×  ×  ×  ×  ×
Opera 6.0(Win)    ○  ○  ○  ○  ○  ○  ○  ○

___
■ タグと要素とセレクタ

  WARNING 
  H1 { color:red; } を「H1タグにスタイルを指定する」


  H1 { ... } の H1 を H1要素のセレクタ( selector )
  color:red を宣言（declaration） 
  color を属性 ( property ) 
  red を値( value ) 


  < h1> をH1要素の開始タグ 
  < /h1> をH1要素の終了タグ 

  要素（element）については
  下の図のそれぞれの枠が要素だと思ってください
  body 要素は開始タグも終了タグも（実は）省略可能なのですが
  たとえタグが省略されていても
  < h1>〜< /h1> や < p>〜< /p> は body 要素の一部である。


___
■ comment


  /* コメント */  
  H1 { color:red; }    

  /* 
    コメント 
  */  
  H1 { 
      color:red;
  }    


___
■ SytleSheetの定義順

  REF
    http://allabout.co.jp/gm/gc/23855/3/


    # 同じ Style を指定した場合, 後の指定が優先される
    p { color: red; }
    p { color: blue; }