HTMLとかのお勉強その３

ペースが遅いので、一気にいきますー。

スタイルシートを付け加える。

前回は見出しと、文章が書けるタグについて。
次はそれを色々いじる為のスタイルシートについて。

スタイルシートはすべて、

<style type="text/css">〜</style>の間に書く。

の間に書く。
h1のスタイルを変えたければ、

<style type="text/css">

h1     {font-size:10px;
       font-family: Verdana,Tahoma,Courier;
       color: black;
       font-style: italic}
</style>

こう書きます。

細かい解説

ここでは、h1タグのサイズを10pxにし、フォントをVerdanaに設定、色を黒にして，斜体をイタリック体にしました。
スタイルシートは、

設定するタグ 　{スタイルシート名:各設定}

と書き、複数の場合は、前のスタイルシートにセミコロンをつけます。

文字サイズ

font-size:

で、文字のサイズ指定。pxやem,またsmallやlargeなどで値を決めることができます。
emは親要素の文字の大きさの相対サイズになります。
ここでの親要素はで、の大きさはスタイルシートで設定していないため、標準の文字サイズになります。
標準の文字サイズは16pxなので、この場合、1em = 16pxとなります。
これを使用することにより、ブラウザの表示文字サイズを変更すると、全体の文字サイズが変わるわけです。

フォント

font-family:

で、フォントの指定ができます。
ここでは、フォントを３つ指定しています。
先に書いた方が優先されます。
こうしていくつかのフォントを用意しておくことで、もしユーザーが使用しているOSで見れないフォントがあったときに対応できます。
WindowsのフォントとMacのフォントと２種類くらい指定しとけばいいでしょう。

色

color:

これで色が変えれます。
色は英語で balck,blue,redとも書けますし、16進数で指定もできます。
１６進数の場合は

{color:#ffffff}

の様に、値の前にシャープが必要になります。

斜体

font-style

で、斜体の設定。
設定できる種類は、italic(イタリック体),oblique(斜体),normal(通常の形)などです。

<address>〜</address>

このタグを使うと強制的に斜体になります。そのときに、このタグにスタイルシートで斜体の設定をnormalにすれば、斜体が解除され、通常の形で表示されます。