HTMLでCSSを呼び出す方法-フロントエンドQ&A-php.cn

HTMLでCSSを呼び出す方法

WBOY

リリース： 2023-05-05 22:11:05

オリジナル

2703 人が閲覧しました

HTML (HyperText Markup Language) は Web ページのマークアップ言語であり、CSS (Cascading Style Sheets) は Web ページのスタイルとレイアウトを定義するために使用される言語です。 Web 開発では、HTML と CSS の両方が重要な役割を果たします。HTML は Web ページの構造と要素の定義を担当し、CSS は要素のスタイルの制御に使用されます。この記事では、HTML が CSS スタイルを呼び出す方法を紹介します。

1. 内部スタイル

HTML では、<head> タグ内の <style> タグを使用して CSS を定義できます。スタイル、これは「内部スタイル」と呼ばれます。具体的な手順は次のとおりです。

<head> タグに <style> タグを追加します。
CSS スタイルは <style> タグで定義します。
CSS スタイルを呼び出すには、HTML 要素の style 属性を使用します。

たとえば、次のコードは赤いタイトルを定義し、それを <h1> タグに適用します:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1 style="color: red;">Hello, World!</h1>
</body>
</html>

ログイン後にコピー

外部スタイル

内部スタイルに加えて、CSS ファイルも外部で使用できます。外部スタイルは、すべての CSS スタイル定義を別のファイルに配置し、HTML 内のリンクを使用してそのファイルを参照します。具体的な手順は次のとおりです。

CSS ファイルを作成し、スタイルを定義します。
CSS ファイルをリンクするには、HTML で <link> タグを使用します。

たとえば、上記の例の CSS スタイルを style.css という名前のファイルに保存し、HTML ファイルで <link&gt を使用できます。 ; タグは次のようにリンクします:

index.html ファイル:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

ログイン後にコピー

style.css ファイル:

h1 {
  color: red;
}

ログイン後にコピー

インラインスタイル

インラインスタイルは CSS スタイルを呼び出す方法でもありますが、内部スタイルとは異なり、インラインスタイルは HTML 要素の style 属性に直接適用される CSS スタイルです。これは、<head> タグでスタイルを定義したり、外部 CSS ファイルを使用したりする必要がなく、HTML タグで個々のスタイルを定義できることを意味します。ただし、インラインスタイルは HTML ファイルのサイズが大きくなり、可読性が低下し、保守が困難になるため、お勧めできません。

たとえば、次のコードは赤いタイトルを定義し、それを <h1> タグに適用します。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1 style="color: red;">Hello, World!</h1>
</body>
</html>

ログイン後にコピー

summary

In In In HTML , CSS スタイルは、内部スタイル、外部スタイル、インラインスタイルの 3 つの方法で呼び出すことができます。このうち、内部スタイルは 1 つのページまたはアプリケーションに適用され、外部スタイルは複数のページまたはアプリケーションで使用でき、インラインスタイルは 1 つの要素の特定のスタイルに適用されます。実際のアプリケーションでは、パフォーマンスを最適化し、開発効率を向上させるために、ニーズや状況に応じて CSS スタイルを呼び出す適切な方法を選択する必要があります。

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