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

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

Ответ 1

Да:

@import url("base.css");

Примечание:

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

Ответ 2

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

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

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

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

Да.

@import "your.css";

Это правило зарегистрировано здесь.

Ответ 6

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

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

Ответ 8

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

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

Ответ 9

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

@import url("mycssfile.css");

или

@import "mycssfile.css";

Ответ 10

Правило "@import" может вызывать несколько файлов стилей. Эти файлы вызывается браузером или User Agent при необходимости, например. 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>

Ответ 11

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

@import url("url_path");

Ответ 12

@import url('style.css');

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

Ответ 13

Импорт начальной загрузки с altervista и WordPress

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

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

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

Ответ 14

По какой-то причине @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.

Ответ 15

петь правило 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;

Ответ 16

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

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

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

Ответ 17

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