読者です 読者をやめる 読者になる 読者になる

覚えてられないCSSに関するメモ#1

etc

CSSの読み込み

link要素でCSSファイルを読み込む

<link rel="stylesheet" type="text/css" href="css/styles.css" />


importでCSSファイルを読み込む

<style type="text/css">
@import "css/style.css";
</style>

CSS文字コード指定

CSSファイルの1行目に以下を記述することでCSS文字コードを指定

@charset "UTF-8";

1行目じゃなきゃだめ

セレクタ

名前 セレクタ 意味
ユニバーサル * 全ての要素 * {color: #000000;}
タイプ E その要素 p {color: #000000;}
子孫 E F 親Eに含まれる子孫要素F p em {color: #000000;}
E > F 親Eに含まれる直接の子F p > em {color: #000000;}
隣接 E + F 兄Eの直後の弟F h1 + p {color: #000000;}
クラス .classname class属性が指定名の要素 .note {color: #000000;}
ID #idname id属性値が指定名の要素 #header {color: #000000;}
属性 E[attr] 要素Eが属性attrを持つ場合 input[type] {padding: 2px;}
属性 E[attr="value"] 要素Eが属性attrと値valueを持つ場合 input[type="text"] {padding: 2px;}
属性 E[attr~="value"] 要素Eが属性attrを持ち、空白区切りで
指定された属性値にvalueが含まれている場合
p[class~="moveto"] {color: #000000;}
属性 E[attr|="value"] 要素Eが属性attrを持ち、ハイフン区切りで
指定された属性値にvalueが前方一致で含まれている場合
p[class|="moveto"] {color: #000000;}

スタイル適用の優先順位

一般的なスタイルより個別的なスタイルが優先される
詳細度が同じスタイルについては、あとから読み込んだスタイルが適用される
IDセレクタ > クラス/属性セレクタ > タイプセレクタ > ユニバーサルセレクタ

疑似クラス/疑似要素

名前 セレクタ 意味
リンク疑似クラス :link 未訪問リンク a:link {color: #000000;}
リンク疑似クラス :visited 未訪問リンク a:visited {color: #000000;}
ダイナミック疑似クラス :hover カーソルオン a:hover {color: #000000;}
ダイナミック疑似クラス :focus フォーカス a:focus {color: #000000;}
ダイナミック疑似クラス :active アクティブ a:active {color: #000000;}
言語疑似クラス :lang() 要素に指定言語コードが指定されている場合 div:lang(en) {font-size: small;}
:first-child疑似クラス :first-child 要素中の最初の子要素 div:first-child {font-size: small;}
:first-line疑似要素 :first-line 要素の1行目のみ div:first-line {font-size: small;}
:first-letter疑似要素 :first-letter 要素の1文字目のみ div:first-letter {font-size: small;}
:before疑似要素 :before 要素の直前に内容を生成 #main:before {content: "from";}
:after疑似要素 :after 要素の直後に内容を生成 #main:after {content: "to";}

長さの単位

単位 意味
pt ポイント(1/72インチ)
em フォントの大きさを1とする単位
% パーセンテージ
pc パイカ(12pt)
in インチ(2.54cm)
px ピクセル
ex 小文字xの大きさを1とする単位
cm センチメートル
mm ミリメートル

マージン/パディングの指定

指定 意味
値が1つ [上下左右] margin: 5px
値が2つ [上下][左右] margin: 5px 10px
値が3つ [上][左右][下] padding 1em 2em 1em
値が4つ [上][右][下][左] padding 1em 2em 1.5em 2em

リセットスタイル

YUIリセットスタイル:http://developer.yahoo.com/yui/reset/
meyerwebリセットスタイル:http://meyerweb.com/eric/tools/css/reset/