![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
p {color: red} → pがセレクタ、colorがプロパティでredが値
cssを外部ファイルに書かないで直接指定するやり方。昔よくやっていた。携帯ではいまだにこれ。
基本中の基本だが、classは複数OK（複数に対して指定したい場合）、IDはひとつだけ。IDは#で指定するこれはページ内のリンクから連想しよう！
p.hot {color: red}
.cool {color: blue}
p#hot {color: red}
#cool {color: blue}
大まかにmarginは外側の余白、paddingは内側の余白。borderはその両方に挟まれる壁のイメージで考える。
デバイスの幅や倍率などを指定できる。下記は幅をデバイスの幅に設定し、倍率は1倍固定でユーザーによる拡大縮小を禁止している。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
画面のサイズによって適応するCSSを書き換えてくれるという優れもの
<link href="/pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 900px)"/> <link href="/smartphone.css" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)"/>
@media screen and (max-width: 960px) {
/* ブラウザ幅が 960px より小さいときに適用されるスタイル */
}
@media screen and (min-width: 960px) {
/* ブラウザ幅が 960px より大きいときに適用されるスタイル */
}
| @media screen and (max-width: 960px) | ブラウザ幅が 960px より小さいときに適用される |
| @media screen and (min-width: 960px) | ブラウザ幅が 960px より大きいときに適用される |
| @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) | デバイス幅が 768px より大きく 1024px より小さいときに適用されるスタイル |
外部スタイルシート < STYLE要素 < インライン・スタイル
同じ優先度同士なら後ろのほうが優先度が高くなる。 !importantキーワードで、優先度を最高に指定出来る。
また指定はより詳細な方がマッチする。
.hoge { display:none; } div.big div.hoge { display:block; }
<div class="hoge>見えません</div> → 一般的な指定が効いてdisplay:none <div class="big"><div class="hoge">見えます</div></div> →下の詳細な指定が効いてdisplay:block
div#main h2 { color: #C13A72; }
三段組でも基本は二段組みと一緒。回り込みを解除しない限り横に並ぶので、回り込み解除専用のDIVを用意しておく。回り込み解除のdivは表示上影響を与えないのが好ましい。divはブロックレベル要素なので中にインライン要素を非表示でいれるというのが正しい。
* html p { color:#FF0000; }
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="css/test.css" media="screen" /> <![endif]-->
