CSS :: @-правила
css-правило @import
С одним из таких правил мы познакомились в самом начале учебника, когда рассматривали вопрос о подключении таблиц стилей к html-документу. Речь идет о правиле @import, которое позволяет импортировать содержимое css-файла в текущую таблицу стилей.
Правило @import должно идти в самом начале таблицы стилей перед любыми другими правилами. Исключение составляют только правила @import, а также правило @charset.
В качестве значения правило принимает абсолютный или относительный путь к css-файлу, который записывается в формате @import url("path");. При этом разрешается использовать одинарные кавычки или вообще писать путь файла без кавычек. Также разрешается записывать путь файла просто в кавычках в формате @import "path";. Отметим, что в правиле можно сразу же указать и тип носителя, для которого будет применяться подключаемая таблица стилей. Тип носителя указывается после указания пути к файлу через пробел. Если используется несколько типов носителей, то они перечисляются через запятую (см. пример №1). Формат записи правила в этом случае будет иметь вид:
@import url("path") тип_носителя_1, тип_носителя_2,...;
htmlCodes
@charset "utf-8";
/* Импортируем в данную таблицу стилей две внешние таблицы */
@import url("http://localhost/test/css/style_1.css") print;
@import "../../css/style_2.css" screen, tv;
/* Загружаем свой шрифт с сервера */
@font-face {
font-family: my_font;
src: url("font_1.ttf"),
url("font_1.eot");
}
/* Применяем шрифт к абзацам с атрибутом class="font_1" */
p.font_1 {
font-family: my_font, verdana, serif;
}
Пример №1. Запись правил @charset, @import и @font-face
Указание кодировки страницы,
css-правило @charset
Правило @charset используется для указания кодировки текущей внешней таблицы стилей, чтобы браузер понимал, в какой кодировке сохранен css-файл. Название кодировки должно быть указано в кавычках.
Подключение собственных шрифтов к странице,
css-правило @font-face
Как известно, у каждого пользователя на компьютере наборы шрифтов могут сильно отличаться, а некоторые специфичные шрифты вообще встречаются крайне редко и то, если были специально установлены пользователем. Поэтому, для выхода из таких ситуаций, в CSS была предусмотрена возможность загрузки на компьютер пользователя специфичного или авторского шрифта непосредственно с сервера, на котором расположен данный сайт. Для этих целей применяется правило @font-face. Формат записи правила имеет вид:
@font-face{
font-family: my_font;
src: url("path_1"), url("path_2"), ...;
}
(см. пример №1).
Обязательно нужно создать имя загружаемого шрифта, а затем путь к одному или нескольким файлам, которые содержат указанный шрифт. Необходимость
указания нескольких файлов с различными расширениями возникает из-за того, что разные браузеры могут поддерживать различные расширения файлов.
css-правило @page
Довольно часто при выводе страницы на печать возникает потребность в изменении полей распечатываемых страниц. Для этих целей в CSS используется правило @page, формат записи которого имеет следующий вид:
@page :first | :left | :right{
внешние отступы;
}
Ключевое слово :left позволяет задать поля для всех левых страниц, :right –
для всех правых, а :first – для первой страницы (см. пример №2).
htmlCodes
/* Отступы на первой странице */
@page :first{
margin: 1cm;
margin-right: 2cm;
}
/* Отступы справа 2см на левых страницах (для дыроколов) */
@page :left{
margin: 1cm;
margin-right: 2cm;
}
/* Отступы слева 2см на правых страницах (для дыроколов) */
@page :right{
margin: 1cm;
margin-left: 2cm;
}
Пример №2. Использование правила @page
Отметим, что в правиле разрешается изменять внешние отступы (свойство margin и его производные), но не внутренние отступы или границы. Также разрешено изменять и устанавливать значения свойств orphans, widows, page-break-before, page-break-after, page-break-inside. Короче всех свойств, предназначенных для определения характеристик страниц при выводе их на бумажные носители.
Правило @keyframes было описано нами в ходе рассмотрения свойств, реализующих возможности анимационных эффектов в CSS.
css-правило @supports
В ситуациях, когда какое-нибудь свойство поддерживается не всеми браузерами, может потребоваться проверка такой поддержки, чтобы гарантированно использовать в документе желаемое оформление. В таких случаях может быть полезным правило @supports, которое позволяет проверить, поддерживает браузер ту или иную css-технологию или нет (см. пример №3). Формат записи данного правила имеет следующий вид:
@supports (<условие>){
<стилевые правила>
}
В качестве условия в круглых скобках записывается проверяемое css-свойство и его значение. Если оно не
поддерживается браузером, стилевые правила в фигурных скобках будут проигнорированы.
Отметим, что для составления более сложных условий могут быть использованы следующие логические операторы:
- not – ставится перед условием. При этом, если свойство в условии не поддерживается браузером, стилевые правила в фигурных скобках будут использоваться.
- and – объединяет несколько условий. Если хотя бы одно из свойств в условиях не поддерживается браузером, стилевые правила в фигурных скобках будут проигнорированы.
- or – если поддерживается хотя бы одно из свойств в условиях, то стилевые правила в фигурных скобках будут использоваться.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Правило @supports</title>
<style>
p{
width: 400px;
padding: 1em;
border: 1px solid black;
}
@supports (color: green){
.green_text{color: green}
}
@supports not (color: superYellow){
.orange_text{color: orange}
}
</style>
</head>
<body>
<p class="green_text">
Ваш браузер поддерживает color: green!
</p>
<p class="orange_text">
Ваш браузер не поддерживает color: superYellow,
поэтому использовано color: orange.
</p>
</body>
</html>
Пример №3. Использование правила @supports
css-правило @keyframes
Правило @keyframes было описано нами в ходе рассмотрения свойств, реализующих возможности анимационных эффектов в CSS.