CSSファイルを別のCSSファイルに含めることはできますか？

782

css

— ガイスカアジェンデ
ソース

26

ファイだけですが、これを行ってもHTTPリクエストは保存されません。インポートした.cssファイルを別の場所に含める必要がなくなるだけです。

— T.ブライアンジョーンズ

1

私は以前に別のCSSを含めるのとほとんど同じですが、ベストプラクティスではありません

— Gaizka Allende 14

1087

はい：

@import url("base.css");

注意：

@importルールが先行しなければならない（除く他のすべてのルールを@charset）。
追加の@importステートメントには、追加のサーバー要求が必要です。別の方法として、すべてのCSSを1つのファイルに連結して、複数のHTTPリクエストを回避します。例えば、内容のコピーbase.cssとspecial.cssにbase-special.cssのみ参照をbase-special.css。

— ケビン・リード
ソース

143

はい。CSSファイルを別のCSSファイルにインポートすることが可能です。

@importルールを使用するスタイルシートの最初のルールである必要があります。

@import "mystyle.css";
@import url("mystyle.css");

唯一の注意点は、古いWebブラウザではサポートされないことです。実際、これはCSSのスタイルを古いブラウザから隠すための「ハック」の1つです。

ブラウザのサポートについては、このリストを参照してください。

— ロニー・リーウ
ソース

42

@import url("base.css");すべてのことに注意して罰金が、クマを働く@import文は、サーバーへの新たな要求です。これは問題にはならないかもしれませんが、最適なパフォーマンスが必要な場合は、を避けてください@import。

— 遺伝子
ソース

2

CSSファイルはキャッシュされませんか？それで、ファイルを要求するのは一度だけですか？心配するのはささいなことのようです。

— エンドリス2014

1

あなたがCSSを1つのファイルに縮小していない場合は、そうです、そうですが、それができたら、1つのCSSファイルを呼び出すだけです。もちろん間違っていたら訂正してください。

— mjwrazor 2017年

27

CSS @importルールはまさにそれを行います。例えば、

@import url('/css/common.css');
@import url('/css/colors.css');

— セーレン・ククラウ
ソース

16

はい。

@import "your.css";

ルールはここに文書化されています。

— ゴードンウィルソン
ソース

11

場合によっては、@ import "file.css"を使用することが可能であり、ほとんどの最新のブラウザーはこれをサポートする必要があります。NN4などの古いブラウザーは、少し厄介です。

注：importステートメントは、ファイル内の他のすべての宣言の前に置き、本番環境で使用する前にすべてのターゲットブラウザーでテストする必要があります。

— Seanb
ソース

8

はい、@ importを使用します

詳細な情報を簡単に検索できます。http： //webdesign.about.com/od/beginningcss/f/css_import_link.htmをご覧ください。

— DarenW
ソース

6

はい、@ importを使用してcssファイルのパスを指定することは可能です。

@import url("mycssfile.css");

または

@import "mycssfile.css";

— ビディ
ソース

6

@import("/path-to-your-styles.css");

これは、cssを使用してcssスタイルシートをcssスタイルシートに含めるための最良の方法です。

— フロイド
ソース

6

「@import」ルールは、複数のスタイルファイルで呼び出すことができます。これらのファイルは、必要に応じてブラウザまたはユーザーエージェントによって呼び出されます。たとえば、HTMLタグはCSSを呼び出します。

<!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" lang="EN" dir="ltr">
<head>
<title>Using @import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("main.css");
</style>
</head>
<body>
</body>
</html>

CSSファイル「main.css」には、次の構文が含まれています。

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

スタイル要素に挿入するには、createTexNodeを使用します。innerHTMLは使用しませんが、

<script>
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var textNode = document.createTextNode("
    @import 'fineprint.css' print;
    @import 'bluish.css' projection, tv;
    @import 'custom.css';
    @import 'chrome://communicator/skin/';
    @import 'common.css' screen, projection;
    @import 'landscape.css' screen and (orientation:landscape);
");
style.appendChild(textNode);
</script>

— チェタバハナ
ソース

指摘するだけで、@ hylpはインポート（クラスprojectionおよびscreen？）からクラスをオーバーライドすることが可能であることを指摘していますが、これは通常、良いことではありません。;）

— Tcll 2017年

2

@import url('style.css');

ベストアンサーとは異なり、HTTP / 2.0を使用する場合、すべてのCSSファイルを1つのチャンクに集約することはお勧めしません

— peterC_
ソース

2

altervistaとwordpressを使用してブートストラップをインポートする

私はこれを使用して、wordpressでaltervistaにbootstrap.cssをインポートします

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

そして、私がそれをページに入れればhtmlリンクのrelコードを削除するので、それはうまくいきます

— ジョバンニG. PY
ソース

1

はい1つのcssを別のcssに簡単にインポートできます（Webサイトの任意の場所）。次のように使用する必要があります。

@import url("url_path");

— NARGIS PARWEEN
ソース

1

なんらかの理由で、@ importは機能しませんでしたが、必ずしも必要ではありませんか？

代わりに、html内で以下を実行します。

  <link rel="stylesheet" media="print" href="myap-print.css">
  <link rel="stylesheet" media="print" href="myap-screen.css">
  <link rel="stylesheet" media="screen" href="myap-screen.css">

media = "print"には、myap-print.cssとmyap-screen.cssの2つのスタイルシートがあることに注意してください。これは、myap-print.css内にmyap-screen.cssを含めるのと同じ効果です。

— コリン・キーナン
ソース

いいえ、これは正しくありません。これには、HTMLファイル内の複数のCSSファイルが含まれ、別のCSSファイル内のCSSファイルは含まれません。

— TylerH

0

ここで CSS @importルールを歌う

@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;

— ポッキー・タイ
ソース

0

main.cssファイルを作成し、その中にすべてのcssファイルを含めました。

main.cssファイルは1つだけ含めることができます

@import url('style.css');
@import url('platforms.css');

— Dinesh Vaitage
ソース

-3

私はこれに偶然出くわしました、CSSで@IMPORTを使用しないでください!!!! importステートメントがクライアントに送信され、クライアントは別の要求を実行します。CSSをさまざまなファイルに分割する場合は、Lessを使用します。Lessでは、インポートステートメントがサーバーで発生し、出力がキャッシュされ、クライアントに別の接続を強制することによってパフォーマンスが低下することはありません。サスも私が探求したものではない別のオプションです。率直に言って、LessまたはSassを使用していない場合は、開始する必要があります。http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

— WillSeitz
ソース

1

クライアントは、別の接続ではなく、別の要求を実行します。そして品質のために、それはインポートCSSを使用する良い方法です。プロジェクトで大きくなり、大きくなる大きなcssファイルの代わりに、これらのインポートを使用する方がはるかに良い...

— YvesR

3

これは、Google（developer.google.com/speed/docs/best-practices/…）とYahoo（developer.yahoo.com/performance/rules.html#csslink）の両方の推奨事項です

— WillSeitz

1

それでも、それはもう1つの要求にすぎません。完全なページの読み込みのために潜在的に数百のうち。

— スティーブベネット

8

正しい？！もう1つの要求は、腕を振るおよびすべて大文字の免責事項をほとんど保証しません。リクエストは悪い習慣ではありません。回答の-1-LESSおよびSASS貨物カルト。

— クリスベイカー

ええと、それは1つのリクエストだけです..しかし、CSSを1つにインポートすることができ、それらは並行してダウンロードされます。

— wh1sp3r 2014年