ホームページ > 記事 > ウェブフロントエンド > HTML ファイルに CSS スタイルを設定する方法
HTML ファイルに CSS スタイルを設定する方法
- PHPzオリジナル
- 2023-04-26 16:00:582595ブラウズ
HTML は Web ページの作成に使用されるマークアップ言語であり、CSS (Cascading Style Sheets) は Web ページの外観とスタイルを記述するために使用される言語です。 HTML と CSS を一緒に使用することで、魅力的でプロフェッショナルな外観の Web サイトを作成できます。この記事では、HTMLファイルにCSSスタイルを設定する方法を紹介します。
- 埋め込みスタイル シート
HTML ドキュメントの head タグでは、style タグを使用して CSS スタイルを定義できます。 CSS スタイルが HTML ドキュメント内に埋め込まれているため、これは埋め込みスタイル シートと呼ばれます。基本的な例を次に示します。
<!DOCTYPE html>
<html>
<head>
<title>我的网站</title>
<style>
body {
background-color: #ccc;
color: #000;
font-family: Arial, sans-serif;
}
h1 {
color: #00f;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是我的第一篇博客文章。</p>
</body>
</html>
上の例では、埋め込みスタイル シートを使用して、body 要素と h1 要素の CSS スタイルを定義しました。これらのスタイルを HTML ドキュメント全体に適用したいため、head タグ内に配置します。ご覧のとおり、CSS スタイルの構文は非常に単純です。変更するプロパティ名、コロン、プロパティ値の順に指定するだけです。
- 外部スタイル シート
埋め込みスタイル シートは非常に便利ですが、単一の HTML ドキュメントでのみ機能します。複数の HTML ドキュメントがあり、それらの間で CSS スタイルを共有したい場合は、外部スタイル シートを使用できます。外部スタイル シートは、すべての CSS スタイル定義を含む個別の CSS ファイルです。以下に示すように、link タグを使用して HTML にリンクできます。
<!DOCTYPE html> <html> <head> <title>我的网站</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>欢迎来到我的网站</h1> <p>这是我的第一篇博客文章。</p> </body> </html>
上の例では、link タグを使用して style.css ファイルを HTML ドキュメントにリンクします。 CSS ファイルには、埋め込みスタイル シートのプロパティと同じ CSS コードが含まれている必要があります。
- クラス セレクターと ID セレクター
CSS は、クラス セレクターと ID セレクターを通じて HTML 要素のスタイルを選択および変更することもできます。クラス セレクターはピリオド (.) で始まり、特定の CSS クラスを持つ要素を選択するために使用されます。要素には複数のクラスを定義できます。 ID セレクターはポンド記号 (#) で始まり、特定の ID を持つ要素を選択するために使用されます。各要素には ID を 1 つだけ持つことができます。基本的な例を次に示します:
<!DOCTYPE html>
<html>
<head>
<title>我的网站</title>
<style>
.title {
color: #f00;
font-size: 32px;
}
#intro {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1 class="title">欢迎来到我的网站</h1>
<p id="intro">这是我的第一篇博客文章。</p>
</body>
</html>
上の例では、クラス セレクター (.title) を使用して h1 要素のスタイルを定義し、ID セレクター (#intro) を使用して p 要素のスタイルを定義しました。 。セレクターの名前は、対応する HTML 要素タグの class または id 属性と同じである必要があることに注意してください。
- その他の CSS セレクター
CSS には、HTML 要素のスタイルをより正確に選択および変更するのに役立つセレクターが他にも多数あります。一般的に使用されるセレクターの一部を以下に示します。
- 子孫セレクター: 子要素内の要素を選択するために使用されます。たとえば、div p は、div 要素内にネストされているすべての p 要素を選択します。
- 隣接する兄弟セレクター: 隣接する兄弟要素を選択するために使用されます。たとえば、p span は、p の後の最初の span 要素を選択します。
- 疑似クラス セレクター: 特定の状態の要素を照合するために使用されます。たとえば、hover は、マウスが要素上にあるときに状態を選択します。
CSS では、セレクターを組み合わせて要素をより正確に選択できます。たとえば、クラス セレクターと子孫セレクターを使用して、div 内のすべての p 要素を選択できます。
div p {
color: #000;
font-size: 16px;
}
上の例では、div セレクターと p セレクターを使用して、div All にネストされたすべての p 要素を選択しました。 p 要素。
概要
基本的な CSS スタイル設定を通じて、HTML ドキュメント内の Web サイトの外観とスタイルを定義できます。埋め込みおよび外部のスタイル シート、クラス セレクターと ID セレクター、その他の CSS セレクターはすべて、ページ デザインをより柔軟でパーソナライズしたものにします。これらを使用して、魅力的でプロフェッショナルな外観の Web サイトを作成できます。
以上がHTML ファイルに CSS スタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。