CSSの保存方法

王林
リリース: 2023-05-29 15:11:07
オリジナル
608 人が閲覧しました

CSS (Cascading Style Sheets) は Web デザインに使用されるスタイル マークアップ言語で、通常は外部スタイル シートに保存され、HTML ドキュメントにリンクされます。 CSS スタイルシートがどのように保存されるかを紹介します。

  1. インライン スタイル

インライン スタイルとは、以下に示すように、CSS コードを HTML タグに直接記述することを指します。

<div style="color: red; font-size: 16px;">Hello World!</div>
ログイン後にコピー

インラインとはいえ、このスタイルは非常に高度です。シンプルですが、重大な制限があります。 CSS コードは複雑な場合が多いため、インライン スタイルを使用して Web サイト全体のスタイルを記述するのは非常に面倒です。さらに、スタイルを変更する必要がある場合は、通常、各インライン スタイル タグのコードを変更する必要がありますが、これも非常に時間と労力がかかります。

  1. 埋め込みスタイル

埋め込みスタイルとは、 を使用して、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 つのスタイル シートを変更するだけで済むことです。

  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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート