CSSの保存方法-フロントエンドQ&A-php.cn

CSSの保存方法

王林

リリース： 2023-05-29 15:11:07

オリジナル

572 人が閲覧しました

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