Digital Life ~デジタルライフ~(Field)

PREV | PAGE-SELECT | NEXT

≫ EDIT

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

| スポンサー広告 | --:-- | comments(-) | trackbacks(-) | TOP↑

≫ EDIT

スタイルシートの記述方法

 スタイルシートの記述方法
<style type="text/css">
<!--
body,td{font-size:文字サイズpt;}
-->
</style>


上のものがスタイルシートの例です。
<style type="text/css">で始まり</style>で終わります。
<!-- と -->はスタイルシートに対応していないブラウザで、
コードが表示しないようにするために入れます。


body,td{font-size:文字サイズpt;}の部分がスタイルシートの内容になります。


この場合文字サイズを全て統一するスタイルシートなのですが、このようにページ全体に関わるスタイルシートはヘッダ(<HEAD>~</HEAD>)に記述します。ページ全体に関わるというのは背景固定やリンク文字を変化させることやカーソルの変更、スクロールバーの変更などです。


またスタイルシートの内容を増やす時は赤い文字の部分だけを追加すればOKです。
下のような感じ。

<style type="text/css">
<!--
body,td{font-size:文字サイズpt;}
a:link{color:#4169E1;}
a:visited{color:#4169E1;}
a:active{color:#4169E1;}
a:hover{color:#191970;}

-->
</style>

ただしこの記述方法は1ページだけに限るもので複数ページに効果を与えるものではありません。

複数ページに効果を入れたいときは外部リンクのスタイルシートを使います。

外部リンクのスタイルシートを使いつつ、このページだけはこの効果を入れたい・・・ってときはそのページ内に直接スタイルシートを記述すればよいと思います。


外部リンクのスタイルシートの使い方については次のページで説明します。

すぐに見たい方ははこちら




次に本文に直接記述するスタイルシートの記述方法です。

例えばこすれ文字 など本文の中のある一箇所だけに効果を入れるものは本文の中に記述していきます。つまり<body>から</body>内に記述するということですね。



この他にもヘッダに記述しつつ、本文にも記述するというスタイルシートもありますが、それは各ページで説明していきたいと思います。






| CSSスタイルシート | 17:05 | comments(-) | trackbacks(-) | TOP↑

PREV | PAGE-SELECT | NEXT

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。