Import url css: @import | htmlbook.ru

Leave a Comment / Css / By /

@import | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+2.0+4.0+2.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюall
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/cascade.html#at-import

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import.

Синтаксис

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

В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.

Табл. 1. Типы носителей и их описание
ТипОписание
all
Все типы. Это значение используется по умолчанию.
auralРечевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
brailleУстройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheldНаладонные компьютеры и аналогичные им аппараты.
printПечатающие устройства вроде принтера.
projectionПроектор.
screenЭкран монитора.
tv
Телевизор.

Использование типов носителей совместно с импортом файла дает возможность указывать стиль только для определенных устройств.

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Импорт стиля</title>
  <style>
    @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */
    @import "/style/palm.css" handheld, print; /* Стиль для печати */
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

Браузеры

Браузер Internet Explorer до версии 7.0 включительно не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается.

@-правила

CSS по теме

  • @import

Статьи по теме

  • Способы добавления стилей на страницу
  • Типы носителей
  • Хаки для IE7

Рецепты CSS

@import | WebReference

Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу.

@import не разрешается вставлять после любых объявлений кроме @charset или другого @import.

Синтаксис

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

В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.

Табл. 1. Типы носителей и их описание
ТипОписание
allВсе типы. Это значение используется по умолчанию.
printПечатающие устройства вроде принтера.
screenЭкран монитора.

Использование типов носителей совместно с импортом файла дает возможность указывать стиль только для определенных устройств.

Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз. <число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Импорт стиля</title>
  <style>
    @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */
    @import "/style/palm.css" handheld, print; /* Стиль для печати */
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

Примечание

Браузер Internet Explorer до версии 7 включительно не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается.

Спецификация

СпецификацияСтатус
Media QueriesРекомендация
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

5.5121511
1151
Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

@-правила

Практика

  • Импорт шрифта

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

❮ Предыдущий Далее ❯

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

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

Комментарии используются для объяснения кода и могут помочь при редактировании исходного кода позднее.

Комментарии игнорируются браузерами.

Комментарий CSS помещается внутри элемента

Мой Заголовок


Здравствуйте! Мир!


Этот абзац оформлен с помощью CSS.


Комментарии CSS не отображается в выходных данных.



Попробуйте сами »

❮ Предыдущая Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery 9005 Справочник по Top 6

3 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular

Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Разница между @import и ссылкой в ​​CSS

спросил

13 лет, 8 месяцев назад

Изменено 7 месяцев назад

Просмотрено 56 тысяч раз

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

Использование @import

Использование ссылки
  • css
  • import
  • гиперссылка

Теоретически единственная разница между ними заключается в том, что @import — это механизм CSS для включения таблицы стилей, а — механизм HTML. Однако браузеры обрабатывают их по-разному, давая <ссылка> явное преимущество с точки зрения производительности.

Стив Содерс написал обширный пост в блоге, в котором сравнил влияние <ссылка> и @import (и всевозможных их комбинаций) под названием «не использовать @import». Это название в значительной степени говорит само за себя.

Yahoo! также упоминает это как один из своих лучших методов повышения производительности (в соавторстве со Стивом Содерсом): выберите вместо @import

. 0015 Тег позволяет определить «предпочитаемые» и альтернативные таблицы стилей. Вы не можете сделать это с @import .

0

На сегодняшний день особой разницы нет, но @import неправильно обрабатывается старыми браузерами (Netscape 4 и т. д.), поэтому можно использовать хак @import , чтобы скрыть правила CSS 2 от этих старых браузеров.

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

Однако на вашем месте я бы использовал вариант на ваших HTML-страницах, потому что он позволяет указать такие вещи, как тип носителя (печать, экран и т. д.).

3

Вы можете использовать команду импорта для импорта другого CSS в файл CSS, что невозможно с помощью команды link. Действительно старый браузер не может (частично IE4, IE5) поддерживать функцию импорта. Кроме того, некоторые библиотеки, анализирующие ваш xhtml/html, могут не получить импорт таблицы стилей. Имейте в виду, что ваш импорт должен идти перед всеми другими объявлениями CSS.

Директива может разрешить асинхронную загрузку и интерпретацию нескольких css.

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

Многие скрипты минимизации css (и такие языки, как less или sass) автоматически объединяют связанные скрипты в основной скрипт, поскольку в конечном итоге это вызывает меньшие накладные расходы на передачу.

* (зависит от браузера)

Когда я использую правило @import, обычно это импорт таблицы стилей в существующую таблицу стилей (хотя я не люблю делать это с самого начала). Но чтобы ответить на ваш вопрос, нет, я не верю, что есть какая-то разница. Просто убедитесь, что URL-адрес заключен в двойные кавычки, чтобы соответствовать допустимому XHTML.

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

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

Microsoft Internet Explorer 9 (MSIE9), похоже, неправильно обрабатывает @import. Обратите внимание на эти записи в моем журнале Apache (IP-адрес скрыт, но whois сказал, что он принадлежит самой Microsoft): основной HTML-код, связанный с screen.css, который имеет

 @import url("print.css") print;
@import url("speech.css") слуховой;

, который я сейчас собираюсь изменить на link элементов в HTML, потому что кажется, что MSIE9 выдает два неверных запроса к серверу, получая 404 ошибки, без которых я мог бы обойтись:

 [ip] - - [21/Dec/ 2019:05:49:28 +0000] "GET /screen.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *