HTML ページに CSS を含める方法-CSSチュートリアル-php.cn

HTML ページに CSS を含める方法

WBOY

リリース： 2023-09-19 18:57:02

転載

781 人が閲覧しました

CSS は 3 つの方法で HTML ページに含めることができます。 -

Inline
ここでは、要素の style 属性で CSS スタイルを指定します。ただし、CSS の内部リンクまたは外部リンクを介してファイルをモジュール化することをお勧めします。
内部
HTML ドキュメントの
外部ローカルまたはサーバー上に配置できる .css ファイルタグへの
リンクを使用できます。外部リンクを使用してファイルをリファクタリングすると、複数の Web ページで使用できる共通の CSS ファイルを作成できます。

構文

HTML に CSS ファイルを含める構文は次のとおりです。

/*inline*/
<element style="/*declarations*/"></element>
/*internal*/
<head>
<style>
/*declarations*/
</style>
</head>
/*external*/
<head>
<link rel="stylesheet" href="#location">
</head>

ログイン後にコピー

Example

次の例は、CSS ファイルを含める方法を示しています。 CSS ファイルを HTML ページに含める

インライン CSS

ライブデモンストレーション

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:mistyrose; height: 50px;"></div>
<p style="letter-spacing: 16px; font-size: 1.3em;">
<u>Demo text here</u>
</p>
</body>
</html>

ログイン後にコピー

出力

これにより、次の出力が得られます-

如何在 HTML 页面中包含 CSS

例

内部リンク

ライブデモンストレーション

<!DOCTYPE html>
<html>
<head>
<style>
table, table *{
   border: 5px double green;
   margin: auto;
   padding: 20px;
}
tr {
   box-shadow: 0 0 0 3px red;
}
td {
   border-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

ログイン後にコピー

出力

これにより、次の出力が得られます-

如何在 HTML 页面中包含 CSS

例

外部リンク

HTML ファイル

ライブデモ

<!DOCTYPE html>
<html>
<head>
<link rel=&rdquo;stylesheet&rdquo; type=&rdquo;text/css&rdquo; href=&rdquo;style.css&rdquo;>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>

ログイン後にコピー

CSS ファイル

div {
   margin: auto;
   padding: 15px;
   width: 33%;
   border: 2px solid;
   border-radius: 50%;
}
div > div {
   border-color: green;
}
div > div > div {
   border-color: red;
}

ログイン後にコピー

Output

これにより、次の出力が得られます-

如何在 HTML 页面中包含 CSS