3 種類の CSS スタイルを理解する
インライン、埋め込み、および外部スタイル シート: 知っておくべきことは次のとおりです。
フロントエンド Web サイトの開発は、多くの場合、次のもので構成される 3 本足のスツールとして表されます。
このスツールの 2 番目の部分である Cascading Style Sheets は、ドキュメントに追加できる 3 つの異なるスタイルをサポートしています。
- インライン スタイル
- 埋め込みスタイル
- 外部スタイル
これらの CSS スタイルには、それぞれ独自の利点と欠点があります。
ハーディク・ペタニ/ゲッティイメージズ
インライン スタイル
インライン スタイルは、HTML ドキュメント内のタグに直接記述されるスタイルです。インライン スタイルは、適用される特定のタグにのみ影響します。
|_+_|
この CSS ルールは、この 1 つのリンクの標準の下線テキスト装飾を無効にします。ただし、ページ上の他のリンクは変更されません。これは、インライン スタイルの制限の 1 つです。これらは特定のアイテムでのみ変更されるため、統一されたページ デザインを実現するには、これらのスタイルを HTML に散りばめる必要があります。これはベスト プラクティスではありません。 フォント タグと、Web ページの構造とスタイルの混合。
インライン スタイルには、非常に高い特異性も必要です。これにより、他の非インライン スタイルで上書きすることが難しくなります。たとえば、サイトをレスポンシブにし、要素が特定のブレークポイントでどのように見えるかを変更したい場合は、 メディアクエリ 、要素のインライン スタイルにより、これが難しくなります。
インライン スタイルは、ページ上の同等の要素から 1 つまたは 2 つの要素を設定する「ルールの例外」アプローチで、控えめに使用する場合にのみ適切です。
埋め込みスタイル
埋め込まれたスタイルはドキュメントの head にあります。彼らはに包まれています タグとドキュメントのその部分内の外部 CSS ファイルのように見えます。
埋め込みスタイルは、それらが埋め込まれているページのタグにのみ影響します。繰り返しますが、このアプローチは CSS の長所の 1 つを無効にします。すべてのページにはヘッダーで定義されたスタイルがあるため、サイト全体の変更 (リンクの色を赤から緑に変更するなど) を行う場合は、すべてのページでこの変更を行う必要があります。これは、すべてのページが埋め込みスタイルを使用するためです。シート。このアプローチはインライン スタイルよりも優れていますが、多くの場合、依然として問題があります。
|_+_|ドキュメントの head に追加されたスタイルシートも、そのページに大量のマークアップ コードを追加するため、将来的にページの管理が難しくなる可能性があります。
埋め込みスタイル シートの利点は、他の外部ファイルを読み込む必要がなく、ページ自体と共にすぐに読み込まれることです。この手法は、ダウンロード速度とパフォーマンスの観点からメリットがあります。
外部スタイル シート
現在、ほとんどの Web サイトは外部スタイル シートを使用しています。外部スタイルは、別のドキュメントに記述され、さまざまな Web ドキュメントに添付されるスタイルです。それらは、 ドキュメントの先頭にタグを付けます。外部スタイル シートは、HTML と同じサーバーに配置することも、別のサーバーから完全に取り込むこともできます。これは、多くのサイトが Google から借用しているフォントなどのアセットによく見られます。
外部スタイルシート つまり、各ページが同じスタイルシートを使用する 20 ページの Web サイトを持っている場合 (これが通常の方法です)、単純にこれらのページのすべてに視覚的な変更を加えることができます。その 1 つのスタイル シートを編集します。この経済性により、長期的なサイト管理がはるかに容易になります。
|_+_|ほとんどのプロの Web デザイナーは、プライマリ CSS ファイルを使用して、サイトのレイアウトとデザインを管理しています。
外部スタイル シートの欠点は、これらの外部ファイルを取得して読み込むページが必要になることです。すべてのページが CSS シートのすべてのスタイルを使用するわけではないため、多くのページでは実際に必要なサイズよりもはるかに大きな CSS ページが読み込まれます。
外部 CSS ファイルのパフォーマンスが低下するのは事実ですが、確実に最小限に抑えることができます。現実的には、CSS ファイルは単なるテキスト ファイルであるため、そもそもサイズが大きくありません。サイト全体で 1 つの CSS ファイルを使用している場合、そのドキュメントが最初に読み込まれた後にキャッシュされるという利点もあります。キャッシュされた CSS ファイルであるため、ヒットは無効になります。