参加してますblogランキング 押してくれたら頑張っちゃいます。  よろしくお願いします♪ m(_ _)m

一日3分!スタイルシート使いこなし術

参加してますblogランキング 押してくれたら頑張っちゃいます。  よろしくお願いします♪ m(_ _)m

css(スタイルシート)を学ぼうと思い立って

先日から少しづづやってます。


復習を兼ねて
紹介していきます。

まだ使ったことの無い人は
一緒に学びましょう。




さて今回は
スタイルシートの3種類の記述法についての2回目
外部ファイルによって設定する方法です。
スタイルシートで使用する外部ファイルというのは
.css とファイルの後ろに名前(拡張子)があるものです。

ノートパッドなどのエディターで作ることができます。
たとえば、seet1.css という名前の外部ファイルを作る場合

div{
 color:#ffff00;
 font-size:15pt;
 font-weight:bold;
}


こんな感じに記述して保存するときに seet1.css として保存します。

次に
本体のHTMLを書きましょう。

<html>
<head>

<link rel="stylesheet" href="seet1.css" type="text/css">

<title>外部ファイルで設定</title>

</head>

<body>
<div>こんな感じになりました。</div>
</body>
</html>



ブラウザで見るとこうなります。



<link rel="stylesheet" href="seet1.css" type="text/css">
という記述は
ページでスタイルシートを使います(リンクします)!!という宣言です。

これで3種類スタイルシートの設定方法について書きましたが
なんとなくわかっていただけましたでしょうか?

3種類の使い分けは(基本的には)
サイト全体やいくつかのHPを統一したデザインにするときに
の外部ファイルによって設定する方法を使います。
デザインの変更が.cssファイルを書き直すだけでOKです。

個別にページデザインを変えるときに△里據璽諺澗里棒瀋蠅垢詈法を使います。

そして、ページの一部を個別にデザインを変えるときに,鮖箸い泙后
それぞれの効果は
<◆祗,箸いΥ兇犬砲覆辰討い

で設定したページデザインより△寮瀋蠅強く、
△茲雖,離ぅ鵐薀ぅ鸚瀋蠅強くなります。

サイトの設計をしていく中では
→□,箸いΥ兇犬
全体のデザイン→各HPのデザイン→個別の部位のデザインと言う感じに
していくと良いでしょう

では次回は、スタイルシートの特技?class(クラス)について
解説していきます。
まだ理解できてないかも(^_^;)ヤバ・・・

参加してますblogランキング 押してくれたら頑張っちゃいます。  よろしくお願いします♪ m(_ _)m