ホームページ  >  記事  >  ウェブフロントエンド  >  WebCSSコントロールページ(リンク方式とインポート方式の違い)_html/css_WEB-ITnose

WebCSSコントロールページ(リンク方式とインポート方式の違い)_html/css_WEB-ITnose

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

まず理解してください:

【1】 Web ページの 2 つの要素「Table」と「DIV」は異なる目的を持っています まず、Table の目的はデータを保存することであり、DIV の目的は設定です。ページ構造

または W3C は、World Wide Web Consortium の略称で、中国語では W3C Organization または Wanwei Network Alliance です。 W3C 標準は標準ではなく、一連の標準の集合体であり、構造 (Structure)、プレゼンテーション (Presentation)、および動作 (Behavior) の 3 つの部分で構成されています。

構造標準言語には主に XHTML と XML が含まれ、パフォーマンス標準言語には主に CSS が含まれ、動作標準言語には主にオブジェクト モデル (W3C DOM など) や ECMAscript などが含まれます。

一般的に「DIV」とは言えません+CSS」の場合はそのまま言ってください。「XHTML+CSS」の場合、この 2 つの名前は後者になる傾向があります。

【2】 CSS でページを制御するには、インライン スタイル、インライン スタイル、リンク スタイル、インポート スタイルの 4 つの方法があります

1. 次のようなインライン スタイル:


HTML ページが十分に純粋ではなく、ファイル サイズが大きすぎるため、検索スパイダーのクローリングに役立たず、後のメンテナンス コストが高くなる可能性があります。 。

2: 次のようなインライン スタイル: ... .. & lt;/head & gt;

Web サイトのページ数が多いと、埋め込みメソッドが大きくなり、後のメンテナンスが難しくなります。 head>... ...< ;/head>

このスタイルは HTML ファイルを完全に分割します。と CSS ファイルを 2 つ以上のファイルに分割すると、ページ フレームの HTML コードとパフォーマンス CSS コードが完全に分離され、制作前と制作後のメンテナンスが非常に便利になります。この方法を使用することをお勧めします。入力 4: @import "style.css" のようなインポート スタイル

は、埋め込みスタイル

と同様に、HTML の初期化時に HTML ファイルにインポートされます。 ====== =========================================== ====== =========================================== ====== =======

【3】リンクスタイルとインポートスタイルの違い:

link
link は外部 CSS を Web ページに接続します。

@import

インポートとリンクの違いは、他の複数の CSS ファイルを 1 つの CSS ファイルに導入できることです。

@import を使用する理由
ほとんどの人が @import を使用するのは、古いブラウザが @import をサポートしていないためです。つまり、@import を使用して、最新のブラウザのみが解析できる CSS スタイルを導入できるということです。
もう 1 つの主な理由は、Web がページでは、複数の外部 CSS ファイルを導入する必要があります。リンクを使用して CSS を導入し、@import メソッドを使用してこの CSS ファイルに他のいくつかの CSS ファイルを導入できます。管理が簡単です。

リンクを使用する理由
。リンクを使用する主な理由の 1 つは、Firefox、Opera、Safari などの最新のブラウザーはすべて rel="alternate stylesheet" 属性 (つまり、ブラウザーで別のスタイルを選択する) をサポートしているため、ユーザーが CSS スタイルを切り替えられるようにできることです。 )、もちろん、JavaScript を使用して、IE がユーザーのスタイル変更をサポートするようにすることもできます

@import に関する小さな問題
Web ページの head タグが @import 属性のみを含む非常に単純な場合、ユーザーが遅いインターネット速度で閲覧すると、スタイルのないページが表示されますが、CSS ファイルがダウンロードされると適切なスタイルが表示されるようになります。この問題を回避するには、少なくとも 1 つのスタイルが存在することを確認する必要があります。
04-11 更新: @import により、CSS の全体的な読み込み時間が長くなり、たとえば、@ の後に配置されるファイルのダウンロード順序が変更されます。 import は CSS の前にロードされます。

どの方法を使用すればよいですか?
現時点では、モジュール化する必要がある場合は、小規模な Web サイトではリンクを使用する方が適切であると思われます。将来の CSS では、必ず @import を使用します。



たとえば、次の方法を使用できます: 3 つの CSS ファイル (base.css/common.css/page.css) と @import を作成します。それらを別の CSS ファイル ( style.css 、他の名前も使用できます) に追加し、ページ上の style.css のみを接続すると、コードをより適切に維持できます








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