ホームページ > 記事 > ウェブフロントエンド > HTML ページに CSS を導入するいくつかの一般的な方法
HTML ページに CSS を導入するいくつかの一般的な方法
- PHPzオリジナル
- 2023-04-06 12:47:282685ブラウズ
CSS は、Web ページのスタイルを設定するために使用されるプログラミング言語であり、Web ページをより美しく、プロフェッショナルに見せることができます。 CSS を使用して Web ページを装飾する前に、CSS を Web ページに導入する必要があります。この記事では、CSS を導入する一般的な方法をいくつか紹介します。
1. インライン スタイル シート
インライン スタイル シートとは、HTML 要素の style 属性に CSS コードを直接記述することを指します。この方法は、個々の要素がカスタム スタイルを必要とする状況に適しています。例:
<p style="color: red; font-size: 18px;">这是一个段落</p>
2. 内部スタイル シート
内部スタイル シートとは、<style> タグを使用してドキュメントの先頭に CSS コードを導入することを指します。 HTML 全体を制御する ドキュメントのスタイル。例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档标题</title>
<style>
p{
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
3. 外部スタイル シート
外部スタイル シートとは、CSS コードを CSS ファイルに個別に保存し、HTML ドキュメントで <link> を渡すことを指します。 タグはファイルを参照します。この方法は、複数のページを制御する必要があるスタイルに適しており、HTML ドキュメントをより簡潔にすることができます。例:
style.css ファイルに CSS コードを書き込みます:
p{
color: red;
font-size: 18px;
}HTML ドキュメントで CSS ファイルを参照します:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档标题</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>这是一个段落</p> </body> </html>4。スタイル シートのインポート は外部スタイル シートに似ています。スタイル シートをインポートすると、ドキュメントの先頭にある
<style> タグを使用して CSS ファイルも導入されます。違いは、インポートされたスタイルシートは @import 構文を使用して外部 CSS ファイルを導入することです。例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档标题</title>
<style>
@import url("style.css");
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>上記は、CSS を導入する一般的な方法をいくつか示しています。さまざまな使用シナリオの下で、さまざまな導入方法を選択することで、Web 開発をより効率的かつ簡潔にすることができます。 以上がHTML ページに CSS を導入するいくつかの一般的な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。