ホームページ > 記事 > ウェブフロントエンド > インポートされたスタイルシート CSS とリンクされたスタイルシート CSS の違い
インポートされたスタイルシート CSS とリンクされたスタイルシート CSS の違い
- 高洛峰オリジナル
- 2016-12-16 15:37:132479ブラウズ
<span style="font-family:Arial;"><!-- 链接外部样式：也就是在与<head>与</head>标记之间加入一个<link>标记。 --> <head> <link href=”style.css” rel=”stylesheet” type=”text/css” /> </head> <!-- 导入外部样式：在内部样式表的<style></style>标记之间导入一个外部样式表，导入时用@import。 --> <style type="text/css"> @import "CssStyle.css"; </style></span>
いつも違いが分からないので、時間があるうちに調べてみました
まず第一に、外部スタイルのリンクと外部スタイルのインポートを区別しましょう:
これらの 2 つのタイプはわかっています。外部参照のスタイル関数はほぼ同じです。どちらも独立した CSS スタイル ファイルを Web ページ ファイルに参照します。ただし、この 2 つにはまだ微妙な違いがいくつかあります (同じものを 2 つ作成するほど退屈なデザインではないため)。 ) について、私が学んだ 2 つの側面に基づいて説明します:
1. link link css を使用するということは、クライアントが Web ページを閲覧するときに、まず外部 CSS ファイルを Web ページに読み込み、次にそれをコンパイルすることを意味します。表示。この場合、表示された Web ページは予想どおりの効果をもたらします。ネットワーク速度が遅くても、効果は同じです。 @import を使用してインポートされた CSS は異なります。クライアントが Web ページを参照すると、最初に HTML の構造が表示され、次に外部 CSS ファイルが Web ページにロードされます。もちろん、最終的な効果は前者と同じです。 , しかし、ネットワーク速度が遅い場合、CSS が統一されていない HTML Web ページが最初に表示されるため、読者に非常に悪い印象を与えます。これは、ほとんどの Web サイトの CSS がリンクを使用する主な理由でもあります。
2. スタイルをインポートすると、1 つの CSS ファイルを参照するページが多すぎるのを避けることができます。 Webサイト内で同じCSSファイルを使用しているページが少ない場合は、どちらの方法でも効果にほとんど差はありませんが、Webサイトのページ数がある程度以上になると（Sinaや他のポータルなど）、 )、リンク メソッドを使用するのは難しい場合があります。これにより、複数のページが同じ CSS ファイルを呼び出すため速度が低下しますが、通常、このレベルのページに到達できる Web サイトには、最適なハードディスクを使用する資本もあります。 , したがって、この要素について心配する必要はありません。
上記 2 つの要素に基づいて、ほとんどの Web サイトが外部 CSS を参照するためにリンクを使用することを好むことがわかります。
インポートされたスタイルシート CSS とリンクされたスタイルシート CSS の違いに関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。