<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en lang="en>
<head>
<meta http-equiv="content-type" content="text/html; charset="utf-8" />
<title>Applying CSS</title>
<style type="text/css">
・・・CSSの記述・・・
</style>
</head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000123/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en lang="en>
<head>
<meta http-equiv="content-type" content=text/html; charset=utf-8" />
<title>Applying CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
※href属性で指示するファイルの位置は、相対パスまたは完全な「http://」を用いた絶対パスを使用できる。
<linktgt;は内容モデルを持たない、空要素なので、末尾に「/」を付けることが必要。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<style type="text/css">
@import "styles.css";
</style>
</head>
@importルールを使用すると、相対パスまたは絶対パスで外部ドキュメントからCSSをインポートすることができる。
１つのドキュメントに複数のスタイルシートをインポートするのが便利な場合。
例：Webサイトのイメージカラーを毎月変更したいとき⇒定期的な変更を簡単にするために、カラー関連を固定のものとは別のスタイルシートにする。
ドキュメントの<head>にマスタCSSファイルを参照する<link>要素を使用する。（方法Bにより、styles.cssにリンク） styles.cssの内容には、必要ないくつかのCSSファイルをインポートする@importルールが含まれている。
例：3つのスタイルシート（レイアウト用、フォント用、カラー用）をインポートしたい
/* hidden from old-school brouwers */
@import url("layout.css");
@import url("fonts.css");
@import url("colors.css");
<link>要素はstyles.cssファイルのみを参照する。このファイルだけで複数のスタイルシートが@importルールによりインポートされるので、サイト全体に影響を及ぼす新しいスタイルシートはこのファイル（styles.css）に追加することができる。
このことにより、更新とCSSファイルの入れ替えが容易になる。CSSファイルを追加または分割したくなった場合でも、(X)HTMLマークアップに手を加えずにこのファイルを変更するだけでよい。
@importルールを使ってCSSを古いブラウザから隠す場合は、CSSの中でカスケードエフェクトを使用して新旧のブラウザで認識できるローファイスタイルを提供する。方法Aまたは方法Bにより@importを使用し、それらをサポートするブラウザに高度なスタイルを提供する。
古いブラウザはサポートできるものだけを取得するが、モダンブラウザは意図されたスタイルをすべて受け取る。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<link rel="stylesheet" type="text/css" href"lofi.css" />
<style type="text/css">
@import "hifi.css";
</style>
</head>
lofi.cssはリンクカラーやフォントサイズなど基本的なCSSルールを含み、hifi.cssはレイアウト、位置決め、バックグラウンドなどの高度なルールを含む。
スクリプトを作成したり、サーバサイドでブラウザの種類を識別しなくても、ローファイおよびファイハイバージョンのデザインを送信できる。
★<link>および<style>要素を配置した順序は重要である。CSSのカスケード機能により、ルールの記載された場所、つまりルールが登場する順序を参照し、適用する上での優先順位が決められる。
たとえばモダンブラウザは、link要素と@importルールによる両方の方法をサポートしているので、両方のスタイルシートを受け取り、それぞれのスタイルをすべて適用する。hifi.cssのスタイルは、lofi.cssで同じ要素を参照するスタイルを上書きする。マークアップにおいて、hifi.cssがlofi.cssより後にあるからである。
古いブラウザは＠importルールに記載されるhifi.cssを無視するため、lofi.cssにあるルールのみを適用する。
サイト全体でレイアウト、位置決め、フォント、カラーなどに関するひとつの外部CSSファイルを共有する。サイトの各ページで@importによりファイルをインポートし、古いブラウザから隠す。 サイト上のあるページでレイアウトと位置決めを共有しているけれど、サイトの他ページとは異なるカスタムカラーまたはカスタムフォントが必要である場合、メインCSSファイルをインポートできるだけでなく、その直後の<style>タグでそのページをカスタマイズするスタイル定義を含む2番目のCSSファイルもインポートできる。2番目のCSSファイルのスタイル定義が湯煎し、最初のCSSファイルにある同じ要素を参照するスタイルを上書きする。
例：master.cssにはサイト全体で構造やフォントなどに使用するCSSが含まれており、custom.cssは特定のページにのみインポートされていくつかの要素を上書きする。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset="utf-8" />
<title>Applying CSS</title>
<style type="text/css">
@import "master.css";
@import "custom.css";
</style>
</head>
custom.cssはマークアップの順序で2番目になるので、同じ要素に関する宣言はmaster.cssにあるものを上書きする。
h1 {
font-family: Georgia, serif;
color: red
}
h2 {
font-family: Georgia, serif;
color: blue;
}
h1 {
font-family: Verdana, sans-serif;
color: orange;
}
costom.cssが後にインポートされるため、master.cssを上書きする。master.cssにだけ存在する<h2>はmaster.cssにある宣言を維持したまま、<h1>要素のみをcustom.cssで上書きするため、<h1>はオレンジ色のVerdanaフォント、<h2>は青のGeorgiaフォントとなる。 CSSカスケード機能を使用すると、共通のスタイルを共有するのに便利で、必要があればいつでもカスタマイズに必要な宣言だけを上書きできる。
<h1 style="font-family: Georgia, sefir; color: orange;">This is a Title</h1>
ほとんどの要素に追加することができ、CSSルールを要素レベルに直接適用できる。
カスケード機能において最も適用対象と近接しているので優先順位が最高位となり、外部スタイルシートで宣言されたスタイル、またはドキュメントの<head>にある<style&g;要素に記述されているルールを上書きする。
※スタイルの適用対象との近接具合において近ければ近いほど優先順位が高い。（!import規則を除く）
・同じマークアップに対する複数のスタイルを適用
・選択するスタイルによってユーザがスタイルをコントロールできるようにする（大きなテキストサイズや異なるカラーテーマを選択）
<link>要素のある複数のスタイルシートを参照することで可能。rel属性に"alternate stylesheet"を追加
<head>
<meta http-equiv="content-type" content="text/html; charset=urf-8" />
<title>Applying CSS</title>
<link rel="stylesheet" type="text/css" href="default.css" tytle="default" />
<link rel="alternate stylesheet" type="text/css" href="largetext.css" title="large" /> ・・・①
<link rel="alternate stylesheet" type="text/css" href="largertext.css" title="larger" /> ・・・②
</head>
①と②の<link>要素にはrel属性の"alternate stylesheet"値のほかに、title属性を追加し、各スタイルシートを後で選択できるように命名している。
"default"スタイルシートは常に適用した状態でブラウザによって有効化されている。
large.cssとlarger.cssはダウンロードされるが、他の手段で有効にしない限り適用されない。
rel属性値に"alternate stylesheet"値が存在するために、ページがロードされてもデフォルトでは代替スタイルシートは「オン」にならない。
※古いブラウザから代替スタイルシートを隠したい場合にも、@importメソッドを使用しなくてもよい。なぜなら、Netscape 4.0などの古いブラウザはrel属性の"alternate stylesheet"値をサポートしていないため、これらのスタイルは適用されない。
ページ上のフォントサイズを拡大するオプションをユーザに与えたい場合は、それぞれの代替スタイルシートにおいて、より大きなサイズを指定する。その代替スタイルシートが有効になると、default.cssの指定するルールを上書きする。
body {
font-size: 12px;
}
body {
font-size: 16px;
}
body {
font-size: 20px;
}
有効化されると、large.cssおよびlarger.cssスタイルシートはデフォルトルールを上書きし、ページのフォントサイズを大きくする。
★CSSのカスケード機能は適用されており、代替スタイルシートを有効化しても共通のルールだけが上書きされる。default.cssで指定したレイアウトや位置決めなどのサイト全体に関するルールを代替スタイルシートで繰り返さなくても、それらのルールは適用されたままである。
・一部のブラウザは代替スタイルシートを選択する機能を持っている。
Mozilla、Netscape6以降、Opera7以降、Mozilla Suite、Mozilla Firefox・・・
・切り替えがページ上のハイパーリンクによって処理され、title属性によってスタイルシートのいずれかに効率的に切り替えられる。JavaScripがcookieを保存することでユーザによる前回の選択を記憶しており、ユーザが次にそのページにアクセスするとデフォルトのスタイルシートに加えて前回選択した代替スタイルが有効化される。
（アイコンを並べて、選択－オン、オフ－するなど）