Lecture/InfoDesignB2005/6th/css_setting のバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
現在との差分 - Visual を表示
ソースを表示
Lecture/InfoDesignB2005/6th/css_setting へ行く。
- 1 (2007-02-24 (土) 07:05:44)
- 2 (2007-02-24 (土) 07:10:26)

CSSの設定

CSSを設定するには、 3つの方法があります。

別のファイルに設定し、head要素の中で、link要素を使ってファイルを指定

head要素の中で、style要素を使ってファイルを指定

<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/InfoDesignB2005/6th,prev,toc,next)

KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2005/6th/css_setting のバックアップ(No.2)

CSSの設定

メニュー

大学関係リンク

今日の5件

最新の5件