|
★ スタイルシート・・・CSS >> Cascading Style Sheetの頭文字
★ CSSはレイアウトを定義する規格＝フォントサイズ、余白、行間etc
★ CSSの優先順位
>> インラインスタイル、 STYLE要素（ページ単位）、 外部CSS
◇---本題に入る前に前置きです。
HTML仕様の標準化を提唱しているW3Cという団体があります。
▼
■W3CのHTML定義 【DTD HTML 4.01】
テキストなどの論理的な設定はHTMLに記述し、レイアウト（文字サイズ、文字の装飾）や余白・行間などの見栄えに関する物理的な設定は、スタイルシート（正式にはカスケーティングスタイルシート、通称CSS）の設定を推奨しています。
▼
■DTD HTML 4.01非推奨要素群（abc順）
<basefont> <center> <font> <s> <strike>
<u>・・・など
■DTD HTML 4.01非推奨属性群（abc順）
<align> <border> <bgcolor> <background> <clear> <color> <face>
<height> <nowrap> <size> <text> <width> ・・・など
■DTD HTML 4.01非推奨属性の例外利用
（要素別属性指定の可否）
TABLE要素にborder属性を指定できますが、TABLE要素以外での指定は非推奨扱いです。
TABLE要素内の<tr> <th> <td>にheight属性とwidth属性の指定は非推奨扱いです。
TABLE要素にalign属性の指定は、非推奨ですが、
TABLE要素内の<tr> <th> <td> <col>にalign属性の指定は、例外として使用できます。
▼
スタイルシートの基本文型は、次のような構成になっています。
- スタイルシートの基本文型 -
▼
■当サイトBODY全体の外部スタイルシート設定
・・・フォントカラー >> フォント
body {
font-size:12px;color:#3F3F3F;
font-family:Verdana,suns serif;
}
■フォントカラー設定の中から aka の外部スタイルシート
・・・aka >> フォント
.aka {
color : #FF6699 ;
font-size :12px ;
font-family : 'ＭＳ Ｐゴシック', Verdana, sans-serif ;
font-weight : normal ;
padding : 0px ;
}
■インラインスタイルシートに設定したフォントカラー
・・・作例用フォントカラー >> フォント #00CCFF
▼
外部に設定したスタイルシートよりも、HTML文書内のタグ要素に、直接記述したインラインスタイルシートが優先されます。
下記の作例は、インラインスタイルシートに、フォント 色を指定し、更にCLASS属性を用い、外部スタイルシートに設定した aka のフォント 色も呼び出しています。
作例の場合、優先順位に従い、CLASS属性の指定が無視されています。
▼
未知の苦HTML解道 >> 未知の苦HTML解道
◇ソース表示
<SPAN STYLE="color : #00CCFF ; font-weight : bold ;
font-size : 18px ; font-family : Arial Black ;" CLASS="aka">未知の苦HTML解道</SPAN>
上記の作例は、フォントカラーが競合していることから、インラインスタイルシートのカラー指定を外すと、CLASS属性の指定が、有効になります。
▼
未知の苦HTML解道 >> 未知の苦HTML解道
◇ソース表示
<SPAN STYLE="font-weight : bold ; font-size : 18px ;
font-family : Arial Black ;" CLASS="aka">未知の苦HTML解道</SPAN>
▼
スタイルシート設定の優先順位>>筆頭は「インラインスタイルシート」
1.インライン スタイルシート ・・・Inline Stylesheet
HTML文書内のタグ要素に、STYLE属性を記述し、目的のスタイルと値を指定
▼
2.エンベッデイング スタイルシート ・・・Embedding Stylesheet
HTML文書<head>内に、STYLE要素を記述し、スタイルシートを設定
▼
3.リンキング スタイルシート・・・Linking Stylesheet
HTML文書<head>内に、LINK要素に関わる構文を記述し、外部スタイルシートの設定を呼び出す
◆ソース表示の表記方法・・・特殊文字の表記方法について
HTMLにおけるタグの開始は < 終了は > で書きますが、このようなHTMLの特殊文字をソース表示に書き表す場合、開始タグ < は、
< （キーワードによる指定）
又は
< （アスキーコードによる指定）
のように記述します。
◇キーワードによる指定に基づいた特殊文字の表記例
半角スペース →
不等号（アングルブラケット） < > → < <
アンパサンド & → &
コピーライト © → ©
▲上述枠内の赤文字部分の記述は & と、特殊文字先頭の & を外した後半部分を組み合わせて表記しています。
例えば商標 ™ をHTMLソースとして表示する場合→ ™
と書き表しますが、HTMLエディタでは &#153; と記述しています。
（上記の特殊文字に関する文章内容に誤りがありました。
訂正させて頂きます。・・・2006.03.31 管理人）
▼
未知の苦HTML解道
▼
◇ソース表示
<SPAN STYLE="font-weight : bold ; font-size : 18px ;
font-family : Arial Black ;">未知の苦HTML解道</SPAN>
▼
◇特殊文字をキーワード指定により書き表したソース表示
<SPAN STYLE="font-weight : bold ; font-size : 18px ;
font-family : Arial Black ;">未知の苦HTML解道</SPAN>
|
