CSS (Cascading Style Sheets) は Web デザインに使用されるスタイル マークアップ言語で、通常は外部スタイル シートに保存され、HTML ドキュメントにリンクされます。 CSS スタイルシートがどのように保存されるかを紹介します。
インライン スタイルとは、以下に示すように、CSS コードを HTML タグに直接記述することを指します。
<div style="color: red; font-size: 16px;">Hello World!</div>
インラインとはいえ、このスタイルは非常に高度です。シンプルですが、重大な制限があります。 CSS コードは複雑な場合が多いため、インライン スタイルを使用して Web サイト全体のスタイルを記述するのは非常に面倒です。さらに、スタイルを変更する必要がある場合は、通常、各インライン スタイル タグのコードを変更する必要がありますが、これも非常に時間と労力がかかります。
埋め込みスタイルとは、 を使用して、HTML ドキュメントの
タグ内に CSS コードを直接記述することを指します。 <style>
要素は次のようにラップされます: <head> <style> body { background-color: #f0f0f0; font-family: Arial, sans-serif; font-size: 16px; color: #333; } h1 { color: #ff0000; font-size: 24px; font-weight: bold; } </style> </head>
埋め込みスタイルを使用すると、同じ HTML ドキュメント内で CSS コードを参照できます。この利点は、スタイルを変更する必要がある場合に、各 HTML ドキュメントのコードを変更する必要がなく、1 つのスタイル シートを変更するだけで済むことです。
外部スタイル シートとは、CSS コードを別の CSS ファイルに保存し、HTML ドキュメント内で参照することを指します。この利点は、複数の HTML ファイルで CSS ファイルを共有できるため、Web サイトの保守と管理がより便利になることです。外部スタイル シートは通常、次に示すように .css
ファイル拡張子を使用します。
style.css ファイル内:
body { background-color: #f0f0f0; font-family: Arial, sans-serif; font-size: 16px; color: #333; } h1 { color: #ff0000; font-size: 24px; font-weight: bold; }
HTML ドキュメントで参照 style .css
ファイル:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
外部スタイル シートを使用すると、コードの作成とメンテナンスが大幅に簡素化されます。 CSS コードを HTML ドキュメントから分離することで、ページのファイル サイズを削減でき、Web コンテンツをより迅速にユーザーに配信できるようになります。さらに、ブラウザのキャッシュ メカニズムを使用して、ページの読み込み時間を短縮し、Web サイトのパフォーマンスとユーザー エクスペリエンスを向上させることもできます。
まとめると、CSS はインライン スタイル、埋め込みスタイル、外部スタイル シートとして保存でき、これらの異なる保存方法を通じて、さまざまな開発ニーズに合わせて CSS を柔軟に適用できます。ただし、一般的には、コードが簡潔で、メンテナンスが容易で、キャッシュが最適化されるという利点があるため、外部スタイル シートを使用することが最も一般的な方法です。
以上がCSSの保存方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。