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

(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: 擬似要素 {属性: 値;}

a:link {color: #FF0000; text-decoration: none} /* 未訪問のリンク*/

a:visited {color: #00FF00 ; text-decoration: none} /* アクセスしたリンク*/

a:hover {color: #FF00FF; text-decoration: Underline} /* リンクにマウスを置く*/

a:active {color: #0000FF;下線} /* リンクをアクティブにする*/

ヒント: a:hover を有効にするには、a:link と a:visited の後に配置する必要があります。

ヒント: a:active を有効にするには、a:hover の後に配置する必要があります。

最近学んだ簡単な知識なので、間違いがあればご指摘ください。