ホームページ  >  記事  >  ウェブフロントエンド  >  CSSを導入する4つの方法とは?

CSSを導入する4つの方法とは?

王林
王林転載
2020-05-15 09:12:317278ブラウズ

CSSを導入する4つの方法とは?

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

1. インライン スタイル

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

<p style="color:#F00; "></p>

欠点: HTML ページはファイルサイズが大きいため、クモが這いにくく、後のメンテナンスが不便です。

(ビデオ チュートリアルの推奨: css ビデオ チュートリアル)

2. インライン スタイル

インライン スタイルは、1e8e4072c3a52b44cda64f7fc3dd142c を使用し、c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 で宣言します (例:

<style type="text/css">
body,div,a,img,p{margin:0; padding:0;}
</style>

長所と短所: このページではパブリック CSS コードが使用されており、すべてのページで定義する必要があります。 Web サイトのページ数が多くなると、各ファイルが大きくなり、後のメンテナンスが難しくなりますが、ファイル数が少なく、CSS コードも少ない場合には、このスタイルが最適です。

3. リンク スタイル

リンク スタイルは、最も頻繁に使用され、最も実用的なスタイルです。93f0f5c25f18dab9d176bd4f6de5d30e

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

長所と短所: ページ フレーム コードとパフォーマンス CSS コードの完全な分離が実現され、制作前と保守後の作業が非常に便利になります

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

インポート スタイルはリンク スタイルに似ています。CSS スタイル シートをインポートするには @import スタイルを使用します。HTML の初期化中に、HTML または CSS ファイルにインポートされ、ファイルの一部になります。 、2 番目のインライン スタイルに似ています。

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

<style type="text/css">
@import url(style.css);
</style>

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

@import url(style.css);

推奨チュートリアル: css クイック スタート

以上がCSSを導入する4つの方法とは?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はjb51.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。