Czy można dołączyć jeden plik CSS do innego?

779

css Gaizka Allende
źródło

26

Tylko fyi, zrobienie tego nie zapisuje żądania HTTP. To po prostu oszczędza Ci konieczności dołączania importowanego pliku .css w innym miejscu.

T. Brian Jones

1

Byłbym prawie taki sam, jak wcześniej dołączając inny CSS, a nie najlepsze praktyki

Gaizka Allende

1084

Tak:

@import url("base.css");

Uwaga:

@importReguła musi poprzedzać wszystkie inne zasady (z wyjątkiem @charset).
Dodatkowe @importinstrukcje wymagają dodatkowych żądań serwera. Alternatywnie, połącz wszystkie CSS w jeden plik, aby uniknąć wielu żądań HTTP. Na przykład, skopiuj zawartość base.cssi special.cssjęzyk base-special.cssi odniesienie tylko base-special.css.

Kevin Read
źródło

143

Tak. Możliwe jest importowanie pliku CSS do innego pliku CSS.

Musi to być pierwsza reguła w arkuszu stylów korzystająca z reguły @import .

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

Jedynym zastrzeżeniem jest to, że starsze przeglądarki internetowe go nie obsługują. W rzeczywistości jest to jeden z „hacków” CSS służących do ukrywania stylów CSS przed starszymi przeglądarkami.

Informacje na temat obsługi przeglądarki znajdują się na tej liście .

Ronnie Liew
źródło

42

@import url("base.css");Działa dobrze jednak pamiętać, że każda @importwypowiedź jest nowe żądanie do serwera. Może to nie stanowić problemu, ale gdy wymagana jest optymalna wydajność, należy unikać @import.

Gen
źródło

2

pliki CSS nie są buforowane? Więc poprosi o plik tylko raz? martwienie się wydaje się trywialne.

endolith

1

Jeśli nie minimalizujesz swojego css do jednego pliku, to tak, masz rację, ale kiedy już to zrobisz, po prostu wywołujesz jeden plik css. Popraw mnie, jeśli się mylę, oczywiście.

mjwrazor

27

@importReguła CSS właśnie to robi. Na przykład,

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

Sören Kuklau
źródło

16

Tak.

@import "your.css";

Reguła jest tutaj udokumentowana .

Gordon Wilson
źródło

11

W niektórych przypadkach jest to możliwe przy użyciu @import „file.css”, a większość współczesnych przeglądarek powinna to obsługiwać, starsze przeglądarki, takie jak NN4, nieco zwariują.

Uwaga: instrukcja importu musi poprzedzać wszystkie inne deklaracje w pliku i przetestować ją we wszystkich przeglądarkach docelowych przed użyciem jej w produkcji.

seanb
źródło

8

Tak, użyj @import

szczegółowe informacje łatwo znaleźć w Google, dobry na http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

DarenW
źródło

6

tak, możliwe jest użycie @import i podanie ścieżki pliku css np

@import url("mycssfile.css");

lub

@import "mycssfile.css";

vidhi
źródło

6

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

To najlepszy sposób na dołączenie arkusza stylów css do arkusza stylów css za pomocą css.

Floyd
źródło

6

Reguła „@import” może wywoływać pliki w wielu stylach. Pliki te są wywoływane przez przeglądarkę lub użytkownika użytkownika, gdy są potrzebne, np. Tagi HTML wywołują 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>

Plik CSS „main.css” zawiera następującą składnię:

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

Aby wstawić element stylu, użyj createTexNode nie używaj innerHTML, ale:

<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
źródło

Dla przypomnienia, podczas gdy @hylp wskazuje, że możliwe jest zastąpienie klas z importu (klas projectioni screen?), Zwykle nie jest to dobra rzecz. ;)

Tcll

2

@import url('style.css');

W przeciwieństwie do najlepszej odpowiedzi, nie zaleca się agregowania wszystkich plików CSS w jedną porcję podczas korzystania z HTTP / 2.0

peterC_
źródło

2

Zaimportuj bootstrap z altervista i wordpress

Używam tego do importowania bootstrap.css w altervista z wordpress

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

i działa dobrze, ponieważ usunąłbym kod rel linku HTML, jeśli umieściłem go na stronie

Giovanni G. PY
źródło

1

Tak Możesz łatwo zaimportować jeden css do drugiego (gdziekolwiek na stronie) Musisz użyć takich jak:

@import url("url_path");

NARGIS PARWEEN
źródło

1

Z jakiegokolwiek powodu @import nie działał dla mnie, ale nie jest to naprawdę konieczne, prawda?

Oto, co zrobiłem zamiast tego, w 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">

Zauważ, że media = "print" ma 2 arkusze stylów: myap-print.css i myap-screen.css. Jest to taki sam efekt, jak włączenie myap-screen.css w myap-print.css.

Colin Keenan
źródło

Nie, to nie jest poprawne. Obejmuje to wiele plików CSS z pliku HTML, a nie plik CSS z innego pliku CSS.

TylerH

0

zaśpisz tutaj regułę 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;

Pocky_Thlandia
źródło

0

Utworzyłem plik main.css i zawarłem w nim wszystkie pliki css.

Możemy dołączyć tylko jeden plik main.css

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

Dinesh Vaitage
źródło

-3

Natknąłem się na to i chciałem tylko powiedzieć, PROSZĘ NIE UŻYWAĆ @IMPORT W CSS !!!! Instrukcja importu jest wysyłana do klienta, a klient wykonuje kolejne żądanie. Jeśli chcesz podzielić swój CSS na różne pliki, użyj Less. W polu Less instrukcja importu dzieje się na serwerze, a dane wyjściowe są buforowane i nie powodują zmniejszenia wydajności, zmuszając klienta do nawiązania kolejnego połączenia. Sass jest również opcją inną niż ta, którą zbadałem. Szczerze mówiąc, jeśli nie używasz Less lub Sass, powinieneś zacząć. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

WillSeitz
źródło

1

Klient wykona kolejne żądanie, a nie inne połączenie. A dla jakości jest to dobry sposób na użycie importu css. O wiele lepiej jest importować te pliki zamiast dużego pliku css, który rośnie i rośnie wraz z projektem ...

YvesR

3

Jest to zalecenie zarówno Google ( developers.google.com/speed/docs/best-practices/… ), jak i Yahoo ( developer.yahoo.com/performance/rules.html#csslink )

WillSeitz

1

Mimo to - to tylko jedna prośba. Z potencjalnie setek do pełnego załadowania strony.

Steve Bennett,

8

Dobrze?! Jeszcze jedno żądanie nie uzasadnia machnięcia ręką i zrzeczenia się wielkich liter. Prośba nie jest złą praktyką. -1 do odpowiedzi - kult ładunku LESS i SASS.

Chris Baker

Cóż, to tylko jedno żądanie więcej .. ale możesz zaimportować więcej CSS do jednego i są one pobierane równolegle.

wh1sp3r

Czy można dołączyć jeden plik CSS do innego?

Odpowiedzi:

Zaimportuj bootstrap z altervista i wordpress