ホームページ  >  記事  >  ウェブフロントエンド  >  CSS を導入する 4 つの方法とその優先順位_html/css_WEB-ITnose

CSS を導入する 4 つの方法とその優先順位_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:34:001784ブラウズ

最初: CSS を導入する 4 つの方法

CSS を導入する 4 つの方法は: インライン スタイル、インライン スタイル、リンク スタイル、インポート スタイル

1. インライン スタイル

最も多い。直接的で簡単な方法は、HTML タグで を直接使用することです。例:

欠点: HTML ページは純粋ではありません。ファイルサイズが大きいため、スパイダーが這い回るのに適しておらず、後のメンテナンスが不便です。

2. インライン スタイル

インライン スタイルとは、 の間に CSS コードを記述し、それを で宣言することを意味します。例:

< ;style type="text/css">

body,div,a,img,p{margin:0;padding:0;}

メリットとデメリット: ページ public の使用Web サイトのページ数が多い場合、各ファイルのサイズが大きくなり、CSS コードの数が少ない場合は、このスタイルでも非常に複雑になります。

3. リンク スタイル

リンク スタイルは、 の間に を追加するだけです。

メリットとデメリット: ページフレームコードとパフォーマンス CSS コードの完全な分離が実現されます。 -制作と後のメンテナンスが非常に便利です

4. スタイルのインポート (推奨されません)

インポート スタイルは、HTML の初期化時に使用される CSS スタイル シートをインポートするのに使用します。 2 番目のインライン スタイルと同様に、これを HTML または CSS ファイルにインポートし、ファイルの一部になります。

@import は次のように HTML で使用されます:


@import in CSS次のように使用します:

@import url(style.css);

2 番目: 4 つの CSS 導入方法の優先順位

1. 理論的には: inline > inline >Link>Import

3. 実際: 埋め込み、リンク、インポートは同じファイルヘッダー内にあり、対応するコードに近い方が優先されます

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