これらの CSS 原則を理解していますか?

CSS は、HTML (標準汎用マークアップ言語のアプリケーション) や XML (標準汎用マークアップ言語のサブセット) などのファイル スタイルを表現するために使用されるコンピューター言語です。 CSS は Web ページを静的に変更できるだけでなく、さまざまなスクリプト言語と連携して、Web ページのさまざまな要素を動的にフォーマットすることもできます。 CSS は、Web ページ内の要素の位置のレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォント サイズとスタイルをサポートし、Web ページのオブジェクトとモデル スタイルを編集する機能を備えています。 Webフロントエンド開発に携わっている人はCSSをよく扱っているので、CSSがどのように機能するのかを知らない人もいるかもしれません。これが CSS レベルを向上させる上でのボトルネックになった場合、それについてもっと知る必要があるでしょうか?

1. ブラウザ開発と CSS

Web ブラウザは主に HTTP プロトコルを介して Web サーバーに接続し、Web ページを取得します。HTTP を使用すると、Web ブラウザは Web サーバーにデータを送信し、Web ページを取得できます。現在、最も一般的に使用されている HTTP は HTTP/1.1 であり、RFC2616 で完全に定義されています。 HTTP/1.1 には、Internet Explorer が完全にはサポートしていない独自の標準セットがありますが、他の多くの最新の Web ブラウザはこれらの標準を完全にサポートしています。 Web ページの場所は、Web ページのアドレスである URL (Uniform Resource Locator) によって示されます。http: で始まるものは、HTTP プロトコルを介してログインすることを意味します。多くのブラウザは、FTP (ファイル転送プロトコル) の ftp:、Gopher の gopher:、HTTPS (SSL で暗号化された HTTP) の https: など、他のタイプの URL およびプロトコルもサポートしています。

初期の Web ブラウザは、HTML の単純なバージョンのみをサポートしていました。独自のソフトウェア ブラウザの急速な発展により、非標準の HTML コードが作成されるようになりました。しかし、HTML が成長するにつれて、デザイナーの要件を満たすために多くの表示機能が追加されました。これらの機能が増加するにつれて、スタイルを定義するための外国語はますます意味がなくなりました。

CSSの元々の提案は1994年にHakun Leeによって提案されました。 BertBos は Argo というブラウザを設計しており、CSS について協力することにしました。

スタイルシート言語についてはすでにいくつかの提案がありましたが、「カスケード」という考えを最初に取り入れたのは CSS でした。 CSS では、1 つのファイル内のスタイルを他のスタイル シートから継承できます。読者は、ある場所では自分の好みのスタイルを使用し、他の場所では作者のスタイルを継承または「レイヤー」することができ、このレイヤー化方法により、作者と読者の両方が独自のデザインを柔軟に追加し、独自の好みを組み合わせることができます。

1997 年の初めに、CSS に特化した作業グループが W3C 内に組織され、そのリーダーは Chris Lilley でした。このワーキンググループは、初版ではカバーされていない問題について議論を開始し、その結果、1998 年 5 月に第 2 版の要件が発行されました。 2007 年の時点では、第 3 版はまだ完成していません。

2. ブラウザはどのようにページをレンダリングしてロードしますか

一部の Web サイトを開いたときに読み込みが非常に遅く、ページ全体が同時に表示されるのに、一部の Web サイトは上から下に徐々に表示されるのはなぜですか?これを理解するには、次の一般的なプロセスから始めることができます:

1. ブラウザのダウンロードの順序は上から下であり、レンダリングの順序も上から下に行われます。ダウンロードとレンダリングは同時に実行されます。

2. ページの特定の部分をレンダリングすると、その上のすべての部分がダウンロードされます (これは、関連するすべての要素がダウンロードされたことを意味するわけではありません)。

3. 意味的に解釈可能なタグ埋め込みファイル (JS スクリプト、CSS スタイル) に遭遇した場合、IE のダウンロード プロセスにより、ダウンロード用に別の接続が有効になります。

4. そして、ダウンロード後に解析を実行し、解析プロセス中に、ページの下向きのすべての要素のダウンロードを停止します。

5. スタイルシートがダウンロードされると、以前にダウンロードされたすべてのスタイルシートと一緒に解析され、解析が完了すると、以前のすべての要素（以前にレンダリングされた要素を含む）が再レンダリングされます。

6. JSやCSSで再定義があった場合、先に定義した関数が後から定義された関数で上書きされます。

