ぱそおーるCSS講座

基本セレクタ
基本セレクタはHTMLタグ(<P><h1〜h6><table><strong>)にスタイルを設定します。

記述例
p{
color : red;
font-size : 18px;
}

p{color : red;font-size : 18px;}
どちらでも同じです。

設定するとページ全体（サイト全体）の<p>タグに同じスタイルが設定されます。

classセレクタ
classセレクタは設定したスタイルにclass名（任意）を付けておき、任意の要素に対して関連づける事でスタイルを設定します。
class名は自由に付けても構いません（半角英数字）class名の前に[.]を付けて記述します。
classを設定したタグに対してのみ反映されます。

記述例
.test{
color : red;
font-size : 18px;
}

.test{color : red;font-size : 18px;
}
どちらでも同じです。

使い方
<h5 class="test">こんな感じです</h5>

こんな感じです

<s class="test">こんな感じです</s>
こんな感じです

idセレクタ
idセレクタは設定したスタイルに任意のid名を付けておき、任意の要素に対して関連づける事でスタイルを設定します。
id名は自由に付けて構いません（半角英数字）id名の前に[#]をつけて記述します。
idを設定したタグにのみ反映されます。
idセレクタは一つのid名では、ページ内で一つの要素にしか設定出来ません。（複数設定しても反映されますが…）
使い方はclass設定と同じです。

記述例
#test{
color : blue;
font-size : 20px;}

#test{color : blue;font-size : 20px;}
どちらでも同じです。

使い方
<h6 id="test">こんな感じです</h6>

こんな感じです

<u id="test">こんな感じです</u>
こんな感じです

疑似クラス
疑似クラスは、<a>タグ（リンク関連）などの細かいスタイルを設定するのに使われます。

1. link : 未訪問のリンクスタイル
2. visited : 既訪問のリンクスタイル
3. hover : マウスカーソルがリンク文字の上にある時のスタイル
4. active : リンクをクリックした時のスタイル　

記述例
a:link{
color : blue;
}
a:visited{
color : red;
}
a:hover{
color : green;
}
a:active{
color : black;
}
上のような感じでスタイルを設定します。

疑似要素
疑似要素は指定した要素（タグ）の一行目、または一文字目にスタイルを設定するものです。

1. first-line : 指定した要素（タグ）の一行目のスタイルを設定します。
2. first-letter : 指定した要素（タグ）の一文字目のスタイルを設定します。

記述例
p:first-line{
color : red;
}
<p></p>タグに疑似要素を設定しています。

<P>タグ内に文字を書き込んでいます。
一行目以降にはスタイルが適用されません。
一行目を見出しにしたりする時に使われます。
もちろん<p>タグ以外のタグにも設定出来ます。