§6. @-правила. Вставка контента. Печать документа.

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).

/* Отступ справа  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. Посмотреть его описание можно здесь.

6.2. Медиа-запросы. Если возникает необходимость указать типы носителей, а также особые условия, для которых будет применяться данная таблица стилей, нужно использовать правило @media (см. пример 6.3). Синтаксис данного правила имеет вид:
@media тип_носителя_1, тип_носителя_2,... and|not|only (медиа_особенности) {стили для этих типов}.

Типы носителей мы уже перечисляли в ходе изучения HTML, когда рассматривали атрибут media служебного элемента 'link'. Перечислим их еще раз:

/* Данный класс будет применен в ходе печати страницы или 
вывода на экран компьютерного терминала */
@media print, tty{
	.myColor_1{
	color: black;
	}
}


/* Этот класс будет применен, если это экран монитора и
ширина области просмотра устройства не превышает 1300px  */
@media screen (max-width: 1300px){
	.myColor_2{
	color: green;
	}
}


/* Этот класс будет применен ко всем типам устройств, если
ширина области просмотра устройства не меньше 1301px, а соотношение 
ширины и высоты области просмотра не менее 3/4  */
@media (min-width: 1301px) and (min-aspect-ratio: 3/4){
	.myColor_3{
	color: red;
	}
}

		
/* Этот класс будет применен либо для всех устройст, кроме экрана монитора, 
у которых ширина области просмотра не менее 1000px, либо для экрана монитора 
в ландшафтном режиме просмотра */
@media not screen and (min-width: 1000px), screen and (orientation: landscape){
	.myColor_4{
	color: blue;
	}
}


/* Этот класс не будет применен к старым браузерам */
@media only screen and (min-width: 1000px){
	.myColor_5{
	color: yellow;
	}
}

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

Помимо указания типа устройств, для которых должен выполняться тот или иной стиль, дополнительно разрешается задавать одно из допустимых медиа-особенностей устройств:

Что касается логических операторов and (и), а также not (не), то они предназначены для составления более сложных условий. Применять их можно как перед типом устройства, так и перед медиа-особенностями. При этом следует помнить, что оператор not имеет наименьший приоритет, а вместо логического оператора or (или) используется обычная запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно из условий выполняется, то стиль будет применён (см. пример 6.3).

Оператор only (только) применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Если же браузер поддерживает медиа-запросы, то оператор only просто игнорируется.

В конце добавим, что медиа-запросы можно использовать и непосредственно в элементе 'link', указав их в качестве значения атрибута media (см. пример 6.3).

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

Для того, чтобы задать минимальное количество строк блочного элемента, которые должны остаться при печати документа на предыдущей странице в случае переноса части содержимого блочного элемента на следующую страницу из-за нехватки места на текущем листе бумаги, используется наследуемое свойство orphans, которое имеет эффект, только если текст расположен на двух и более страницах (см. пример 6.4). В качестве значений свойство принимает только целые положительные числа, указывающие минимальное количество строк разрываемого блочного элемента, которые должны остаться внизу предыдущей распечатываемой веб-страницы (остальные разрешается переносить на следующую страницу). По умолчанию используется число 2. При этом, если, например, в абзаце содержится восемь строк, но только три из них помещаются на предыдущей странице, а значение свойства orphans требует наличия на предыдущей странице как минимум четырех строк, браузер при распечатке или предварительном просмотре перенесет все содержимое блочного элемента на следующую страницу.

/* Определяем параметры печати документа */
	@media print{
		p{
		orphans: 3;
		widows: 3;
   		color: black;
		font-family: Times, "Times New Roman", serif;
		}
		
		/* Запрещаем разрывы страницы до, внутри и после 
		абзацев, у которых атрибут class="no_break"	 */
		p.no_break{
		page-break-before: avoid;
		page-break-after: avoid;
		page-break-inside: avoid;
		}
	}

Пример 6.4. Определение параметров печати веб-страниц

В отличие от orphans, наследуемое свойство widows задает минимальное количество строк блочного элемента, которые должны быть перенесены на следующую страницу при печати документа в случае нехватки места для печати содержимого данного блочного элемента на текущем листе бумаги. Опять же, свойство имеет эффект, если текст расположен на двух и более страницах. В качестве значений свойство принимает только целые положительные числа, указывающие минимальное количество строк разрываемого блочного элемента, которые должны быть перенесены браузером на следующую распечатываемую веб-страницу. По умолчанию используется число 2. При этом, если, например, в абзаце содержится восемь строк, четыре из которых помещаются на предыдущей странице, а значение свойства widows требует переноса на следующую страницу как минимум пяти строк, браузер при распечатке или предварительном просмотре оставит на предыдущей странице только три строки, а пять строк перенесет на следующую страницу. Если же значение свойства widows требует переноса на следующую страницу как минимум девяти строк, браузер при распечатке или предварительном просмотре перенесет все содержимое блочного элемента на следующую страницу.