ここでのポイントは２～５の３点です。レンダリング効率は以下の3点に関係します:

1. CSSセレクターのクエリ位置決め効率

2. ブラウザのレンダリングモードとアルゴリズム

3. レンダリングされるコンテンツのサイズ

3. CSSとは何か

CSS

の利点 CSS とは何ですか?

CSSとはCascading Style Sheetsの略称です。

CSS 言語は、コンパイルを必要とせず、ブラウザーによって直接解釈して実行できるマークアップ言語です (ブラウザー解釈型言語です)。

標準的な Web デザインでは、CSS は Web コンテンツ (XHTML) のプレゼンテーションを担当します。

CSS ファイルは、いくつかの CSS タグを含むテキスト ファイルとも言えます。CSS ファイルは、ファイル名のサフィックスとして css を使用する必要があります。

CSSファイルを変更するだけでWebページ全体の見栄えを変えることができ、作業負担を軽減できるため、すべてのWebデザイナーにとって必須の講座です。

CSS は、W3C の CSS Working Group によって作成および保守されています。

🎜 Web ページの再構築に CSS+DIV を使用すると、従来の TABLE Web ページ レイアウトと比較して、次の 3 つの大きな利点があります。

1. パフォーマンスとコンテンツを分離する。デザイン部分を分離して別のスタイルファイルに置き、HTMLファイルにはテキスト情報のみを格納します。このようなページは検索エンジンにとってよりフレンドリーです。

2. ページの閲覧速度を向上させます。同じページの視覚効果の場合、CSS+DIV を使用して再構成されたページの容量は、TABLE でエンコードされたページ ファイルの容量よりもはるかに小さくなります。通常、前者のサイズは後者のサイズのわずか 1/2 です。ブラウザーは多くの長いタグをコンパイルする必要はありません。

3. 保守と修正が容易。いくつかの CSS ファイルを変更するだけで、Web サイト全体を再デザインできます。

IV. ブラウザーの CSS マッチングの原則

ブラウザーの CSS マッチングは、左から右に検索するのではなく、右から左に検索します。たとえば、前述の DIV#pBox p span.red{color:red;} の場合、ブラウザの検索順序は次のようになります。まず、html 内の class='red' を持つすべてのspan要素を検索し、それらを見つけた後、検索します。親要素に p 要素があるかどうかを確認し、p の親要素に pBox という ID を持つ p 要素があるかどうかを判断します。両方が存在する場合、CSS は一致します。

ブラウザーが右から左に検索する利点は、無関係なスタイル ルールと要素をできるだけ早く除外できることです。 Firefox では、この検索メソッドをキーセレクター (キーワード クエリ) と呼びます。いわゆるキーワードは、スタイル ルールの最後 (右端) のルールです。上のキーは、span.red です。

5. CSS を最適化する

いわゆる効率的な CSS とは、スタイルに一致する要素を探すときにブラウザができるだけ少ない検索を行うことを意味します。CSS を作成するときによくある非効率的な間違いをいくつか紹介します。

1 . ID セレクターの前にタグ名を使用しないでください

通常の書き方: DIV#pBox

より適切な書き方: #pBox

説明: ID セレクターは一意であるため、p を追加すると不要な CSS マッチングが増加します。

2. クラスセレクターの前にタグ名を使用しないでください

通常の書き方：span.red

より良い書き方：.red

説明：最初のものと同じですが、複数の .red を定義した場合、要素ごとにスタイルが異なり、たとえば、CSS ファイル内で次のように定義されています:

p.red{color:red;} span.red{color:#ff00ff}

と定義されている場合。こんな感じ 紛らわしいので削除しないでください

このように書かないことをお勧めします

3. 階層関係はできるだけ使わない

一般的な書き方: #pBoxp.red{color:red;}

より良い書き方: .red{.}

4. 階層関係ではなくクラスを使う

一般的な書き方: #pBox ul li a{display:block;}

より良い書き方: .block{display: block;}

5. CSSのレンダリング効率について idとclassの効率は基本的に同じです

クラスは最初の読み込みでキャッシュされるため、カスケードの際に効果が高くなります。 (id には速度の微妙な利点があります)。

フロントエンドの友人にとって、優れた CSS スキルを習得することは非常に重要です。この記事が役立つことを願っています。

関連する推奨事項:

CSS 開発のための最も包括的な一般的なテクニック

CSS の詳細の詳細な説明

フロントエンド開発のための CSS 原則の詳細な説明🎜🎜

以上がこれらの CSS 原則を理解していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。