2003年11月27日

CSSについてその2

その2です。

今回は、CSSの書き方について、前回よりも、もう少しつっこんだ説明をします。

まず、セレクタについて
セレクタには、基本セレクタ、IDセレクタ、classセレクタ、疑似クラスの4種類があります。
ちなみに、現在Seesaa BLOGで使ってるのは、基本セレクタ、IDセレクタ、classセレクタの3種類です。
なので、この3種類の説明をします。
・基本セレクタ
<H1>や<A>などの要素になります。
たとえば、<H1>要素をスタイルシートに設定すると、HTMLファイル内にある、<H1>全てにスタイルシートの内容が反映されます。
例:
H1 {color:#000000;}
HTMLでの記述
<H1>SeesaaBLOGについて</H1>

・IDセレクタ
ID属性を設定した要素に対し、スタイルシートを適用します。
ただし、一つの文章のなかで、複数IDセレクタを設定することはできないので、注意して下さい。
IDセレクタを設定する場合、セレクタ名の前に「#」をつけます。

#contents{border:10px;}
HTMLでの記述
<DIV id="contents">

・classセレクタ
class属性を設定した要素に対し、スタイルシートを適用します。
複数の要素に対し、同じスタイルを設定する際に使用します。
classセレクタを設定する場合、セレクタ名の前に「.」をつけます。

.text{font-size:12px;}
HTMLでの記述
<SPAN class="text">テキストテキスト</SPAN>
posted by スタッフ2号 at 18:42| 沖縄 ☀| Comment(6) | TrackBack(27) | スタイルシート | このブログの読者になる | 更新情報をチェックする

2003年11月25日

CSSについてその1

少し、CSSの説明をさせて頂きます。
順に説明するようにします。

今回は、CSSの説明から
CSSとは、カスケードスタイルシートといって、WEBページの見え方を設定するための技術になります。
基本的には、全てのブラウザに対応していますが、古いバージョンの場合、見え方が変わってしまうことがあります。

次に、CSSの定義方法
CSSは、「セレクタ」「属性」「属性値」の3つを組み合わせて定義します。
属性と属性値は「:」(半角)で区切ります。また、「{」「}」を使って、一つのまとまりとします。
例:
H1{background:#FFFFFF}

ちなみに、一つのセレクタを複数設定する場合は、
H1{
background:#FFFFFF;
color:#000000;
}
こんな感じで、属性と属性の間を「;」で区切って設定します。

こんな感じで、これからCSSの書き方を説明していきます。
posted by スタッフ2号 at 20:44| 東京 ☔| Comment(0) | TrackBack(14) | スタイルシート | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。