ホームページ > 記事 > ウェブフロントエンド > HTMLで外部CSSファイルを参照する方法
HTMLで外部CSSファイルを参照する方法
- 下次还敢オリジナル
- 2024-04-11 12:08:57476ブラウズ
外部 CSS ファイルを参照するにはどうすればよいですか? <link> タグを使用して、rel="stylesheet" 属性と href="CSS file path" 属性を指定します。外部 CSS ファイルを作成する CSS ファイルを Web サーバーに保存する HTML で <link> タグを使用する <head>
参照方法HTML 外部 CSS ファイル
HTML で外部 CSS ファイルを参照するのは簡単です。<link> タグを使用するだけです。
構文:
<code class="html"><link rel="stylesheet" href="path/to/stylesheet.css"></code>
手順:
-
外部 CSS ファイルの作成: 保存
.css拡張子を持ち、CSS ルールに従ってスタイル設定されたファイル。 - CSS ファイルを Web サーバーに保存します。 CSS ファイルを Web サーバー上の HTML ファイルと同じ場所にアップロードします。
-
HTML コードで
<link>タグを使用します:<head>に<link> を追加します。セクションタグで、rel="stylesheet"およびhref="path/to/stylesheet.css"属性を指定します。hrefプロパティの値は、CSS ファイルへのパスである必要があります。
例:
<code class="html"><!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyles.css"> </head> <body> <h1>标题</h1> <p>段落</p> </body> </html></code>
利点:
外部 CSS ファイルを使用すると、次の利点があります:
- コードの保守性: スタイル コードと HTML コードは分離されており、編集と更新が簡単です。
- スタイルの再利用: 同じ CSS ファイルを複数の HTML ファイルで使用して、一貫した外観を実現できます。
- パフォーマンスの最適化: ブラウザは CSS ファイルを 1 回キャッシュして、その後の読み込み時間を短縮します。
以上がHTMLで外部CSSファイルを参照する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSファイルをHTMLに導入する方法次の記事：CSSファイルをHTMLに導入する方法