ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS導入方法_html/css_WEB-ITnose
CSS導入方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:05:101348ブラウズ
HTMLにCSSを導入する方法
HTMLにCSSを導入するには4つの方法があります。そのうち 2 つは CSS コードを HTML ファイルに直接追加するもので、他の 2 つは外部 CSS ファイルを導入するものです。これらの方法とその長所と短所を見てみましょう。
インラインメソッド
インラインメソッドとは、HTMLタグのstyle属性に直接CSSを追加することを指します。
例:
<div style="background: red"></div>
これは通常、悪い書き方です。現在のタグのスタイルを変更するだけです。複数の dc6dce4a544fdca2df29d5ac0ea9906b に同じスタイルを持たせたい場合は、各 dc6dce4a544fdca2df29d5ac0ea9906b に対してそれを繰り返す必要があります。 ; 同じスタイルを追加する場合は、すべてのスタイルのコードを変更する必要があります。 CSS コードをインラインで導入すると、HTML コードが冗長になり、Web ページの保守が困難になるのは明らかです。
埋め込みメソッド
埋め込みメソッドとは、HTML ヘッダーの c9ccee2e6ea535a969eb3f532ad9fe89 タグの下に CSS コードを記述することを指します。
例:
<head> <style> .content { background: red; } </style></head> 埋め込み CSS は現在の Web ページでのみ有効です。 CSS コードは HTML ファイル内にあるため、コードがより集中的になり、テンプレート Web ページを作成する際に通常は有利になります。テンプレート コードを見れば、HTML 構造と CSS スタイルが一目でわかるからです。埋め込み CSS は現在のページでのみ有効であるため、複数のページで同じ CSS コードを導入する必要がある場合、この方法で記述するとコードの冗長性が生じ、メンテナンスに役立ちません。
Link メソッド
Link メソッドは、HTML ヘッダー内の 93f0f5c25f18dab9d176bd4f6de5d30e タグを使用して外部 CSS ファイルを導入することを指します。
例:
<head> <link rel="stylesheet" type="text/css" href="style.css"></head>
これは CSS を導入する最も一般的で推奨される方法です。このアプローチを使用すると、すべての CSS コードが 1 つの CSS ファイル内にのみ存在するため、保守性が高くなります。また、すべての CSS コードは CSS ファイル内にのみ存在します。CSS ファイルは、今後ページを切り替えるときにのみ導入されます。
インポートメソッド
インポートメソッドは、CSSルールを使用して外部CSSファイルを導入することを指します。
例:
<style> @import url(style.css);</style>
link メソッドと import メソッドを比較してください
link メソッド (以下のリンクに置き換えられます) と import メソッド (以下の @import に置き換えられます) はどちらも外部 CSS ファイルを導入する方法です。この 2 つを比較してみましょう。 . メソッドを説明し、@import が推奨されない理由を説明します。
link は HTML に属し、外部ファイルは 2cdf5bf648cf2f33323966d7f58a7f3f タグの href 属性を通じて導入されますが、@import は CSS に属するため、import ステートメントは CSS で記述する必要があることに注意してください。
@import は CSS2.1 でのみ登場した概念なので、ブラウザのバージョンが低い場合は外部スタイル ファイルをインポートできません。正しくインポートされます。
-
HTML ファイルがロードされると、リンクによって参照されるファイルが同時にロードされますが、@import によって参照されるファイルはページが完全にダウンロードされた後にロードされます。概要
: 外部 CSS ファイルをインポートするには、2cdf5bf648cf2f33323966d7f58a7f3f タグを使用するか、他の 3 つの方法を控えめに使用する必要があります。
http://www.stevesouders.com/blog/2009/04/09/dont-use-import