Embedded Style Sheets
スタイルシートをページに埋め込んで組み込みます。
DTPやWordなどの、スタイルと同じ考え方です。 表現したいスタイルを作り、タグにスタイルを指定していきます。
スタイルブロックの作成について
スタイルブロックは、HTMLのHEADセクション<HEAD>〜</HEAD>の中に、スタイルブロック<STYLE>〜</STYLE>を作成し
記述します。
スタイルの構文は、セレクタとプロパティーとの組み合わせになっています。セレクタはスタイル名、プロパティーは指定です。
セレクタについては、セレクタのページをご覧下さい。ここでは、概要で説明します。
サンプルは、<P>タグをフォントサイズが12ポイントで文字の色を赤に、<B>タグは、文字の色を青にしています。
selector { property : values ; property : values ; ・・・; }
<html>
<head>
<title>Style Sheets</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body { background-color: rgb(255,255,255); color: rgb(0,0,0);
margin: 0px 0px; }
p { font-size: 12pt; color: blue; }
b { color: red }
p.title { font-size: 24pt; color: red; }
-->
</style>
</head>
<body>
<p class="title">Dynamic HTML Styling</p>
・
・
・
・
</body>
</html>
スタイルの指定について
スタイルブロックで作成したスタイルを、タグに指定します。
サンプルの場合、タグにスタイルを指定しましたから、<P>タグは12ポイントのブルーですから、ページの<P>タグはすべてに12ポイントのブルーになります。また<B>タグは、
赤に指定していますから、<B>タグを指定した部分すべて赤で表示します。
<p>Pタグは12ポイントのブルーです。<b>ここからボールドですから赤になります。</b></p>
Pタグは12ポイントのブルーです。ここからボールドですから赤になります。
 |
 |
|---|
