StyleSeet について[基本と記述]

　スタイルシートはW3C(World Wide Web Consortium)という団体によって、1996年に提唱された、Webページのデザインを制御するための規格です。正式には「カスケーディングスタイルシート(CSS)」と呼びます。
WebページはHTMLで記述されています。Webページのデザインを優先すると複雑なコードになり、Webページの作成や修正も大変な作業になります。それに対し、スタイルシートはスタイルだけをまとめて記述できるので、スタイルシートを使用するとHTMLのタグで設定するよりもはるかに効率的にデザインをすることができます。
また、W3Cは今後デザインにカンする記述はHTMLではなくスタイルシートで設定することを推奨していて、デザインに関するHTMLタグのいくつかは廃止される予定です。

スタイルシートはセレクタに対して、その属性に値を指定してスタイル設定します。
「セレクタ」「属性」「値」の３つを組み合わせてスタイルを定義します。
セレクタはスタイルを設定する要素のことで、属性はセレクタで指定した要素に設定するスタイルの種類、値は属性で設定したスタイルごとに予め決められている値を指定します。
記述の仕方は次のようになります。

セレクタ {属性 : 値;}

<p>のフォントの色を#FF0000に指定したい場合は、次のような記述になります。

p {color : #FF0000;}

複数のスタイルを設定する場合は、それぞれの属性の間をセミコロンで区切ります。１つのスタイルを設定する場合でも、値の後ろはセミコロンを記述するようにしましょう。
記述の仕方は次の通りです。

p {color : #FF0000; font-size : 15pt}

また、指定するスタイルが多い場合は、次のように記述することができます。

p {
	color : #FF0000;
	font-size : 15pt;
	font-weight : bold;
}

複数のセレクタに同じスタイル設定をしたい場合は、それぞれのセレクタの間をカンマで区切ります。

セレクタ１ , セレクタ２ {属性 : 値;}

<p>と<h1>のフォントの色を#0000FFに指定したい場合は次のように記述します。

p, h1 {color : #0000FF;}

また、セレクタに親要素のタグと子要素のタグを半角スペースで区切って記述すると、セレクタに記述した親要素に含まれる個要素に対してスタイルを設定することができます。

セレクタ１（親要素） セレクタ２（子要素） {属性 : 値;}

<p>で囲まれている<em>にだけスタイルを設定し、<p>で囲まれていない<em>にはスタイルを設定しない場合は次のようになります。

p em {
	color : #0099FF;
	font-size : 15pt;
}

基本セレクタとは<p>や<table>等のタグ（要素）にスタイルを設定します。

要素名 {属性 : 値;}

p {
	color : #00FFFF;
	font-weight : bold;
}

classセレクタは設定したスタイルにclass名を付けておき、そのスタイルを適用したい要素にそのclassを関連づけます。classセレクタはピリオドの後に任意のclass名を付けて定義します。idセレクタとは違って、ページ内でも１つのクラス名で複数の要素に指定できます。基本セレクタメイト組み合わせて記述すると、基本セレクタで定義した要素にだけ有効なclassセレクタを定義することもできます。

.クラス名 {属性 : 値;}
基本セレクタ名.クラス名 {属性 : 値;}

.class_sample1 {
	color : #FF00FF;
	font-weight : bold;
}
h6.class_sample2 {
	color : #003333;
	font-weight : bold;
	font-size: 16px;
}

<p class="sample1">アジの開き</p>
<h6 class="sample2">カツオのたたき</h6>
<p class="sample2">イワシのさんが焼</p>

idセレクタは設定したスタイルにid名を付けておき、そのスタイルを適用したい要素にそのidを関連づけます。idセレクタは任意のid名の横にシャープを付けて定義します。idセレクタは、１つのid名ではページ内で１つの要素にしか指定できません。基本セレクタと組み合わせて記述すると、基本セレクタで定義した要素にだけ有効なidセレクタを定義することもできます。

#id_sample1 {
	color : #000080;
	font-weight : bold;
}
h6#id_sample2 {
	color : #006400;
	font-weight : bold;
	font-size: 16px;
}

<p id="id_sample1">アジの開き</p>
<h6 id="id_sample2">カツオのたたき</h6>
<p id="id_sample2">イワシのさんが焼</p>

疑似クラスは、リンクなどの状況やタイミングに対してスタイルを設定します。要素の後にコロンで区切って、決められた予約語を指定して定義します。
通常は、要素<a>を指定します。

要素:疑似クラス {属性 : 値;}

疑似クラスは主に次の種類があります。

a:link {
	color : #4169e1;
	text-decoration: none;
}
a:hover {
	color : #dc143c;
	text-decoration: underline overline;
}

TEST LINK

疑似要素は指定した要素の１行目や１文字目にスタイルを設定するなど、要素の特定の部分に対してスタイルを設定することができます。疑似要素は要素の後にコロンで区切って、決められた予約語を指定して定義します。

要素:疑似要素 {属性 : 値;}

p.gijiyoso_sample1:first-line {
	color: #800000;
}
p.gijiyoso_sample1:first-letter {
	color: #4169e1;
	font-size: 200%;
	font-family: "ＭＳ 明朝", "ＭＳ Ｐ明朝", "ヒラギノ明朝 Pro W3", 細明朝体, 平成明朝;
	font-weight: bold;
}