ホームページ > 記事 > ウェブフロントエンド > HTMLでCSSを呼び出す方法
HTMLでCSSを呼び出す方法
- WBOYオリジナル
- 2023-05-05 22:11:052688ブラウズ
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> を使用できます。 ; タグは次のようにリンクします:
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 サイトの他の関連記事を参照してください。