-CSSについて

#contents

*基本 [#q25658b0]

 p  {color: red} → pがセレクタ、colorがプロパティでredが値

**インラインstyle属性 [#v0c61a2e]

 cssを外部ファイルに書かないで直接指定するやり方。昔よくやっていた。携帯ではいまだにこれ。

**クラスとIDセレクタ [#f4415166]

基本中の基本だが、classは複数OK(複数に対して指定したい場合)、IDはひとつだけ。
基本中の基本だが、classは複数OK(複数に対して指定したい場合)、IDはひとつだけ。IDは#で指定するこれはページ内のリンクから連想しよう!

    p.hot  {color: red}
    .cool  {color: blue}

    p#hot {color: red}
    #cool {color: blue}

**ブロックレベル要素とインライン要素 [#t6cdccd4]

-<a>などはインライン要素。HTMLStrictではbodyにおけるのはブロックレベル要素なので<a>タグを書くときは<p>などのブロックレベル要素で囲わないとだめ。関連してスタイルのblockとinlineも同じようにblockだと文字の間に該当要素を挟むことができず、inlineだと文字の間に該当要素を挟むことができる。

*スタイル指定の優先度 [#x4c5ba7d]

外部スタイルシート < STYLE要素 < インライン・スタイル

同じ優先度同士なら後ろのほうが優先度が高くなる。
!importantキーワードで、優先度を最高に指定出来る。

**親子関係 [#d5a846a2]

-<div id="main"><h2/></div>にのみ適用させる書き方。

 div#main h2 { color: #C13A72; }

*DIVによるレイアウト [#c1171bb2]

三段組でも基本は二段組みと一緒。回り込みを解除しない限り横に並ぶので、回り込み解除専用のDIVを用意しておく。回り込み解除のdivは表示上影響を与えないのが好ましい。divはブロックレベル要素なので中にインライン要素を非表示でいれるというのが正しい。

**display-style [#bbcf6185]


*CSSハック [#e14495bb]

**スターハック [#u15f4fef]

-先頭に*。IE6以下対応 [#a4610ab7]

 * html p { color:#FF0000; }

**条件分岐コメント [#qcadd47a]

-見た目単なるHTMLコメントなんだけど、IEのみ解釈するという不可解な仕様

 <!--[if lt IE 7]>
 <link rel="stylesheet" type="text/css" href="css/test.css" media="screen" />
 <![endif]-->

*逆引きリファレンス [#be30a233]

**<LI>を横に並べたい [#m6a93e34]

+display:inlineを指定する。
+float:leftを指定する
#counter


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS