class id セレクタ

id セレクタ   書式 #id名 {プロパティ名:値;}



id属性によって特定のid名がつけられた要素を対象にスタイルを適用するセレクタです。



1つの文書内では同じid名を重複して指定することはできない。idセレクタを使用することで、文書内の場所を一意に特定してスタイルを適用することができます。





スタイルシート部分は外部ファイル(sample.css)に記述。

#today {background-color:#66cc33;}

#tomorrow {background-color:#cccc66;}







HTMLソース

<html>

<head>

<link rel="stylesheet" type="text/css" href="sample.css">

</head>

<body>



<div id="today">

<h2>今日のお天気</h2>

<p>今日は<strong>晴れ</strong>です。</p>

</div>



<div id="tomorrow">

<h2>明日のお天気</h2>

<p>明日は<strong>雨</strong>です。</p>

</div>



</body>

</html>

classセレクタは、class属性によって特定のclass名がつけられた要素を対象にスタイルを適用するセレクタです。



class属性はid属性とは異なり、1つの文書内で同じclass名を重複して指定することができます。classセレクタを使用することで、文書内の複数箇所や異なる要素に対して同じスタイルを適用することができます。



クラス名{プロパティ:値} クラス名をつけた要素





スタイルシート部分は外部ファイル(sample.css)に記述。

.info {color:blue; font-size:small;}



HTMLソース

<html>

<head>

<link rel="stylesheet" type="text/css" href="sample.css">

</head>

<body>



<h2>今日のお天気</h2>

<p>今日は<strong>晴れ</strong>です。</p>

<p class="info">洗濯日和となるでしょう。</p>



<h2>明日のお天気</h2>

<p>明日は<strong>雨</strong>です。</p>

<p class="info">傘を忘れないようにしましょう。</p>



</body>

</html>