Можно ли включить один файл CSS в другой?
Можно ли включить один файл CSS в другой?
Я был бы почти так же, как раньше включал еще один CSS, а не лучшие практики
Ответы 17
Да:
@import url("base.css");
Примечание:
@importправило должен предшествовать все остальные правила (кроме@charset).- Дополнительные операторы
@importтребуют дополнительных запросов к серверу. В качестве альтернативы объедините весь CSS в один файл, чтобы избежать множественных HTTP-запросов. Например, скопируйте содержимоеbase.cssиspecial.cssвbase-special.cssи укажите толькоbase-special.css.
Правило CSS @import делает именно это. Например.,
@import url('/css/common.css');
@import url('/css/colors.css');
В некоторых случаях возможно использование @import "file.css", и большинство современных браузеров должны поддерживать это, старые браузеры, такие как NN4, будут немного чокнутыми.
Примечание: оператор импорта должен предшествовать всем остальным объявлениям в файле и протестировать его во всех ваших целевых браузерах, прежде чем использовать в производственной среде.
Да, используйте @import
подробную информацию легко найти в Google, хороший на http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
да. Возможен импорт файла CSS в другой файл CSS.
Это должно быть первое правило в таблице стилей, использующее @import правило.
@import "mystyle.css";
@import url("mystyle.css");
Единственное предостережение: старые веб-браузеры его не поддерживают. Фактически, это одна из хитростей CSS, позволяющая скрыть стили CSS от старых браузеров.
Обратитесь к этот список для поддержки браузера.
@import url("base.css"); работает нормально, но имейте в виду, что каждый оператор @import - это новый запрос к серверу. Возможно, это не проблема для вас, но когда требуется оптимальная производительность, вам следует избегать @import.
не кэшируются файлы CSS? Значит, он запросит файл только один раз? кажется тривиальным поводом для беспокойства.
Если вы не уменьшаете свой css до одного файла, то да, вы правы, но как только это произойдет, вы просто вызываете один файл css. Поправьте меня конечно если я не прав.
@import("/path-to-your-styles.css");
Это лучший способ включить таблицу стилей css в таблицу стилей css с помощью css.
да, можно использовать @import и указать путь к файлу css например
@import url("mycssfile.css");
или же
@import "mycssfile.css";
Я наткнулся на это и просто хотел сказать, ПОЖАЛУЙСТА, НЕ ИСПОЛЬЗУЙТЕ @IMPORT В CSS !!!! Оператор импорта отправляется клиенту, и клиент выполняет другой запрос. Если вы хотите разделить свой CSS между различными файлами, используйте Less. В Less инструкция импорта выполняется на сервере, а вывод кэшируется и не снижает производительности, заставляя клиента устанавливать другое соединение. Sass - это еще один вариант, который я не изучал. Откровенно говоря, если вы не используете Less или Sass, вам следует начать. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html
Клиент выполнит другой запрос, а не другое соединение. А по качеству неплохо использовать import css. Гораздо лучше иметь этот импорт вместо большого файла css, который растет и растет вместе с проектом ...
Это рекомендация как Google (developers.google.com/speed/docs/best-practices/…), так и Yahoo (developer.yahoo.com/performance/rules.html#csslink).
Тем не менее - это всего лишь еще одна просьба. Из потенциально сотен для полной загрузки страницы.
Верно?! Еще одна просьба вряд ли оправдывает отказ от ответственности, размахивающий руками и заглавные буквы. Запрос - это не плохая практика. -1 к ответу - LESS и SASS Cargo cult.
Ну, это всего лишь еще один запрос ... но вы можете импортировать больше CSS в один, и они загружаются параллельно.
-1 за предположение, что существует архитектура клиент / сервер. CSS используется не только на веб-сайтах (или даже только с HTML!); у него много других приложений, и вопрос не определял архитектуру.
@WillSeitz: дополнительный запрос выполняется только один раз. Для следующего запроса данные будут получены из кеша
воспользуйтесь правилом 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;
Правило «@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>
Просто чтобы указать, хотя @hylp указывает, что можно переопределить классы из импорта (классы projection и screen?), Это обычно никогда не бывает хорошо. ;)
Я создал файл main.css и включил в него все файлы css.
Мы можем включить только один файл main.css
@import url('style.css');
@import url('platforms.css');
Да, вы можете легко импортировать один CSS в другой (где угодно на веб-сайте) Вы должны использовать как:
@import url("url_path");
@import url('style.css');
В отличие от лучшего ответа, не рекомендуется агрегировать все файлы CSS в один фрагмент при использовании HTTP / 2.0.
Импортируйте бутстрап с помощью 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-screen.css. Это тот же эффект, что и включение myap-screen.css в myap-print.css.
Нет, это не так. Это включает несколько файлов CSS из файла HTML, за исключением файла CSS из другого файла CSS.
Просто к сведению, это не сохраняет HTTP-запрос. Это просто избавляет вас от необходимости включать импортированный файл .css в другое место.