TITLE:CSSの設定方法 *CSSの設定方法 [#oee9a0e7] 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> ... }} +指定した要素に、''style属性''として指定 #pre(novervatim){{ <要素名 COLOR(red):style="COLOR(blue):プロパティ:値; プロパティ:値; ...COLOR(red):"COLOR(black):> 例: <h1 style="color: red"> }} この授業では、最初の「''別のファイルへの設定''」の方法を 利用します。 **CSSの書かれたファイルを読み込む [#a467dfe8] スタイルシートの書かれたファイルを 読み込むには、 ''link''要素を使います。 #pre(novervatim){{ COLOR(red):<link rel="stylesheet" href="COLOR(blue):ファイル名COLOR(red):" type="text/css"> }} スタイルシートのみを記述したファイル(通常、拡張子が.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> }} そして、「style1.css」というファイルは、次のような 内容になっています。 #pre(novervatim){{ body { color: #000000; background: #ffffff; } h1 { color: #ffffff; background-color: #000000; } }} &br; &navi2(Lecture/JouhouC2008/5th,next);進んでください。 ---- #navi2(Lecture/JouhouC2008/5th,prev,toc,next) |