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

HTML内のCSSファイルを外部リンクする方法

下次还敢
リリース： 2024-04-11 10:02:56
オリジナル
1144 人が閲覧しました

HTML 外部 CSS ファイルを使用すると、メンテナンスとスタイル設定が簡素化されます。手順は次のとおりです。styles.css などの CSS ファイルを作成します。 HTML の <head> セクションで、<link> 要素を使用して、styles.css にリンクします。標準の CSS 構文を使用して、CSS ファイルでスタイルを定義します。ファイルを保存し、変更を確認します。アウトバウンド CSS の利点には、保守性、再利用性、パフォーマンスの向上が含まれます。

HTML内のCSSファイルを外部リンクする方法

HTML 外部 CSS ファイルの使用方法

外部 CSS ファイルを使用すると、HTML ドキュメントの保守とスタイル設定が容易になります。

1. CSS ファイルを作成する

まず、テキスト エディターを使用して、 などの CSS ファイルを作成します。スタイル.css。このファイルに、必要な CSS スタイルを記述します。

2. HTML ドキュメント内の CSS ファイルをリンクする

HTML ドキュメントの <head> セクションで、<link> を使用します。要素 外部 CSS ファイルへのリンク。構文は次のとおりです。 

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

ここで:

  • rel="stylesheet" は、リンクがスタイル シートを指すことを指定します。
  • href ="styles.css" CSS ファイルへのパスを指定します

3. CSS スタイルを定義します

標準を使用して、CSS スタイルを外部 CSS ファイルに配置します。 CSS 構文。例: 

<code class="css">body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}</code>
ログイン後にコピー

4. 変更の表示

HTML ファイルと CSS ファイルを保存し、ブラウザで HTML ファイルを開きます。 CSS スタイルがページに適用されていることがわかります。

利点

外部 CSS ファイルを使用すると、次の利点があります:

  • 優れた保守性: すべてのスタイルが 1 つのファイルに集中しているため、更新とメンテナンスが簡単です。
  • 再利用性: 同じ CSS ファイルを複数の HTML ページに使用できるため、コードの再利用性が向上します。
  • パフォーマンス:CSS ファイルを個別にロードすると、HTML ファイルのサイズが削減され、ページの読み込み速度が向上します。

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

関連ラベル：
css
ソース：php.cn
前の記事：HTMLでファイルを開く方法 次の記事：HTMLでフォントの色を変更する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！