HTML講座

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では一つの対象に複数のスタイルを指定することができる。仮にそのスタイル指定がバッティングしたときには以下の優先順位でスタイルが適用される。

  1. !important

    値のあとに!importantを付けるとその値が最優先される

  2. セレクタの種類

    指定した方法のポイントの合算で高いポイントのものから優先される

  3. 指定場所
    1. style属性での指定>head要素内指定>外部スタイルシート
    2. 同じ指定場所,ポイントの時には後に記述したものが優先