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

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

734 голосов
/ 29 сентября 2008

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

Ответы [ 17 ]

1026 голосов
/ 29 сентября 2008

Да 

@import url("base.css");

Примечание:

  • Правило @import должно предшествовать всем остальным правилам (кроме правила @charset); и
  • Дополнительные операторы @import требуют дополнительных запросов к серверу.

Объедините CSS в один файл, чтобы избежать нескольких HTTP-запросов. То есть скопируйте содержимое base.css и special.css в base-special.css и используйте только ссылку base-special.css).

В 2008 году не все браузеры поддерживали @import (см. Совместимость браузеров ).

136 голосов
/ 29 сентября 2008

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

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

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

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

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

40 голосов
/ 29 сентября 2008

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

25 голосов
/ 29 сентября 2008

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

@import url('/css/common.css');
@import url('/css/colors.css');
16 голосов
/ 29 сентября 2008

Да. 

@import "your.css";

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

11 голосов
/ 29 сентября 2008

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

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

9 голосов
/ 29 сентября 2008

Да, используйте @import

подробная информация, которую легко найти, хорошая на http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

7 голосов
/ 27 июля 2011

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

Это лучший способ включить таблицу стилей CSS в таблицу стилей CSS, используя css.

7 голосов
/ 22 января 2013

да, это возможно, используя @import и указав путь к css файлу например, 

@import url("mycssfile.css");

или 

@import "mycssfile.css";
5 голосов
/ 08 апреля 2015

Правило "@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>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...