HTMLで外部CSSファイルを接続するにはどうすればよいですか?

フロントエンドを学ぶときは、CSS が HTML タグにさまざまなスタイルを追加して、これらのタグのコンテンツを表示する方法をブラウザーに指示することを知っておく必要があります。 CSSはHTMLにさまざまなスタイルを追加するために使用されるため、外部のCSSテキストをHTMLに導入するにはどうすればよいですか?この記事ではHTMLにCSSファイルを導入する4つの方法を紹介します。具体的な内容を見ていきましょう。

外部 CSS ファイルを HTML に接続する方法:

1. HTML を使用して CSS ファイルを div に直接導入します。 CSS スタイルの作成 div css webpage

<div style="border:1px red solid;">html引入css文件</div>

注: CSS ファイルを HTML に導入するこの方法は、ページに多くのタグが含まれるようになり、見た目が煩雑になり、CSS の利点を反映していないため、お勧めできません。もちろん、この方法を本当に使用したい場合は、頻繁に変更されない場所で使用することもできますが、それでもお勧めできません。

2. CSS ファイルを導入する HTML の組み込みスタイルを使用します。

CSS をヘッダーに直接記述します。手順: CSS ファイルを HTML に導入するこの方法は、ページ数が少ない場合の使用に適しています。利点: スピード 高速で、すべての CSS コントロールはこのページ タグ用であり、冗長な CSS コマンドはなく、CSS ファイルを外部にリンクする必要もありません。 HTML ドキュメント内のスタイルを直接読み取ります。デメリット: ページ数が多いと、1 ページを修正するのが非常に面倒になります。 ページが肥大化し、他の HTML から CSS が参照できないため、コード量が比較的多くなり、メンテナンスが面倒になります。しかし、この方法を使用する企業のほとんどは裕福な企業であり、ユーザーの数が重要であり、人材が不足しているわけではありません。 複雑なメンテナンス作業を実行します。

3. CSS ファイルを HTML に導入するときに、@import を使用して外部 CSS ファイルを参照します。

独立した .css ファイルを HTML に導入します。 HTML ファイルでは、インポート タイプは CSS ルールを使用して、 タグ内に記述されます。

<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>

4. HTML で CSS ファイルを導入する場合 外部 CSS ファイルを参照するにはリンクを使用します。 Web の

<style type="text/css">
    @import"mystyle.css"; 此处要注意.css文件的路径
</style>