ホームページ > 記事 > ウェブフロントエンド > CSSとHTMLを連携させる方法
CSSとHTMLを連携させる方法
- WBOYオリジナル
- 2023-05-29 18:30:385425ブラウズ
HTML と CSS は Web 開発の 2 つの基本スキルです。HTML は Web ページの構造を構築するために使用され、CSS は Web ページの外観を美しくするために使用されます。経験豊富な Web 開発者でも初心者でも、これら 2 つのスキルを組み合わせて本当に優れた Web ページを作成する方法を知る必要があります。
1. 内部 CSS を使用する
HTML ページの head タグで、c9ccee2e6ea535a969eb3f532ad9fe89 タグを使用して CSS スタイルを埋め込むことができます。必要なすべての CSS スタイルを c9ccee2e6ea535a969eb3f532ad9fe89 タグで定義すると、HTML ページの読み込み時にドキュメントに CSS スタイルが適用されます。たとえば、次の例:
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<style>
body {
background-color: blue;
}
h1 {
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是我的第一个网页</p>
</body>
</html> 上記のコードでは、c9ccee2e6ea535a969eb3f532ad9fe89 タグに CSS スタイルを埋め込むことで、ページの背景色を青に設定し、タイトルの色を白に設定します。そして中央揃え。
2. 外部 CSS ファイルを使用する
複数の HTML ページで同じ CSS スタイルを使用したい場合、内部 CSS の使用は非常に冗長になります。現時点では、外部 CSS ドキュメントを使用できます。 。 style.css などの .css 接尾辞が付いた新しいファイルを作成し、HTML ページの head タグ内の 2cdf5bf648cf2f33323966d7f58a7f3f タグを使用して CSS スタイル ファイルをページにリンクします。例:
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是我的第一个网页</p>
</body>
</html>スタイル ファイル style.css では、使用する必要があるすべての CSS スタイルを定義できます。
body {
background-color: blue;
}
h1 {
color: white;
text-align: center;
}3. インライン CSS の使用
内部 CSS ファイルと外部 CSS ファイルに加えて、インライン CSS も使用できます。インライン CSS は、HTML タグ内で style 属性を使用して CSS スタイルを定義することを指します。例:
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1 style="color: white; text-align: center;">欢迎来到我的网页</h1>
<p style="background-color: blue;">这是我的第一个网页</p>
</body>
</html>上記のコードでは、4a249f0d628e2318394fd9b75b4636b1 タグと e388a4556c0f65e1904146cc1a846bee タグの style 属性を使用してタイトルを定義します。それぞれ色と配置、および段落の背景色です。
概要
内部 CSS、外部 CSS ファイル、インライン CSS のいずれであっても、その最終的な目的は Web ページの外観を美しくすることです。実際の開発では、実際の状況に応じて CSS と HTML をリンクするさまざまな方法を選択できます。定義する CSS スタイルが多い場合は、外部 CSS ファイルを使用できます。定義するスタイルが少ない場合は、内部 CSS またはインライン CSS を使用できます。
以上がCSSとHTMLを連携させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。