*CSSの設定 [#sdf6a832] CSSを設定するには、 3つの方法があります。 -別のファイルに設定し、head要素の中で、''link要素''を使ってファイルを指定 -head要素の中で、''style要素''を使ってファイルを指定 #pre(novervatim){{ <head> <title="...."> COLOR(red):<style type="text/css"> COLOR(red):<!-- COLOR(blue):セレクタ{ プロパティ:値} COLOR(blue):.. COLOR(red):--> COLOR(red):</style> </head> ... </pre> -指定した要素に、''style属性''として指定 #pre(novervatim){{ <要素名 COLOR(red):style="COLOR(blue):プロパティ:値; プロパティ:値; ...COLOR(red):"COLOR(black):> 例: <h1 style="color: red"> </pre> この授業では、最初の「''別のファイルへの設定''」の方法を 利用します。 **CSSの書かれたファイルを読み込む [#a467dfe8] スタイルシートの書かれたファイルを 読み込むには、 ''link''要素を使います。 #pre(novervatim){{ COLOR(red):<link rel="stylesheet" href="COLOR(blue):ファイル名COLOR(red):" 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="○○の日記"> COLOR(red):<link rel="stylesheet" href="COLOR(blue):style1.cssCOLOR(red):" 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> &br; &navi2(Lecture/InfoDesignB2004/7th,next);進んでください。 ---- #navi2(Lecture/InfoDesignB2004/7th,prev,toc,next) }} |