CSSを設定するには、 3つの方法があります。
<head> <title="...."> <style type="text/css"> <!-- セレクタ{ プロパティ:値} .. --> </style> </head> ... </pre> -指定した要素に、style属性として指定 #pre(novervatim){{ <要素名 style="プロパティ:値; プロパティ:値; ..."> 例: <h1 style="color: red"> </pre> この授業では、最初の「別のファイルへの設定」の方法を 利用します。 **CSSの書かれたファイルを読み込む [#a467dfe8] スタイルシートの書かれたファイルを 読み込むには、 link要素を使います。 #pre(novervatim){{ <link rel="stylesheet" href="ファイル名" type="text/css"> </pre> スタイルシートのみを記述したファイル(通常、拡張子が.css)を、 別に用意しておき、 HTML文書に読み込みます。 link要素で、読み込むファイルを指定します。 link要素は、必ずhead要素の中に書くことを、注意してください。 複数のCSSファイルを指定する場合も、 必要な数だけlink要素で記述します。 たとえば、次は「style1.css」というスタイルファイルを、 HTMLファイルから読み込む場合です。 #pre(novervatim){{ <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> </pre> そして、「style1.css」というファイルは、次のような 内容になっています。 #pre(novervatim){{ body { margin: 0; color: #000000; background: #ffffff; } h1 { margin: 0; padding: 0.2em; color: #ffffff; background-color: #000000; } </pre> 次へ進んでください。 ---- #navi2(Lecture/InfoDesignB2004/7th,prev,toc,next)