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

WBOY
リリース: 2023-09-19 18:57:02
転載
772 人が閲覧しました

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

以上がHTML ページに CSS を含める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!