Tag as Selector
HTMLのタグをセレクタにします。
<P>や<B>などタグをセレクタに指定すると、指定されたタグすべてそのスタイルになります。
BODYタグの指定
<BODY>と同様な指定ができます。
サンプルは、背景色を白にテキストの色は黒に、ページの余白を0pxにしています。リンクの色も合わせて指定できます。
<style type="text/css">
<!--
body { background-color: White; color: Black;
margin: 0px; }
a:link { color: red; }
a:visited { color: blue; }
a:hover { color: orange; }
-->
</style>
Pタグの指定
<P>タグに書体を指定した場合、ページのすぺての<P>タグに適用されます。
サンプルは全ての<P>タグをArialで青に指定しています。
<P>タグのheadセレクタは書体の指定がないためArialが指定されますが、bodyセレクタは、Times New Romanで赤が指定していますからArialの赤は適用されません。
<style type="text/css">
<!--
p { font-size: 12pt; font-family: Arial; color:
rgb(102,102,255); }
p.head { font-size: 24pt；}
p.body { font-size: 18pt；font-family: Times New Roman; color: rgb(255,51,51);
}
-->
</style>
<p>P Tag Class</p>
<p class="head">P Tag Head Class</p>
<p class="body">P Tag Body Class<</p>
Hタグの指定
各段階の<H>タグを指定できます。
サンプルでは、からタグの書体をTimes New Romanに、とはArialに、各段階の文字の大きさや色を指定しています。
<style type="text/css">
<!--
h1,h2 { font-family: "Times New Roma"; }
h3,h4,h5 { font-family: Arial; }
h1 { font-size: 18.0pt; color: Red;
}
h2 { font-size: 16.0pt; Background-color:
Red; color: White; }
h3 { font-size: 14.0pt; color: green;
}
h4 { font-size: 12.0pt; font-style:
italic; color: Blue; }
h5 { font-size: 10.0pt; color: Orange;
}
-->
</style>
<h1>H1 Font Size 18pt Red.</h1>
<h2>H2 Font Size 16pt Background Color Red.</h2>
<h3>H3 Font Size 14pt Green.</h3>
<h4>H4 Font Size 12pt Font Style Italic.</h4>
<h5>H5 Font Size 10pt Orage.</h5>
表組みのフォーマット
<TABLE>・<TH>・<TD>などの表組みタグにスタイルシートを組み込めば、統一した表組を作ることができます。
サンプルでは、<TABLE>タグ部分に、フォントをArialの9ptに、幅92%で左右のマージンで4%で表を中心に。
<TH>タグを背景色を青。文字と罫線を白に指定。
<TD>タグの罫線をグレイに指定しています。<TH>・<TD>の枠と文字の空きをパディングで調整します。
このフォーマットでページ内の表は、ここに指定しなくても全て同じデザインになります。
<style type="text/css">
<!--
table { width: 92%;
font-size: 9.0pt;
font-family: Arial, Helvetica;
border-collapse: collapse;
margin: 60px 4% 0px;
border: 3px outset rgb(204,204,204);
}
th { vertical-align; middle;
background-color: rgb(77,102,204); color:
rgb(255,255,255);
padding: 3px 0px 3px;
border: 1px solid rgb(255,255,255); }
td { vertical-align; middle;
padding: 3px 8px 3px;
border: 1px solid rgb(153,153,153); }
-->
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th>Property</th>
<th>Value</th>
</tr>
<tr>
<td>font-family</td>
<td>family-name | generic-family</td>
</tr>
<tr>
<td>font-style</td>
<td>normal | itali</td>
</tr>
<tr>
<td>font-variant</td>
<td>normal | small-caps</td>
</tr>
<tr>
<td>font-weight</td>
<td>normal | bold</td>
</tr>
<tr>
<td>font</td>
<td>font-style | font-variant | font-weight</td>
</tr>
</table>
 |
 |
|---|
