CSS　スタイルシート

１．記述方法

方法(1)　CSSファイルを作り、それをすべてのHTMLファイルに適用させる

☆各HTMLファイルのヘッドに次のように記述する
　<head>
　<title>タイトル</title>
　　<link rel=stylesheet type=text/css href=style.css>
　</head>

方法(2)　CSSを特定のHTMLファイルだけに適用させる

（※大見出しの背景を黄色にする場合）
　<head>
　<title>タイトル</title>
　　<style type=text/css>
　　<!--
　　　h1{background-color: yellow;}
　　-->
　　</style>
　</head>

方法(3)　CSSをHTMLファイルの特定の箇所だけに適用させる

（※段落の背景を黄色にする場合）
　<head>
　<title>タイトル</title>
　</head>
　　<body>
　　　<p style=background-color:yellow;>
　　　……
　　　</p>
　　</body>



２．主なソース

・背景色を指定する
body { background: 色; }　（←文書全体の背景色）
h1 { background: 色; }　（←見出し１の背景色）

・見出し文字の背景色や文字色を指定する
h1 { background: 色; color: 色; }　（←見出し１の背景色と文字色）

・文字サイズを指定する
h1 { font-size: 1.5em; }　（←見出し１の文字サイズを150%に）
h2 { font-size: 1.2em; }　（←見出し２の文字サイズを120%に）

・行間を指定する
body { line-height: 1.5em; }　（←文書全体の行間を1.5倍に）
p { line-height: 1.2em; }　（←段落の行間を1.2倍に）

・ページの余白を指定する
body { margin-left:2em; margin-right:2em; margin-top:3em; margin-bottom:3em; }　（←左から順に、左右上下）

・強調文字のフォント指定
em {font-style:normal; 　（←書体をふつうに）
　　font-style:bold; 　（←太字に）
　　font-color:red; }　（←色を赤に）

・リンク文字色の指定
a:link { color:blue; }　　　　　　　（←未読を青色に）
a:visited { color:blueviolet; }　（←既読を紫に）
a:hover { color:yellow; }　　　　（←マウスをあてると黄色に）

・背景色に画像を取り込む
body { background: yellow url(ファイル名); }　（←背景色を黄色にし、画像をとりこむ場合）

・画像をページの左端に並べる
body { background: yellow url(ファイル名); repeat-y; }

・画像をページの左上に１枚だけ置く
body { background: yellow url(ファイル名); no-repeat; }


→home