Ist es möglich, eine CSS-Datei in eine andere aufzunehmen?

782

Ist es möglich, eine CSS-Datei in eine andere aufzunehmen?

css Gaizka Allende
quelle
26
Nur zu Ihrer Information, dies speichert keine HTTP-Anfrage. Sie müssen die importierte CSS-Datei nur an einer anderen Stelle einfügen.
T. Brian Jones
1
Ich wäre fast das gleiche wie ein anderes CSS vorher und nicht die besten Praktiken
Gaizka Allende

Antworten:

1087

Ja:

@import url("base.css");

Hinweis:

  • Die @importRegel muss vor allen anderen Regeln stehen (außer @charset).
  • Zusätzliche @importAnweisungen erfordern zusätzliche Serveranforderungen. Alternativ können Sie alle CSS-Dateien in einer Datei verketten, um mehrere HTTP-Anforderungen zu vermeiden. Kopieren Sie beispielsweise den Inhalt von base.cssund special.cssin base-special.cssund verweisen Sie nur darauf base-special.css.
Kevin Read
quelle
143

Ja. Das Importieren einer CSS-Datei in eine andere CSS-Datei ist möglich.

Es muss die erste Regel im Stylesheet sein, die die @ import-Regel verwendet .

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

Die einzige Einschränkung ist, dass ältere Webbrowser dies nicht unterstützen. Tatsächlich ist dies einer der CSS-Hacks, um CSS-Stile vor älteren Browsern zu verbergen.

Informationen zur Browserunterstützung finden Sie in dieser Liste .

Ronnie Liew
quelle
42

Das @import url("base.css");funktioniert gut, aber bedenken Sie, dass jede @importAnweisung eine neue Anfrage an den Server ist. Dies ist möglicherweise kein Problem für Sie, aber wenn eine optimale Leistung erforderlich ist, sollten Sie dies vermeiden @import.

Gen
quelle
2
Werden CSS-Dateien nicht zwischengespeichert? Die Datei wird also nur einmal angefordert? scheint trivial zu sein, sich Sorgen zu machen.
Endolith
1
Wenn Sie Ihr CSS nicht auf eine Datei verkleinern, haben Sie Recht, aber sobald dies der Fall ist, rufen Sie nur eine CSS-Datei auf. Korrigieren Sie mich, wenn ich natürlich falsch liege.
mjwrazor
27

Die CSS- @importRegel macht genau das. Z.B,

@import url('/css/common.css');
@import url('/css/colors.css');
Sören Kuklau
quelle
16

Ja.

@import "your.css";

Die Regel ist hier dokumentiert .

Gordon Wilson
quelle
11

In einigen Fällen ist es möglich, @import "file.css" zu verwenden, und die meisten modernen Browser sollten dies unterstützen. Ältere Browser wie NN4 werden leicht verrückt.

Hinweis: Die Importanweisung muss vor allen anderen Deklarationen in der Datei stehen und in allen Zielbrowsern getestet werden, bevor sie in der Produktion verwendet wird.

Seanb
quelle
6

Ja, es ist möglich, @import zu verwenden und den Pfad der CSS-Datei anzugeben, z

@import url("mycssfile.css");

oder 

@import "mycssfile.css";
vidhi
quelle
6

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

Dies ist der beste Weg, um ein CSS-Stylesheet mithilfe von CSS in ein CSS-Stylesheet aufzunehmen.

Floyd
quelle
6

Die Regel "@import" kann Dateien mit mehreren Stilen aufrufen. Diese Dateien werden bei Bedarf vom Browser oder User Agent aufgerufen, z. B. rufen HTML-Tags das CSS auf.

<!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>

Die CSS-Datei "main.css" enthält die folgende Syntax:

@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);

Verwenden Sie zum Einfügen in ein Stilelement createTexNode nicht innerHTML, sondern:

<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>
Chetabahana
quelle
Nur um darauf hinzuweisen, während @hylp darauf hinweist, dass es möglich ist, Klassen aus Importen (Klassen projectionund screen?) Zu überschreiben, ist dies normalerweise nie eine gute Sache. ;)
Tcll
2 
@import url('style.css');

Im Gegensatz zur besten Antwort wird nicht empfohlen, bei Verwendung von HTTP / 2.0 alle CSS-Dateien zu einem Block zusammenzufassen

peterC_
quelle
2

Importieren Sie Bootstrap mit Altervista und WordPress

Ich benutze dies, um bootstrap.css in altervista mit WordPress zu importieren

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

und es funktioniert gut, da es den HTML-Link-Rel-Code löschen würde, wenn ich ihn in eine Seite einfügen würde

Giovanni G. PY
quelle
1

Ja, Sie können einfach ein CSS in ein anderes importieren (wo auch immer auf der Website). Sie müssen Folgendes verwenden:

@import url("url_path");
NARGIS PARWEEN
quelle
1

Aus irgendeinem Grund hat @import bei mir nicht funktioniert, aber es ist nicht wirklich notwendig, oder?

Folgendes habe ich stattdessen im HTML-Code getan:

  <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">

Beachten Sie, dass media = "print" zwei Stylesheets enthält: myap-print.css und myap-screen.css. Dies ist der gleiche Effekt wie das Einfügen von myap-screen.css in myap-print.css.

Colin Keenan
quelle
Nein, das ist nicht richtig. Dies schließt mehrere CSS-Dateien aus einer HTML-Datei ein, nicht jedoch eine CSS-Datei aus einer anderen CSS-Datei.
TylerH
0

singen die CSS @ import - Regel hier

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

Ich habe die Datei main.css erstellt und alle CSS-Dateien darin aufgenommen.

Wir können nur eine main.css-Datei einschließen

@import url('style.css');
@import url('platforms.css');
Dinesh Vaitage
quelle
-3

Ich bin darauf gestoßen und wollte nur sagen, BITTE VERWENDEN SIE @IMPORT NICHT IN CSS !!!! Die Importanweisung wird an den Client gesendet und der Client führt eine weitere Anforderung aus. Wenn Sie Ihr CSS auf verschiedene Dateien aufteilen möchten, verwenden Sie Less. In Less wird die Importanweisung auf dem Server ausgeführt und die Ausgabe wird zwischengespeichert. Dies führt nicht zu Leistungseinbußen, da der Client gezwungen wird, eine andere Verbindung herzustellen. Sass ist auch eine andere Option, die ich nicht untersucht habe. Ehrlich gesagt, wenn Sie nicht Less oder Sass verwenden, sollten Sie beginnen. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

WillSeitz
quelle
1
Der Client wird eine andere Anfrage stellen, keine andere Verbindung. Und für die Qualität ist es eine gute Möglichkeit, Import-CSS zu verwenden. Es ist viel besser, diese Importe zu haben, als eine große CSS-Datei, die mit dem Projekt wächst und wächst ...
YvesR
3
Dies ist die Empfehlung von Google ( developer.google.com/speed/docs/best-practices/… ) und Yahoo ( developer.yahoo.com/performance/rules.html#csslink )
WillSeitz
1
Trotzdem - es ist nur eine weitere Anfrage. Von möglicherweise Hunderten für ein vollständiges Laden der Seite.
Steve Bennett
8
Recht?! Eine weitere Anfrage rechtfertigt kaum das Armwinken und die All-Caps-Haftungsausschlüsse. Eine Anfrage ist keine schlechte Praxis. -1 zur Antwort - WENIGER und SASS Frachtkult.
Chris Baker
Nun, es ist nur eine Anfrage mehr .. aber Sie können mehr CSS in eine importieren und sie werden parallel heruntergeladen.
wh1sp3r