Как подключить несколько css файлов в html
Существует несколько способов добавить CSS на страницу HTML:
- инлайн запись с помощью тега атрибута style у любого тега в HTML-разметке
- использование тега , который обычно указывается внутри секции в HTML-разметке
- использование отдельного CSS-файла
В реальной разработке чаще всего принято писать стили в отдельном CSS-файле. Если к HTML-документу требуется добавить несколько CSS фалов, можно воспользоваться одним из двух способов:
1). Подключить каждый CSS-файл по отдельности к HTML-файлу с помощью специального тега :
lang="ru"> charset="UTF-8"> Основной файл index.html rel="stylesheet" href="../css/main.css"> rel="stylesheet" href="../css/reset.css"> rel="stylesheet" href="../css/fonts.css">
2). Использовать директиву @import, которая позволяет импортировать один CSS-файл в другой. Допустим, что все стили проекта разбиты на 3 файла: main.css (основной файл), reset.css, fonts.css. Добавим reset.css и fonts.css в основной CSS-файл:
Далее нужно подключить main.css к нашему HTML-файлу с помощью .
Важно располагать импорт файлов reset.css и fonts.css именно в начале документа main.css, иначе данный способ не сработает
Можно ли включить один файл CSS в другой?
Просто к сведению, это не сохраняет HTTP-запрос. Это избавляет вас от необходимости включать импортированный файл .css в другое место.
T. Brian Jones 14 март 2012, в 04:32
Я был бы почти таким же, как включение другого CSS раньше и не лучшие практики
Gaizka Allende 28 фев. 2014, в 11:28
Поделиться:
15 ответов
Лучший ответ
@import url("base.css");
- Правило @import должно предшествовать всем другим правилам (кроме правила @charset ); и
- Дополнительные инструкции @import требуют дополнительных запросов сервера.
Совокупность CSS в один файл, чтобы избежать нескольких HTTP-запросов. То есть скопируйте содержимое base.css и special.css в base-special.css и укажите только base-special.css ).
В 2008 году не все браузеры поддерживали @import (см. Совместимость браузера).
Kevin Read 29 сен. 2008, в 04:43
Поделиться
Да, @import всегда присутствовал в CSS? Я думал, что не было способа сделать это.
DGentry 29 сен. 2008, в 04:31
Да, @import был там с самого начала: w3.org/TR/REC-CSS1.html#the-cascade
Rene Saarsoo 29 сен. 2008, в 05:43
Импорт файла SCSS в другой файл проекта rails: @import «base.css.scss»;
cider 21 дек. 2012, в 17:03
URL указывается относительно пути к файлу, в который вы его включаете. Таким образом, файлы в той же папке просто включаются без какого-либо пути.
Matthew Wilcoxson 17 янв. 2013, в 18:13
Re: # 2, одна из причин этого была бы, если у вас были разные цветовые схемы для вашего сайта. Вы можете иметь «base.css», «red.css», «blue.css» и «grey.css»; base.css будет содержать весь CSS, который не связан с цветом, и будет @imported каждым из цветных CSS-файлов. Я полагаю, что вы могли бы сделать это, просто имея на base.css, прежде чем цвет CSS, но некоторые могут найти это проще / более интуитивно понятным.
Doktor J 23 июнь 2014, в 22:14
(чтобы уточнить, вызов отдельных CSS-файлов только для цвета и одного общего базового CSS-файла уменьшит полосу пропускания, необходимую, если пользователь переключает свою цветовую схему; вместо того, чтобы загружать новый CSS-файл, который переопределяет многие из тех же вещей, вы загружаете гораздо меньший, который просто переопределяет цвета, и браузер извлекает base.css из кеша)
Doktor J 23 июнь 2014, в 22:15
я не нахожу это полезным, так как он не может быть использован нигде, кроме как на старте, которое является последним местом, где я когда-либо нуждался в этом .
osirisgothra 01 июнь 2015, в 15:36
Это приводит к сбою минимизации StyleBundle с ошибкой: ошибка времени выполнения CSS1019: неожиданный токен, найден ‘@import’. Это можно увидеть в инструментах разработчика Chrome, когда вы посмотрите на файл, который начинается со слов: «Минификация не удалась. Возврат незавершенного содержимого». сопровождаемое сообщением об ошибке, которое я упомянул.
Triynko 11 нояб. 2015, в 18:37
Можете ли вы иметь оператор @import внутри импортированного документа?
Cullub 20 янв. 2016, в 01:47
Что делать, если мне нужно загрузить стили для каждого запроса @media? Будет ли объединение всех стилей в один кусок по-прежнему жизнеспособным вариантом?
qualebs 24 май 2017, в 21:16
Показать ещё 8 комментариев
Да. Возможно импорт файла CSS в другой файл CSS.
Это должно быть первое правило в таблице стилей, используя правило @.
@import "mystyle.css"; @import url("mystyle.css");
Единственное предостережение в том, что старые веб-браузеры не поддерживают его. Фактически, это один из «взлома» CSS, чтобы скрыть стили CSS из старых браузеров.
Обратитесь к этот список для поддержки браузера.
Ronnie Liew 29 сен. 2008, в 06:07
Поделиться
@import url(«base.css»); отлично работает, но помните, что каждый оператор @import представляет собой новый запрос на сервер. Для вас это не проблема, но при оптимальной производительности вам следует избегать @import .
Gene 29 сен. 2008, в 07:32
Поделиться
файлы CSS не кэшируются? Таким образом, он будет запрашивать файл только один раз? кажется тривиальным для беспокойства.
endolith 26 дек. 2014, в 19:49
Если вы не уменьшаете свой CSS до одного файла, то да, вы правы, но если это так, то вы просто вызываете один файл CSS. Поправь меня если я ошибаюсь конечно.
mjwrazor 06 янв. 2017, в 17:08
Правило CSS @import делает именно это. Например.
@import url('/css/common.css'); @import url('/css/colors.css');
Sören Kuklau 29 сен. 2008, в 06:22
Поделиться
@import "your.css";
Это правило зарегистрировано здесь.
Gordon Wilson 29 сен. 2008, в 05:56
Поделиться
Это работает, и это проще, когда вы хотите поместить файл CSS из вашего локального каталога
Muhammad 23 дек. 2014, в 06:43
В некоторых случаях это возможно с помощью @import «file.css», и большинство современных браузеров должны поддерживать это, более старые браузеры, такие как NN4, будут немного орехами.
Примечание. Оператор импорта должен предшествовать всем остальным объявлениям в файле и проверять его во всех целевых браузерах, прежде чем использовать его в процессе производства.
seanb 29 сен. 2008, в 04:33
Поделиться
Да, используйте @import
DarenW 29 сен. 2008, в 05:29
Поделиться
да можно использовать @import и предоставить путь к файлу css например.
@import url("mycssfile.css");
@import "mycssfile.css";
vidhi 22 янв. 2013, в 18:14
Поделиться
Это лучший способ включить CSS-таблицу стилей в CSS-таблицу стилей, используя css.
Floyd 27 июль 2011, в 05:02
Поделиться
Правило «@import» может вызывать несколько файлов стилей. Эти файлы вызывается браузером или User Agent при необходимости, например. HTML-теги вызывают CSS.
Using @import
Файл 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);
hyip 08 апр. 2015, в 18:05
Поделиться
Просто чтобы указать, в то время как @hylp указывает, что можно переопределить классы из импорта ( projection классов и screen ?), Это обычно не очень хорошая вещь. 😉
Tcll 05 янв. 2017, в 20:27
Да Вы можете легко импортировать один css в другой (любой, где на веб-сайте) Вы должны использовать как:
@import url("url_path");
Как подключить один css файл в другой css файл
Можно ли включить один файл CSS в другой?
Да, можно включить один файл CSS в другой, и это можно сделать несколько раз. Кроме того, импортируйте несколько файлов CSS в основной файл HTML или в основной файл CSS. Это можно сделать с помощью ключевого слова @import.
Пример 1:
< div >GeeksforGeeks: It is a computer science
portal. It is an educational website. Prepare for the
Recruitment drive of product based companies like
Microsoft, Amazon, Adobe etc with a free online placement
Вывод: без использования файла CSS
background-image: linear-gradient(to right, #DFF1DF, #11A00C);
Вывод: Использование файла style1.css без импорта второго файла CSS (style2.css).
Вывод: после импорта файла style2.css в файл style1.css с помощью ключевого слова @import.
Примечание. Многие CSS-файлы могут быть импортированы с использованием одного CSS-файла.
Пример 2:
-
Раздел HTML: имя файла — Example.html
Как импортировать один css файл в другой
Are the answers below sorted in a way that puts the best answer at or near the top?
- The @import rule must precede all other rules (except @charset ).
- Additional @import statements require additional server requests. As an alternative, concatenate all CSS into one file to avoid multiple HTTP requests. For example, copy the contents of base.css and special.css into base-special.css and reference only base-special.css .
Yes. Importing CSS file into another CSS file is possible.
It must be the first rule in the style sheet using the @import rule.
The only caveat is that older web browsers will not support it. In fact, this is one of the CSS ‘hack’ to hide CSS styles from older browsers.
Refer to this list for browser support.
The CSS @import rule does just that. E.g.,
The rule is documented here.
In some cases it is possible using @import «file.css», and most modern browsers should support this, older browsers such as NN4, will go slightly nuts.
Note: the import statement must precede all other declarations in the file, and test it on all your target browsers before using it in production.
Правило @import
Правило @import позволяет импортировать внешние таблицы стилей. Ключевое слово « @import » указывает URI-адрес таблицы стилей, которую необходимо подключить.
Так же после URI, через запятую можно указать типы устройств, которые могут импортировать указанные таблицы (например, @import url(«style.css») tv; , @import url(«style.css») projection, tv; ). При этом необходимо помнить, что при отсутствии каких-либо указанных типов устройств, свойства импортируются не зависимо от типа устройства. Данная функция важна тем, что позволяет разработчикам адаптировать дизайн документа под различные медиа .
Примечание
При импортировании валидной таблицы стилей в основную таблицу стилей веб-браузер должен обрабатывать содержимое основной таблицы стилей так, как если бы импортируемые стили были написаны в месте написания правила « @import ».
Условия использования
Правила « @import » должны предшествовать всем остальным правилам и стилям (за исключением правила « @charset », если таковое присутствует), в противном случае « @import » будет являться недействительными.
CSS Import
От автора: каскадные таблицы стилей (CSS) являются основой дизайна большинства веб-сайтов. Он описывает, как элементы должны отображаться на экране. Именно здесь в игру вступает правило CSS @import . Правило @import указывает движку CSS импортировать внешнюю таблицу стилей в другую таблицу стилей. Это позволяет добавлять правила стилей из таблицы стилей в другую таблицу.
Это правило также можно использовать в сочетании с медиа-запросами для импорта таблицы стилей на основе типа устройства. Правило стиля @import является полезным, поскольку оно может быть использовано, чтобы избежать дублирования правил стиля, и даже импорта конкретных стилей на основе устройства. Правило @import должно указываться в верхней части таблицы стилей.
Проблема не в сложности языка или сложности кодирования. Проблема заключается в огромном объеме информации, необходимой для создания даже веб-сайта среднего размера. Если учитывать объем HTML, необходимый для создания даже простых конструктивных элементов, а затем экстраполирования его на многочисленные страницы с рисунками и информацией на каждой странице, задача может оказаться сложной.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Это большое количество информации также может быть трудно разместить на верху. Если вы хотите скопировать и вставить определенные правила, то вам нужно вернуться, чтобы найти их. Даже если вы отлично справляетесь с организацией CSS, размер сайта и объем информации могут быть просто ошеломляющими. Правило @import — это отличный способ организовать большое количество правил стиля.
Преимущества CSS @import
Самое лучшее в CSS @import — это то, что он экономит ваше время и предотвращает разочарование. Если вы не используете @import, вы, как минимум, возвращаетесь к старому CSS, чтобы скопировать и вставить необходимую информацию или управлять всеми правилами стилей в одной таблице стилей. Это может занять много времени, и даже увеличить сложность, так как ваш сайт становится все больше и больше, и код становится все труднее найти. Еще хуже то, что дублированные стили приводят к большей таблице стилей, которая может снизить производительность веб-сайта.
CSS @import экономит много времени, но также обеспечивает большую точность. Вместо того, чтобы потенциально писать плохие правила стиля или копировать и вставлять неправильную информацию, все, что вам нужно сделать, это импортировать имеющиеся правила. Это просто и очень точно, особенно по сравнению с альтернативами. Его также можно использовать для разделения правил стиля на отдельные таблицы стилей, например:
Помимо этих плюсов, вот более подробный список того, почему CSS @import является отличным инструментом веб-разработки:
Это экономит время даже по сравнению с подходом копирования и вставки или методом добавления ссылок.
Это уменьшает вероятность ошибок.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Это предоставляет организационную помощь при создании средних и крупных веб-сайтов. В подобных проектах так много информации и кода, что любая помощь имеет значение.
Вы можете создать столько файлов CSS, сколько захотите импортировать. Вы можете создать основной файл, а затем подключить дополнительные файлы, такие как файлы типографики или изображений.
Это бесплатный, экономящий время, простой и эффективный инструмент для создания веб-сайтов.
Недостатки CSS @import
Единственный реальный минус, связанный с CSS @import, заключается в том, что это может увеличить время загрузки страницы, если не используется в процессе сборки. Когда страница загружается с помощью команды @import, она должна прочитать и импортировать таблицу стилей, указанную в правиле, а затем применить ее к текущей странице. Это не займет много времени, и даже на самых крупных веб-сайтах, использующих команду @import, заметной разницы во времени загрузки не чувствуется. Однако, для ботов, которые используют время загрузки для вычисления вашего рейтинга в поиске, это может сдвинуть вас вверх или вниз в выдаче поисковых систем.
Альтернативы CSS @import
Есть несколько альтернатив CSS @import. Некоторые из них были упомянуты ранее, но здесь мы рассмотрим их немного подробнее. Хотя эти альтернативы и доступны, CSS @import — самый быстрый и точный способ перенести уже существующие стили из одной таблицы стилей в другую. Вот список альтернатив:
Ссылки: Использование тега link для привязки CSS-файлов в заголовке HTML-файла позволяет загружать, а не вызывать CSS-файлы. Это означает, что браузеру не нужно переходить к другой таблице стилей для ее импорта, вместо этого ее можно загрузить на месте. Данный метод имеет определенные преимущества, поскольку он не увеличивает время загрузки, но также имеет и некоторые недостатки. Самое главное из них это то, что если вы хотите создать ссылку на файл CSS, вы должны знать, где он находится. Если вы этого не сделаете, а ваш сайт большой и сложный, то поиск этой ссылки может занять некоторое время.
Переписывание одних и тех же правил стилей: это один из способов слияния, но это не совсем верная альтернатива. Переписывать одно и то же снова и снова на разных страницах было бы в лучшем случае слишком сложно и неэффективно. Хотя это может быть сделано и может быть сделано эффективно, риск ошибки и огромное количество необходимого времени делают этот метод неактуальным.
Копирование и вставка. Другой способ объединения данных — просто копирование и вставка. Однако, когда таблицы стилей (и длинные) копируются и вставляются, это может стать затруднительным. С одной стороны, если вы пропустите одну букву или добавите больше пробелов, вы можете легко испортить существующий код. Вы также должны знать, где находится старый CSS, чтобы найти информацию, которую вы хотите скопировать.
Стоит ли использовать CSS @import?
Краткий ответ: да. Преимущества перевешивают недостатки и с довольно большим отрывом. Если вы являетесь компанией, у которой есть ресурсы, чтобы нанимать кого-то для работы на полную ставку по кодированию, созданию и поддержке вашего веб-сайта, то вы можете обойтись и без команды @import. С другой стороны, если вы веб-дизайнер или владелец малого бизнеса, создающего свой собственный веб-сайт, преимущества нельзя игнорировать.
CSS @import может увеличить время загрузки сайта. Однако штука в том, что это не увеличит время загрузки домашней страницы. Это имеет ключевое значение, потому что любой, кто посещает вашу домашнюю страницу, по большей части, имеет на то какую-то причину. Если они посещают последующие страницы, то это потому, что они заинтересовались вашей идеей или товаром. Этот тип посетителей вашего сайта, вероятно, не остановится перед тем, чтобы подождать дополнительные 0,074 секунды (это вымышленная цифра, но вы понимаете, в чем суть), пока загрузится страница с CSS @import. Это дополнительное время может быть даже полностью удалено, если @import используется в процессе сборки.
Можно ли включить один файл CSS в другой?
Это должно быть первое правило в таблице стилей, использующее правило @import .
Единственное предостережение в том, что старые веб-браузеры его не поддерживают. Фактически, это одна из хитростей CSS, позволяющая скрыть стили CSS от старых браузеров.
Обратитесь к этому списку для поддержки браузера.
@import url(«base.css»); Штраф , но медведь работает в виду , что каждое @import утверждение новый запрос к серверу. Возможно, это не проблема для вас, но когда требуется оптимальная производительность, вам следует избегать использования @import .
@import Правило CSS делает именно это. Например,
В некоторых случаях можно использовать @import «file.css», и большинство современных браузеров должны поддерживать это, старые браузеры, такие как NN4, будут немного чокнутыми.
Примечание: оператор импорта должен предшествовать всем остальным объявлениям в файле и протестировать его во всех ваших целевых браузерах, прежде чем использовать в производственной среде.
Да, используйте @import
да, можно использовать @import и указать путь к файлу css, например
Это лучший способ включить таблицу стилей css в таблицу стилей css с помощью css.
Правило «@import» может вызывать несколько файлов стилей. Эти файлы вызываются браузером или пользовательским агентом при необходимости, например, теги HTML вызывают CSS.
CSS-файл main.css содержит следующий синтаксис:
Для вставки в элемент стиля используйте createTexNode, не используйте innerHTML, но:
В отличие от лучшего ответа, не рекомендуется агрегировать все файлы CSS в один фрагмент при использовании HTTP / 2.0.
Импортируйте бутстрап с помощью altervista и wordpress
Я использую это для импорта bootstrap.css в altervista с wordpress
и он работает нормально, так как он удалит код ссылки html rel, если я помещу его на страницу
Да, вы можете легко импортировать один CSS в другой (где угодно на веб-сайте). Вы должны использовать, например:
спой CSS @import Rule здесь
Я создал файл main.css и включил в него все файлы css.
Мы можем включить только один файл main.css
По какой-то причине @import у меня не работал, но в этом нет необходимости?
Похожие публикации:
- Как поставить заголовок по центру в css
- Как поставить фон на css
- Как при наведении на один объект изменить свойства другого в css
- Как прижать объект к низу блока css