マークアップ言語 - Web ページアプリケーション用 CSS スタイル_HTML/Xhtml_Web ページ制作

ここをクリックすると、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 構文構造、
タグ、

を使用します。 メソッド A:

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

type 属性に指定された text/css は、使用するスタイル言語をブラウザが確実に理解できるようにするものであり、省略できないブラウザからこれらのコンテンツを隠すために W3C が推奨する CDATA アノテーション構文も使用します。スタイル ルールを処理します (http://www.php.cn/)。

部分的な理解
方法 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: スタイルは各ページの に配置する必要があり、多くのページは同じスタイル シートを共有できないため、ページを読み取るたびに再ダウンロードする必要があります。