CSS memo_html/css_WEB-ITnose

CSS ルールの図解

カラー値のさまざまな書き方

p { color: #ff0000; }p { color: rgb(255,0,0); }p { color: rgb(100%,0%,0%); }

RGB パーセントを使用する場合は、値が 0 の場合でもパーセント記号を記述します。

値の引用符

値が複数の単語である場合は、値を引用符で囲みます。

p {font-family: "sans serif";}

属性セレクター

IE7 および IE8 は、!DOCTYPE が指定されている場合にのみ属性セレクターをサポートします。 IE6 以前では、属性の選択はサポートされていません。

[attribute]
は、指定された属性を持つ要素を選択するために使用されます。

[attribute=value]
は、指定された属性と値を持つ要素を選択するために使用されます。

[attribute~=value]
は、属性値に指定された語彙が含まれる要素を選択するために使用されます。スペースで区切られた属性値に適用されます。 title=’hello world’

[attribute|=value]
は、指定された値で始まる属性値を持つ要素を選択するために使用されます (単語全体である必要があります)。 - で区切られた属性値に適用されます。 lan='zh-CN'

[attribute^=value]
属性値が指定された値で始まるすべての要素と一致します。

[attribute$=value]
属性値が指定された値で終わるすべての要素と一致します。

[attribute*=value]
属性値に指定された値が含まれるすべての要素と一致します。

セレクターの優先度

CSS スタイルセレクターは、a、b、c、d の 4 つのレベルに分かれており、これら 4 つのレベルに基づいて CSS セレクターの優先度を決定できます。

1. a はスタイルがインライン スタイル ( で定義) の場合、a=1
2. b は #id セレクターの数
3. c は .class セレクターの数
4. d は要素セレクター
5. 属性セレクター、擬似クラス セレクター、およびクラス セレクターの数は同じ優先順位を持ち、擬似要素セレクターは型セレクターと同じです
6. ! important の重みが最も高く、インライン スタイルよりも高い

統計によるa、b、c、dの値は優先順位に使用されます。 ...

a:visited - ユーザーが訪問したリンク

a:hover - マウスポインタがリンクの上にある

a:active - リンクがクリックされた瞬間

a:hover は、 :link および a:visited、a:active は、:hover の後に配置する必要があります。

内側と外側のマージンの値はパーセンテージを使用して設定されます

パディングとマージンは、親要素の幅に対するパーセンテージ設定を使用して計算されます。