CSSをHTMLにリンクする方法-フロントエンドQ&A-php.cn

CSSをHTMLにリンクする方法

王林

リリース： 2023-05-29 15:41:08

オリジナル

5765 人が閲覧しました

現代の Web ページデザインでは、Web ページのスタイルとレイアウトを美しくし、デザインするために CSS (Cascading Style Sheets) が広く使用されています。通常、CSS は HTML ドキュメントにリンクされ、ドキュメントの外観と雰囲気を制御します。では、CSS を HTML にリンクするにはどうすればよいでしょうか?この記事では、次の内容を簡単に紹介します。

CSS とは

CSS は、Web ページのスタイルとレイアウトを定義するために使用される言語です。通常、Web ページ要素の色、サイズ、位置、テキスト形式などのスタイルを定義するために使用されます。 HTML と同様に、CSS はセレクターと宣言ブロックで構成されるマークアップ言語です。セレクターはスタイルを設定する HTML 要素を選択し、宣言ブロックは要素のスタイルと外観を定義します。

HTMLにCSSをリンクする方法

2.1 外部スタイルシート

CSSコードを外部スタイルシートファイルに保存し、 HTML ドキュメントタグを使用して、このファイルを HTML ドキュメントにリンクします。このアプローチにより、スタイルが HTML ドキュメントから完全に分離されるため、再利用可能になります。これは、スタイルの維持と変更が容易になるため、Web 開発者によってよく使用されるアプローチでもあります。サンプルコードは次のとおりです。

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

ログイン後にコピー

この例では、<link> タグを使用して、ドキュメントとスタイルシート間の関連付けを定義します。 rel 属性はリンクタイプを「スタイルシート」として指定するために使用され、type 属性はスタイルシートタイプを指定するために使用され、href 属性はは、スタイルシートファイルへのパスを示すために使用されます。

2.2 内部スタイルシート

CSS コードを HTML ファイルの <style> タグに格納します。これにより、HTML ドキュメントは確実に単一になりますが、スタイルシートの変更とメンテナンスはより困難になります。

<head>
  <style type="text/css">
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>

ログイン後にコピー

この例では、<style> タグを使用して、CSS コードを HTML ドキュメントに直接埋め込みます。 CSS コードは、セクションとセクション内の <style> タグのペアに含めることができます。このメソッドを使用すると、スタイルは 1 つの要素だけではなく、HTML ドキュメント内の一致するすべての要素に適用されます。この方法の欠点は、テーマを変更したりスタイルを変更したりする場合、各 HTML ファイルを編集する必要があることです。

2.3 インラインスタイル

単一の HTML 要素の style 属性に CSS コードを追加します。インラインスタイルは、単一要素のスタイルを変更するためによく使用されますが、スタイルシート内の過度に複雑なアプリケーションには推奨されません。

  <p style="color: red; font-size: 16px;">This is a paragraph.</p>

ログイン後にコピー

注: インラインスタイルでは、属性値を二重引用符で囲む必要があります。

概要

CSS を HTML ドキュメントにリンクするには、外部スタイルシート、内部スタイルシート、インラインスタイルの 3 つの方法があります。どの方法を選択するかは、ニーズによって異なります。その中でも、外部スタイルシートは最も一般的に使用される方法であり、Web 開発作業をより効率的にし、メンテナンスを容易にします。

以上がCSSをHTMLにリンクする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。