belarusweb.net - веб-программирование для новичков: HTML,CSS, JavaScript, PHP, MySQL и др.

# §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'. Перечислим их еще раз:

- 'all' – все устройства (применяется по умолчанию);
- 'aural' – синтезаторы речи и звука;
- 'braille' – устройства, использующиеся слепыми людьми (основаны на системе Брайля);
- 'embossed' – принтеры, использующие для печати систему Брайля;
- 'handheld' – смартфоны, планшеты и другие устройства с малой шириной экрана;
- 'print' – принтер (так будет выглядеть страница на бумаге);
- 'screen' – экран монитора;
- 'speech' – речевые браузеры;
- 'projection' – проектор;
- 'tty' – терминалы и другие портативные устройства с ограниченными возможностями экрана.
- 'tv' – телевизор.

    /* Данный класс будет применен в ходе печати страницы или
    вывода на экран компьютерного терминала */
    @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

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

- 'aspect-ratio' – определяет соотношение ширины и высоты отображаемой области просмотра устройства (не путать с размерами всего экрана). Данное соотношение указывается в виде двух целых положительных чисел, которые разделяются между собой слэшем '/' (например, 16/9). Соотношение разрешается также задавать в виде минимально допустимого значения 'min-aspect-ratio' или максимально допустимого 'max-aspect-ratio'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
- 'color' – задается в виде положительного целого числа (степени двойки), которое определяет количество бит на цвет для устройства. Например, если задано число 3, то это означает, что таблица стилей будет применена к устройству, в котором красный, зелёный и синий канал могут отображать 23 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано вообще, то осуществляется проверка того, чтобы устройство просто являлось цветным. Также разрешается использовать префикс и задавать условие в виде 'min-color' и 'max-color'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
- 'color-index' – задается в виде положительного целого числа, которое определяет количество цветов, которое поддерживает устройство (например, 256). Разрешается использовать префикс и задавать условие в виде 'min-color-index' и 'max-color-index'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
- 'device-aspect-ratio' – определяет соотношение ширины и высоты всего экрана устройства. Данное соотношение указывается в виде двух целых положительных чисел, которые разделяются между собой слэшем '/' (например, 16/9). Соотношение разрешается также задавать в виде минимально допустимого значения 'min-device-aspect-ratio' или максимально допустимого 'max-device-aspect-ratio'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
- 'device-height' – определяет всю доступную высоту экрана устройства или печатной страницы. Разрешается использовать префикс и задавать условие в виде 'min-device-height' и 'max-device-height'. Данная особенность используется для всех устройств кроме speech.
- 'device-width' – определяет всю доступную ширину экрана устройства или печатной страницы. Разрешается использовать префикс и задавать условие в виде 'min-device-width' и 'max-device-width'. Данная особенность используется для всех устройств кроме speech.
- 'grid' – определяет, что данное устройство относится к типу с фиксированным размером символов (например, некоторые виды терминалов или телефонов). В таком устройстве символы выстраиваются по заданной сетке и имеют одинаковую ширину и высоту. Отметим, что для подобных устройств следует использовать относительные единицы, а не пикселы. Данная особенность используется для всех устройств и значений не принимает.
- 'height' – определяет доступную высоту отображаемой области (например, высоту окна браузера). Разрешается использовать префикс и задавать условие в виде 'min-height' и 'max-height'. Данная особенность используется для всех устройств кроме speech.
- 'monochrome' – задается в виде положительного целого числа (степени двойки), которое определяет количество бит на пиксель для устройства с монохромным выводом. Например, если задано число 8, то это означает, что таблица стилей будет применена к устройству, способному отображать 256 оттенков своего цвета. Если значение не указано вообще, то осуществляется проверка того, чтобы устройство просто являлось монохромным. Разрешается использовать префикс и задавать условие в виде 'min-monochrome' и 'max-monochrome'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
- 'orientation' – определяет, в каком режиме просмотра находится дисплей: landscape (ландшафтный режим, в котором ширина дисплея больше его высоты) или portrait (портретный режим, в котором высота дисплея больше его ширины). Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
- 'resolution' – определяет разрешение (плотность пикселей) устройства вывода. В качестве значений принимает число точек на дюйм (например, 300dpi) или точек на сантиметр (например, 300dpcm). Данная особенность используется для устройств: handheld, print, projection, screen, и tv.
- 'scan' – определяет тип развертки телевизора: interlace (череcстрочная) или progressive (прогрессивная). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, а затем чётные. Это позволяет сократить передаваемые данные по сравнению с прогрессивной развёрткой, при которой кадр передаётся и показывается целиком.
- 'width' – определяет доступную ширину отображаемой области (например, ширину окна браузера). Разрешается использовать префикс и задавать условие в виде 'min-width' и 'max-width'. Данная особенность используется для всех устройств кроме speech.

