style要素を利用した取り込み

CSSをHTML内に取り込む方法は、基本的に、3通りあります。
CSS3であってもこれは、例外ではありません。
CSS3でも、同じ方法がCSS1でも、採られます。
では、その中でも「style要素を利用した取り込み」という方法を
の最も初歩的見ていきましょう。

まず、CSSのソースを作る必要がどの方法でも共通しますがあります。
HTMLのソース同様、ソースというのは、英語を使ったものとなります。
ただ、＜html＞等のような、HTMLでおなじみの物は使いません。
色や文字の大きさ、行間スペースなどを指定するための言葉を基本的には、使います。
文字の色を表す「color」最もわかりやすい例でしょうか。

ここでは、「h1 { color : #ff0000 }」という例を使います。
「h1」というのは、第1見出し、本文の一行目を意味し、「#ff0000」は色（これは赤色）を意味します。
つまり、一行目の文字の色を赤にするという指定ですね。
これを、HTML内に貼り付けます。

貼り付ける部分は、＜body＞?＜/body＞の間に書いている、指定を行う文のすぐ前です。
あらかじめその文章の前後には「h1」および「/h1」を足しておき、
この文章が第1見出しであると指定しておきましょう。

そうすると、その文章が「h1」という指定がなされ、
「h1 { color : #ff0000 }」がしっかりと機能します。


ただ、まだ文字はこれだけを加えても、赤にはなりません。
この、CSSを内部に書き込む形の場合は、「style="（指定）"」という形にする必要があります。
よってこの場合は「style="h1 { color : #ff0000 }"」となります。
これでCSSの指定が反映される事になります。

タグ：style要素を利用した取り込み