HTMLファイルへの style sheet の導入には、今まで見てきた三つの方法があります。
style
属性の属性値としてスタイル宣言を記述(インライン・スタイル)
head
要素内に style
要素として記述
<link rel="stylesheet" type="text/css" href="URL">
で参照
実際には、これら三つを組み合わせることになるでしょう;
link
要素で読み込み、
head
要素内に style
要素として記述。
style
属性として記述します。
この時、 Cascade 処理の優先順位は、外部スタイル・シートよりも、 head
要素内の style
要素内の宣言の方が高くなり、更に、 style
要素よりも style
属性の方が優先順位は高くなります。
@import
規則スタイルが複雑化すると、そのコンポーネント化(部品化)が記述/管理の労力の上で有効になります。これは、複数の外部スタイルシートの組込みで実現されます。HTML 側で link
要素を用いて複数の「外部スタイルシート」を用いても良いのですが、CSS でも @import
規則を用いて読み込めます。
あらゆる @import
規則は、スタイルシート内の如何なるスタイル宣言よりも先行せねばなりません。
@import "subs.css"; h1 { color: blue } @import "list.css";
この時、二つ目の @import
規則は個別のスタイル宣言よりも後に記述されており、不正であり無視されます。これは style
要素でも外部スタイルシートでも同様です。
@import
規則は style
要素内または外部スタイルシートの冒頭に書かれなくてはなりません。
@import
とメディアタイプ外部スタイルシートの項で、当該スタイルシートを適用するメディアを指定する方法を紹介しました。 @import
規則でも、読み込んだスタイルシートを適用させるメディアを指定することが出来ます。
@import url("loudvoice.css") aural;
この例では、スタイルシート loudvoice.css
を、音声合成機器(スピーチシンセサイザー)だけが読み込んで、文書に適用するように求めています。
詳細は「メディア」を参照ください。
@import
規則を利用した例<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> ...省略... <link rel=stylesheet type="text/css" href="http://style.com/cool.css"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- @import url(http://www.htmlhelp.com/atomic.css); h1 { color: blue } --> </style> </head> <body> <h1>headline is blue</h1> <p style="color: green">while the paragraph is green.</p> </body> </html>
<meta http-equiv="Content-Style-Type" content="text/css">
は、この文書内で用いるスタイル・シートが、CSSであることの宣言。インライン・スタイルで CSS を使う文書には必ず入れて下さい。
@import
の優先順位@import url(URL);
は、外部スタイルシートの参照と云うよりも、スタイル宣言の一部です。インポートされたスタイルシートは自動的に他のスタイルシートに組み込まれることになります。 上の例の場合、優先順位は次のようになります:
cool.css (外部スタイルシート) < atomic.css (@import 規則) < head 要素内の style 要素 < 開始タグ中での style 属性
文書間で共有される外部スタイルシートは特定文書内の style
要素に上書きされ、文書内の要素間に共有される style
要素は特定要素内の style
属性に上書きされます。この順序の中に、 @import
声明で導入されるスタイルシートが割り込みます。
@import
規則は、外部スタイル・シートの中に記述して構いませんが、必ずファイルの冒頭に無ければなりません。スタイル宣言よりも後ろの行に記述すると無視されなければなりませんが、ブラウザ (UA) によって、サポートのばらつきがあります。