Можно ли включить один файл CSS в другой?

783

css

26

Просто к сведению, это не сохраняет HTTP-запрос. Это избавляет вас от необходимости включать импортированный файл .css в другое место.

— Т. Брайан Джонс

1

Я был бы почти таким же, как включение еще одного CSS раньше и не лучшие практики

— Gaizka Allende

1088

Да:

@import url("base.css");

Замечания:

@importПравило должно предшествовать все другие правила ( за исключением @charset).
Дополнительные @importоператоры требуют дополнительных запросов к серверу. В качестве альтернативы, объедините все CSS в один файл, чтобы избежать нескольких HTTP-запросов. Например, скопировать содержимое base.cssи special.cssINTO base-special.cssи ссылки только base-special.css.

— Кевин Рид
источник

143

Да. Возможен импорт файла CSS в другой файл CSS.

Это должно быть первое правило в таблице стилей, использующее правило @import .

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

Единственное предостережение в том, что старые веб-браузеры не будут его поддерживать. Фактически, это один из способов «хакать» CSS, чтобы скрыть стили CSS от старых браузеров.

Обратитесь к этому списку для поддержки браузера.

— Ронни Лью
источник

42

@import url("base.css");Штраф , но медведь работает в виду , что каждое @importутверждение новый запрос к серверу. Это не может быть проблемой для вас, но когда требуется оптимальная производительность, вам следует избегать @import.

— Ген
источник

2

файлы CSS не кэшируются? Таким образом, он будет запрашивать файл только один раз? кажется тривиальным для беспокойства.

— эндолит

1

Если вы не уменьшаете свой CSS до одного файла, то да, вы правы, но если это так, то вы просто вызываете один файл CSS. Поправь меня если я ошибаюсь конечно.

— mjwrazor

27

@importПравило CSS делает именно это. Например,

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

— Сёрен Куклау
источник

16

Да.

@import "your.css";

Правило задокументировано здесь .

— Гордон Уилсон
источник

11

В некоторых случаях это возможно при использовании @import "file.css", и большинство современных браузеров должны это поддерживать, более старые браузеры, такие как NN4, будут слегка чокнутыми.

Примечание. Оператор импорта должен предшествовать всем остальным объявлениям в файле и проверять его во всех целевых браузерах, прежде чем использовать его в рабочей среде.

— 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.

— Floyd
источник

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>

— Chetabahana
источник

Просто чтобы указать, в то время как @hylp указывает, что возможно переопределить классы из импорта (классы projectionи screen?), Это обычно не очень хорошая вещь. ;)

— Tcll

2

@import url('style.css');

В отличие от лучшего ответа, при использовании HTTP / 2.0 не рекомендуется объединять все CSS-файлы в один блок.

— peterC_
источник

2

Импорт бутстрапа с альтервиста и вордпресса

Я использую это для импорта bootstrap.css в altervista с WordPress

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

и он работает нормально, так как он удалил бы код ссылки HTML, если я поместил его на страницу

— Giovanni G. PY
источник

1

Да, вы можете легко импортировать один CSS в другой (в любом месте на веб-сайте). Вы должны использовать как:

@import url("url_path");

— НАРГИС ПАРВИН
источник

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" имеет 2 таблицы стилей: myap-print.css и myap-screen.css. Это тот же эффект, что и включение myap-screen.css в myap-print.css.

— Колин Кинэн
источник

Нет, это не правильно. Это включает в себя несколько файлов CSS из файла HTML, не включая файл 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;

— Pocky_Thailand
источник

0

Я создал файл main.css и включил в него все CSS-файлы.

Мы можем включить только один файл main.css

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

— Динеш Vaitage
источник

-3

Я наткнулся на это, и я просто хотел сказать, ПОЖАЛУЙСТА, НЕ ИСПОЛЬЗУЙТЕ @IMPORT В CSS !!!! Оператор импорта отправляется клиенту, и клиент выполняет другой запрос. Если вы хотите разделить ваш CSS между различными файлами, используйте Less. В «Меньше» оператор импорта выполняется на сервере, а выходные данные кэшируются и не создают снижения производительности, заставляя клиента устанавливать другое соединение. Sass - это еще один вариант, который я не исследовал. Честно говоря, если вы не используете Less или Sass, вам следует начать. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

— WillSeitz
источник

1

Клиент выполнит другой запрос, а не другое соединение. А по качеству это хороший способ использовать импортные css. Гораздо лучше иметь этот импорт вместо большого файла CSS, который растет и растет вместе с проектом ...

— YvesR

3

Это рекомендации как Google ( developers.google.com/speed/docs/best-practices/… ), так и Yahoo ( developer.yahoo.com/performance/rules.html#csslink )

— WillSeitz

1

И все же - это всего лишь еще одна просьба. Из возможных сотен для полной загрузки страницы.

— Стив Беннетт

8

Правильно?! Еще одна просьба вряд ли оправдывает отказ от размахиваний руками и отказ от колпачков. Запрос не плохая практика. -1 к ответу - МЕНЬШЕ и САССОВОЙ культ груза.

— Крис Бейкер

Ну, это всего лишь один запрос больше ... но вы можете импортировать больше CSS в один, и они загружаются параллельно.

— wh1sp3r