Lecture/JouhouC2008/5th/css_setting の変更点

追加された行はこの色です。
削除された行はこの色です。
Lecture/JouhouC2008/5th/css_setting へ行く。

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)

KAWANO's PukiWiki Plus! - Lecture/JouhouC2008/5th/css_setting の変更点

メニュー

大学関係リンク

今日の5件

最新の5件