特定の文字にスタイルを指定する。

<span class="・・・"> 　<span style="・・・">

ある要素に対してスタイルシートを定義すると、
それと同じ要素には全て同じスタイルが指定されます。
特定の文字にのみ違うスタイルを指定したい場合には、クラスという仕組みを使います。
最初にスタイルシートでクラスの定義を行ないます。
ここでは、「notes」というクラス名（クラスの名称）を定義して、そこにスタイルシートを指定します。
クラス名をスタイルシートに定義するには、クラス名の前にピリオド「.」を付け、
「.notes」というセレクタにして <style> 要素に記述します。

特定の文字にスタイルを指定する。


（画面クリックでWEB上のサイズを見てください。）


上のページの特定の文字にスタイルを指定します。

<html>
<head>
<title>紙の豆知識</title>
<style type="text/css">
<!--
・・・・・・中略・・・・・・・・

p {
font-size:16px;
font-family:serif;
line-height:150%;
}
.notes {
font-size:14px;
color:#660000;
}
--></style>
</head>

・・・・・・中略・・・・・・・・

<h2>中性紙は保存性が高い。</h2>
<p>
紙にはインクのにじみ防止のためにサイズ剤が使われています、
その時に使われる定着剤、硫酸バンドにより紙が酸性化。
長い年月の間に繊維か劣化し紙はボロボロになってしまいます。
一方中性紙は中性サイズ剤を使用しているので、繊維が酸性化
せず良い状態で長期保存できます。
</p>

<h2>紙の豆知識はこれだけ？</h2>
<p>紙に付いて知りたい人は、<u><i>donbey suroomの紙の豆知識</i></u> を
見てください。<br>
<span class="notes">紙の豆知識以外に紙の規格表や面白いお話もあります。
</span>
</p>
・・・・・・・・以下略・・・・・・・・


（画面クリックでWEB上のサイズを見てください。）

独立した要素を作るタグ
<span class="クラス名"> 〜 </span>
<span> タグは、独立した要素を作ります。
<span>タグの Class 属性でスタイルシートが定義されたクラス名を指定すると、<span> 要素にスタイルが適用されます。
また、一度定義したクラス名は同じウエブページで繰り返し使用する事ができます。
良く使う文字のスタイルにはクラスを定義しておき、
必要な場所に<span> タグでクラス名を指定すると便利です。
なお、クラス名は他のタグに対しても適用できます。
例えば、<h2 class="note"> の様に指定すると、
その<h2>要素が「１４ピクセル＋濃い赤色」になります。

style 属性を使う
一カ所だけ文字のスタイルを変更したい場合は、<span> タグの style 属性を使って
スタイルシートを指定する方法も有ります。
style 属性の属性値には、直接スタイルシートの指定を記述します。

■style 属性で直接スタイルを記述する例
<h2>紙の豆知識はこれだけ？</h2>
<p>紙に付いて知りたい人は、<u><i>donbey suroomの紙の豆知識</i></u> を
見てください。<br>
<span style="font-size: 14px; color: #660000;">
紙の豆知識以外に紙の規格表や面白いお話もあります。
</span>
</p>

表示結果は上のサンプルと同じです。ただし style 属性では、スタイルを修正する時に
ここの <span> タグの中の属性値をいちいち修正しないといけないので後から面倒になります。クラス名を定義して利用する方が、スタイルの修正や再利用は楽です。