CSSの基本書式
- 外部スタイルシートファイル
-
<link rel="stylesheet" href="*.css">
セレクタ:指定対象要素{ プロパティ:値; }
- head要素内style要素
<style>セレクタ:指定対象要素{プロパティ:値;}</style>- 要素内style属性
style="プロパティ:値;"- 背景色
- 文字色
- 境界線
- etc
セレクタ
スタイルを適用したい要素を指定
名称 書式 対象 ポイント 全称セレクタ * すべての要素 0 要素型セレクタ 要素名(タグ) 指定した要素 1 疑似要素 要素名::first-line 初めの1行 要素名::first-letter 初めの一文字 要素名::before 要素の前 要素名::after 要素の後 属性セレクタ 要素名[属性名(="属性値")] 指定された属性値を持つ要素 10 要素名[属性名^="foo"] 属性値がfooで始まる属性を持つ要素 要素名[属性名$="foo"] 属性値がfooで終わる属性を持つ要素 要素名[属性名*="foo"] 属性値がfooを含む属性を持つ要素 classセレクタ (要素名).クラス名 指定したクラス 疑似クラス a:link 未訪問のリンク a:visited style="background:#d1e8ff"訪問済みのリンク 要素名:hover マウスカーソルが乗っている要素 要素名:active クリック中の要素 要素名:first-child 要素内で最初に現れる子要素 要素名:nth-child(n) 要素内で全要素中n番目に現れる子要素
cf.nth-child(2n+1) 奇数ごとの設定要素名:nth-of-type(n) 要素内で同一要素中n番目に現れる子要素
cf.nth-of-type(2n) 偶数ごとの設定idセレクタ (要素名)#id名 idに紐付けられた要素 100 子孫 セレクタ1 セレクタ2 セレクタ1で指定された要素内にあるセレクタ2要素 子 セレクタ1>セレクタ2 セレクタ1で指定された要素の直下にあるセレクタ2要素 隣接 セレクタ1+セレクタ2 セレクタ1で指定された要素に隣接しているセレクタ2要素 複数指定 セレクタ,セレクタ セレクタで指定されたものに共通して設定 スタイル指定の優先順位
CSSでは一つの対象に複数のスタイルを指定することができる。仮にそのスタイル指定がバッティングしたときには以下の優先順位でスタイルが適用される。
- !important
値のあとに!importantを付けるとその値が最優先される
- セレクタの種類
指定した方法のポイントの合算で高いポイントのものから優先される
- 指定場所
- style属性での指定>head要素内指定>外部スタイルシート
- 同じ指定場所,ポイントの時には後に記述したものが優先