@import в CSS


Содержание

Директива @import

Sass расширяет CSS правило 1 @import , позволяя импортировать scss и sass файлы. Все импортированные scss и sass файлы могут быть объединены в одном результирующем css файле. Кроме того, любые переменные или миксины, объявленные в импортированном файле, могут использоваться в главном файле.

Илон Маск рекомендует:  Подвал веб-страницы

Компилятор ищет другие файлы sass в текущей папке, и в каталоге файлов sass при использовании в Rack, Rails или Merb. Дополнительные каталоги поиска могут задаваться с помощью опции :load_paths или ключ —load-path в командной строке.

@import использует название файла для импорта. По умолчанию, @import ищет Sass-файлы, но есть несколько правил, по которым @import отрабатывает как CSS-правило:

  • Если расширение файла .css
  • Если имя файла начинается с http://
  • Если имя файла вызывается через url()
  • Если правило @import включает в себя любые медиа-запросы

Если ни одно из вышеперечисленных условий не соблюдено, а расширение файлов .scss или .sass , то эти файлы будут импортированы. Если расширения файлов не указаны, то Sass попытается найти файлы по имени с расширением .scss или .sass и импортирует их.

будет импортирован foo.scss , в то время как:

Также возможно импортирование нескольких файлов через одну директиву . Например:

будут импортированы файлы rounded-corners.scss и text-shadow.scss .

Импортирование может содержать в себе интерполяцию #<> , но только с некоторыми ограничениями. Невозможно динамически импортировать файлы Sass через переменные; интерполяция нужна только для правила @import в CSS. Как таковая, интерполяция работает только с url() .

1 Правилом является только функционал с возможностями CSS, директива — функционал правила CSS + расширение функционалом Sass.

CSS @import Rule

Example

Import the «navigation.css» style sheet into the current style sheet:

@import «navigation.css»; /* Using a string */

@import url(«navigation.css»); /* Using a url */

More examples below.

Definition and Usage

The @import rule allows you to import a style sheet into another style sheet.

The @import rule must be at the top of the document (but after any @charset declaration).

The @import rule also supports media queries, so you can allow the import to be media-dependent.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
@import Yes 5.5 Yes Yes Yes

CSS Syntax

Property Values

Value Description
url|string A url or a string representing the location of the resource to import. The url may be absolute or relative
list-of-mediaqueries A comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL

More Examples

Example

Import the «printstyle.css» style sheet ONLY if the media is print:

Example

Import the «mobstyle.css» style sheet ONLY if the media is screen and the viewport is maximum 768 pixels:


COLOR PICKER

HOW TO

SHARE

CERTIFICATES

Your Suggestion:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

Группируем CSS. Директива @import

В статье, посвященной внешним таблицам стилей, говорилось о возможности подключать несколько различных CSS-файлов к одной HTML-странице, если использовать группу тегов link. Например, так:

Такой подход, когда таблицы стилей разделены на несколько файлов, иногда удобен. Он позволяет, как бы собирать общий CSS из отдельных блоков-файлов, используя только те из них, которые нужны непосредственно на данной странице.

Но злоупотреблять такой блочной структурой все же не стоит. Помни, что лишний файл — это лишнее обращение к серверу, а, значит, дополнительное время и трафик.

Впрочем, если ты все-таки решил использовать такую блочную структуру CSS, то, кроме тегов link, у тебя есть еще один вариант — директива @import.

Соединяем несколько CSS

Как ты, наверное, помнишь, в CSS-файле не может быть никакой HTML-разметки. То есть теги link, конечно, записываются непосредственно в файле HTML (в секции head).

В отличие, от link, директива @import позволяет соединять таблицы стилей внутри CSS. Указанные в директиве CSS-файлы загружаются и присоединяются к тому CSS в котором встретилась @import.

Синтаксис

  • путь к CSS-файлу — абсолютный или относительный адрес файла;
  • тип устройства — необязательный параметр, эквивалентный атрибуту media тега link. Позволяет импортировать таблицу только для определенных устройств отображения. Подробнее смотри в CSS справочнике.

Примечания:

Если в CSS есть директива @import, то она должна находиться в самом начале таблицы (перед всеми правилами). В противном случае браузер может ее проигнорировать.

Так, как @import — это CSS-конструкция, то содержатся она должна либо в CSS-файле, либо внутри тега style (использовать @import во встроенных стилях нельзя!).

Резюме

Для создания блочной структуры CSS можно использовать два варианта.

  1. подключать нужные файлы таблиц в HTML с помощью тегов link;
  2. импортировать все таблицы в одну, с помощью директивы @import.

Блочная структура удобна, например, в больших проектах, которые делает множество людей. Но помни, что для повышения быстродействия, как правило, таблицы наоборот, соединяют в один файл.

Поэтому использовать @import без реальной необходимости не стоит, т.к. страдает скорость загрузки.

CSS @import Rule


Пример

Импортируйте таблицу стилей «navigation.css» в текущую таблицу стилей:

@import «navigation.css»; /* Using a string */

@import url(«navigation.css»); /* Using a url */

More examples below.

Определение и использование

Правило @import позволяет импортировать таблицу стилей в другую таблицу стилей.

@import правило должно находиться в верхней части документа (но после любого объявления @charset).

Правило @import также поддерживает запросы мультимедиа, поэтому можно разрешить импорт в зависимости от носителя.

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Импорт файлов в HTML

HTML импорт является одним из способов включить внешний HTML-документ и его веб-компоненты на странице без соответствующего AJAX запроса или загрузки IFRAME. Ввиду этой возможности, импорт HTML может послужить ускорению времени загрузки страницы, открыть новые возможности для повторного использования кода, а также улучшить интеграцию некоторых популярных сервисов, таких как Google Maps.

На момент написания статьи, технология импорта HTML является рабочим проектом W3C, а это значит, что она ещё не является веб-стандартом и пока не поддерживается во всех браузерах. Однако, HTML импорт можно уже сейчас использовать через Polymer.

HTML импорт как инструмент для повторного использования и агрегирования

Разработчики программного обеспечения, в том числе и веб-разработчики, стараются не дублировать код, а скорее распределять его по моделям, объектам, функциям. Благодаря разработчикам Дэйву Томасу и Эндрю Ханту, этот подход обычно называют DRY-разработкой или DRY-программированием, что значит в переводе с английского «не повторяй себя».

В некотором смысле, HTML импорт поддерживает развитие DRY. Вот пример — представьте, что у вас есть три сообщения, которые повторяются на нескольких веб-страницах. Вместо того чтобы копировать и вставлять или перепечатывать эти сообщения для каждой страницы или проекта, они могут быть включены с помощью HTML импорта.

Для примера возьмём HTML-файл с названием messages.html:

Для повторного использования контента из messages.html, для начала включите документ через HTML импорт. Это осуществляется добавлением тега
с атрибутом rel, равным «import» и атрибутом href, принимающим значение messages.html:

Мы можем написать небольшой отрывок, используя JavaScript, который обращается к документу messages.html и загружает сообщения “success” на странице. Каждое из последующих сообщений (или все вместе) также могут быть загружены аналогичным образом, в зависимости от того, как вам хотелось бы использовать их. Вот код:

Данный код выполняет следующие задачи:

  • Выбирает элемент link
  • Импортирует файл
  • Извлекает импортированный DOM
  • Вставляет содержимое на страницу

Вот таким образом, сообщение “success” теперь включено на странице, подобно тому, как это работает через AJAX запрос.

Этот пример, конечно, крайне упрощён. Если бы содержание в messages.html было значительно сложнее, например, в несколько сотен строк HTML, JavaScript и CSS, то наш код импорта выглядел бы чуть сложнее.

В качестве второго примера рассмотрим, как языки программирования часто используются для загрузки повторно-используемого контента. В приведённом ниже примере из файла single.php появляется выбор окна приветствия для WordPress:

Обратите внимание, что есть несколько мест, в данном примере когда для single.php, были задействованы внешние ресурсы, в том числе, чтобы получить заголовок страницы, загрузить шаблон, окно навигации, сайдбар и нижнюю строку.

