link//スタイル・シート

Edit New

link//スタイル・シート

[1] HTML で外部スタイル・シートを使用するときには、 link 要素型の要素を使用します。

[2] 仕様書:

[3] スタイル・シートにリンクする link 要素の属性は、次のようにします。 HTML 4, 14.3.2

[9] 優先スタイルを指定する link 要素が複数個あるときは、 文書順最初のものが有効です。 HTML 4, 14.3.2

[4] UA は、利用者が代替スタイルの一覧を見て選ぶことができる方法を提供するべきです。 選択肢の名前としては title 属性値を推奨します。HTML 4, 14.3.2

他との関係

[8] 著者は優先スタイルを指定するために Default-Style 欄を使うことができます。 HTML 4, 14.3.2

Default-Style による指定は link による指定より優先されます。 HTML 4, 14.3.2

[10] 著者は段階 (cascade) を定義するために link と style を任意個使用できます。 すべてのスタイル言語が段階付け (cascading) に対応しているわけではありませんが、 CSS のような対応している言語なら文書順に段階付けされます。 HTML 4, 14.4

対応していなかったらどうなのか HTML 4 仕様書には言及がありません。 スタイル言語依存でしょうか。 (というか HTML 側ではどうしようもないですね。)

異なるスタイル言語の混合の処理は未規定です。 著者は異なるスタイル言語を混合させるべきではありません。 HTML 4, 14.3.2

例

[5] 持続スタイル・シートの例 HTML 4, 14.3.2

<LINK href="mystyle.css" rel="stylesheet" type="text/css">

[6] 優先スタイル・シートの例 HTML 4, 14.3.2

<LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">

[7] 代替スタイル・シートの例 HTML 4, 14.3.2

<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">

[11] 代替スタイル・シート指定群の例 HTML 4, 14.4

<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<LINK rel="stylesheet" href="common.css" type="text/css">

この例では、利用者が compact スタイルを選択した時には small-base.css と small-extras.css が、 big print スタイルを選択した時には bigprint.css が適用されます。いずれの場合も、それに加えて common.css が持続スタイルとして適用され続けます。

段階は small-base.css → small-extras.css → bigprint.css → common.css の順になります。

[12] link と style を両方含む例 HTML 4, 14.4

<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
    p.special { color: rgb(230, 100, 180) }
</STYLE>

この例では2つの外部持続スタイル・シートと1つの内部スタイル・シートが (利用者が無効にしない限り) 常に適用されます。段階順は corporate.css → techreport.css → style になります。

メモ

Updated: