ここをクリックすると、Web Teaching Network の HTML チュートリアルのコラムに戻ります。 CSS チュートリアルを表示するには、ここをクリックしてください。 上: マークアップ言語 – 合理化されたタグ。 第 10 章 CSS の適用 最初のパートでは、主にマークアップ構文の例に焦点を当て、デザインのために CSS をタグに適用する方法と、スタイルの詳細を指定する方法についても説明します。第 2 章では、CSS をタグに適用するいくつかの方法について説明します。 ここをクリックして「Script House HTML チュートリアル」コラムに戻ります。 CSS チュートリアルを表示するには、ここをクリックしてください。
上: マークアップ言語 - 合理化されたタグ。 第 10 章 CSS の適用
最初の部分では、主にマークアップ構文の例に焦点を当て、デザイン用のタグに CSS を適用する方法と、スタイルの詳細を指定する方法についても説明します。第 2 章では、CSS を適用するいくつかの方法について説明します。さらに、デバイスによって読み取られるマークアップ構造であるすべてのブラウザに影響を与えることなく、高度なテクニックを使用できるように、以前のバージョンのブラウザから CSS コンテンツを非表示にする方法についても説明します。
この章の最後の「技術拡張」単元では、スクリプトを書かずにフォント、色を切り替え、複数のテーマを作成する方法、つまりスタイルシートを置き換える方法を紹介します。 CSS をドキュメントに適用する方法
次に、CSS をドキュメントに適用する 4 つの方法を見てみましょう。状況に応じて、4 つの方法すべてが最適な選択肢となる可能性があります。ここでは、合法的な XHTML 1.0 Transitional 構文構造、
タグ、

これまた、このアプローチは埋め込みスタイル シートになっており、すべての CSS 宣言を (X)HTML ファイルに直接記述することができ、ページの に配置できます。

部分的な理解
方法 A を使用する主な欠点の 1 つは、一部の古いブラウザ (特に Internet Explorer 4.X と Netscape 4.X) が

メソッド付きB と同様に、@import を使用して、相対パス (上の例のように) または絶対パスを使用して外部ファイルから CSS 定義をインポートできます。シートは外部ドキュメントに配置され、単一のドキュメントを変更および更新すると Web サイト全体が変更されます。外部スタイル シートはブラウザによってキャッシュされるため、同じスタイル シートをインポートするすべてのページのダウンロード時間を節約できます。 。 かくれんぼ
方法 C を使用する主な利点は、Netscape バージョン 4 未満であることです。CSS 構文はレイアウトなどのデザインの詳細を処理するため、それを処理できる最新のブラウザーでそれらを表示できる一方で、古いブラウザーではこれらの構文を無視できます。
問題Netscape 4.x では、CSS をサポートできると考えられます。したがって、Netscape 4 を除いて、CSS をサポートできると考えられます。マークアップ コードは表示から分離されており、レイアウトの詳細やその他のスタイルを提供します。サポートされているブラウザでは、表示されたコンテンツの構造を簡単に読み取ることができますが、それらのブラウザで非表示になっている高度な CSS ルールは処理されません。 スタイルを開く、スタイルを閉じる
図 10-1 と 10-2 を見て、比較してください。これは、完全な CSS を使用し、CSS 表示効果をオフにした私の個人的な Web サイトです (これは、スタイルの表示効果に非常に近いはずです)。古いブラウザの効果）、CSS を使用しない構造は依然として非常に明白であり、レイアウトを表示するために必要な CSS を非表示にしないと、古いブラウザのユーザーは依然として簡単に読み取って使用することができます。読みにくい内容。

図 10-1 CSS を使用した私の個人 Web サイト

図 10-2 同じページ、古い CSS を削除ブラウザによって変更される可能性があります このように表示されます 方法 B と方法 C を組み合わせて複数のスタイル シートを適用する
場合によっては、すべてのレイアウト ルールを 1 つのドキュメントに入れてフォント設定を行うことができます。別のドキュメントを使用すると、大規模で複雑な設計の場合に多数のルールを簡単に維持できるようになります。 カメレオン効果
Fast Company 誌の Web サイトを作成する際、現在の雑誌の表紙のイメージに合わせて Web サイトの色を毎月変更したいと考えています。定期的な修正作業を簡素化するために、すべての色を一元化しました。関連する CSS ルールを 1 つのドキュメントにまとめ、毎月変更されない他のルールを別のドキュメントに追加します。
構成する他のルールを何百も追加することなく、毎月すべての色をカバーする方が簡単かつ迅速になります。デザイン 変更が必要なコンテンツをゆっくりと探します。このドキュメントを変更すると、Web サイト全体の色がすぐに変わります。 やり方
方法 B と方法 C を組み合わせて複数のスタイルシートを導入するには、ページの でメインの CSS ドキュメントを参照する方法です。メソッド B のデモ、styles.css へのリンク。
styles.css のコンテンツには、他の必要な CSS ファイルを導入するためのいくつかの @import ルールが含まれているだけです。
たとえば、3 つのスタイル シートを導入する場合、1 つはレイアウト用と、フォントの定義と色の定義用の 1 つを使用すると、styles.css の内容は次のようになります:

/*古いブラウザーはこれらのインポート ルールを解釈しません*/
@import url( "layout .css");
@import url("fonts.css");
@import url("colors.css");

このようにして、同じ URL をWeb サイト全体で使用される タグは、styles.css ファイルのみを参照します。このドキュメントは、新しいスタイル シートがこのドキュメントに追加される限り、引き続き他のスタイル シートをインポートできます。
これにより、CSS の更新と置換が非常に簡単になりました。たとえば、途中で CSS を 4 つのファイルに分割したい場合は、このドキュメントの @import ルールを変更するだけで済みます。すべての XHTML マークアップ ソース コードを変更する必要があります。 Lo-Fi スタイルと Hi-Fi スタイル
メソッド C の @import ルールを使用して古いブラウザーから CSS を非表示にする場合、CSS のカスケード効果を使用して古いブラウザーにメソッド A またはを提供するという別のトリックがあります。方法 B. Lo-Fi エフェクトは古いブラウザと最新のブラウザの両方でサポートされており、@import を使用して他のサポートされているブラウザに高度なエフェクトを提供します。
古いブラウザはサポートできるコンテンツのみを取得し、新しいブラウザはのみ取得します。ブラウザは、使用したいすべてのスタイルを取得します。
次に、この手法のコードがどのようなものかを見てみましょう:

"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

ここで、lofi.css にはリンクの色やフォント サイズなどの基本的な CSS ルールが含まれる必要がありますが、hifi.css にはレイアウト、位置、背景画像などの高度なルールが含まれます。
Lo- を同時に送信できます。サーバー側でスクリプトを作成したりブラウザのバージョンを識別したりする必要がなく、スタイルの Hi-Fi バージョンを使用できます。 順序は重要です
マークアップ ソース コードでの タグと

カスタム CSS が表示されます。
たとえば、main.css 内で、h1> タグに赤いセリフ フォントが使用されているとします。

h1 {
font-family: Georgia, serif;
color: red;
}
h2 {
font-family: Georgia, serif;
color: blue;
}

特定のページで、

タグのスタイルを変更したいだけです。

h1 {
font-family: Verdana, sans-serif;
color: orange;
}

このステートメントは、master.css のステートメントをオーバーライドします (custom.css がその後に導入されるため)。ページが master.css を最初にインポートする場合、custom.css が再度導入される場合。
の場合、

タグはオレンジ色の Verdana フォントを使用しますが、

は、custom.css によってオーバーライドされていないためです。 CSS の機能は、共通のスタイルを共有するための優れたツールであり、変更が必要なルールのみをオーバーライドできます。

方法 D: インライン スタイル

This is a Title

これは、私たちが見つけた 4 番目の CSS アプリケーション メソッドです。インライン スタイル、ほとんどすべてのラベルをスタイル設定できます。上記の例のように、CSS スタイル ルールをタグに直接適用できます。
インライン スタイルはカスケードの最下層であるため、 で宣言されたすべての外部スタイル宣言をオーバーライドします。 style> タグ内のルール
これはページ上のあらゆる場所にスタイルを追加する簡単な方法ですが、使用するには代償がかかります。 スタイルはタグに関連付けられています
ページのスタイルを作成するときにメソッド D に依存しすぎると、コンテンツとプレゼンテーションを分離できなくなり、戻って変更するときにソースを深く掘り下げる必要があります。
メソッド D を使用して、マークのソース コードを汚染するのと何ら変わりはありません。別の場所に置かれます。 慎重に使用してください
もちろん、実際の状況では、ページにスタイルを追加する必要があるが、外部ファイルにアクセスできない場合、または を変更できない場合に、インライン スタイルを使用する機会がある場合があります。 、またはスタイルを一時的に適用する場合、他のタグと共有することを意図していない場合にも使用されます。
たとえば、ウェブサイト上にチャリティーセールを告知するページがあった場合、そのページは後で削除されます。このページのスタイルに固有のタグのセットをデザインしたい場合は、これらのスタイル ルールを永続的なスタイル シートに追加するのではなく、タグに埋め込んでください。ただし、これらのスタイルはできないことに注意してください。簡単に変更したり、Web サイト全体で使用できるようにページをまたがったりできます。
                                                                        #p# 概要
マークアップ コンテンツに CSS を適用する 4 つの異なる方法を検討しましたが、それぞれの方法と、その長所と短所を確認してみましょう。
方法 A: スタイルは各ページの に配置する必要があり、多くのページは同じスタイル シートを共有できないため、ページを読み取るたびに再ダウンロードする必要があります。