Lecture/InfoDesignB2005/6th/css_setting の変更点

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

*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/InfoDesignB2005/6th,next);進んでください。
----
#navi2(Lecture/InfoDesignB2005/6th,prev,toc,next)

}}

KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2005/6th/css_setting の変更点

メニュー

大学関係リンク

今日の5件

最新の5件