セレクターとは？
セレクター（どこの） {
プロパティ(なにを): 値 (どうする); }
下線の部分でセレクターには3種類ある
1:エレメント（要素）セレクター: h1～h6,p,li,ul,ol,など
2:IDセレクター
HTMLの記述(テンプレートの部分は省略)
<p id="hello">こんにちは</p>CSSの記述
#hello {
color:# blue;
}※HTMLではid=””で指定し、CSSは#をつける.ページ内で一意の名前をつけられ、そこにCSSを当てる
3:クラスセレクター
HTMLの記述(テンプレートの部分は省略)
<p class="hello">こんにちは</p>CSSの記述
.hello {
color:# blue;
}※HTMLではclass=””で指定し、CSSは.をつける
HTMLの記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>狐の紹介ページ</title>
<link rel="stylesheet" href="stylesheets/Fox.css"> </head>
<body>
<h1>狐の紹介ページ</h1>
<p>狐について紹介します。</p>
<img src="images/Fox.jpg">
<h2 id="favorite">好きな食べ物</h2>
<ol>
<li class="special">油揚げ</li>
<li class="special">ドッグフード</li>
<li>かつお節</li>
</ol>
<h2 id="sns">SNS</h2>
<p>Twitterで<a href="http://twitter.com/">フォロー</a>してください。</p>
</body>
</html>CSS
/* body要素へ背景色の設定。#f7fbff （薄い水色）*/
body {
background: #f7fbff;
}
/* 大見出し(h1)へに対して、
文字色 #ffffff （白）の設定。
背景色 #73badc (水色)の設定。 */
h1 {
color: #fff;
background: #73badc;
}
/* id名が"favorite"の要素に対して文字色 #1b942f (緑) を設定 */
#faborite {
color: #1b942f;
}
/* class名が"special"の要素に対して文字色 #c72626 （赤）を設定 */
.special {
color: #c72626;
}
/* id名が"sns"の要素に対して、枠線を設定。
線の色は、#73badc (水色) 、
線の太さは、5px、
線の種類は、solidを設定。
*/
#sns {
border: #73badc 5px solid;
}この様になる
