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>

提出するリセットコード
自動運転