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