クラス属性

モジュール 3
レベル 6 , レッスン 5
使用可能

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 開発者も含まれます。

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

# セレクタ 説明
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;
}
この疑似クラスでは、最初の子要素のみを選択できます。

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

コメント
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION