ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSを引用する方法
CSSを引用する方法
- PHPzオリジナル
- 2023-04-24 09:08:362096ブラウズ
CSS は Cascading Style Sheet の略称で、Web ページのスタイルを記述するために使用される言語です。 Web ページにスタイルを追加したい場合は、CSS を使用してそれを実現する必要があります。 Web ページを開発する場合、複数の CSS ファイルやスタイル シートが使用されることが多いため、CSS を正しく参照することが非常に重要です。この記事ではCSSを参照する方法を紹介します。
1. 内部スタイルシート
内部スタイルシートとは、HTML ファイル内に直接 CSS コードを記述するスタイルシートを指します。この方法は、ページの背景色、テキスト サイズ、リンクの色などの一般的なスタイルで機能します。以下に示すように、HTML ドキュメントの先頭で <style> タグを定義し、その中に CSS コードを記述します。
<!DOCTYPE html>
<html>
<head>
<title>内部样式表</title>
<style>
/* CSS代码 */
body {
background-color: #f8f8f8;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个演示如何引用CSS的网页。</p>
</body>
</html>
2. 外部スタイル シート
外部スタイル シートは通常、別個の CSS ファイルに配置され、<link> タグを通じて HTML ファイル内で参照されます。この方法は、同じスタイルを使用する複数のページに適しており、コードの重複を節約できます。まず、style.css などの CSS ファイルを作成し、次に示すように、HTML ファイルの先頭に <link> タグを追加して CSS ファイルを参照します。
<!DOCTYPE html> <html> <head> <title>外部样式表</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>欢迎来到我的网站</h1> <p>这是一个演示如何引用CSS的网页。</p> </body> </html>
以下に示すように、CSS ファイルにスタイルを記述します:
/* style.css */
body {
background-color: #f8f8f8;
}
h1 {
color: blue;
}
3. インライン スタイル
インライン スタイルとは、style# で CSS コードを記述することを指します。ラベルの #Attributes (以下に示すように):
<!DOCTYPE html> <html> <head> <title>行内样式</title> </head> <body> <h1 style="color:blue;">欢迎来到我的网站</h1> <p style="font-size:16px;">这是一个演示如何引用CSS的网页。</p> </body> </html>このメソッドは、特定の境界線スタイルの設定など、1 つのラベルのみのスタイルを設定する場合に適しています。インライン スタイルは内部および外部スタイル シートよりも優先されることに注意してください。 概要: 上で紹介した 3 つの方法はいずれも CSS を参照するために使用できます。内部スタイル シートは必要なスタイルの数が少ない状況に適しており、外部スタイル シートは複数のページで同じスタイルを使用する状況に適しており、インライン スタイルは 1 つのラベルのみをスタイル設定する必要がある状況に適しています。どの方法を使用する場合でも、CSS を正しく引用すると、Web ページの保守性と効率が向上し、スタイルの変更がより便利になります。
以上がCSSを引用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。