インポートされたスタイルシート CSS とリンクされたスタイルシート CSS の違い-CSSチュートリアル-php.cn

インポートされたスタイルシート CSS とリンクされたスタイルシート CSS の違い

高洛峰

リリース： 2016-12-16 15:37:13

オリジナル

2495 人が閲覧しました

<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 サイトに注目してください。