検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML内に外部CSSをリンクする方法

HTML内に外部CSSをリンクする方法

下次还敢
下次还敢オリジナル
2024-04-11 06:08:40589ブラウズ

外部 CSS ファイルを接続することで、スタイル情報を HTML ドキュメントから分離できるため、コードの再利用性と保守性が向上します。具体的な手順には、外部 CSS ファイルの作成と CSS スタイルの記述が含まれます。HTML ドキュメントの セクションで、<link> 要素を使用して CSS ファイルを HTML にリンクし、href 属性の値が外部 CSS ファイル パスとしては正しいです。

HTML内に外部CSSをリンクする方法

#HTML を使用して外部 CSS をリンクする方法

外部 CSS をリンクするには、HTML を使用してスタイル情報を分離します。 HTML ドキュメントの一般的な手法。これにより、コードの再利用性と保守性が向上します。

手順:

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

    • .css を含むファイルを作成する 拡張子付きのテキスト ファイル。
      • このファイルに CSS スタイルを記述します。

  2. CSS ファイルを HTML にリンクします。

      の
    • ## HTML ドキュメント # セクションでは、<link> 要素を使用して CSS ファイルを HTML にリンクします。 
    <code class="html"><head>
  <link rel="stylesheet" href="path/to/style.css">
</head></code>
    href
  • プロパティの値を外部 CSS ファイルへの正しいパスに置き換えてください。
    • 例:

外部 CSS ファイルの名前が

style.css

で、フォルダーの css サブファイルにあるとします。 HTML ファイルが配置されているフォルダーの HTML コードは次のとおりです。 <pre class="brush:php;toolbar:false">&lt;code class=&quot;html&quot;&gt;&lt;head&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt; &lt;/head&gt;&lt;/code&gt;</pre> 注:

外部 CSS ファイルは、HTML ファイルと同じフォルダーに配置することも、別のフォルダー。
  • CSS ファイルへのパスが正しいことを確認してください。そうでないとスタイルが適用されません。
  • 複数の外部 CSS ファイルを同じ HTML ドキュメントにリンクできます。

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

css html href
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLでjsonファイルを読み取る方法次の記事：HTMLでjsonファイルを読み取る方法

関連記事

続きを見る