◆リンクドスタイルシートを使ってみよう!◆

文字を重ねることもできます

文字を重ねることもできます

工夫してみましょう


文字にいろいろなスタイルを設定した場合、どのページでも同じように設定するのは面倒くさいですよね。
そこでどのページからも参照できるテンプレートのようなものを使用すると楽になります。

<HEAD>
<LINK REL=STYLESHEET HREF=
"style.css">

</HEAD>
<BODY>
<H1>文字を重ねることもできます</H1>
<H2>文字を重ねることもできます</H2>
<P>工夫してみましょう</P>

文字にいろいろなスタイルを設定した場合、どのページでも同じように設定するのは面倒くさいですよね。
そこでどのページからも参照できるテンプレートのようなものを使用すると楽になります。
</BODY>
何と、これだけ文字スタイルを設定しながら、タグはこれだけです。
それには秘密があります。
まず最初にスタイル設定専用のテンプレートファイルを作成します。
H1 { font-family:'Times New Roman';
font-size: 70pt;
color: pink; }
H2 { font-family: Arial;
font-size: 40pt;
margin-top: -50pt;
color: crimson }
P {font-size: 50pt;
text-indent: 50pt;
color: blue }

のように記述したファイルを作成し、 style.css といったような感じで css という拡張子をつけて、スタイルを設定したいファイルと同じフォルダに保存します。
後はスタイルを設定したいファイルの <HEAD> </HEAD> の間に
<LINK REL=STYLESHEET HREF=
"style.css">

という記述を加えて style.css ファイルへのリンクを指定すれば良いのです。
style.css で指定した <H1> <H2> <P> などのタグを記述することによって、CSSファイルの内容を反映することができます。

HTMLにCha☆llengeへ戻ります