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

HTMLにCSSを導入する方法

WBOY

リリース： 2023-05-29 19:55:06

オリジナル

1499 人が閲覧しました

CSS を HTML に導入する方法

フロントエンド開発の基本として、HTML と CSS の関係は相互補完します。 HTML はページの構造とコンテンツを構築する役割を担い、CSS はこれに基づいてページに色を追加し、美しくする役割を担います。では、CSS スタイルを HTML ドキュメントに導入するにはどうすればよいでしょうか?この記事ではCSSの導入方法と注意点を紹介します。

HTML ヘッダーで外部 CSS を参照する

これは、CSS を参照する最も一般的で推奨される方法です。一般的なページ構造を例として、HTML ヘッダータグにリンクタグを追加します。

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
      页面内容
  </body>
</html>

ログイン後にコピー

このうち、リンクタグには 3 つの属性があります。

rel: スタイルを表します。シートと現在のドキュメントの関係は外部スタイルシートであり、値は "stylesheet";
type: スタイルシートファイルの MIME タイプを示し、値は "text/css";
href: スタイルシートファイルへの参照パスを示します。

ここで、href 属性のパスは、CSS ファイルが配置されている相対パスではなく、現在の HTML パスに基づく必要があることに注意してください。 CSS ファイルが現在の HTML と同じディレクトリにあると仮定すると、参照スタイルは次のように記述する必要があります:

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

ログイン後にコピー

ここで、「.」は現在のディレクトリを示し、ファイル名のサフィックス「.css」は使用できません。省略される。

HTML ヘッダーに内部 CSS を埋め込む

HTML ドキュメントでは、style タグを通じて内部 CSS を埋め込むことができます。この方法では HTML ファイルのサイズが必然的に大きくなりますが、一部の単純で小規模な Web サイトでは、外部ファイルのリクエストとダウンロードの時間を節約し、ページの応答速度を向上させることができます。以下にサンプルコードを示します。

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
    <style type="text/css">
      /* CSS样式内容 */
      body {background-color: #F1F1F1;}
      h1 {color: orange;}
    </style>
  </head>
  <body>
      页面内容
  </body>
</html>

ログイン後にコピー

このうち、style タグ内の内容は、style コードが style タグ内に直接記述されている点を除いて、外部 CSS ファイルと同じ形式です。スタイル汚染 (CSS スタイルが互いに影響を与えること) を避けるために、内部 CSS は意味のある CSS セレクターを使用してスタイルの範囲を制限する必要があることに注意してください。

HTML 要素へのインラインスタイルの埋め込み

インラインスタイルとは、CSS スタイルコードを HTML 要素の style 属性に直接埋め込むことを指します。この方法は非常に柔軟性がありますが、コードの再利用やメンテナンスには役立ちません。以下はサンプルコードです:

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <h1 style="color:orange;">页面标题</h1>
    <p style="font-size:18px;">页面内容</p>
  </body>
</html>

ログイン後にコピー

インラインスタイルを使用する場合、スタイルコードがページのアクセシビリティ (Accessibility) と使いやすさ (Usability) に影響を与えないように注意する必要があります。視覚効果に似た一部のスタイルについては、外部スタイルまたは内部スタイルを使用する必要があります。

参考資料: