Top > Lecture > JouhouC2008 > 5th > css_setting
AND OR

CSSの設定方法

CSSを設定するには、 3つの方法があります。

  1. 別のファイルに設定し、head要素の中で、link要素を使ってファイルを指定
  2. head要素の中で、style要素を使ってファイルを指定
    <head>
    <title="....">
    <style type="text/css">
    <!--
    セレクタ{ プロパティ:値}
    ..
    -->
    </style>
    </head>
    ...
    
  3. 指定した要素に、style属性として指定
    <要素名 style="プロパティ:値; プロパティ:値; ...">
    例:
    <h1 style="color: red">
    

この授業では、最初の「別のファイルへの設定」の方法を 利用します。

CSSの書かれたファイルを読み込む

スタイルシートの書かれたファイルを 読み込むには、 link要素を使います。

<link rel="stylesheet" href="ファイル名" type="text/css">

スタイルシートのみを記述したファイル(通常、拡張子が.css)を、 別に用意しておき、 HTML文書に読み込みます。

link要素で、読み込むファイルを指定します。 link要素は、必ずhead要素の中に書くことを、注意してください。 複数のCSSファイルを指定する場合も、 必要な数だけlink要素で記述します。

たとえば、次は「style1.css」というスタイルファイルを、 HTMLファイルから読み込む場合です。

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;
 charset=Shift_JIS">
<title="○○の日記">
<link rel="stylesheet" href="style1.css" type="text/css">
</head>
<body>
...
...
...
</body>
</html>

そして、「style1.css」というファイルは、次のような 内容になっています。

body {
  color: #000000;
  background: #ffffff;
}
h1 {
  color: #ffffff;
  background-color: #000000;
}


次へ進んでください。



Reload   Diff   Front page List of pages Search Recent changes Backup Referer   Help   RSS of recent changes
Last-modified: Tue, 11 Mar 2014 02:20:22 HADT (3751d)