Аналогично тому, как скрипт PHP обращается к внешнему ресурсу, HTML импорт может быть использован для добавления содержимого. Эта аналогия может стать яснее, если учесть, что HTML импорт являются частью проекта HTML Web Components draft.

Допустим, что веб-компоненты имеют четыре составляющих блока. Эрик Байдельман, который работает в коммуникации с разработчиками в Google, а также представлял веб-компоненты в Googio I / O в 2013 и 2014 годах, описал их так:

  • Shadow DOM (теневой DOM): работа с DOM и стилями;
  • HTML Templates (HTML шаблоны): DOM фрагменты, для обеспечения базовой структуры кода;
  • Custom Elements (пользовательские элементы) — собственные HTMLэлементы;
  • HTML Imports (HTML импорт) – позволяют объединять веб-компоненты и повторно их использовать.

Учитывая всё вышеперечисленное, теперь вы можете себе представить, как можно использовать HTML импорт для улучшения загрузки различных компонентов HTML-страницы. К примеру данную технику можно применить в следующих случаях.


  • Оплата через PayPal – используйте тег , и вы можете добавить безопасную возможность оплаты на любую страницу.
  • Форма для E-mail подписки — используя HTML импорт, добавление формы подписки может быть также просто, как импортирование внешнего HTML документа и добавления тега .
  • Карты Google — часто используемый пример импорта HTML, вставляем пользовательский элемент . Конечно, это сработает, только после того как будет загружен документ, определяющий специальный тег.

Третий пример показывает то, как HTML импорт может помочь разработчикам, более эффективно загрузить некоторые фреймворки или другие связки HTML.

В данном примере, загружаем Bootstrap и его многочисленные файлы:

В bootstrap.html подключаем нужные файлы, как бы мы это сделали в разделе :

Браузерная поддержка

Как уже упоминалось выше, в настоящее время существует достаточно мало браузеров поддерживающих HTML импорт. Исключения — Chrome 36+, Chrome 37+ для Android и Opera 23+0.

Также существуют полизаполнения, которые делают эту функцию доступной практически в любом браузере. Самым надёжным является вышеупомянутый проект Polymer.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/introduction-html-imports-tutorial/
Перевел: Станислав Протасевич
Урок создан: 30 Сентября 2014
Просмотров: 14870
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

Илон Маск рекомендует:  Другие языки

15 новых сайтов для скачивания бесплатных фото

Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.

Импорт в CSS и Media директива

На сайте встречаются совершенно разные разделы. Хоть они и могут сильно отличаться друг от друга по построению элементов (навигация, контентная часть), тем не менее, они обладают общими схожими характеристиками. На любой странице моего сайта я должен подтверждать визуально посетителю, что он находится по-прежнему на моем сайте. Т.е. страницы я оформляю примерно в одном ключе. Для этого у меня есть файл, в котором написаны все общие правила CSS, которые применимы для любой страницы. Но в то же время для любого раздела должен быть свой файл css, в котором будут индивидуальные правила для раздела.

Импорт CSS

Обычно при написании сайта мы создаем шаблоны на основе html и подключаем их к движку. После этого менять html код шаблона не надо! Я буду менять только css. Поэтому, если мне надо подключить еще один файл, я не буду лезть в шаблон html, а использую импорт в css.

Использую следующий синтаксис:

@import url (“имя файла”) типы носителей;

@import “имя файла” типы носителей;

При импорте файла можно выбрать, для каких устройств я создаю стили. Различают следующие типы устройств:

  • all – все.
  • aural — голосовые браузеры.
  • braille — шрифт Брайля.
  • handheld — переносные устройства.
  • print — принтеры.
  • projection — проекторы.
  • screen — мониторы.
  • tv — телевизионные устройства.

По умолчанию я создаю стили для всех типов устройств.

Media директива

Данная директива в css используется для перечисления устройств, для которых я пишу правила. Например:


Импорт стилей

Если вы хоть раз подключали таблицы стилей через директиву @import в CSS, то эта часть главы полностью изменит ваше представление о ней, так как в Less все куда интереснее и гибче. Если же вы никогда ранее не делали импорт стилей в CSS, то добро пожаловать в этот удивительный мир, позволяющий разбивать таблицы стилей на несколько частей.

