クラス属性

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 上でも、セレクターのない場所は存在しません。