セレクターとタグ_html/css_WEB-ITnose

CSS には多数のセレクターがありますが、よく使用される 3 つのセレクターについて、関連する使用法と注意事項を整理します。さて、よく使われるタグについてお話しましょう。

1. タグ名セレクター

は、タグ名をターゲットとして使用し、HTML 内の対応するタグ (div{}、p{} など) のスタイルを使用するセレクターです。 。一般に、UI シスターから提供された PSD を取得すると、まず全体的なレイアウト、何を実装できるか、実装するには何をシスターと話し合う必要があるかを分析する必要があります。実装可能なものの中では、共通のスタイルの抽出、作業負荷の軽減、コードの合理化にも注意を払う必要があります。

2. クラスセレクター

は、フォーマットする必要があるタグのクラスを定義することで、CSS を内部および外部から参照して、同じクラスのタグにスタイルを与えることができます。名前。タグ名セレクターの設定に基づいて、特定の設定を追加、削除、または変更します。CSS のスタイルは .class{} です。優先順位: クラスセレクター > タグ名セレクター。

3. ID セレクター

は、タグに固有の ID を設定し、その ID に別の形式を設定します。これも、2 つの元のセレクター形式に基づいて変更されます。 ID 名はタグ内に 1 回だけ使用でき、現在の HTML ドキュメント内にも 1 回だけ使用できます。 CSS のスタイルは #id{} です。優先順位: ID セレクター > クラス セレクター > タグ名セレクター。

4. グループセレクター

は、コードを簡略化するために、p、div、ol、ul {} などの上記の複数のセレクターをバンドルするものです。

注: 同じセレクターが同じ属性に対して異なるスタイルを設定する場合、後で設定されたスタイルが優先されます。

例: div { margin: 0 auto;

margin-left: 15px; }

は 15 ピクセルの左マージンを表示します。

一般的に使用されるタグには 3 つの属性があり、一般的なものを以下に示します。

ブロック属性タグ (block): div、p、h1~h6、ul、ol、li;

1. 特徴 --

1.1 ブロック属性タグは全てのCSSスタイルを利用可能

1.2 ブロック属性タグは専用行を占有します

Row属性タグ(インライン) ):span、a、em、strong、i、b;

2. 機能 --

2.1 幅と高さの設定はサポートされていません。サイズはテキスト コンテンツによってサポートされます

2.2 同一行表示（ブラウザ境界に遭遇した場合の自動行折り返し）

2.3 マージン使用時、上下マージンは無効

2.4 パディング使用時、上下マージンパディングは存在しますが、不合理であるため、開発時には推奨されません。

2.5 行属性タグの使用 ブラウザによって解釈される場合、改行は解析されます。

インラインブロック/インラインブロック属性タグ (inline-block): img.

3. 機能 --

3.1 幅と高さがサポートされていない場合は、幅と高さをサポートします。 set コンテンツによって支えられている場合

3.2 同じ行に表示 (ブラウザの境界に遭遇すると自動的に折り返す)

3.3 通常は CSS スタイルを使用します

3.4 インラインブロック閲覧中です プロセッサによって解釈されると、改行が解析されます。