Импорт стилей в CSS

В CSS директива @import позволяет импортировать стили из других таблиц. Проще говоря, можно разбить одну большую таблицу стилей на несколько маленьких. Делается это следующим образом:

Самым важным минусом выступает тот факт, что такие подключения должны предшествовать другим стилям в таблице, где подключается дополнительный файл. То есть сделать так, как написано в коде ниже нельзя:

Разрешено делать только так:

Причём имя файла должно быть с расширением .css .

Я не буду вдаваться в подробности и обойду стороной возможность указывать типы носителей, тем более они сейчас нас не интересуют, да и на практике такое подключение дополнительных таблиц стилей не приветствуется.

Импорт стилей в Less

В Less импорт стилей происходит с помощью всё той же директивы, но с расширенным функционалом. Перед именем файла можно указывать (необязательно) ключевое слово, которое указывает компилятору, как ему поступать с файлом.

Тем более, вы можете комбинировать ключевые слова для достижения определённых целей. Например, если нужно использовать css-файл как less-файл, но при этом не выводить его содержимого.

Во-первых, в Less не регламентируется то, где возможно подключение других таблиц стилей. Вы можете использовать директиву @import до объявления селекторов, после или даже между ними:

Во вторых, расширение файла может быть любым, главное — чтобы в нём содержался валидный CSS- или Less-синтаксис. Но здесь начинают действовать специфичные для Less правила:

Файлы с расширением .css :

Если при подключении файла с помощью директивы @import будет указано расширение .css , то такой файл подключается как обычный css-файл и не обрабатывается компилятором.

Файлы без расширения:

Если при подключении файла с помощью директивы @import у него не будет указано расширение, то такой файл подключается как less-файл и обрабатывается компилятором.

Файлы с другими расширениями:

Если при подключении файла с помощью директивы @import у него будет указано расширение, но оно не соответствует ни .css ни .less , то такой файл подключается как less-файл и будет обрабатываться компилятором.

Все это вкупе с доступными опциями для директивы @import , которые будут рассматриваться позднее, даёт вам возможность построения гибкой и хорошо поддерживаемой структуры проекта. Про структуру проекта я буду рассказывать намного позднее, так как без полного понимания доступных возможностей Less она вам не пригодится.

Пример 2.6.1

Рассмотрим пример, который отображает всю суть импорта стилей в Less. Для этого создадим в директории import/ следующие файлы: _duckduckgo.less , _mail.css , _yandex.less и _yahoo.less . В этих файлах объявим одноимённые с названиями файлов классы и укажем с помощью свойства color официальный цвет сервиса. Кроме них нам понадобится файл _styles.less , к которому будут подключаться эти файлы.

Для наглядности я предлагаю посмотреть на карту директории этого примера:

Теперь я предлагаю взглянуть на содержимое файла _styles.less и то, что получилось после его компиляции.

Содержимое файла _styles.less :

Как не сложно заметить, подключение таблиц стилей происходит до и после содержимого файла, что не допускается в CSS, но разрешено в Less.

Содержимое файла styles.css , полученное после компиляции:

Во время компиляции происходит конкатенация содержимого файлов. А файлы с расширением .css подключаются стандартным для CSS способом.

Опции импорта

С помощью ключевых слов (опций) можно управлять тем, как компилятор будет обрабатывать файлы. Например, с помощью таких опций можно заставить компилятор конкатенировать содержимое CSS-файла, а не подключать его с помощью директивы.

Я предлагаю подробнее остановиться на каждом ключевом слове и посмотреть примеры их работы. Все примеры будут основываться на структуре, представленной в примере 2.6.1.

Опция (less)

С помощью этого ключевого слова можно попросить компилятор рассматривать подключаемый файл как less-файл, то есть производить его компиляцию, а также конкатенацию с тем файлом, где происходит его подключение.


Может пригодиться при использовании файлов, которые имеют не стандартное расширение, например, .variables или .mixin .

Пример 2.6.2

Необходимо подключить файл _mail.css :

Если подключить этот файл как раньше, с помощью импорта без ключевых слов ( @import «import/_mail.css»; ), то файл будет подключён как обычный CSS-файл в файле styles.css .

