CSSの指定方法
次にCSSの指定方法を説明します。
各要素の style属性 に指定することでCSSが適応する方法。
※一番簡単で、かつわかりやすい。ただ、複数個所ある場合、逆に見ずらくなる。
<p style="font-size : 10pt">文章</p>
指定したすべてのセレクタにcssを設定する。
head要素の中でCSSを宣言し、body要素の中で適応されるというものです。style要素を使用します。
このときCSSのタイプを指定しておく必要があります。
style要素の type属性 の属性値を text/css と指定しておきます。
※この指定方法だけでは、body要素内のすべてのp要素にCSSが適応する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>
CSS
</title>
<style type="text/css">
<!--
p { font-size : 10pt }
-->
</style>
</head>
<body>
<p>この部分の文字サイズは10ポイントになります。</p>
</body>
</html>
個別に、かつ全体にcssを設定する場合1
セレクタを指定するときに #半角英数字の名前 でセレクタを指定するとidを宣言したことになります。
idを宣言し、今度はCSSを適応させたい要素の id属性 で宣言した名前を指定すると、その部分にだけCSSが適応されて便利です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<style type="text/css">
<!--
#aaa { font-size : 10pt }
-->
</style>
</head>
<body>
<p id="aaa">この部分の文字サイズは10ポイントになります。</p>
</body>
</html>
個別に、かつ全体にcssを設定する場合2
#の代わりに
. で宣言し、各要素の class属性 で名前を指定することによって適応することができます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<style type="text/css">
<!--
.aaa { font-size : 10pt }
-->
</style>
</head>
<body>
<p class="aaa">この部分の文字サイズは10ポイントになります。</p>
</body>
</html>
セレクタにはどの要素に対してCSSを適応するかを書いて、 {~} の中にプロパティと値を書きます。
プロパティ・値を複数指定したいときは、 ; (セミコロン)で区切って指定します。
p {
font-size : 12pt;
color : red
}
最終更新:2009年08月27日 00:07