Loose-Info.com

Last Update 2019/12/25


TOP - HTML(HyperText Markup Language) - <STYLE>

・タグの機能
ドキュメントのスタイル情報(スタイルシート)を定義します。


・構成
内容モデル宣言概要
宣言内容 : CDATA(スタイルシートの文字データ)

タグの省略
開始 → 不可
終了 → 不可

DTD(注1)での記述

STYLE要素宣言
<!ELEMENT STYLE - - %StyleSheet -- style info -->

StyleSheet(引数実体参照) の実体宣言
<!ENTITY % StyleSheet "CDATA" -- style sheet data -->


・属性
lang  : 言語コード
dir   : ブラウザが表示するテキストの方向

type
属性機能 : タグ内に入っているスタイル言語のタイプ
省略時値 : REQUIRED

解説
カスケーディングスタイルシート(CSS)は text/css を使用します。

media
属性機能 : ドキュメントを表示するメディアの種類
省略時値 : IMPLIED

title
属性機能 : わかり易くするためのタイトル
省略時値 : IMPLIED

DTD(注1)での記述

STYLE要素の属性定義
<!ATTLIST STYLE %i18n; -- lang, dir, for use with title -- type %ContentType; #REQUIRED -- content type of style language -- media %MediaDesc; #IMPLIED -- designed for use with these media -- title %Text; #IMPLIED -- advisory title -- >

ContentType(引数実体参照) の実体宣言
<!ENTITY % ContentType "CDATA" -- media type, as per [RFC2045] -->

MediaDesc(引数実体参照) の実体宣言
<!ENTITY % MediaDesc "CDATA" -- single or comma-separated list of media descriptors -->

Text(引数実体参照) の実体宣言
<!ENTITY % Text "CDATA">


・サンプルコード
カスケーディングスタイルシートにより、フォントを指定します。
(sans-serif, 12px)
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>styleテスト</TITLE> <STYLE type="text/css"> <!-- body { font-family: sans-serif; font-size: 12px } --> </STYLE> </HEAD> <BODY> テスト </BODY> </HTML>

注1)
DTD関連の記述はhttp://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd より引用しています(着色部)。
上記のDTDが最新のものとは限りません。
最新版はhttp://www.w3.org/TR/html4/strict.dtdを確認してください。