複数の CSS ファイルを 1 つの CSS ファイルにインポートする方法-CSSチュートリアル-php.cn

複数の CSS ファイルを 1 つの CSS ファイルにインポートする方法

高洛峰

リリース： 2016-12-16 15:48:02

オリジナル

1509 人が閲覧しました

HTML に CSS を導入する 2 つの方法:

インポートとリンクの目的は、独立した CSS ファイルをファイルに導入することです。実際、この 2 つの最大の違いはリンクの種類です。は HTML タグを使用して外部 CSS ファイルを導入しますが、インポートタイプは CSS ルールを使用して外部 CSS ファイルを導入します。したがって、それらの構文も異なります。

1. リンクスタイルを使用する場合は、次のステートメントを使用して外部 CSS ファイルを導入する必要があります:

2. import を使用する場合は、次のステートメントを使用する必要があります:

「」さらに、これら 2 つの方法の実際の効果も少し異なります。リンクタイプを使用する場合、ページの主要部分をロードする前に CSS ファイルがロードされるため、実際のページには最初からスタイル効果が適用されます。インポートタイプを使用する場合、CSS ファイルはページ全体の後にロードされます。一部のブラウザでは、ページファイルが比較的大きい場合、スタイルが設定されていないページが最初に表示され、その後スタイルを設定した効果が表示されます。閲覧者の観点から見ると、これはインポートを使用する場合の欠点です。
「大規模な Web サイトの場合、メンテナンスを容易にするために、すべての CSS スタイルを複数の CSS ファイルに含めることができます。このように、リンクインポートを使用する場合は、CSS ファイルを個別にインポートするためのいくつかのステートメントが必要になります。 CSSファイルの分類を調整したい場合は、HTMLファイルも同時に調整する必要があります。これはメンテナンス作業の欠点となります。 import メソッドを使用する場合は、一般的な CSS ファイルをインポートしてから、このファイル内の他の独立した CSS ファイルをインポートすることしかできませんが、link メソッドにはこの機能がありません。
````そこで、ここでの提案は、CSS ファイルを 1 つだけ導入する場合はリンクメソッドを使用し、複数の CSS ファイルを導入する必要がある場合は、最初にリンクメソッドを使用して「ディレクトリ」CSS ファイルを導入することです。「ディレクトリ」 css ファイルで import を使用して、他の css ファイルを導入します。
````しかし、JavaScript を通じてどの CSS ファイルをインポートするかを動的に決定したい場合は、リンクを使用してこれを実現する必要があります。

複数の CSS ファイルを 1 つの CSS ファイルにインポートするにはどうすればよいですか?

答え:

3 つの CSS スタイルシートを作成できます
css_red.css 、 css_blue.css 、 css_green.css
このようにして、メインスタイル style.css を作成し、3 つのスタイルシートすべてをインストールできます:
@import "css_red.css";
@import "css_blue.css";

呼び出し時に style.css を呼び出すだけです。

具体的なコード:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>字体属性</title>
<link rel="stylesheet"  type="text/css" href="style.css" />
</head>

<body>
<p class="red">红色</p>
<p class="blue">蓝色</p>
<p class="green">绿色</p>
</body>
</html>

ログイン後にコピー

style.css

@charset "utf-8";


@import "css_red.css";
@import "css_blue.css";
@import "css_green.css";

ログイン後にコピー

css_red.css

@charset "utf-8";


.red {
color:red;
}

ログイン後にコピー

css_blue.css

@charset "utf-8";


.blue{
color:blue;
}

ログイン後にコピー

css_green.css

@charset "utf-8";


.green{
color:green;
}

ログイン後にコピー

複数のCSSをインポートする方法ファイルを 1 つにまとめますCSS ファイル内の関連記事については、PHP 中国語 Web サイトに注意してください。