外部スタイルシートから読み込むcss

外部スタイルシートからcssを読み込んでスタイルを設定する方法に
ついてお話します。

拡張子を「.css」にしてテキストファイルを作成します。
そのテキストファイルにスタイルを記述して、スタイルを
適用したいHTMLファイルにリンクを張ればいいだけです♪


この方法でcssを設定すると、1行リンクを設定するだけで
適用したいすべてのHTMLに反映されるので、ソースが長くならず
SEO的にも効果的ですし、面倒な作業もへるかもしれませんね！


それではどうやってリンクを張るのか説明しますね！

前回のHTMLファイルに設定する方法と同じように
の中に記述します。


例

＜head＞
　　＜meta 〜〜〜〜〜＞
＜link rel="stylesheet" type="text/css" href="style01.css"＞
＜/head＞

といった感じです。・

rel属性に「"stylesheet"」を、type属性に「type="text/css"」を
指定し、href属性にスタイルシートのファイルのURLを指定します。

ですので、上記の「style01.css」は最初に作ったcssのテキストファイルの
ファイル名です。


そのテキストの中に、cssを記述していけばいいのです。

ところで、HTMLファイルにまとめて〜でもでてきた「例」のなかの
『meta〜〜〜』ですが、
一般的にスタイルシートというとcssを指すのですが、スタイルシートには
cssではない記述言語もあるのでスタイルシートの種類を指定する
必要があるのです。

だから、meta〜の内容は以下の通りにしてください。

＜meta http-equiv="Content-Style-Type" content="text/css"＞



今まで３つのcssの方法を見てきましたが、優先順位があります。
優先順位は以下のとおり。
重複する場合は優先順位の高いほうが適用されるので注意して下さい。

タグに直接（一番優先）
HTMLファイル（2番目）
外部ファイル（3番目）


※　＜＞は全角になっています

ホームページ制作 - livedoor Blog 共通テーマ