マークアップ言語 - 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 を使用して他のサポートされているブラウザに高度なエフェクトを提供します。
古いブラウザはサポートできるコンテンツのみを取得し、新しいブラウザはのみ取得します。ブラウザは、使用したいすべてのスタイルを取得します。
次に、この手法のコードがどのようなものかを見てみましょう:

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

まだカスケードしています。
注意しなければならない重要な点があります。それは、CSS のカスケード効果が依然として存在するということです。つまり、置き換えられたスタイル シートは、共通のルールを上書きします。このようなルールは、default.css でレイアウトと位置を指定します。プロキシ スタイル シートでこれらのルールが繰り返されない場合、これらのルールは引き続き有効になります。 置換スタイル シートを機能させる
これで置換スタイル シートの準備が整いました。残念ながら、置換スタイル シートが組み込まれているブラウザはほとんどありません。Mozilla はその 1 つです。
この機能を使用すると、置換スタイル シートがある場合、ブラウザ ウィンドウの左下隅に小さなアイコンが表示され、このアイコンをクリックして [置換スタイル シート] メニューから起動できます。 3).
図 10-3 Mozilla の置換スタイル シート リスト。
より多くのブラウザ メーカーが同様の機能を実装できることを願っていますが、それまでは、スタイル シートを切り替えて置換する別の方法があります。 Cookie の魔法を使用してユーザーの選択を保存します。
Paul Sowden は、「代替スタイル: 代替スタイル シートの使用」(http://www.php.cn/) というタイトルの珍しいチュートリアルを A List Apart に書きました。この記事では、ブラウザで JavaScript を使用して置換スタイル シートを開始および終了する方法を説明しています。
切り替えアクションはページ上のスーパーによって制御されます。リンクが完了すると、スタイル シートに基づいて任意のスタイル シートを選択できます。この JavaScript は、ユーザーの最後の選択を記録するために Cookie を設定します。そのため、ユーザーが次回 Web サイトを閲覧するときに、デフォルトのスタイル シートに加えて、適切なスタイル シートも有効になります。 > たとえば、このコンテンツを書いているとき、私の個人的な Web サイトでは 3 つの異なるカラー マッチング方法が提供されています。それぞれのカラー マッチングは、アイコンをクリックすることで Paul Sowden のスクリプト作品を呼び出すことができます。最初のアイコンはデフォルト値であり、2 番目と 3 番目のアイコンはデフォルト値です。アイコンは、異なるカラー マッチング方法を提供する 2 つの置換スタイル シートです (図 10-4)。

図 10-4 アイコンをクリックして置換スタイル シートを開始します。 ユーザー側で JavaScript が実行されるため、切り替えアクションはページ全体を再度読み込まなくてもすぐに有効になり、切り替え速度は非常に高速です。
完全な JavaScript プログラムは、Paul Sowden の A List Apart にあります。記事をダウンロードしてください (http://www. php.cn/)。 フォント サイズを調整できるだけでなく、
カスケード効果を試したり、置換スタイル シートに特定のルールを追加したり、デフォルト ルールの一部をオーバーライドしたりすることで、Web サイト上で非常に興味深いインタラクティブな効果を簡単に作成できます。スクリプトといくつかの CSS ルールは、帯域幅が狭い場合でも大きな影響を与える可能性があります。 DOM の優しさ
スタイル シートをスクリプト アクセスで置き換えることを可能にする別の W3C 標準に感謝しなければなりません。いわゆる DOM (Document Object Model) は、実際には... さて、W3C の How to を見てみましょう。説明:
ドキュメント オブジェクト モデルは、プラットフォームや言語に依存しないインターフェイスであり、主にプログラムやスクリプトがファイルのコンテンツ、構造、スタイルに動的にアクセスして変更することを可能にし、ファイルや処理されたファイルをさらに処理することもできます。表示されたページでは、これは、インターネット上の W3C およびその他の DOM リソースの概念です。おなじみですね? これは、まさにスタイル切り替えスクリプトが行うことです。W3C 標準に準拠していれば、これを簡単に実行できます。これにより、開発者は、次のようなタグを使用できます。確立された方法でマークアップ ソース コードにアクセスすることで、標準に準拠したマークアップ ソース コードの作成に努めれば、将来的には標準 DOM に準拠したスクリプトの作成が容易になり、これらのページを閲覧するユーザー エクスペリエンスが向上します。
スタイル切り替えスクリプト DOM のスクリプトの作成はほんの表面をなぞっただけですが、これは標準に準拠して Web ページを作成することで得られる大きな利点の代表的な例です。 結論
この章では、CSS をタグ、ドキュメント、Web サイト全体に適用するいくつかの方法について説明し、古いブラウザーから CSS を非表示にする方法と、複数のスタイル シートを参照する方法についても説明しました。スクリプトを作成したり、サーバー側でブラウザの種類を検出したりする必要がなく、さまざまなサポート レベルのブラウザに対応した Hi-Fi スタイル シート
最後に、DOM を使用してスタイル シートを置き換える方法を学びました。JavaScript を作成すると、ユーザーは動的に次の利点を得ることができます。スタイル シートを切り替えて、ユーザーがフォント サイズ、色、さらにはレイアウトを選択できるようにします。
最後に、これらのヒントがスタイルのデザインをスムーズに始めるのに役立つことを願っています。