ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLにCSSを読み込む方法

HTMLにCSSを読み込む方法

藏色散人
藏色散人オリジナル
2021-07-27 10:55:4712506ブラウズ

HTML に CSS を読み込む方法: 1. 外部スタイルを通じて CSS を読み込む; 2. 内部スタイルを通じて CSS を読み込む; 3. インライン スタイルを通じて CSS を読み込む; 4. インポートされたスタイルを通じて CSS を読み込む。

HTMLにCSSを読み込む方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター

HTML に CSS を読み込むには?

読み込むcssスタイルは4種類あります

1.外部スタイル(外部スタイル)

cssが外部ファイルの場合, HTML ファイルの 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 に

<link href="style.css" rel="stylesheet" type="text/css" />

href="style.css" と記述できます。ここに CSS ファイルのパスを記述できます。

このフォームはcssを別途cssファイルに記述し、ソースコード内にリンクとしてリンクします。このページだけでなく、他のページからも呼び出せるのが利点で、最もよく使われる形式です。

2. 内部スタイル (埋め込みスタイル)

内部スタイルとも呼ばれます。93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 に

<style type="text/css">
h3 { color:#f00;}
</style>

と書くことができます。c9ccee2e6ea535a969eb3f532ad9fe89 と 531ac245ce3e4fe3d50054a55f265927 で終わり、head タグに記述されますソースコードの。このようなスタイルシートはこのページでのみ有効です。他のページには適用できません。

3. インライン スタイル

CSS スタイルを HTML タグに直接記述することもできます

<p style="font-size:18px;">内部样式</p>

タグ内で style とマークされているこの種のスタイルはインライン スタイルです。 style はタグ内の要素のみ有効ですが、コンテンツから分離されていないため、使用はお勧めできません。

4. インポート スタイル

@import url("public.css");

インポートされたスタイルは、@import URL タグでリンクされた外部スタイル シートで、通常は別のスタイル シート内で使用されます。 Index.css がホームページで使用されるスタイルの場合、グローバルに必要なパブリック スタイルを public.css ファイルに配置し、

@import url("/public .css") を使用できます。

を使用してグローバル スタイルをリンクすることで、コードの再利用性が高くなります。

【推奨学習: css ビデオ チュートリアル

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

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