TOP ＞ スタイルシート基本知識 ＞ スタイルシートを外部ファイルで利用する。
スタイルシートを外部ファイルで利用する。
CSSが最も力を発揮するのは、Webサイト全体のデザインを統一する場合です。この場合、 スタイルシートを外部ファイルとして別ファイルに保存し、HTMLページから取り込む形をとります。
スタイルシートはテキストファイルで作成します。「要素名 {プロパティ：値； プロパティ：値； … }」 の部分を列挙して、ファイル名の拡張子を「.css」にします。
このファイルをお使いのサーバーにアップロードします。「.css」 ファイルのURLをlink要素内に指定することでHTMLファイルに取り込みます。 link要素はHTML構文のヘッダー部分に記述します。
このlink要素を使う方法と、ヘッダー部分にstyle要素を使用する方法、 特定の要素に直接スタイルシートを適用する方法は併用できます。 このとき同じプロパティに違う値を指定した場合、要素に直接指定したスタイルシートが最優先され、 次にヘッダー部分にstyle要素を指定した場合、最後に外部ファイルで適用したものが適用となります。
特定の要素にスタイルシートを適用＞HTMLファイル一つだけにスタイルシートを適用＞スタイルシートを外部ファイルで利用
スタイルシートを外部ファイルで利用する
<link rel="stylesheet" href=" 「.css」ファイルのURL" type="text/css">
"スタイルシートを外部ファイルで利用する"のサンプルページはコチラをクリック！
- サンプルページのコードは以下の通りです。
|
・109.cssの内容 h1{color: red; background-color: yellow; } |
|
・109.htmlの内容 <html><head> <title>外部ファイルからスタイルシートを読み込む場合のサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/109.css" type="text/css"> </head> <body> <h1>Link要素を利用して、外部ファイル「109.css」からスタイルシートを取り込んでいます。</h1> <h1><h1>タグで囲まれたテキストは</h1> <h1>すべて文字の色が赤色で、背景色が黄色になります。</h1><br> <p>h1要素を、文字色を赤色、背景色を黄色に設定しています。p要素であるこの文章はご覧のとおり変化ありません。</p> </body> </html> |
[
スタイルシート基本知識 ]