Что касается логических операторов 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, которые могут принимать следующие значения:

- auto – браузер будет вставлять разрыв страницы, соответственно, до и после определяемых селектором блочных элементов только в случае необходимости; значение используется браузером по умолчанию;
- always – браузер будет всегда вставлять разрыв страницы, соответственно, до и после определяемых селектором блочных элементов;
- avoid – браузер не будет вставлять разрыв страницы, соответственно, до и после определяемых селектором блочных элементов;
- left – браузер будет всегда вставлять разрыв страницы, соответственно, до и после определяемых селектором блочных элементов таким образом, чтобы при распечатке или предварительном просмотре следующая левая (нечетная) страница оставалась пустой; значение поддерживается не всеми браузерами, поэтому пока что не следует его использовать;
- right – браузер будет всегда вставлять разрыв страницы, соответственно, до и после определяемых селектором блочных элементов таким образом, чтобы при распечатке или предварительном просмотре следующая правая (четная) страница оставалась пустой; значение поддерживается не всеми браузерами, поэтому пока что не следует его использовать.

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

- auto – браузер будет вставлять разрыв страницы внутри определяемых селектором блочных элементов только в случае необходимости; значение используется браузером по умолчанию;
- avoid – браузеру запрещается вставлять разрыв страницы внутри определяемых селектором блочных элементов.

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

- attr(имя_атрибута) – значение указанного атрибута будет добавлено в текст веб-страницы;
- "строка" – указанная в кавычках строка будет добавлена в текст веб-страницы;
- url("path") – указанный объект (видеофайл, аудиофайл и т.д.) будет добавлен на веб-страницу;
- open-quote – браузер установит открыващие кавычки;
- close-quote – браузер установит закрыващие кавычки;
- no-open-quote – браузер удалит открывающие кавычки, установленные при помощи open-quote;
- no-close-quote – браузер удалит закрывающие кавычки, установленные при помощи close-quote;
- normal – браузер отменит все вставки, которые были сделаны в элементе, т.е. вернет его в нормальное (первоначальное) состояние;
- none – браузер не добавит никакого контента;
- counter(id_счетчика) – браузер выведет нумерацию счетчика с указанным id (т.е. имя счетчика, установленное при помощи свойства counter-reset); отметим, что если счетчик с таким id не был установлен, то браузер будет всегда выводить только нуль.

При использовании свойства 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:

- id_счетчика число – задается имя нового счетчика и через пробел указывается необязательное начальное значение счетчика (целые числа); если счетчик инициируется без начального значения, то браузер применит значение по умолчанию, равное 0;
- none – используется по умолчанию, счетчики для текущего селектора создаваться не будут.

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

- id_счетчика число – задается имя счетчика, значение которого будет увеличиваться, а также через пробел указывается необязательное значение приращения счетчика (целые числа); если значение приращения счетчика не будет указано, браузер применит значение по умолчанию, равное 1;
- none – используется по умолчанию, значения счетчиков для текущего селектора не будут изменяться, т.е. увеличиваться или уменьшаться в зависимости от значения приращения.

Как известно, в зависимости от языка кавычки, используемые в тексте, могут иметь различный вид. Поэтому в 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.