FC2ブログ
071234567891011121314151617181920212223242526272829303109

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--------(--) |  スポンサー広告 |  CM(-) | Top▲

CSS事始め 3

CSSの書式

CSS事始め1で、p要素へstyle属性を追加して、段落の表示幅を600pxに設定しました。

<p style="width: 600px;">
延元3年(1338)新田義貞が越前で亡くなり…
忽ち劣勢に追い込まれてしまいます。<br>
…落馬して最期を遂げました。</p>
<p style="width: 600px;">
地の民は、義宗の霊を「うつぶし明神」として祀り…</p>


p要素が二ヶ所ですので、それぞれのp要素にstyleの属性を付加してあります。同じ要素に、同じ属性を記入するのは効率が良くないですね。実は、styleを要素とするタグが用意されています。

<style type="text/css">
  p {width: 600px;}
</style>


style要素タグに括られた内容は、p要素の"表示領域の幅は600px"という属性の付加を意味します。これは、html書類の情報になりますので、つまりブラウザに表示しない内容ですので、head要素内に文書の情報として記入します。
pはHTMLの要素名ですが、style要素の内容では"セレクタ"と言います。呼び名が変わるのは、セレクタにはHTMのL要素名以外の物もあるからです。ただ、スタイルの適用対象がHTMLの要素であることは変わりません。まずは、書式に慣れましょう。
セレクタ {プロパティ: プロパティ値;}
widthを"プロパティ"(特性)、その具体的な性質を"プロパティ値"いいます。そして、プロパティとプロパティ値を:(コロン)で区切り中括弧{ }で括ります。プロパティを複数設定するときは、;(セミコロン)で区切ります。最後の;は省略できます。また、語中以外の半角スペース及び改行は無視されますので、記入時に読みやすいように適宜入れている方もおります。
もう、お気づきかと思いますが、HTMLタグのstyle属性値は"プロパティ: プロパティ値;"になります。styleというワードは、タグの要素名、属性名に使われています。混乱してしましそうですね。
余談ですが、titleも要素名、属性名に使用されています。styleは使用の対象が同じですが、ttitleは要素としての役割と、属性としてのそれは関係がありません。ちょっと、ややこしいことになっていますが、不便が無ければtitle属性を無理に使わなくても構いません。

2014-03-23(日) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲
コメントの投稿












管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。