期待される CSS スタイルシート効果をブラウザーに表示したい場合は、ブラウザーに CSS を正しく認識させて呼び出す必要があります。ブラウザがスタイル シートを読み取るときは、テキスト形式で読み取る必要があります。CSS スタイル シートをページに挿入する 4 つの方法: 外部スタイル シートへのリンク、内部スタイル シート、外観スタイル シートのインポート、および埋め込みスタイルです。
1. 外部スタイルシートへのリンク
外部スタイルシートへのリンクとは、スタイルシートをスタイルシートファイルとして保存し、<link> タグを使用してスタイルシートにリンクすることです。ページ上のこの <link> タグは、次のようにページの <head> に配置する必要があります:
… <link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
</head>
上記の例は、ブラウザが定義されたmystyle.css ファイルからのドキュメント形式のスタイル シート。 rel="stylesheet" は、ページ内でこの外部スタイル シートを使用することを指します。 type="text/css" は、ファイルの種類がスタイル シート テキストであることを意味します。 href="mystyle.css" がファイルの場所です。 「メディア」では、メディアの種類を選択します。これらのメディアには、スクリーン、紙、音声合成装置、点字読み取り装置などが含まれます。
外部スタイルシートファイルは複数のページに適用できます。このスタイル シート ファイルを変更すると、それに応じてすべてのページのスタイルが変更されます。同じスタイルのページを大量に作成する場合に大変便利で、複製の手間が軽減されるだけでなく、後々の修正や編集が容易になり、閲覧時に何度もコードをダウンロードする手間も軽減されます。
注
スタイル シート ファイルは、任意のテキスト エディタ (例: メモ帳) で開いて編集できます。通常、スタイル シート ファイルの拡張子は .css です。コンテンツは定義されたスタイル シートであり、HTML タグは含まれません。mystyle.css ファイルのコンテンツは次のとおりです:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")} /*水平線の色を素朴な黄色に定義します。段落の左側の余白は 20 ピクセルです。ページの背景画像は、images ディレクトリ内の back40.gif ファイルです */
2. 内部スタイル シート
内部スタイル シートは、スタイル シートを <head> 領域に配置します。これらの定義されたスタイルは、<style> タグでページに適用されます。<style> タグの使用法は次の例で確認できます。頭>
……
<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>
例 @import "mystyle .css" は、mystyle.css スタイル シートをインポートすることを意味します。外部スタイルシートを使用する場合は、そのパスに注意してください。この方法はスタイル シートにリンクする方法と非常によく似ていますが、外部スタイル シートをインポートする入力方法にはさらに利点があります。基本的に、これは内部スタイル シートに保存されるのと同じです。
注: 外部スタイル シートのインポートは、スタイル シートの先頭、他の内部スタイル シートの上に行う必要があります。
4. インラインスタイル
このようにして、要素のスタイルを個別に簡単に定義できます。インライン スタイルの使用は、スタイル パラメーターを HTML タグに直接追加することです。 style パラメータの内容は、次の例のように CSS 属性と値です。
<p style="color: sienna;margin-left: 20px;">段落
< ;/p>
<!--この段落の色は素朴な黄色で、左余白は 20 ピクセルです-->
スタイル パラメータの後の引用符内の内容は次のとおりです。スタイルシートの中括弧内の内容に相当します。
注: style パラメーターは、BASEFONT、PARAM、および SCRIPT を除く、BODY 内の任意の要素 (BODY 自体を含む) に適用できます。
複数のスタイルシートのオーバーレイ CSSスタイルシートは、同じセレクター上にある場合のこれらのスタイルシートの挿入方法のオーバーレイについて説明します。複数の異なるスタイル シートを使用する場合、この属性値は複数のスタイル シートに重ね合わされます。競合がある場合は、最後に定義されたスタイル シートが優先されます。たとえば、最初に、h3 セレクターの color、text-align、および font-size 属性を定義する外部スタイル シートにリンクします。
{
color: red;
text-align: left;
font-size: 8pt;
/*タイトル 3 のテキストの色は、サイズ 8*/
その後、h3 セレクターの text-align 属性と font-size 属性も内部スタイル シートで定義されます。 : 20pt; } /*タイトル 3 のテキストは右揃えです。サイズは 20 ポイントのフォントです*/
このページのオーバーレイ スタイルは次のとおりです:
text-align : right;
font-size: 20pt;
/*テキストの色は右揃えです*/
フォントの色はフォントサイズとフォントサイズの両方が定義されている場合は、後の定義が優先され、内部スタイルシートに従います。
重なり順
同じHTML要素が複数のスタイルで定義されている場合、どのスタイルが使用されますか?
一般に、すべてのスタイルは、次のルールに従って新しい仮想スタイル シートにカスケードされ、番号 4 が最も高い優先順位を持ちます。
1. ブラウザのデフォルト設定2. 外部スタイルシート (<head> タグ内)
4. インラインリンクスタイル(HTML 要素内で) の優先順位が最も高くなります。つまり、タグ、外部スタイル シート、またはブラウザー (デフォルト値) のスタイル宣言よりも優先されます。
次のセクション
