belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
CSS >>>

6.1. @-правила

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

Правило @import должно идти в самом начале таблицы стилей перед любыми другими правилами. Исключение составляют только правила @import, а также правило @charset.

В качестве значения правило принимает абсолютный или относительный путь к css-файлу, который записывается в формате @import url("path");. При этом разрешается использовать одинарные кавычки или вообще писать путь файла без кавычек. Также разрешается записывать путь файла просто в кавычках в формате @import "path";. Отметим, что в правиле можно сразу же указать и тип носителя (перечислены чуть ниже), для которого будет применяться подключаемая таблица стилей. Тип носителя указывается после указания пути к файлу через пробел. Если используется несколько типов носителей, то они перечисляются через запятую. Формат записи правила в этом случае будет иметь вид @import url("path") тип_носителя_1, тип_носителя_2,...; (см. пример 6.1).

/* Указываем кодировку, применяемую для кодирования данного файла */
@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;
}

Пример 6.1. Запись правил @charset, @import и @font-face

Правило @charset используется для указания кодировки текущей внешней таблицы стилей, чтобы браузер понимал, в какой кодировке сохранен css-файл. Название кодировки должно быть указано в кавычках.

Как известно, у каждого пользователя на компьютере наборы шрифтов могут сильно отличаться, а некоторые специфичные шрифты вообще встречаются крайне редко и то, если были специально установлены пользователем. Поэтому, для выхода из таких ситуаций, в CSS была предусмотрена возможность загрузки на компьютер пользователя специфичного или авторского шрифта непосредственно с сервера, на котором расположен данный сайт. Для этих целей применяется правило @font-face. Формат записи правила имеет вид: @font-face {font-family: my_font; src: url("path_1"), url("path_2"), ...;} (см. пример 6.1). Обязательно нужно создать имя загружаемого шрифта, а затем путь к одному или нескольким файлам, которые содержат указанный шрифт. Необходимость указания нескольких файлов с различными расширениями возникает из-за того, что разные браузеры могут поддерживать различные расширения файлов.

Довольно часто при выводе страницы на печать возникает потребность в изменении полей распечатываемых страниц. Для этих целей в CSS используется правило @page, формат записи которого имеет следующий вид: @page :first | :left | :right {внешние отступы;}. Ключевое слово :left позволяет задать поля для всех левых страниц, :right – для всех правых, а :first – для первой страницы (см. пример 6.2).

	/* Отступы на первой странице */
	@page :first{
	margin: 1cm;
	margin-right: 2cm;
	}

	/* Отступы справа 2см на левых страницах (для дыроколов) */
	@page :left{
	margin: 1cm;
	margin-right: 2cm;
	}
	
	/*  Отступы слева 2см на правых страницах (для дыроколов) */
	@page :right{
	margin: 1cm;
	margin-left: 2cm;
	}

Пример 6.2. Использование правила @page

Отметим, что в правиле разрешается изменять внешние отступы, но не внутренние отступы или границы. Также разрешено изменять и устанавливать значения свойств orphans, widows, page-break-before, page-break-after и page-break-inside. Короче всех свойств, предназначенных для определения характеристик страниц при выводе их на бумажные носители.

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

Контрольные вопросы и задания

  1. Каким образом можно импортировать в текущую таблицу стилей содержимое внешней таблицы стилей? Как указать тип носителей, к которым должны будут применяться стили импортируемой внешней таблицы стилей?
  2. При помощи какого правила можно задать кодировку текущей таблицы стилей?
  3. Какое правило позволяет загружать и затем использовать на компьютере пользователя авторские шрифты? Опишите порядок использования данного правила.
  4. Для чего используется правило @page?

Словарь новых английских слов

charset [ˈtʃɑːset] – кодировка.
handheld [ˈhændheld] – переносной, портативный.
braille [breɪl] – система чтения Брайля.
screen [skriːn] – экран.
media [ˈmiːdiə] – носители.
projection [prəˈdʒekʃn] – проектор.
face [feɪs] – внешний вид, лицо.
font [fɑːnt] – шрифт.
orphans [ˈɔːfən] – остатки.
widows [ˈwɪdoʊz] – лишние.
inside [ˌɪnˈsaɪd] – внутри, внутрь.
avoid [əˈvɔɪd] – избегать.
always [ˈɔːlweɪz] – всегда.
quotes [kwoʊtz] – кавычки.
close [kloʊz] – закрывать, закрытый.
open [ˈoʊpən] – открывать, открытый.
normal [ˈnɔːrml] – нормальный, обыкновенный.
counter [ˈkaʊntər] – счетчик.
reset [ˌriːˈset] – вновь устанавливать, перезагружать.
content [kənˈtɛnt] – содержимое.
increment [ˈɪŋkrəmənt] – приращение, увеличение.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх