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

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

17 ответов


да:

@import url("base.css");

Примечание:

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

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

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


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

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

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

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

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


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


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

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

да.

@import "your.css";

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


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

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


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

детальная информация легко googled для, Хороший на http://webdesign.about.com/od/beginningcss/f/css_import_link.htm


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

@import url("mycssfile.css");

или

@import "mycssfile.css";

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

Это лучший способ включить таблицу стилей css в таблицу стилей css с помощью css.


правило "@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>

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

@import url("url_path");

@import url('style.css');

в отличие от лучшего ответа, не рекомендуется объединять все CSS-файлы в один фрагмент при использовании HTTP/2.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;

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

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

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

импорт bootstrap с altervista и wordpress

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

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

и он отлично работает, так как он удалит html-ссылку rel-код, если я помещу его на страницу


по какой-то причине @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-экран.стиль CSS. Это тот же эффект, что и включение myap-экрана.css в myap-print.стиль CSS.


я наткнулся на это, и я просто хотел сказать, Пожалуйста, не используйте @IMPORT в CSS!!!! Инструкция import отправляется клиенту, и клиент выполняет другой запрос. Если вы хотите разделить CSS между различными файлами, используйте меньше. В Less инструкция import выполняется на сервере, а выходные данные кэшируются и не создают штраф производительности, заставляя клиента устанавливать другое соединение. Sass также является вариантом, который я не исследовал. Честно говоря, если вы не используете меньше или Sass тогда вы должны начать. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html