Но нам необходимо провести конкатенацию этих двух файлов. Для этого требуется указать ключевое слово less . Тогда файл styles.css приобретает необходимый нам вид:

Опция (css)

Полная противоположность опции (less) . На этот раз мы можем заставить любой файл подключаться стандартным для CSS способом.

Пример 2.6.3

На этот раз стоит задача подключения файла стандартным для CSS способом. Без лишних слов. Просто посмотрите на код:

Опция (reference)

Замечательная опция, позволяющая использовать less-файлы, но не выводить их содержимое до тех пор, пока оно не будет явно вызвано. Пригодится в тех случаях, когда нужно использовать определённый селектор, а остальное содержимое файла не нужно. Такое поведение положительно сказывается на работе с библиотеками, которые имеют избыточный функционал в виде множества селекторов, а вам необходимы лишь некоторые из них.

Пример 2.6.4

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

Немного изменим файл _yandex.less , чтобы можно было продемонстрировать работу более наглядно:

В файле _styles.less добавим ключевое слово (reference) :

Если сейчас скомпилировать этот файл, то кроме селектора canonium в нём ничего не будет. Необходимо добавить явный вызов селектора.

Добавим явный вызов в файл _styles.less , в виде псевдокласса :extend() . Делается это следующим образом:

Теперь, после компиляции в получившемся CSS-файле у класса .topbar появятся все свойства класса .yandex-topbar , объявленного в импортируемом файле. При этом класс .yandex в этот файл добавлен не будет.

Опция (inline)

Задача этой опции сказать компилятору, что разработчик ожидает на выходе подключённый файл, но без обработки компилятором. Такая опция может пригодиться при подключении CSS-файла, в котором присутствуют конструкции, которые в Less необходимо преобразовывать. Например, используемое в IE свойство filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); , требующее экранирования в Less.

Пример 2.6.5

Представим, что перед нами стоит задача разработки проекта, использующего фильтры. Пусть к такому проекту подключается какая-нибудь библиотека, которая существует в виде CSS-файла. Тогда у нас могут возникнуть некоторые проблемы.

Добавим в файл _mail.css класс, содержащий свойство filter :

Помимо этого, добавим ключевое слово (less) в файле _styles.less , чтобы CSS-файл склеивался с less-файлом:

Производим компиляцию стандартным способом. Но не тут-то было, вместо счастливого финала наш компилятор как-то приуныл и выдал ошибку. В ней говорится, что он не понимает предоставленный синтаксис и ему хочется, чтобы мы его исправили.

Именно сейчас и пригодится рассматриваемая опция (inline) . Дописываем её в директиву @import через запятую:

Повторяем процесс компиляции, и на этот раз все будет хорошо. Компилятор после сложного трудового дня немного отдохнёт, а мы насладимся его работой:

Опция (once) и (multiple)

Я не зря объединил эти две опции. Они представляют собой абсолютную дуальную пару, то есть они полностью противоположны по значению.

Ключевое слово (once) запрещает многократное подключение файла с таким именем. Эта опция включена в Less изначально, и прописывать её в директиве @import не нужно.

Ключевое слово (multiple) разрешает многократное подключение файла с таким именем.

Пример 2.6.6

Попробуем провести эксперимент. Сначала объявим директиву @import без опций, потом запретим многократное подключение с помощью (once) , а затем разрешим, используя (multiple) . После этого обговорим полученные результаты. Приступаем.


Объявим директиву @import без опций:

В полученном результате файл подключился ровно один раз, так как все директивы импорта файлов содержат опцию (once) по умолчанию.

Объявим директиву @import с опцией (once):

И снова тот же результат. Очевидно, что опция (once) все таки установлена по умолчанию, а её повторное применение ничего не меняет.

Объявим директиву @import с опцией (multiple):

На этот раз скомпилированный CSS-код содержит селектор .duckduckgo дважды, а это значит, что опция (multiple) сработала.

Опция (optional)

