CSS導入方法_html/css_WEB-ITnose-htmlチュートリアル-php.cn

HTMLにCSSを導入する方法

HTMLにCSSを導入するには4つの方法があります。そのうち 2 つは CSS コードを HTML ファイルに直接追加するもので、他の 2 つは外部 CSS ファイルを導入するものです。これらの方法とその長所と短所を見てみましょう。

インラインメソッド インラインメソッドとは、HTMLタグのstyle属性に直接CSSを追加することを指します。

例:

ログイン後にコピー これは通常、悪い書き方です。現在のタグのスタイルを変更するだけです。複数の に同じスタイルを持たせたい場合は、各 に対してそれを繰り返す必要があります。 ; 同じスタイルを追加する場合は、すべてのスタイルのコードを変更する必要があります。 CSS コードをインラインで導入すると、HTML コードが冗長になり、Web ページの保守が困難になるのは明らかです。

埋め込みメソッド 埋め込みメソッドとは、HTML ヘッダーの タグの下に CSS コードを記述することを指します。

例:

.content { background: red; } ログイン後にコピー 埋め込み CSS は現在の Web ページでのみ有効です。 CSS コードは HTML ファイル内にあるため、コードがより集中的になり、テンプレート Web ページを作成する際に通常は有利になります。テンプレート コードを見れば、HTML 構造と CSS スタイルが一目でわかるからです。埋め込み CSS は現在のページでのみ有効であるため、複数のページで同じ CSS コードを導入する必要がある場合、この方法で記述するとコードの冗長性が生じ、メンテナンスに役立ちません。

Link メソッド Link メソッドは、HTML ヘッダー内の タグを使用して外部 CSS ファイルを導入することを指します。

例:

ログイン後にコピー これは CSS を導入する最も一般的で推奨される方法です。このアプローチを使用すると、すべての CSS コードが 1 つの CSS ファイル内にのみ存在するため、保守性が高くなります。また、すべての CSS コードは CSS ファイル内にのみ存在します。CSS ファイルは、今後ページを切り替えるときにのみ導入されます。

インポートメソッド インポートメソッドは、CSSルールを使用して外部CSSファイルを導入することを指します。

例:

@import url(style.css); ログイン後にコピー link メソッドと import メソッドを比較してください link メソッド (以下のリンクに置き換えられます) と import メソッド (以下の @import に置き換えられます) はどちらも外部 CSS ファイルを導入する方法です。この 2 つを比較してみましょう。 . メソッドを説明し、@import が推奨されない理由を説明します。

link は HTML に属し、外部ファイルは タグの href 属性を通じて導入されますが、@import は CSS に属するため、import ステートメントは CSS で記述する必要があることに注意してください。

@import は CSS2.1 でのみ登場した概念なので、ブラウザのバージョンが低い場合は外部スタイル ファイルをインポートできません。正しくインポートされます。

HTML ファイルがロードされると、リンクによって参照されるファイルが同時にロードされますが、@import によって参照されるファイルはページが完全にダウンロードされた後にロードされます。概要

: 外部 CSS ファイルをインポートするには、 タグを使用するか、他の 3 つの方法を控えめに使用する必要があります。 参考文献: http://www.stevesouders.com/blog/2009/04/09/dont-use-import

http://matthewjamestaylor.com/blog/adding-css-to - html-with-link-embed-inline-and-import