简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

HTML内で外部CSSを参照する方法

下次还敢
リリース： 2024-04-11 11:15:29
オリジナル
976 人が閲覧しました

はい、HTML を使用して外部 CSS を参照することは可能です。これにより、コードの簡素化と保守性のためにスタイル ルールを HTML ドキュメントから分離できます。具体的な手順は次のとおりです: スタイル ルールを含む CSS ファイルを作成します。HTML ドキュメントの 要素で、 要素を使用して外部 CSS ファイルにリンクし、rel 属性でリンク タイプを指定します。 "stylesheet" として指定し、href 属性で URL または外部 CSS ファイルへの相対パスを指定します。

HTML内で外部CSSを参照する方法

#HTML を使用して外部 CSS を参照する方法

HTML を使用して外部 CSS を参照するのは一般的な方法です。スタイルを使用できます。 ルールは HTML ドキュメントから分離されるため、コードがよりクリーンで保守しやすくなります。 HTML で外部 CSS を参照する方法は次のとおりです:

1. CSS ファイルの作成

まず、スタイル ルールを含む CSS ファイルを作成します。たとえば、

style.css という名前のファイルを次の内容で使用できます: 

<code class="css">body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

h1 {
  color: blue;
}</code>
ログイン後にコピー

2. CSS ファイルを HTML

にリンクします。 HTML ドキュメントの

要素内で、 要素を使用して外部 CSS ファイルにリンクします。以下に示すように: 

<code class="html"><head>
  <link rel="stylesheet" href="style.css">
</head></code>
ログイン後にコピー

3. 説明

要素の rel 属性は、この場合は「スタイルシート」と入力します。 href 属性は、外部 CSS ファイルの URL または相対パスを指定します。

外部 CSS ファイルを使用すると、すべてのスタイル ルールを一元管理でき、各 HTML ページを変更せずに Web サイト全体のスタイルを簡単に変更できます。

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

関連ラベル：
css
ソース：php.cn
前の記事：htmlの開き方 次の記事：HTMLとCSSを接続する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
WordPress 6.0 (add_editor_style) が Gutenberg エディターで style.css を読み込まない カスタムWordPressブロックテーマを作成するためにUdemyWordPressコースを受講しています。 function.php にブロック タイプが正常に登録され、Gute...
から 2023-11-12 20:37:50
0
2
261
CSS の小数点の先頭のゼロが大きな数値では機能しない 最近、100 を超えるリスト項目を含む順序付きリストを作成したときに問題が発生しました。 list-style:10 進数先頭ゼロ;ol{list-style:10 進数先頭ゼロ;...
から 2023-11-07 10:35:53
0
1
236
Sass エラー: ファイルはすでにロードされています: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; src\css\quasar.variables.scss 私は quasar フレームワークを使用しており、プロジェクトのコンパイル中に上記のエラーが発生しました。モジュールのビルドに失敗しました (./node_modules/sass...
から 2023-11-06 21:38:55
0
1
219
HTML/CSSに背景ビデオを埋め込むにはどうすればよいですか? 皆さん、こんにちは。最近問題が発生しました。自分のサイトにビデオの背景を設定しようとしていますが、中央揃えのテキストが一番下まで表示されます。理由はわかりませんが、ナビゲーション ...
から 2023-11-06 13:59:13
0
1
240
JavaScriptでCSS/HTMLの名前付きcolorのRGB値を取得する方法 [name-rgb] という名前の Javascript オブジェクトを作成しました。 Basic:namedColors={AliceBlue:[240,248,255],Ant...
から 2023-11-06 09:05:50
0
2
210
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！