Эта опция позволяет продолжать компиляцию, если подключаемый файл не найден. Если не использовать это ключевое слово, то при отсутствии файла компилятор будет бросаться в вас ошибкой FileError . Скорее всего, такой функционал пригодится тем, кто строит фреймворк, основанный на ограниченном количестве модулей и компонентов, которые можно подключать и отключать.

Пример 2.6.7

В этом примере есть обязательный для компиляции файл _duckduckgo.less , а также два необязательных: _yahoo.less и _yandex.less . Один из этих файлов будет удалён.

Пусть будет отсутствовать файл _yahoo.less . Тогда после компиляции получится следующий CSS-код:

Мысли и советы

Несколько советов, которые позволят сделать ваш код лучше на этом этапе:

  • Не указывайте расширение файлов без явной на то нужды, это делает структуру более приятной для чтения.
  • Создайте один файл, в котором будут объявлены все директивы импорта файлов в проекте.

CSS import or multiple CSS files

I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes.

I have created a test page:

File: /css/main.css

and now the file: /css/site_header.css:

When I use the above code, the site_header div does not have any formatting/background. When I remove the link line from the HTML doc for site_header.css and instead use an @import url(«/css/site_header.css»); in my main.css file, the same results — nothing gets rendered for for the same div.

Илон Маск рекомендует:  Процедуры воспроизведения звуков

Now when I take the CSS markup from site_header.css and add it to main.css, the div gets rendered fine.

So I am wondering if having multiple css files is somehow not working. or maybe having that css markup at the end of my previous css is somehow conflicting, though I cannot find a reason why it would.

4. CSS — Подключение встроенных и внешних стилей, правила приоритета, комментарии

Существует четыре способа подключения стилей к вашему HTML-документу. Наиболее часто используемые методы — это встроенные CSS и внешние CSS.

Содержание

Ниже приведен пример внедрения CSS на основе вышеприведенного синтаксиса:

Получим следующий результат:

Атрибуты

Атрибут Значение Описание
type text/css Указывает язык таблицы стилей как тип содержимого (тип MIME). Обязательный атрибут.
media screen
tty
tv
projection
handheld
print
braille
aural
all
Указывает устройство, на котором будет отображаться документ. Значение по умолчанию — all. Необязательный атрибут.

Встроенный CSS — атрибут стиля

Вы можете использовать атрибут для любого HTML-элемента для определения правил стиля. Эти правила будут применяться только к данному элементу. Вот общий синтаксис:

Атрибуты


Атрибут Значение Описание
style Правила стиля Значение атрибута style представляет собой комбинацию объявлений стиля, разделенных точкой с запятой (;).

Пример

Ниже приведен пример встроенного CSS на основе приведенного выше синтаксиса:

Получим следующий результат:

Внешний CSS стили — элемент

Элемент
может использоваться для подключения внешних CSS файлов в ваш HTML-документ.

Внешняя таблица стилей CSS представляет собой отдельный текстовый файл с расширением .css. Вы определяете все правила стиля в этом текстовом файле, а затем можете подключить CSS файл в любой HTML-документ с помощью элемента
.

Вот общий синтаксис подключения внешнего файла CSS:

Атрибуты

