CSSセレクター
CSSセレクター
CSSセレクターは
IdとClassセレクターの2種類に分かれています
HTML要素にCSSスタイルを設(shè)定したい場合は、「」要素に設(shè)定する必要がありますid」セレクターと「class」セレクター。
IDセレクター
IDセレクターは、特定のIDでマークされたHTML要素の特定のスタイルを指定できます。
HTML要素はid屬性を使用してIDセレクターを設(shè)定し、CSSのIDセレクターは「#」で定義されます。
次のスタイル ルールを要素屬性 id="para1" に適用する必要があります:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">php中文網(wǎng)(php.cn)</p>
<p>這一段不受css樣式影響。</p>
</body>
</html>プログラムを?qū)g行して試してください
ID 屬性を數(shù)字で始めることはできません。數(shù)字で始まる ID は機能しません。 Mozilla/Firefox ブラウザ。
クラスセレクター
クラスセレクターは、要素のグループのスタイルを記述するために使用されます。クラスセレクターは、複數(shù)の要素で使用できます。
クラスセレクターは、HTML の class 屬性で表されます。CSS では、クラスセレクターはドット「.」で表示されます。
次の例では、中心クラスを持つすべての HTML 要素が中央に配置されます。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">標(biāo)題居中</h1>
<p class="center">段落居中。</p>
</body>
</html>プログラムを?qū)g行して試してみましょう
クラスを使用して特定の HTML 要素を指定することもできます。
次の例では、すべての p 要素は class="center" を使用して要素のテキストを中央に配置します。名前には數(shù)字を使用できません! Mozilla や Firefox では動作しません。
