CSSチュートリアル (4) WebページにCSSを挿入する方法

最初の 2 章では CSS の構文について学びましたが、その効果をブラウザに表示したい場合は、ブラウザにそれを認識させて呼び出す必要があります。ブラウザがスタイル シートを読み取るときは、テキスト形式で読み取る必要があります。ページにスタイル シートを挿入する 4 つの方法: 外部スタイル シートへのリンク、内部スタイル シート、外部スタイル シートのインポート、および埋め込みスタイルです。

外部スタイルシートへのリンク

外部スタイルシートへのリンクとは、スタイルシートをスタイルシートファイルとして保存し、ページ上の?lt;link> タグでこのスタイルシートファイルにリンクすることです。 タグを配置する必要があります。次のように、ページの 領域に移動します:

…

…
< ;/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 ピクセルです。ページの背景画像は back40.gif ファイルです。画像ディレクトリ内)

内部スタイルシート

内部スタイルシートは、ページの?lt;head>領域にスタイルシートを配置すると、これらの定義されたスタイルがページに適用されます。次の例からわかるように、
...


注: 一部の以前のバージョンのブラウザはスタイル タグを認識できません。つまり、以前のバージョンのブラウザではスタイル タグのコンテンツが無視され、スタイル タグのコンテンツがテキストとしてページに直接表示されます。この状況を回避するために、HTML コメント () を使用して、コンテンツを表示せずに非表示にします:

...

...


外部スタイルシートのインポート

外部スタイルシートのインポートとは、内部スタイルシートの
...

この例では、 @import "mystyle.css" は mystyle.css スタイル シートのパスに注意してください。外部スタイルシートを使用する場合は、この方法はスタイル シートにリンクする方法と非常によく似ていますが、外部スタイル シートをインポートする入力方法にはさらに利点があります。基本的に、これは内部スタイル シートに保存されるのと同じです。
注: 外部スタイル シートのインポートは、スタイル シートの先頭、他の内部スタイル シートの上に行う必要があります。

インラインスタイル

インラインスタイルは HTML タグ内に混在しており、要素のスタイルを個別に簡単に定義できます。インライン スタイルの使用は、スタイル パラメーターを HTML タグに直接追加することです。 style パラメーターの内容は、次の例に示すように、CSS プロパティと値です:

これは段落です

(この段落の色はカーキで、左余白は20ピクセルです)
スタイルパラメータの後の引用符内の内容は、スタイルシートの中括弧内の内容に相当します。
注: style パラメーターは、BASEFONT、PARAM、SCRIPT を除く、BODY 内の任意の要素 (BODY コンテンツを含む) に適用できます。

複数のスタイルシートの重ね合わせ

前の章では、スタイルシートの重ね合わせについて説明しましたが、同じセレクターで複数の異なるスタイルが使用されている場合、テーブルが使用されている場合のこれらのスタイルシートの重ね合わせについて説明します。 、この属性値は複数のスタイル シートに重ね合わされます。競合が発生した場合は、最後に定義されたものが優先されます。たとえば、最初に、h3 セレクターの color、text-align、および font-size プロパティを定義する外部スタイルシートにリンクします:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
(タイトル 3 のテキストの色は赤、左揃え、テキスト サイズはサイズ 8)
その後、内部にもスタイルシート h3 セレクターの text-align 属性と font-size 属性は次のように定義されています:
h3
{
text-align: right;
font-size: 20pt
}
(タイトル 3 のテキストは右揃えです。は 20 ポイントのフォントです)
次に、このページの重ね合わせスタイルは次のようになります:
color: red;
text-align: right;
font-size: 20pt
(テキストの色は赤、右揃え、サイズは20点)
フォントの色は外部スタイルから決定 テーブルは保持され、配置とフォントサイズの両方が定義されている場合、最後の定義が内部スタイルシートより優先されます。
注: 後で定義される優先順位に従って、内部スタイル シートはインポートされた外部スタイル シートよりも高くなります。リンクされた外部スタイル シートと内部スタイル シートの間では、最後に定義された優先順位が高くなります。

以上がCSSチュートリアル (4) WebページにCSSを挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。