HTMl文書はいろいろな「要素」の集まりであることは既に述べた。 小さな要素が集まって大きな要素をなし、最終的にhead要素とbody要素が 集まってhtml要素をなす。
ひとつの要素は文書構造と言う観点からは必ず同じ役割を果たすことが 期待される。CSSでは
という区切りで同じスタイルを付与する。2番目で用いるグループ化 のことをクラスという。
「文書中の全てのH2要素のスタイルを決めたい」というようなときは、
h2 {background: white}
とする。
何かの要素が特定の意味を表すようなとき、その意味に属する要素だけに スタイルを適用したいことがある。意味を表す名前をクラスとして 決めて、そのクラスに属する要素のスタイルを決定する。たとえば、
table.menu {background: yellow}
とすると、table要素のうちclass属性に "menu" を指定したものの 背景が黄色(yellow)となる。
全ての要素にはstyle属性を持たせることができ、その値として スタイルの特性と特性値を指定できる。たとえば、
<p style="color: red">この段落は赤</p>
とするとこのp要素に含まれる文全部が赤(red)になる。ただし、このように 要素の実体そのもののスタイルをその場で指定する方法は、レンダリングを 直接指定する要素を利用する書き方と同じく、ひとつの要素しか指定できない。 同じ意味を持つ要素をまとめて扱えないので本講ではとくに触れない。
CSSを用いてスタイルを指定するには、style要素内に書くか、 別ファイルに書いたものをlink要素で指定する。
style要素は、HTML文書中のhead要素内に書くことができ、その内容には CSS定義を書ける。
〜〜 略 〜〜
<head>
<title>foo</title>
<style type="text/css">
<!--
ここにCSS定義を書く
-->
</style>
</head>
〜〜 略 〜〜
CSS定義のみを書いたファイルを別に作り、そのファイルを link要素の属性値で指定する。link要素もhead要素内に書く。
〜〜 略 〜〜
<head>
<title>foo</title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
〜〜 略 〜〜
この例では外部ファイルとしてexternal.cssを
指定している。