スタイルシート（CSS） のルール

　冒頭での宣言

SSを使う場合は冒頭に下記のmete宣言が必要
<meta http-equiv="Content-Style-Type" content=text/css">

　CSSルールの定義

CSSには ３つの方法 がある。
  1. クラス　スタイル
    ページ内の任意のテキストに　クラス名をセレクタとして指定し、CSSルールを適用できる。
  2. HTMLタグ　スタイル
    段落<P>や、見出し<H1> などのタグをセレクタとして、セレクタに対してCSSルールを適用する。
  3. セレクタ　スタイル
    複数の同一タグに同じCSSルールを適用する。
　スタイルの記述

１．クラス　スタイル
ここの別ページに掲載した行間変更例文は 1.の「クラス スタイル」CSS を用いたもので、
1）HTML記述の冒頭に CSS の内容の定義：　
.gyokan140 { line-height: 140%; text-decoration: none; }
を記述。 （　gyokan140　は クラス名　）

2）この クラス名：gyokan140 を指定する文章の前後に
<p class="gyokan140">　文章　</p>を記述する。

２．HTMLタグ　スタイル
　 <H1 style="color: Blue">体験談</H1>
　 この場合、体験談のH1のみにBlueが適用され、次の要素<H1>は　Blue　は適用されない。

3.セレクタ　スタイル
HTML記述の冒頭に CSS の内容の定義：

<style type="text/css">　　　・・・・開始タグ
<!--　　　　　　　　　　　　　　　　・・・・コメント開始
h3{ color: Blue;　　（この場合の h3 をセレクタという）　　　・・・・
　　　・・・・・
　　　・・・・・
　　　・・・・・
　}
-->　　　　　　　　　　　　　　　　　・・・・コメント終了
</style>　　　　　　　　　　　　　　・・・・終了タグ
とすると、全てのh3セレクタ にBlue 以下が適用される。
<!--　と　　-->　の間には、h2,h3 など複数のセレクタを入れることができる。

４．クラスセレクタ　スタイル（1.と、3.の組み合わせ）
　セレクタとクラスを組み合わせて使用できる。
　　ｈ3.gyokan140｛
　　　　color: Blue;
　　 　　　・・・・・
　　　　　　・・・・・
　　　　　　・・・・・
　　 }

ネットでの解説サイト
http://www.tagindex.com/stylesheet/

　　｜　スタイルシート　　　｜　ホームページ作成体験　　｜　

 

inserted by FC2 system