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