CSS スタイル
期待される CSS スタイルシート効果をブラウザーに表示したい場合は、ブラウザーに CSS を正しく認(rèn)識させて呼び出す必要があります。ブラウザがスタイル シートを読み取るときは、テキスト形式で読み取る必要があります。CSS スタイル シートをページに挿入する 4 つの方法: 外部スタイル シートへのリンク、內(nèi)部スタイル シート、外観スタイル シートのインポート、および埋め込みスタイルです。
1. 外部スタイルシートへのリンク
外部スタイルシートへのリンクとは、スタイルシートをスタイルシートファイルとして保存し、<link> タグを使用してスタイルシートにリンクすることです。ページ上のこの <link> タグは、次のようにページの <head> に配置する必要があります:
… <link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
上記の例は、ブラウザが定義されたmystyle.css ファイルからのドキュメント形式のスタイル シート。 rel="stylesheet" は、ページ內(nèi)でこの外部スタイル シートを使用することを指します。 type="text/css" は、ファイルの種類がスタイル シート テキストであることを意味します。 href="mystyle.css" がファイルの場所です。 「メディア」では、メディアの種類を選択します。これらのメディアには、スクリーン、紙、音聲合成裝置、點字読み取り裝置などが含まれます。
注
スタイル シート ファイルは、任意のテキスト エディタ (例: メモ帳) で開いて編集できます。通常、スタイル シート ファイルの拡張子は .css です。コンテンツは定義されたスタイル シートであり、HTML タグは含まれません。mystyle.css ファイルのコンテンツは次のとおりです:hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")} /*水平線の色を素樸な黃色に定義します。段落の左側(cè)の余白は 20 ピクセルです。ページの背景畫像は、images ディレクトリ內(nèi)の back40.gif ファイルです */
2. 內(nèi)部スタイル シート
內(nèi)部スタイル シートは、スタイル シートを <head> 領(lǐng)域に配置します。これらの定義されたスタイルは、<style> タグでページに適用されます。<style> タグの使用法は次の例で確認(rèn)できます。頭>
……
<style type="text/css">
hr {color: シエナ}
p {margin-left: 20px}
body {background-image: url("images/back40.gif") }
</style>
</head>
3. インポートする外部スタイルシートのインポート外部スタイルシートの場合は @ を使用しますインポートする場合は、次の例を參照してください:
...<!--
@import “mystyle .css”他のスタイルシートの宣言 --> </style> </head>
注: 外部スタイル シートのインポートは、スタイル シートの先頭、他の內(nèi)部スタイル シートの上に行う必要があります。
4. インラインスタイル
このようにして、要素のスタイルを個別に簡単に定義できます。インライン スタイルの使用は、スタイル パラメーターを HTML タグに直接追加することです。 style パラメータの內(nèi)容は、次の例のように CSS 屬性と値です。
< ;/p>
スタイル パラメータの後の引用符內(nèi)の內(nèi)容は次のとおりです。スタイルシートの中括弧內(nèi)の內(nèi)容に相當(dāng)します。
注: style パラメーターは、BASEFONT、PARAM、および SCRIPT を除く、BODY 內(nèi)の任意の要素 (BODY 自體を含む) に適用できます。
複數(shù)のスタイルシートのオーバーレイ CSSスタイルシートは、同じセレクター上にある場合のこれらのスタイルシートの挿入方法のオーバーレイについて説明します。複數(shù)の異なるスタイル シートを使用する場合、この屬性値は複數(shù)のスタイル シートに重ね合わされます。競合がある場合は、最後に定義されたスタイル シートが優(yōu)先されます。たとえば、最初に、h3 セレクターの color、text-align、および font-size 屬性を定義する外部スタイル シートにリンクします。
{
color: red;
text-align: left;
font-size: 8pt;
/*タイトル 3 のテキストの色は、サイズ 8*/
その後、h3 セレクターの text-align 屬性と font-size 屬性も內(nèi)部スタイル シートで定義されます。 : 20pt; } /*タイトル 3 のテキストは右揃えです。サイズは 20 ポイントのフォントです*/
このページのオーバーレイ スタイルは次のとおりです:
text-align : right;
/*テキストの色は右揃えです*/
フォントの色はフォントサイズとフォントサイズの両方が定義されている場合は、後の定義が優(yōu)先され、內(nèi)部スタイルシートに従います。
重なり順
同じHTML要素が複數(shù)のスタイルで定義されている場合、どのスタイルが使用されますか?
一般に、すべてのスタイルは、次のルールに従って新しい仮想スタイル シートにカスケードされ、番號 4 が最も高い優(yōu)先順位を持ちます。
1. ブラウザのデフォルト設(shè)定2. 外部スタイルシート (<head> タグ內(nèi))
4. インラインリンクスタイル(HTML 要素內(nèi)で) の優(yōu)先順位が最も高くなります。つまり、タグ、外部スタイル シート、またはブラウザー (デフォルト値) のスタイル宣言よりも優(yōu)先されます。
