TOP > Back > Place > Next

BODY要素の属性

BODY要素の持つ属性を指定すると、ページ全体の文字色や背景色、リンクの色を変更することができます。
<BODY>の要素の属性は、スタイルシートで設定することが推奨されています。

ページ全体の文字色がBODYの属性で一応変更(保持)されますが、SPAN要素の文字列やその他の要素に直接指定された色については、文字列に近い要素の属性設定ほど最優先で指定されます。つまり、テキストや文字の要素が近いほど優先的に指定します。
Webブラウザの設定でHTML文書内のスタイイルシートを無視するようにしている場合はその限りではありません。

 スタイルシートでページの基本指定

<HEAD>要素の中に用意したスタイルシートを、思い出しましょう。
body{プロパティ}でページ内の文字色と背景、ついでにリンクの文字色を指定します。
詳しくは、CSSの基礎知識をご覧下さい。

<HEAD>       
<STYLE type="text/css"><!--

       この間に下のプロパティの要素名{属性名:属性値;}」を書きます。

--></STYLE>
</HEAD>

下記の指定で「a:link」から「a:active」の順番を変えないこと!!正確に作動しなくなります。

◆ 背景色と基本の文字色を決める

ソース:
<HEAD>
<STYLE type="text/css" ><!--
BODY { BACKGROUND-COLOR : BLACK ; ページの背景色
BACKGROUND-IMAGE : url('***.gif') ; ページの背景画像
COLOR : GRAY ; } ページの基本文字色
A : link { COLOR : BLUE ; } リンク文字色
A : visited { COLOR : LIME ; } 訪問済みリンク文字色
A : hover { COLOR : RED ; } マウスポインターが文字の上に乗ったときのリンク文字色
A : active { COLOR : TEAL ; } クリックした場合のリンク文字色
--></style>
</HEAD>

表示結果は、こちらのサンプルです。背景が黒、文字がグレイになっています。
色見本は、カラーチャートをご覧下さい。(背景色が決まれば、文字の色の比較になるようにしました。)
もし、指定がない場合、見る人のwebブラウザ任せになります。

BACKGROUND-COLOR : の値は、色の値と transparent です。transparent は、背景色を解除します。

・ 非推奨になったBODY要素の属性指定


. HEAD内のスタイルシート指定方法

基本的な指定法方です。下記を、「<STYLE type="text/css"><!--」の直下にタイプします。

スタイルシートと通常HTMLタグとの指定比較
比較指定 Start
コンテナ
要素 接続
条件
属性 連結 End
コンテナ
HTMLタグ < 要素名 半角スペース 属性名= ”値” なし
半角スペースで新たに属性名=から
>
スタイルシート(HEAD内指定) 要素名指定後 要素名 プロパティ: ;}
スタイルシート(BODY内指定) < 要素名 半角スペース STYLE=”プロパティ: 値” >

▼ スタイルシートの指定法方

“セレクタ(要素名の指定){属性:値;}”が通常のセットで、「{属性:色値;}」を、プロパティ宣言と言い、「<style="属性:値;">」を、スタイルプロパティと言います。

プロパティ(属性)と値の間にはコロン(colon.)で仕切り、「 body { color : 文字色指定値 ; background-color : 背景色指定値 ; } 」のように、一つ一つのプロパティ宣言の最後に「;」セミコロン(semicolon.)を付けることで、プロパティ宣言の追加が可能になります。
例:
body{color:文字色指定値background-color:背景色指定値;}
<body style="color:文字色指定値background-color:背景色指定値">

◆ BODY内のスタイルシート指定

▼ スタイルシートの行揃え(align属性)

 個別に設定する場合での説明例です。

. スタイルシートで文字を装飾する

フォントを飾り文字に変えるスタイルシートの指定法方です。

タグ練習ブラウザを使って試してみよう!

▼ インラインでのスタイルシートのstyle="属性値"が指定できないもの

要素名に直接的にSTYLE=""が付けられない物があります。「何故?」と感じた方もおられると思います。

当たり前ですが「HTML,HEAD,META,TITLE,STYLE,BASE」の要素はもちろん論外です。
それとは別に、インラインで<要素名  style="属性値">style属性が要素名に直接指定を出来ない要素が、「BASEFONT,SCRIPT,PARAM,」等に上げられます。
それらは、STYLEには無縁の物や、廃止予定だったり、インラインのスタイルシートで属性の扱いになります。(インラインのスタイルシートは、それぞれの要素説明に解説します。)

簡単に説明すると、スタイルシートの別な方法に指定されるか、属性に変更指定されるかの違いになります。(詳しくは、英語ですが、W3C-CSSにアクセスしましょう。)


 【←BACKNEXT→
Copyright (c) Producer by System KS. 2001 All rights reserved.