やまだ系

コンピューターやWEB関連の情報収拾と整理、資格取得に関することを目的にしたブログ

トップ > CSS > 資料メモ

資料メモ

CSS

今さらあわてて作成；CSSの簡単な説明とブラウザごとの対処ハックについて

  1. セレクタのちがい：セレクタは2種類クラスとIDがある。どちらも大文字と小文字を区別する。Netscape６，winIE６，macIE5、Safariでは完全に区別されるようになったそうです。
    1. クラス：スタイルシートをサポートしているほとんどのブラウザでサポートされている。同じページ内で何回も繰り返して使用できるので、装飾的に(たとえば文字の位置と色とか）繰り返して表現するときに使用する。
    2. ID：HTML仕様では、IDは文書中に一回しか使用できない事になっている。なのでページを大まかなブロックレイアウトするときに使う事が多い；
  2. 子孫セレクタを使う例
    1. 要素の中のある要素にだけ指定とかできるようになります。するとむやみにクラスを増やさなくてもすむと言うことが子孫セレクタを使うです。
      1. たとえばPタグの中にあるSTRONGタグに対して色を変えたいときには；p strong{color:#f00;}
      2. IDやクラスのタグの中で色を変えたいとき：p.mojiiro{color:#f00;}
  3. スタイルシートの優先度
    1. 1.インラインスタイルシート＞2-style属性＞3-外部スタイルシート
      1. 1.タグのスタイル属性として直接HTML文書内に記述
      2. 2.＜style＞要素を使用してHTML文書内に定義する（これは＜head＞要素の中で記述していくタイプ）
      3. 3.＜link＞タグで外部スタイルシートに定義する
    2. 同一のセレクタがあった場合はコードないで最後に描かれた同一のセレクタが優先される。先述のセレクタ内に別のプロパティが存在し、後述のセレクタがない場合は前述のプロパティが定義されてしまうので気をつけないといけない。同じで良ければそのままということですが、違うのであればプロパティを定義する必要がある。
  1. css対策ハックメモ
    1. NN4のみ排除
      1. p{/*/*/color:#f00;/* */}}
    2. MacIE5のみ排除
      1. p{/*\*/color:#f00;/* */}
    3. WinIE4~6,MacIE4~5のみ適用
      1. * html p{color:#f00;}
    4. WinIE4~6のみ適用
      1. p{_color:#f00;}
    5. winIE4~5,MacIE5,Oprera7,Mozilla,Firefoxには適用
      1. p{#color:#f00;}
    6. WinIE5.5~6,MacIE5,Safariのみ適用
      1. html * p{color:#f00;}
    7. Mozilla,Firefox,Oprera7.5,Safariなどxmlnsサポートブラウザのみ適用
      1. html[xmlns]p{color:#f00;}
    8. Mozilla,Firefox,MacIE5,Safariにのみ適用>CSS3に導入予定:root使用
      1. :root p{color:#f00;}
    9. NN4,Oprea4-5のみ適用
      1. p{/*/*//*/color:#foo;/* */}

時間がないのであとで見直そう
・・・なんか本のまま適当にかいつまんでる；