| 書式 |
|
| ●スタイルシートの書式 |
| ※絶対的単位 |
| in |
：インチ（1インチ＝2.54ｃｍ） |
| cm |
：センチメートル |
| mm |
ミリメートル |
| pt |
ポイント（1ポイント＝1/72インチ） |
| pc |
パイカ（1パイカ＝12ポイント） |
|
|
| ※相対的単位 |
| em |
：その範囲で有効なフォントの高さを1とする単位 |
| ex |
：その範囲で有効なフォントの小文字の「ｘ」高さを1とする単位 |
| px |
：1ピクセルを1とする単位 |
| % |
：他の基準となる大きさ対する割合 |
|
|
| 直接 |
|
| ●タグに直接記述 |
 個々のタグに指定 |
<タグ style="プロパティ名:値>
<タグ style="プロパティ名1:値1;プロパティ名2:値2;…>
|
| ヘッダー |
|
| ●ヘッダーに記述 |
ヘッダーに記述する場合1
<HAED>〜</HAED>の間に
※右記はｈ1要素とP要素の
指定をしています |
<style type="text/css">
<!--
body { margin: 3em }
h1 {
font-size: 11px; /* 文字サイズを11ピクセル */
padding: 0.3em;
color: #0000ff; /* 文字色を青 */
background: #ｆｆｆｆ00 /* 背景色を黄色 */
}
p {
padding: 1em;
border: double 3px #0000ｆｆ /* 青の2重線で囲む */
}
-->
</style> |
ヘッダーに記述する場合2
<HAED>〜</HAED>の間に
※複数の要素に適用 |
<style type="text/css">
<!--
h1, h2, h3, p {
font-size: 11px; /* 文字サイズを11ピクセル */
padding: 1em;
border: double 3px #0000ｆｆ /* 青の2重線で囲む */
}
-->
</style> |
ヘッダーに記述する場合3
<HAED>〜</HAED>の間に
※すべての要素に適用 |
<style type="text/css">
<!--
* {
font-size: medium; /* 文字サイズを標準 */
font-weight: normal; /* 文字の太さを標準 */
}
-->
</style> |
ヘッダーに記述する場合4
<HAED>〜</HAED>の間に
※idで指定した要素に適用 |
<style type="text/css">
<!--
#id01 {
padding: 0.5em;
border: outset 8px #0000ff /* 青い枠を表示 */
}
-->
</style>
</head>
<body>
<p>ここはp要素の内容</p>
<p id="id01">ここは「id="id01"」と指定</p>
</body> |
| 読込 |
|
| ●CSSファイル読込 |
| CSSファイルを読み込む場合 |
<HAED>
<link rel="stylesheet" href="yomikomi.css" type="text/css">
</HAED>
↓yomikomi.cssの内容
body {
margin: 0;
color: #999999;
background: #ｃｃｃｃｃｃ url(背景画像のURL)
}
h1 {
font-size: medium;
margin: 0;
padding: 0.3em;
color: #ffffff;
background-color: #000000
}
p {
line-height: 1.8;
margin: 1.6em 1.6em 1em 36%;
padding: 1em;
border: dotted 3px #ffffff |
|