スタイルシートの書き方

スタイルシートの書き方は大きく3通りあります。

一つは既に説明したstyle属性として記載する方法。

この方法はHTMLのソースのその部分を見ればどんなstyleなのか一目瞭然である一方でいくつものプロパティーを指定する場合に見づらいという欠点もあります。

 

別の書き方を紹介します。

それがstyle要素です。そう,属性では無くstyleタグを使います。

記入位置はhead要素内で書き方は以下の通り。

<style type=”text/css“>

p {

color:red;

text-align:center;

}

</style>

まず,styleタグの属性typeはこれをそのまま使うと覚えて下さい。type=”text/css”テキストのスタイルシートですという事を示します。

次に上記の例ではpはpタグのことです。

この書き方の場合,HTMLソースに出てくるすべてのpタグに適用されます。

そして,{から}までにstyle属性に記していたプロパティーと値を列挙します。

上記のようにプロパティー毎に改行しておくとどんなstyleを適用するのか分かり易いですね。

 

では,試しにHTMLファイルを作成してみましょう。名前はいつものようにtest.htmlです。

<html>
<head>
<title>pのCSS設定</title>
<style type=”text/css”>
p {
color:red;
text-align:center;
}
</style>
</head>
<body>
これは<p>赤文字</p>です<br>
<p>これも赤文字です</p>
</body>
</html>

 

さあ,ブラウザで開く前にどんな表示になるか想像してみましょう。

css2

p要素の部分だけがセンタリングされ赤文字になっているのが確認できましたか?

これを応用してbodyタグのstyleを設定すれば一度にHTML全体のstyle設定が可能ですね。

 

今日のまとめ:

 

CSSの記載方法その2はhead要素内に

<style type=”text/css“>

p {

プロパティー:値;

プロパティー:値;

}

</style>

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です