ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML および CSS に CSS を配置する 3 つの方法 selectors_html/css_WEB-ITnose

HTML および CSS に CSS を配置する 3 つの方法 selectors_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 11:40:191392ブラウズ

(1) HTML で CSS スタイルを使用するには、一般に 3 つの方法があります:

1 インライン参照

2 内部参照

3 外部参照。

最初のタイプ: インライン参照 (インライン参照とも呼ばれます)

は、CSS スタイルを HTML タグに直接適用することです。

CSS インライン参照を使用して段落を表現します。

特徴: インラインスタイルは他のスタイルより優れています。スタイルこの方法はより柔軟ですが、表示されるコンテンツと組み合わせる必要があり、インラインスタイルではスタイルシートの利点の一部が失われます。

2 番目のタイプ: 内部参照 (インラインとも呼ばれます)

CSS ファイルのコンテンツを HTML ドキュメント内のタグに直接ロードするには、style タグを使用します。

… p{

font- size: 10px;

in で死ぬ。

3 番目のタイプ: 外部参照

CSS 外部参照は外部 CSS ファイルを使用するため、ユーザーはこの CSS ファイルを毎回ダウンロードする必要はありません

外部参照は内部参照と比較されます。参照とインライン参照は効率的で帯域幅を節約できます

外部参照は W3C によって推奨されています

外部参照を実装するには 2 つの方法があります:

(1) CSS を参照するにはリンクタグを使用します

(2) @import import CSS を使用します

…

/css "& gt;

@import" mystyle2.css "

…./*その他の CSS 定義*/

& & lt; /スタイル> ;/head & gt;

注: セレクターで複数の異なるスタイルシートを使用する場合、この属性値は複数のスタイルシートに重ね合わされます。競合が発生した場合は、最後に定義されたスタイルシートが優先されます。

(2) CSS セレクターには 6 種類のセレクターがあります:

1 HTML セレクター

2 タイプセレクター

3 ID セレクター

4 関連付けセレクター

5 組み合わせセレクター

6 ps eudo 要素セレクター

1 HTML セレクター: HTML タグであり、指定されたタグのスタイルを変更するために使用されます。任意の HTML 要素を CSS セレクターにすることができます。

構文: HTML タグ名 {attribute: value}

p { text-indent:3em; } /*セレクターは p*/

h1{ color:red; } /*セレクターは h1*/

2 クラスセレクター: 属性値がドキュメント内の要素 E のクラス属性のクラス名である要素と一致します

構文: タグ名クラス名 {属性: 値} または。

　　类选择符名称的定义方式是,"."符号，英文"dot"，后加类名称classname

　　类选择符的定义需要有.符号（.符号标明是类选择符），但是HTML文档中的标签的class属性名不能出现.符号，见下面示例：

　　p.dark-row{ background:#EAEAEA; }　　　　/*设置p标签中class属性为dark-row的*/

　　.note{ font-size:small }　　　　　　　　　　 /*为note的类可以被用于任何元素*/

第一段

　　第二段　

　　第三段　

第四段

; ID セレクター名は # 記号、英語の「ポンド」の後に ID 名 idname が続くように定義されます

ID セレクターの定義には # 記号が必要ですが (# 記号は ID セレクターを示します)、 HTML ドキュメントでは # 記号を id 属性名に使用できません。以下の例を参照してください

id 属性の特別な点は、ドキュメント内の 1 つの要素のみが ID セレクターを使用できることです (class 属性のちょうど反対) 、id 属性は単独で使用できます。要素を識別します。

#main{ text-indent:3em; } /*ID名mainの前に#記号を追加*/

… …

テキストインデント3em

4. アソシエーションセレクター: 包含セレクターとも呼ばれ、特定のリレーションシップによって定義されたスタイルシートを個別に含めることができます。要素 1 には要素 2 が含まれており、このメソッドは要素 1 の要素 2 に対してのみ定義されており、個々の要素 1 または要素 2 に対する定義はありません。

構文: セレクター 1 セレクター 2... {属性: 値}

テーブル a{ font-size:12px}

テーブル内のリンクのスタイルが変更され、テキストサイズが 12 ピクセルになりましたが、テーブルの外にあるリンクのテキストはデフォルトサイズのままです。

5 結合セレクター: セレクターグループとも呼ばれ、同じ属性と値を持つセレクターを結合して記述することができ、セレクターがカンマで区切られているため、スタイルの繰り返し定義を減らすことができます。

構文: selector 1, selector 2,.,..{attribute: value}

h1, h2, h3, h4, h5, h6 { color: green }

p, table{ font-size: 9pt }

効果は以下と完全に同等です:

p { font-size: 9pt }

table { font-size: 9pt }

6 疑似要素セレクターは、同じ HTML 要素の異なる状態の定義を参照します。たとえば、通常状態、アクセス状態、選択状態、およびカーソルがタグのハイパーリンクテキストに移動したときの状態は、疑似要素セレクタを使用して定義できます。

構文: tag: 擬似要素 {属性: 値;}