クラス属性

使用可能

6.1 class属性とstyleタグ

しかし、それだけではありません。何百もの「スタイル」が発明された後、それらをどのように使用するかという疑問が生じました。そして彼らは、それらを「クラス」にグループ化するというアイデアを思いつきました。もちろん、これらは Java のクラスと同じではありません。特別なスタイルのグループだけです。

そして、「クラス」を使用する前に次のようなイメージを持っていたとします。

<img src="logo.png" style="width=100px;height=100px;opacity=0.5">

これで、次のように書くことができます。

<img src="logo.png" class="picture">

<style>
    img.picture {
        width=100px;
        height=100px;
        opacity=0.5
    }
</style>

特別なものを作成し«style» picture、スタイル値をstyle. 次に、 <img> と「style」画像をタグで結び付けますclass。

6.2 セレクター、セレクターの種類

個別にレンダリングされたこれらのスタイルは、classesまたはとして知られるようになりましたselectors。これらにはいくつかの重要な特徴があります。

複数html-elementのセレクターを持つことができます。それらの名前はスペースで示されます。例：

<img src="logo.png" class="picture main">

ここでセレクターについて触れた理由の 1 つは、セレクターを自動的に適用できるためです。そして、この便利なプロパティは将来的に非常に頻繁に使用されるでしょう。Java 開発者も含まれます。

以下にその短いリストを示します。


* {
  margin: 0;
  padding: 0;
}
#img123 {
   width:100px;
   height 100px;
}
table {
   color: black;
}
table.important {
   color: red;
}
.picture {
  opacity: 0.5
}
main article {
  color: blue;
}
a:link {
color: blue;
}
a:visited {
color: red;
}
input[type=radio]:checked {
 border: 1px solid black;
}
div:hover {
  background: red;
}
ul li:first-child {
 border-top: none;
}

すべてを暗記する必要はありません。しかし、この表を数回検討して、すべてのことが頭の中に定着していれば良いでしょう。現代の生活において Web がなければ、どこにも存在しません。Web 上でも、セレクターのない場所は存在しません。

前へ前のレッスン

次へ次のレッスン

人気
新規
古い

コメントを残すには、サインインしている必要があります

このページにはまだコメントがありません

#	セレクタ	例	説明
1	*	`* { margin: 0; padding: 0; }`	HTML ドキュメントのすべての要素に適用されます。
2	#id	`#img123 { width:100px; height 100px; }`	# の後には、指定されたスタイルが適用される要素の ID が続きます。
3	鬼ごっこ	`table { color: black; }`	ドキュメント内のすべてのテーブルに適用されます。
4	タグセレクター	`table.important { color: red; }`	class 属性が指定されているすべてのドキュメントテーブルに適用されます。
5	。セレクタ	`.picture { opacity: 0.5 }`	class 属性が指定されているすべての要素に適用されます。任意のタグ。
6	親子	`main article { color: blue; }`	親タグにメインクラスが含まれ、子タグに記事クラスが含まれるすべての要素に適用されます。
7	タグ: リンク	`a:link { color: blue; }`	:link 疑似クラスは、ユーザーがまだクリックしていないリンクのスタイルを設定するために使用されます。
8	タグ:訪問済み	`a:visited { color: red; }`	:link 疑似クラスは、ユーザーがすでにクリックしたリンクのスタイルを設定するために使用されます。
9	タグ:チェック済み	`input[type=radio]:checked { border: 1px solid black; }`	この疑似クラスは、チェックされた UI 要素 (ラジオボタンまたはチェックボックス) のみを選択します。
10	タグ:ホバー	`div:hover { background: red; }`	この疑似クラスを使用すると、要素の上にマウスを置いたときに要素のスタイルを変更できます。
十一	タグ:第一子	`ul li:first-child { border-top: none; }`	この疑似クラスでは、最初の子要素のみを選択できます。