I.はじめに
HTML で CSS のスタイルを設定する必要がある場合は、要素に「id」セレクターと「class」セレクターを設定する必要があります。
2、IDセレクター
- ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。
- HTML 要素は id 属性を使用して ID セレクターを設定し、CSS の ID セレクターは"#"で定義されます。
次のスタイル ルールが要素属性 id="para1" に適用されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习</title>
<style>
#para1 {
color: red;
font-size: 30px;
font-weight: 600;
}
</style>
</head>
<body>
<p id="para">这是一个段落1111。</p>
<p id="para1">这是一个段落2222。</p>
</body>
</html>レンダリング:
注: ID 属性は数字で始めることはできません。また、先頭に数字が付いている ID は Mozilla/Firefox ブラウザーでは機能しません。
3. クラスセレクター
- クラス セレクターは、要素のグループのスタイルを記述するために使用されます。クラス セレクターは、ID セレクターとは異なります。クラスは複数の要素で使用できます。
- クラス セレクターは HTML では class 属性として表され、CSS ではクラス セレクターはドット(カンマ)として表示されます。
次の例では、center クラスを持つすべての HTML 要素が中央に配置されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习</title>
<style>
.para {
color: red;
font-size: 30px;
font-weight: 600;
text-align: center;
}
</style>
</head>
<body>
<p>这是一个段落。</p>
<p class="para">这是一个段落1111。</p>
<p class="para">这是一个段落2222。</p>
</body>
</html>レンダリング:
