wulin.com HTMLチュートリアル列に戻るには、ここをクリックしてください。 CSSチュートリアルを閲覧したい場合は、ここをクリックしてください。
上：マークアップ言語 - ライトタグ。第10章CSSを適用します
最初の部分では、主な焦点はTag Syntaxの例にあります。また、設計のためにタグにCSSを適用し、スタイルの詳細を指定する方法についても検討します。第2章では、ドキュメント、ウェブサイト、または単一のタグにCSSを適用するいくつかの方法について説明します。さらに、以前のバージョンのブラウザの以前のバージョンからCSSコンテンツを非表示にする方法についても説明します。これにより、すべてのブラウザやデバイスで読み取ることができるタグ構造に影響を与えることなく、高度なテクニックを使用できます。
この章の最後のチップエクステンションユニットでは、スタイルシートを置き換えることなく、フォント、色、色を作成し、複数のテーマを作成する練習を紹介します。ファイルにCSSを適用する方法は？
次に、CSSをドキュメントに適用する4つの異なる方法について説明します。各方法には、独自の利点と短所があります。状況によっては、4つの方法すべてが最良の選択かもしれません。ここに示されている各方法では、Legal XHTML 1.0トランジショナル構文構造、<HTML>タグ、および<head>構成を使用しています。
方法Aから始めましょう。方法A：<style>タグ
<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http：//www.w3.org/1999/xhtml xml：lang = en lang = en>
<head>
<メタhttp-equiv = content-type content = text/html; charset = utf-8 />
<title> cssの適用</title>
<style type = text/css> <！[cdata [... CSSステートメントはここに記載されています...
]]> </style></head>
また、このアプローチは組み込みのスタイルシートになり、すべてのCSS宣言を（x）HTMLファイルに直接書き込むことができ、<style>タグは<head>に配置され、必要な任意のスタイルに配置できます。
Type属性に指定されたテキスト/CSSは、ブラウザが使用するスタイル言語を理解し、省略できないことを保証します。また、W3Cが推奨するCDATAアノテーション構文を使用して、スタイルルールを処理できないブラウザからこれらのコンテンツを非表示にします（http://www.w3.org/tr/xhtml1/#h-4.8）。
方法Aを使用する主な欠点の1つは、いくつかの古いブラウザー（特にインターネットエクスプローラー4.xおよびnetscape 4.x）が<style>タグで指定されたCSS効果を表示するために最善を尽くすことです。最新のブラウザのみをサポートする高度なCSSレイアウトとポジショニングルールを使用すると、問題を引き起こす可能性があります。複雑なCSSルールを<style>タグに掲載すると、古いブラウザのユーザーの混乱を招き、型刻印結果を読み取るのが困難になる場合があります。キャッシュすることはできません。
埋め込まれたスタイルシートのもう1つの欠点は、ページに配置されている場合は、ページを読むたびに一緒にダウンロードする必要があります。対照的に、後で提供される他の方法では、スタイルシートを1回だけダウンロードできるようにし、ブラウザのキャッシュを直接使用できます。複数回変更します。
組み込みスタイルシートはXHTMLページに保存されているため、同じスタイルがWebサイトの多くのページで使用されている場合、これらのスタイルには多くの同一のコピーがあります。これらのスタイルを変更する必要がある場合は、同じスタイルを使用するすべてのページを変更する必要があります。覚えて！多くのドキュメントを一度に変更するのは面倒です。開発するのに便利です
利点といえば、最初にCSSの書き込みとテストを開始したとき、メソッドAを使用してテストに使用したページにすべてのルールを書くことが非常に便利であることがわかりました。テストが完了した後、さまざまな方法で公開バージョンにCSSを適用します。いくつかの方法を見てみましょう。方法B：外部スタイルシート
<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-200126/dtd/xhtml1-transitional.dtd>
<html xmlns = http：//www.w3.org/1999/xhtml xml：lang = en lang = en>
<head>
<メタhttp-equiv = content-type content = text/html; charset = utf-8 />
<title> cssの適用</title>
<link rel = styleSheet type = text /css href = styles.css _fcksavedurl = styles.css /></head>
方法Bは、外部スタイルのシートを接続する慣行を示しています。すべてのCSS宣言コンテンツを別のドキュメントに入れてから、（x）html <head>の<link>タグを使用してコンテンツを参照します。
HREF属性を使用して、ドキュメントの場所を指定します。この属性は、相対パス（上記の例など）または絶対パス（スタイルシートの完全なhttp：//位置で満たされている）にすることができます。同時に、<link>は単一のタグまたは空のタグであり、最後に閉じている必要があることに注意してください。ドキュメントの分離=メンテナンスに便利です
タグ付きコンテンツとは異なるドキュメントにすべてのCSSルールを配置するという明確な利点があります。つまり、Webサイト全体に作成されたスタイルの変更を変更して、各WebページのCSSステートメントを繰り返し変更することなく、ファイルを完成させることができます。
もちろん、これは大規模なWebサイトにとって非常に重要です。数百または数千ページで、単一のドキュメントで同じスタイルを共有できます。一度ダウンロードしてください
外部スタイルのシートをリンクする追加の利点の1つは、このドキュメントが通常一度だけダウンロードされ、ブラウザはキャッシュを使用することです。これにより、同じスタイルシートを参照する同じページまたは他のページを繰り返しブラウジングするときに必要なダウンロード時間を節約できます。それはまだ完全に隠すことはできません。
方法Aと同様に、方法Bは古く、ブラウザを解釈するためのCSS関数のみをサポートします。最新のブラウザ向けに設計されたスタイルは、サポートされていないブラウザに大きな混乱を引き起こす可能性があります。
まあ...これは私がこの問題に言及したのは2回目です、次の方法はそれを解決しなければなりませんよね？方法C：@import
<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-200126/dtd/xhtml1-transitional.dtd>
<html xmlns = http：//www.w3.org/1999/xhtml xml：lang = en lang = en>
<head>
<メタhttp-equiv = content-type content = text/html; charset = utf-8 />
<title> cssの適用</title>
<style type = text/css> <！[cdata [ @import styles.css; ]]> </style></head>
方法Bと同様に、@Importを使用すると、相対パス（上記の例など）または絶対パスを持つ外部ファイルからCSS定義をインポートできます。
方法Cには、<link>タグを使用するのと同じ利点があります。スタイルシートは外部ドキュメントに配置されているため、単一のドキュメントを変更および更新すると、Webサイト全体を変更でき、簡単かつ迅速に完了できます。外部スタイルシートはブラウザによってキャッシュされ、同じスタイルシートのすべてのページをインポートするためのダウンロード時間を節約します。
メソッドCを使用することの主な利点は、Netscape 4.xの次のバージョンが@import構文をサポートしていないため、参照されるCSSコンテンツを非表示にすることです。これは間違いなく有用なトリックです。これは、レイアウトなどのデザインの詳細を処理する高度なCSS構文を記述できるため、それらを処理できる最新のブラウザーが表示され、古いブラウザにこれらの構文を無視できるようにするためです。
Netscape 4.xの問題は、CSSサポート機能が実際にサポートされているものと同じくらい良いと考えていることです。したがって、Netscape 4.xを除き、ブラウザに独自の効果を表示するかどうかを決定させることができます。
これは、標準設計に基づいてWebサイトを設計する際の重要なポイントです。構造化されたタグコードを表示モードから分離し、サポートされているブラウザにレイアウトの詳細やその他のスタイルを提供してください。古いブラウザは、簡単に読み取って表示できる構造化コンテンツを使用しますが、それらのために隠された高度なCSSルールを扱うことはできません。オープンスタイルとクローズスタイル。
図10-1と10-2を見て、比較してください。これは、完全なCSSを使用した私の個人的なWebサイトであり、CSSの表示効果をオフにします（古いブラウザのディスプレイ効果に非常に近いはずです）。 CSSを使用していない場合の構造は依然として非常に明白であり、誰もが読んで使用することは依然として簡単です。ディスプレイレイアウトに必要なCSSを非表示にしないと、古いブラウザのユーザーが読みにくいコンテンツの束を取得する場合があります。
図10-1 CSSを使用した私の個人的なウェブサイト
図10-2：同じページでCSSを削除すると、古いブラウザは、複数のスタイルシートを適用する方法Bと方法Cの組み合わせとして表示される場合があります。
たとえば、多くのスタイルシートを1つのドキュメントに導入すると便利な場合があります。たとえば、すべてのレイアウトルールを1つのドキュメントとフォント設定に別のドキュメントに入れることができます。カメレオン効果
Fast Company MagazineのWebサイトを作成していたとき、私は毎月ウェブサイトの配色を変更して、現在の雑誌のカバーイメージと一致するようにしたかったのです。定期的な変更作業を簡素化するために、すべての色関連のCSSルールを1つのドキュメントに入れ、毎月変更されない他のルールを別のドキュメントに変更します。
デザインを構成する他の何百ものルールで変更する必要があるコンテンツをゆっくりと見つけることなく、毎月すべての色をカバーする方が簡単かつ速い場合があります。このドキュメントが変更されている限り、ウェブサイト全体の色はすぐに変更されます。それをする方法
メソッドBとメソッドCと組み合わせて複数のスタイルシートを導入するには、メソッドページの<link>タグを使用して、メソッドBデモンストレーションと同じCSSメインドキュメント、およびstyles.cssへのリンクを参照することです。
styles.cssの内容には、いくつかの@importルールのみが含まれており、必要な他のCSSファイルを導入します。
たとえば、3つのスタイルシートを導入する場合、1つはレイアウトを処理するために、もう1つはフォントを定義し、1つは色を定義するために、Styles.cssのコンテンツは次のようになります。
/*古いブラウザはこれらのインポートルールを解釈しません*/
@import url（layout.css）;
@import url（fonts.css）;
@import url（colors.css）;
このようにして、同じ<link>タグをWebサイト全体で使用でき、styles.cssファイルのみが参照されます。このドキュメントは、@Importルールで他のスタイルシートを引き続きインポートできます。このドキュメントに新しいスタイルシートが追加されている限り、Webサイト全体で役割を果たすことができます。
これにより、CSSの更新と交換が非常に簡単になります。たとえば、突然CSSを道路上の4つのファイルにカットしたい場合は、すべてのXHTMLタグソースコードを変更せずに、このドキュメントの@importルールを変更するだけです。
メソッドCの@Importルールを使用して古いブラウザからCSSを非表示にする別のトリックがあります。つまり、CSSのカスケード効果を使用し、メソッドAまたはメソッドBを使用してLO-FI効果をサポートするために古い最新のブラウザと最新のブラウザを提供し、@Importを使用して他のサポートされているブラウザに高度な効果を提供します。
古いブラウザはサポートできるコンテンツのみを取得しますが、新しいブラウザは使用したいすべてのスタイルを取得します。
この手法のコードがどのように見えるか見てみましょう。
<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-200126/dtd/xhtml1-transitional.dtd>
<html xmlns = http：//www.w3.org/1999/xhtml xml：lang = en lang = en>
<head>
<メタhttp-equiv = content-type content = text/html; charset = utf-8 />
<title> cssの適用</title>
<link rel = styleSheet type = text /css href = lofi.css _fcksavedurl = lofi.css /> <style type = text/css> @import hifi.css; </style></head>
ここでは、lofi.cssには、リンク色やフォントサイズなどの基本的なCSSルールを含める必要があります。一方、HIFI.CSSには、レイアウト、ポジショニング、バックグラウンド写真などの高度なルールが含まれています。
スクリプトを作成したり、サーバー側でブラウザバージョンを識別したりすることなく、LO-FIバージョンとHI-FIバージョンの両方のスタイルを送信できます。順序は重要です
タグソースコードで<link>および<style>タグの順序を指定することが重要です。 CSSのカスケードは、ルールの優先順位を指します。これは、発生の順序に基づいて決定されます。
たとえば、ほとんどの最新ブラウザは両方の方法をサポートするため、すべてのスタイルシートがダウンロードされ、そのスタイルのすべてのスタイルが適用されます。この時点で、HIFI.CSSのスタイルルールは、同じタグに対してlofi.cssによって指定されたスタイルをオーバーライドします。理由は何ですか？タグソースコードでは、hifi.cssがlofi.cssの後に表示されるためです。
@Importルールはサポートされていないため、古いブラウザはHIFI.CSSを無視しているため、lofi.cssで定義されたスタイルのみを使用します。カスケード機能を受け入れます
CSSカスケードの利点は、さまざまな方法でもたらされます。たとえば、ウェブサイト全体がレイアウト、ポジショニング、フォントの設定、色の設定などの外部CSSを共有しているとします。各ページのメソッド@importスタイルシートを使用して、古いブラウザのこれらのルールを非表示にする必要があります。
ウェブサイトにレイアウトと位置決めの設定を共有したいが、フォントまたは色を調整する必要があるページがある場合。このページ（Webサイト上の他のページとは異なる）では、CSSメインドキュメントを引き続き紹介できます。参照を完了した後、このページの特別なスタイルを定義する2番目のCSSドキュメントを参照します。 2番目のCSSファイルのルールが優先され、同じラベルの最初のCSSファイルによって指定されたスタイルルールを上書きします。
例を見てみましょう。 Master.CSSには、Webサイト構造、フォント、およびその他のCSSルール全体が含まれていますが、Custom.CSSでは、特定のページでのみ参照され、いくつかの特別なタグのスタイル設定をカバーしています。
<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-200126/dtd/xhtml1-transitional.dtd>
<html xmlns = http：//www.w3.org/1999/xhtml xml：lang = en lang = en>
<head>
<メタhttp-equiv = content-type content = text/html; charset = utf-8 />
<title> cssの適用</title>
<style type = text/css> @import master.css; @import custom.css; </style></head>
custom.cssはタグソースコードの2番目のものであるため、同じタグに指定するスタイルは、master.css内で処方されたものをオーバーライドします。
たとえば、main.css内で、<h1>タグが赤いセリフフォントを使用し、<h2>が青のセリフフォントを使用する必要があるとします。
H1 {
フォントファミリー：ジョージア、セリフ。
色：赤;
}
H2 {
フォントファミリー：ジョージア、セリフ。
色：青;
}
特定のページでは、<h1>タグのスタイル設定を変更し、<h2>のスタイルに従うことのみです。次に、custom.cssでは、<h1>の新しいスタイルを宣言するだけです。
H1 {
フォントファミリー：ヴェルダナ、sans-serif;
色：オレンジ;
}
この宣言は、master.cssの宣言を無効にします（Custom.cssが後で導入されるため）。ページが最初にmaster.cssとcustom.cssを導入する場合、<h1>タグはオレンジベルダナフォントを使用し、<h2>はまだ青いセリフフォントです。なぜなら、Master.cssのその後の宣言はCustom.cssによって無効にされていないためです。
CSSのカスケード関数は、一般的なスタイルを共有するための優れたツールであり、変更する必要があるルールのみをカバーできます。
<h1 style = font-family：Georgia、serif;色：オレンジ;>これはタイトル</h1>です
これは、インラインスタイルと接触した4番目のCSSアプリケーション方法です。ほとんどすべてのタグをスタイル属性で追加でき、上記の例のように、CSSスタイルルールをタグに直接適用できます。
インラインスタイルはスタッキングの最も低い層であるため、<head>の<style>タグ内で宣言されたすべての外部スタイルの宣言とルールを無効にします。
これは、ページ全体にスタイルを追加する簡単な方法ですが、使用するために支払う必要があります。スタイルはラベルに結び付けられています
ページのスタイルを作成するときに方法Dに依存しすぎている場合、コンテンツと表示方法を分離しません。戻って変更するときは、ソースコードを詳細にマークし、CSSを個別のファイルに入れる必要があります。
悪用方法Dは、ソースコードを汚染するために<font>などのディスプレイ効果ラベルを使用することと違いはありません。これらのデザインの詳細は、常に他の場所に配置する必要があります。使用するように注意してください
現実には、もちろん、インラインスタイルを使用する機会は、ページにスタイルを追加する必要がある場合に命を救うことですが、外部ファイルにアクセスすることも<head>を変更することもできないか、スタイルを一時的に使用することもできます。
たとえば、後で削除されるチャリティーセールをプレビューするページがあり、このページのユニークなスタイルをデザインするページがある場合は、これらのスタイルのルールをパーマネントスタイルシートに追加せずにタグに埋め込んでください。
今それをやりましょうが、これらのスタイルを簡単に変更することはできないか、ウェブサイト全体でページ全体で使用されることはないことに注意してください。
前のページ1 2 3次のページ全文を読む