CSS の基礎の学習 4: 要素 Selector_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS の基礎の学習 4: 要素 Selector_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:34:24

オリジナル

1082 人が閲覧しました

前回のブログで、私たちはすでに CSS 構文に精通しており、CSS コード形式についてもある程度理解しました。 CSS コードについて説明します:

セレクター名 {属性名: 属性値; 属性名: 属性値;...}

属性はセミコロンで区切られます。コロンを使用します。属性に複数の属性値がある場合、複数の属性値はスペースで区切られます。

私のブログの上記のトピックはセレクターです。セレクターは CSS 構文が作用するタグを指定し、そのタグ

の名前がセレクターです。

要素セレクターとも呼ばれる HTML タグ名を使用します。 A l B) クラスセレクター。ラベル内の class 属性を使用します。セレクターとも呼ばれます。

c) id セレクター: タグ内の id 属性が使用されます。各ラベルは、ラベルの操作を容易にするためにラベルを識別するために使用される CLASS プロパティと ID プロパティを定義します。定義では、複数のタグの

class 属性値は同じにすることができますが、id 属性値は JavaScript でよく使用されるため一意である必要があります。元 s s CSS 要素セレクター

最も一般的な CSS セレクターは要素セレクターです。言い換えれば、ドキュメントの要素は最も基本的なセレクターです。 HTML のスタイルを設定している場合、セレクターは通常、p、h1、em、a などの HTML 要素、または html 自体になります。以下は最も単純な例です:

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS元素选择器演示</title><style type="text/css">html {color:#00FFFF;}h1 {color:#FFFF00;}h2 {color:#FF0000;}</style></head><body><h1>这是 heading 1</h1><h2>这是 heading 2</h2><p>这是一段普通的段落</p>       </body></html></span>

ログイン後にコピー

ブラウザの表示結果は次のとおりです:

🎜 🎜🎜 🎜🎜 🎜🎜 🎜 🎜🎜 🎜 🎜🎜 🎜 🎜🎜 🎜 🎜 🎜🎜 🎜 🎜🎜 🎜 🎜 🎜🎜 🎜🎜 🎜🎜 🎜 上記の結果から、セレクターは依然として選択的であり、HTML セレクターデバイスは Web ページ内のすべてのフォントで機能しますが、h1 と h2 は独自のタグ名のタグのみを使用します。 🎜 🎜 ある要素から別の要素にスタイルを切り替えることができます。 (h1 要素の代わりに) 上の段落テキストを p に設定するとします。 h1セレクターをp：🎜🎜🎜rreeeに変更するためだけに、ブラウザは結果を次のように表示します。この目的を達成するために、最も簡単な方法は、以下のリンクを使用することです: 🎜 🎜 h2, p {color:gray;}🎜 🎜 h2 と p の選択器を左側に配置し、その後、番号を区切って、どちらかを決定します。右側のスタイル (color:gray;) は、これら 🎜 🎜 2 つのセレクターによって参照される要素に適用されます。カンマは、ルールに 2 つの異なるセレクターが含まれていることをブラウザーに伝えます。このコンマがないと、ルールの意味は 🎜 🎜 全く異なるものになります。上記の例も同様です: 🎜 🎜🎜

<span style="font-size:18px;">html {color:#00FFFF;}p {color:#FFFF00;}h2 {color:#FF0000;}</span>

ログイン後にコピー

🎜 ブラウザは結果を次のように表示します: 🎜 🎜🎜🎜 🎜🎜 🎜 制限なく、任意の数のセレクターをグループ化できます。 semoll多くの要素をグレーにしたい場合は、このようなルールを使用して、特定の種類のスタイルを「圧縮」し、より簡潔なスタイルシートになります。 🎜 🎜

<span style="font-size:18px;">html {color:#00FFFF;}h2,p{color:#FFFF00;}</span>

ログイン後にコピー

🎜 ブラウザでは結果が次のように表示されます: 🎜 🎜🎜🎜 🎜🎜 🎜 3 つのワイルドカードセレクター (要素セレクターに分けた方が良いように感じますが、最終的には、やはりタグを使用したセレクターの一種です)名前) 🎜 🎜 CSS2 では、新しいシンプルセレクター、つまりアスタリスク (*) で示されるユニバーサルセレクターが導入されました。このセレクターは、ワイルドカードと同様に、 🎜 🎜 あらゆる要素と一致します。たとえば、次のルールはドキュメント内の各要素を赤にすることができます:* {color: red;} このステートメントは、ドキュメント内のすべての要素をリストするグループ選択デバイスと同等です。ワイルドカードセレクターを使用すると、単一のキーストローク (アスタリスクのみ) で、ドキュメント内のすべての要素の色属性値を赤にすることができます。 🎜🎜🎜

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS元素选择器演示</title><style type="text/css">* {color:red;}</style></head><body><h1>这是 heading 1</h1><h2>这是 heading 2</h2><h3>这是 heading 3</h3><h4>这是 heading 4</h4><p>这是一段<b>普通</b>的段落文本。</p></body></html></span>

ログイン後にコピー

浏览器显示结果为：

四声明分组

我们既可以对选择器进行分组，也可以对声明分组。

假设您希望所有 h1 元素都有红色背景，并使用 28 像素高的 Verdana 字体显示为蓝色文本，可以写以下样式：

<span style="font-size:18px;">h1 {font: 28px Verdana;}h1 {color: blue;}h1 {background: red;}</span>

ログイン後にコピー

但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反，

我们可以将声明分组在一起：

h1 {font: 28px Verdana; color: white; background: black;}

ログイン後にコピー

这与前面的 3 行样式表的效果完全相同。

注意，对声明分组，一定要在各个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符。

六结合选择器和声明的分组

我们可以在一个规则中结合选择器分组和声明分组，就可以使用很少的语句定义相对复杂的样式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS元素选择器演示</title><style type="text/css">h1, h2, h3, h4, h5, h6 {  color:gray;  background: white;  padding: 10px;  border: 1px solid black;  font-family: Verdana;  }</style></head><body><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6></body></html>

ログイン後にコピー

浏览器显示：

涉及到选择器优先级的问题，我会用专门的一篇博客来解释说明这个问题。