「CSS はバックグラウンドでどのように機能するのですか?」

CSS (Cascading Style Sheets) は、Web ページに視覚効果を追加するために使用されるスタイル シート言語です。ページのレイアウトと HTML 要素の表示を記述するために使用されます。 CSS を使用すると時間を大幅に節約できます。これを使用して、複数の Web ページのレイアウトを同時に管理します。これにより、開発者はさまざまな要素にさまざまなカスタム プロパティを実装できるため、Web ページの外観が向上します。この記事では、CSS とその仕組みについて学びます。

CSSは基本的に3種類に分かれます -

• 外部 CSS - すべてのページで、 要素を使用し、link> タグは head セクションに属します。複数のページを同時に変更する場合は、外部スタイル シートを使用します。 1 つのファイルを変更するだけで Web サイト全体の外観を変更できるため、このような状況では非常に便利です。

• インライン CSS - 単一の HTML ページに独自のスタイルがある場合は、内部スタイル シートを使用できます。 head セクションの style> 要素には、内部スタイルの定義が含まれています。

• 内部 CSS - 個々の要素に独自の外観を与えるには、インライン スタイルを使用します。インライン スタイルを使用するには、style 属性を適切な要素に追加します。 style 属性は、CSS プロパティのコンテナです。

＃＃＃文法＃＃＃ リーリー ＃＃＃例＃＃＃

以下は、HTML ページで CSS を使用する方法の例です。ここにはインライン CSS があります。 h1 要素には下線が引かれ、div 要素は緑色で表示されます。

リーリー

CSS を使用する必要があるのはなぜですか?

時間の節約

• - 時間を大幅に節約できます。 CSS スタイル定義は個別の CSS ファイルに保存されるため、そのうちの 1 つを変更すると Web サイト全体に影響を与える可能性があります。

複数の属性

• - CSS は、単純な HTML よりも Web サイトの外観と雰囲気を決定するためのより正確なオプションを提供します。

高速ページ読み込み

• - CSS を使用する場合、HTML タグの属性を記述する必要は必ずしもありません。ラベルに対してルールを 1 回作成すると、そのラベルのすべてのインスタンスに適用できます。 CSS は使用するコードが少ないため、ダウンロードが速くなります。

  #ウェブサイトのメンテナンス
• - ウェブサイトのメンテナンスにはそれが必要です。ファイルにグローバルな変更を加える必要がある場合は、スタイルを変更するだけで、Web ページ上のすべてのコンポーネントがすぐに更新されます。 CSS ファイルの柔軟性により、Web サイトのデザインを簡単に変更できます。
  マルチデバイス互換性
• - CSS は従来から以前の言語バージョンと互換性があるため、以前の言語バージョンで使用できます。したがって、CSS アプリケーションが以前のバージョンのプログラミング言語を使用して作成されており、開発者がそれを新しい開発コンテンツとマージする場合、必要な調整を加えて CSS を簡単に統合でき、開発者は既存のコードを正常に更新できます。 CSS を使用したコンテンツは、複数のデバイス タイプに適応できます。

  CSS の基礎となる作業

  特定の HTML 要素の最終的な CSS プロパティを計算する実際のプロセスは、非常に複雑な一連の手順です -

データの蓄積

この段階では、特定の要素のすべてのスタイル宣言がユーザー エージェント、作成者、ユーザーなどのさまざまなソースから収集されます。これらの宣言は、このドキュメントに現在適用されているスタイル シートからのものであり、構文的に有効であるかどうかを判断するために、フィルター処理および検証する必要があります。

＃＃＃カスケード＃＃＃

CSS という言葉は Cascading Style Sheets の略で、CSS の基本概念です。この段階は、ソースとしての開発者の影響を深く受ける唯一の段階であるため、完全に理解する必要があります。このステージでは、前のステップで収集したクレームの順序なしリストを取得し、次の基準 -

を使用して優先度の降順で並べ替えます。

宣言ソース (ユーザー エージェント、ユーザー、作成者、トランジション、アニメーション) に基づいて、そして!重要なメモの組み合わせ。

セレクターに基づく特殊性

• 記載順に基づく

• デフォルト値の設定
• 宣言されていない場合、要素の CSS プロパティの値を設定しようとするときにこのステップが呼び出されます。

  ＃＃＃修理＃＃＃

  レスポンシブ デザインの柔軟性を最大限に高めるために、いくつかの相対単位 (auto、em、rem、vh)、相対 URL、パーセンテージ、または人間が判読できる特定のキーワード (small、normal、bold body) を使用します。この段階では、ドキュメントを配置したり、ネットワーク クエリを実行したり、親以外の場所から値を取得したりすることなく、できるだけ多くの属性値を解決しようとします。
＃＃＃フォーマット＃＃＃

この段階では、ドキュメント全体をフォーマットし、ドキュメントのレイアウトで使用される絶対理論値の計算を試みることによって、前のステップの残りの作業を完了します。このステージでは主に、要素の相対調整、自動レイアウト、Flex レイアウトなどのシナリオに焦点を当てます。多くの計算が必要ですが、ブラウザーでほぼ完全に使用できる絶対数が生成されます。

最終的な変更点

描画の前に、最終ステージでは、ブラウザ エンジン、メディア タイプ、デバイスのピクセル密度、オペレーティング システムなどのサーフィン環境に基づいていくつかの変更が実行されます。浮動小数点数を整数値に丸めること、または利用可能なフォントに基づいてフォント サイズを変更することは、2 つの一般的な変更です。

＃＃＃結論は＃＃＃

CSS カスケードは CSS の最も誤解されている側面の 1 つであるため (多くの間違いの原因となることがよくあります)、その仕組みを理解すると、スタイルシートを管理しやすく保つ上で大きな利点が得られます。ただし、CSS カスケードの理解が深まれば深まるほど、責任も大きくなります。カスケードのより特殊な部分 (!重要、インライン スタイル、ID セレクターなど) は、将来変更またはオーバーライドするのがより困難なスタイルシートを生成します。

以上が「CSS はバックグラウンドでどのように機能するのですか?」の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。