___
■ 注意点

  WARNING
    IE9 では style 属性を指定してもDOCTYPE の有無に関係なく反映されないかも
    Opera では以下はOK
    対応として, style は外部ファイルにすること
    iframe など特有のタグの問題ではない

   < p style="{ background-color:yellow; }">
   test
   < /p>



  まとめるとこれ
    // DOCTYPE の指定
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    &&
    < p style="{ background-color:yellow; }">test< /p>

    の併用はできない

    // DOCTYPE の指定なし ( 互換モードなら可能 )
    < p style="{ background-color:yellow; }">test< /p>


    // しかし position:fixed を利用するためには DOCTYPE  Transitional の指定が必要
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    < div>test< /div>


    // そこで DOCTYPE の指定と 外部 style を併用することで IE では解決

    // なお position:fixed  は IE では標準モードのみ対応
    // そのため DOCTYPE を指定する

    // しかし DOCTYPE を指定すると IE では style 属性が指定できなくなるという話


    // IE9 では互換モードならば style 属性は有効



___
■ DOCTYPE

  WARNING
    Browser によっては対応する style が変わるため注意が必要
    
  DESC
    HTML がどの仕様に準拠しているか宣言するために利用する。
    Browser はこの宣言の内容, 有無を見て HTML の解釈をかえる。
    そのため 表示結果も変更される可能性がある。

    DOCTYPE は 3 種類
  
    // 厳密仕様
    < DOC>

    // 過去の互換のための移行仕様

    // Frame あり仕様

    

  POINT
    標準仕様は Browser 固有の解釈がないため, できれば標準仕様を利用すること
    Browser ごとに表示が違う事にはならない
    標準, 互換モードは DOCTYPE の有無, 宣言内容によって決まる

    標準モード
    DOC strict
    DOC Transitional//EN URL あり
    DOC Transitional FrameSet//EN URL あり


    互換モード
    宣言なし
    DOC Transitional//EN URL なし
    DOC Transitional FrameSet//EN URL なし






___
■ Style.の定義


  スタイルを定義するには以下の構文で < head> タグ内に記述する。

 < font color=red> // tag ごとに Style を定義 < /font> 
 < font color=red> // < p> のクラス red を定義 < /font> 

  /* JavaScript と同じく 対応してない Browser のために comment でくくります */

  /* 
    class 名を指定しないと,
    すべての < p> に影響する
    ( class 名が無効なやつも含みます )                                                                                          
  */

  < head>

  < style type="text/css">

  < !--
  P.red { 
    color: red; 
  }
  P.green {
           color: green; 
           font-weight: bold;
           font-style: italic;
          }

  P { color: red; }


  var.green { 
    color: green; 
    font-weight: bold;
    font-style: italic;
  }
  -->
  < /style>

  < /head>



___
■ Style.を適用

  Style を適用するには、クラス属性で定義したスタイル名を指定する

  < body>
  < p class=red>   赤 < /p>
  < p class=green> 緑 < /p>
  < /body>


  POINT
    クラスは複数指定できる。
    これを使うと C++ の継承のような扱いができる。

    .clearfix{
    　  width    : 1000px;
        bakground: #FFF;
    }

    .narrow{
        width: 800px;
    }

  
    両方に定義されたプロパティは、後から指定したもので上書きされる。
   < div class="clearfix clearfix2">



___
■ スタイルの実用的な利用方法を調べる

    ブラウザのデバッグ機能を使うと、スタイルの例がわかる。
    
    Opera では
    RMB > 要素を検証する