ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTMLページにCSSを記述する方法
HTMLページにCSSを記述する方法
- 王林オリジナル
- 2023-05-09 10:59:372595ブラウズ
CSS (Cascading Style Sheets) は、HTML ページをデザインし、美しくするために使用されるテクノロジーです。 CSS スタイルは、HTML ドキュメント内の c9ccee2e6ea535a969eb3f532ad9fe89 タグを通じて、または外部 CSS ファイルから作成および参照できます。
以下は、HTML ページに CSS スタイルを記述する方法の詳細な紹介です。
- 埋め込み
埋め込みとは、< ; を使用して CSS スタイルを HTML ページに直接埋め込むことを指します。 style> タグは CSS コードをラップします。例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内嵌式CSS样式表</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一段普通的文字</p>
</body>
</html>上の例では、最初に e8e496c15ba93d81f6ea4fe5f55a2244 タグを使用してドキュメントの文字セットを設定し、次に c9ccee2e6ea535a969eb3f532ad9fe89 タグは 93f0f5c25f18dab9d176bd4f6de5d30e タグ内に配置する必要があり、すべての CSS スタイルは c9ccee2e6ea535a969eb3f532ad9fe89 タグ内に配置する必要があることに注意してください。 CSS スタイルを 6c04bd5ca3fcae76e30b72ad730ca86d タグ内で直接使用することは無効です。 この場合、CSS スタイルを保存するには、.css 拡張子の付いたファイルを使用する必要があります。ファイルはサーバーまたはローカル コンピュータに配置できます。例: HTML ページでは、2cdf5bf648cf2f33323966d7f58a7f3f タグを使用して、外部 CSS ファイルを HTML ドキュメントに関連付ける必要があります。例: 上記のコードでは、2cdf5bf648cf2f33323966d7f58a7f3f タグを使用して style.css ファイルを HTML ドキュメントに関連付けます。 href 属性は、CSS ファイルの URL または相対パスを指している必要があることに注意してください。 CSS ファイルが HTML ドキュメントと同じディレクトリにある場合、href 属性は CSS ファイル名を直接指すことができます。 インラインでは、HTML 要素の style 属性で CSS スタイルを定義します。各属性はセミコロンで区切る必要があり、属性値は引用符で囲む必要があります。インラインを使用すると、HTML コードが乱雑になり、保守が困難になる可能性があることに注意してください。したがって、実際のプロジェクトでインラインを使用することは一般的に推奨されません。 概要 以上がHTMLページにCSSを記述する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
外部スタイル シートとは、CSS スタイルを別のファイルに配置し、2cdf5bf648cf2f33323966d7f58a7f3f タグを通じて HTML ページ内で参照することを意味します。外部スタイル シートには、何度も使用でき、メンテナンスが簡単であるという利点があります。 /* css/style.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部式CSS样式表</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一段普通的文字</p>
</body>
</html>
インライン スタイルとは、CSS スタイルを HTML 要素に直接適用することを指します。スタイルシートで定義するのではなく。例: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内式CSS样式表</title>
</head>
<body>
<h1 style="color: #333; text-align: center;">欢迎来到我的网站</h1>
<p style="font-family: Arial, sans-serif;">这是一段普通的文字</p>
</body>
</html>
HTML ページに CSS スタイルを記述する場合、インライン、外部、およびインライン メソッドを使用してそれを実現できます。その中でも、外部スタイルは最も一般的に使用される方法であり、スタイルを 1 つのファイルに集中させてメンテナンスを容易にし、複数回使用することができます。インラインおよびインライン形式の場合は、必要な場合にのみ使用することをお勧めします。そうしないと、HTML コードが乱雑になり、保守が困難になる可能性があります。