Свойства применяются только к блочным элементам. Браузер Firefox не поддерживает оба свойства. Кроме того, когда значение свойства widows конфликтует со значением свойства orphans, браузер отдает приоритет значению свойства widows.

Для управления разрывами страницы до и после определяемых селектором блочных элементов используются ненаследуемые свойства page-break-before и page-break-after, которые могут принимать следующие значения:

Для управления разрывами страницы внутри определяемых селектором блочных элементов используется ненаследуемое свойство page-break-inside, которое может принимать два значения:

6.4. Вставка контента. Для вставки генерируемого контента, который первоначально в тексте веб-страницы отсутствует, используется специальное ненаследуемое свойство content. Оно используется совместно с псевдоэлементами ::after и ::before, которые, соответственно, указывают куда следует вставлять контент – до или после заданного элемента (см. пример 6.5). Свойство может принимать следующие значения:

При использовании свойства content разрешается через пробел указывать сразу несколько значений свойства (см. пример 6.5).

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Вставка генерируемого контента</title>
  <style>
	body{counter-reset: parag_1;}   /* Создаем счетчик для тела документа */
	h2{counter-reset: parag_2;}   /* Создаем счетчик для заголовка 'h2' */
	h2:before{ 
      counter-increment: parag_1 1; /* Считаем в элементе 'body' все 'h2' */
       /* Вставляем перед каждым 'h2' контент: строка+текущее значение 
		  счетчика+строка */
	  content: "§" counter(parag_1) ". ";
    }
    h3:before{ 
      counter-increment: parag_2 1; /* Считаем в элементе 'h2' все 'h3' */
	  /* Вставляем перед каждым 'h3' контент: текущее значение счетчика 
	  parag_1+строка+текущее значение счетчика parag_2+строка */
      content: counter(parag_1) "." counter(parag_2) ". "; 
    }
  </style>
 </head>
 <body>
	<h2>Введение в CSS</h2>
	<h3>Для чего нужен CSS?</h3>
	<h3>Синтаксис CSS.</h3>
	<h3>Подключение CSS к html-документу.</h3><br>
	
	<h2>Свойства CSS для текста и шрифта</h2>
	<h3>Оформление внешнего вида текста.</h3>
	<h3>Определение характеристик шрифтов.</h3>
 </body>
</html>

Пример 6.5. Вставка контента на веб-страницу

Ненаследуемое свойство counter-reset инициализирует (устанавливает) счетчик, а также начальное значение счетчика. Для вывода текущего значения счетчика используется свойство content со значением counter(id_счетчика). Перечислим значения свойства counter-reset:

Ненаследуемое свойство counter-increment увеличивает одно или несколько значений указанного в качестве значения счетчика. Перечислим значения свойства counter-increment:

Как известно, в зависимости от языка кавычки, используемые в тексте, могут иметь различный вид. Поэтому в CSS для возможности определения вида кавычек при их автоматическом добавлении, например, в случае использования элемента 'q', присутствует наследуемое свойство quotes, которое позволяет установить однообразное употребление кавычек в тексте. В качестве значений свойство принимает символ открывающей кавычки и символ закрывающей кавычки. При этом сами символы также должны быть взяты в кавычки (см. пример 6.6).

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кавычки</title>
  <style>
	p{quotes: "\0022" "\0022";}
	div{quotes: "'" "'";}
  </style>
 </head>
 <body>
	<p>
		Теперь в элементах 'p' при автоматическом добавлении <br>
		кавычек браузером будут использоваться вот такие 
		<q style="color: orange;">кавычки</q>.
	</p>
	<div>
		Теперь в элементах 'div' при автоматическом добавлении <br>
		кавычек браузером будут использоваться вот такие 
		<q style="color: violet;">кавычки</q>.
	</div>
 </body>
</html>

Пример 6.6. Определение вида используемых кавычек

Отметим, что в значении свойства quotes разрешается вместо символов задаваемых кавычек использовать их коды стандарта Юникод. При этом код символа должен записываться после символа обратного слэша '\' (см. пример 6.6). Посмотреть значения кодов символов кавычек можно воспользовавшись наборами мнемоник и числовых кодов Unicode здесь.

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

  1. Каким образом можно импортировать в текущую таблицу стилей содержимое внешней таблицы стилей? Как указать тип носителей, к которым должны будут применяться стили импортируемой внешней таблицы стилей?
  2. При помощи какого правила можно задать кодировку текущей таблицы стилей?
  3. Какое правило позволяет загружать и затем использовать на компьютере пользователя авторские шрифты? Опишите порядок использования данного правила.
  4. Для чего используется правило @page?
  5. Опишите синтаксис правила @media и перечислите возможные типы носителей информации, а также разрешенные для использования медиа-особенности.
  6. Опишите свойства orphans и widows.
  7. Какие свойства служат для управления вставкой разрывов страниц в ходе печати? Опишите их.
  8. Какие значения может принимать свойство content?
  9. Опишите свойства counter-reset и counter-increment.
  10. При помощи какого свойства устанавливается вид автоматически добавляемых кавычек?


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

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] – приращение, увеличение.

 

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