Атрибуты ассоциируются с элементами или правилах, определенных в любом внешнем файле таблицы стилей.

  • Любое правило, определенное в тегах , переопределяет правила, определенные в любом внешнем CSS-файле.
  • Любое правило, определенное во внешнем файле таблицы стилей, имеет наименьший приоритет в CSS, а правила, определенные в этом файле, будут применяться только тогда, когда не применяются два предшествующих правила.
  • Обработка старыми браузерами

    Существует множество старых браузеров, которые не поддерживают CSS. Поэтому мы должны позаботиться о написании встроенного CSS в нашем HTML-документе. Следующий фрагмент кода показывает, как можно использовать теги комментариев, чтобы скрыть CSS из старых браузеров:

    Комментарии в CSS

    Вам может потребоваться добавить дополнительные комментарии в свои блоки страниц стилей. Таким образом, оформление комментариев в CSS происходит очень легко. Вы можете просто оставить свои комментарии внутри /*. это комментарий в CSS-файле. */.

    Также Вы можете использовать /*. */ как для однострочных комментариев в CSS, так и для комментирования многострочных блоков аналогично тому, как это делается на языках программирования C и C++.

    Лучший способ включить CSS? Зачем использовать @import?

    В основном мне интересно, в чем преимущество/цель использования @import для импорта таблиц стилей в существующую таблицу стилей по сравнению с просто добавлением другого.

    в начало документа?

    С точки зрения скорости страницы, @import из файла CSS почти никогда не будет использоваться, так как это может препятствовать одновременной загрузке таблиц стилей. Например, если таблица стилей A содержит текст:

    тогда загрузка второй таблицы стилей может не начинаться до тех пор, пока не будет загружена первая таблица стилей. Если, с другой стороны, обе таблицы стилей упоминаются в элементах
    на главной странице HTML, оба могут быть загружены одновременно. Если обе таблицы стилей всегда загружаются вместе, также может быть полезно просто объединить их в один файл.

    Бывают случаи, когда @import подходит, но они, как правило, являются исключением, а не правилом.

    Я буду играть адвоката дьявола, потому что я ненавижу, когда люди слишком много согласны.

    1. Если вам нужна таблица стилей, которая зависит от другой, используйте @import. Сделайте оптимизацию на отдельном шаге.

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

    Если у вас есть одна таблица стилей, которая зависит от другой, наиболее логичной задачей является размещение их в двух отдельных файлах и использование @import. Это будет наиболее логичным для следующего человека, который смотрит на код.

    (Когда произойдет такая зависимость? Это довольно редко, на мой взгляд — обычно достаточно одной таблицы стилей. Однако есть несколько логических мест для размещения вещей в разных файлах CSS:)


    • Theming: Если у вас есть разные цветовые схемы или темы для одной и той же страницы, они могут совместно использовать некоторые, но не все компоненты.
    • Подкомпоненты: надуманный пример — скажем, у вас есть страница ресторана, в которой есть меню. Если меню сильно отличается от остальных на странице это будет легче поддерживать, если оно находится в собственном файле.

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

    Python использует импорт; C использует; Требуется JavaScript. CSS имеет импорт; когда вам это нужно, используйте его!

    2. Как только вы дойдете до точки, где нужно масштабировать сайт, объедините все CSS.

    Несколько запросов CSS любого — через ссылки или через @imports — — плохая практика для высокой производительности веб-сайтов. Когда вы решаете проблему оптимизации, все ваши CSS должны проходить через minifier. Cssmin объединяет операторы импорта; как указывает @Brandon, у хрюка есть несколько вариантов для этого. (См. также этот вопрос).

    После того, как вы находитесь на стадии минимизации,
    работает быстрее, как указывали люди, поэтому в большинстве случаев ссылайтесь на несколько таблиц стилей и не делайте @import, если это вообще возможно.

    Прежде чем сайт достигнет масштабов производства, тем более важно, чтобы код был организован и логичен, чем это происходит немного быстрее.

    Лучше НЕ использовать @import для включения CSS на странице по причинам скорости. Посмотрите эту замечательную статью, чтобы узнать, почему нет: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

    Также часто бывает сложно минимизировать и объединять файлы css, которые подаются через тег @import, потому что minify scripts не могут «очистить» строки @import от других файлов css. Когда вы включаете их в качестве тегов ссылок, вы можете использовать существующие модули minify php/dotnet/java для выполнения минимизации.

    Итак: используйте
    вместо @import .

    используя метод link, таблицы стилей загружаются параллельно (быстрее и лучше), и почти все браузеры поддерживают ссылку

    импорт загружает все дополнительные файлы css один за другим (медленнее) и может дать вам Flash Unstyled Content

    @Nebo Iznad Mišo Grgur

    Ниже приведены все правильные способы использования @import

    На самом деле нет большой разницы в добавлении CSS-таблицы стилей в голове и использовании функций импорта. Использование @import обычно используется для цепочки таблиц стилей, так что их можно легко расширить. Его можно использовать для легкой замены различных макетов цветов, например, в сочетании с некоторыми общими определениями css. Я бы сказал, что основным преимуществом/целью является расширяемость.

    Я согласен с комментарием xbonez также в том, что переносимость и ремонтопригодность являются дополнительными преимуществами.

    Они очень похожи. Некоторые могут утверждать, что @import более удобен в обслуживании. Однако каждый @import будет стоить вам новый HTTP-запрос таким же образом, как и метод «link». Так что в контексте скорости это не быстрее. И как сказал «duskwuff», он не загружается одновременно, что является падением.

    Одно место, где я использую @import, — это когда я делаю две версии страницы, на английском и французском. Я построю свою страницу на английском языке, используя main.css. Когда я построю французскую версию, я свяжусь с французской таблицей стилей (main_fr.css). В верхней части французской таблицы стилей я импортирую main.css, а затем переопределяю конкретные правила только для тех частей, которые мне нужны во французской версии.

    Основной целью метода @import является использование нескольких таблиц стилей на странице, но только одна ссылка в вашем . Например, корпорация может иметь глобальную таблицу стилей для каждой страницы на сайте, а подсекции имеют дополнительные стили, которые применяются только к этому подразделу. Связываясь с таблицей стилей подзаголовка и импортируя глобальные стили в верхней части этой таблицы стилей, вам не нужно поддерживать гигантскую таблицу стилей со всеми стилями для сайта и каждого подраздела. Единственное требование состоит в том, чтобы любые правила @import приходили перед остальными вашими правилами стиля. И помните, что наследование все еще может быть проблемой.

    Иногда вам приходится использовать @import, а не inline. Если вы работаете над сложным приложением, содержащим 32 или более файлов css, и вы должны поддерживать IE9, выбора не будет. IE9 игнорирует любой файл css после первого 31, и это включает и встроенный css. Однако каждый лист может импортировать еще 31.

    Существует много хороших причин использования @import.

    Одной из мощных причин использования @import является создание кросс-браузерного дизайна. Импортированные листы, в общем, скрыты от многих старых браузеров, что позволяет применять специальное форматирование для очень старых браузеров, таких как Netscape 4 или более ранние серии, Internet Explorer 5.2 для Mac, Opera 6 и старше, а также IE 3 и 4 для ПК.

    Для этого в файле base.css вы можете получить следующее:

    В импортированном пользовательском листе (newerbrowsers.css) просто примените новый каскадный стиль:

    Использование блоков «em» превосходит единицы «px», поскольку позволяет расширять шрифты и дизайн на основе пользовательских настроек, когда более старые браузеры лучше работают с пиксельными (которые жесткие и не могут быть изменены в браузере) пользовательские настройки). Импортированный лист не будет отображаться большинством старых браузеров.

    Вы можете так, кого это волнует! Попытайтесь перейти к более крупным устаревшим государственным или корпоративным системам, и вы по-прежнему увидите, что старые браузеры используются. Но его действительно хороший дизайн, потому что браузер, который вы любите сегодня, также когда-нибудь будет устаревшим и устаревшим. И использование CSS ограниченным образом означает, что теперь у вас есть еще большая и растущая группа пользовательских агентов, которые не работают с вашим сайтом.

    Используя @import, ваша совместимость с веб-сайтом на основе кросс-браузера теперь будет достигать насыщенности 99,9% просто потому, что так много старых браузеров не прочитают импортированные листы. Это гарантирует, что вы примените простой простой набор шрифтов для своего html, но более продвинутый CSS используется более новыми агентами. Это позволяет контенту быть доступным для старых агентов без ущерба для богатых визуальных дисплеев, необходимых для более новых настольных браузеров.

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

    Мегабайты и мегабайты Javascript API и JSON, загруженные на смарт-устройства и плохо разработанная HTML-разметка, несовместимая между страницами, являются основным драйвером медленного рендеринга сегодня. Средняя страница новостей Google составляет более 6 мегабайт ECMAScript, чтобы отобразить крошечный бит текста! LOL

    Несколько килобайт кэшированного CSS и согласованный чистый HTML с меньшими отпечатками javascript будут отображаться в пользовательском агенте молниеносной скоростью просто потому, что браузер кэширует как согласованную разметку DOM, так и CSS, если вы не решите манипулировать и не изменить это с помощью javascript circus фокусы.

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL