Эт-правила для таблиц стилей

Теория

В английском языке знак «@» произносят как «Эт». Эт-правила CSS начинаются со знака «@» и потому так называются

Эт-правила содержат внутри себя набор CSS-правил и применяют их к чему-то конкретному.

Импортирование

Эт-правило import присоединяет другую таблицу стилей. Допустим, вы хотите добавить стили из другой таблицы стилей к уже существующей. В этом случае, вы скорее всего поступите так:

@import url(addonstyles.css);

Эта конструкция часто используется в месте, где элемент link ссылается на CSS файл HTML-страницы, имея при этом внутреннюю таблицу стилей, которая выглядит приблизительно так:

<style type="text/css" media="all">@import url(monkey.css);</style>

Преимущество этого подхода состоит в том, что старые браузеры, такие как Netscape, не догадываются об эт-правилах и соответственно не будут ссылаться на таблицу стилей. В результате если у вас есть документ с хорошей разметкой текста, он сохранит работающий простой HTML, хотя и не стилизованный.

Медиа-типы

@ правило media применит содержимое к определенному типу медиа, например, к печати:

@media print {
	body {
		font-size: 10pt;
		font-family: times new roman, times, serif;
	}
	#navigation {
		display: none;
	}
}

Возможные типы медиа:

  • all – правила CSS применяются ко всем возможным типам медиа
  • aural – для речевых синтезаторов.
  • handheld – для портативных устройств.
  • print – для принтеров.
  • projection – для проекторов.
  • screen – для дисплеев компьютеров.

Вы также можете использовать следующие типы медиа: braille, embossed, tty и tv.

Примечание: несмотря на все вышесказанное браузер IE поддерживает всего несколько медиа-типов – all, screen и print.

Кодировка

Правило charset просто устанавливает кодировку внешней таблицы стилей. Правило указывается в верхней части таблицы CSS и выглядит примерно так:

@charset "ISO-8859-1";

Шрифтовой комплект (font-face)

Эт-правило font-face используется для детального описания шрифта и может использоваться для внедрения внешнего шрифта в ваш CSS. Правило требует наличия описателя font-family, к которому шрифт может отсылать и значением которого может быть имя текущего шрифта или полностью новое имя. Чтобы внедрить шрифт, используют описатель drc.

Другие описатели, добавленные в font-face, становятся условиями для шрифта, который используется. Например, если вы добавили стиль font-weight: bold в эт-правило, описатель src свойства font-family будет применяться к селектору со свойством font-family, если свойством font-weight будет bold.

Вы можете использовать похожее эт-правило font-face:

@font-face {
	font-family: somerandomfontname;
	src: url(somefont.eot);
	font-weight: bold;
}
p {
	font-family: somerandomfontname;
	font-weight: bold;
}

Это правило применит шрифт somefont.eot к параграфам (за исключением случаев, когда для селектора p не установлено font-weight: bold).

Поддержка внедряемых шрифтов очень обрывочна. Браузеры на основе кода Mozilla не поддерживают их и не имеют в ближайшее время таких планов.

Только Internet Explorer, похоже, обладает определенной степенью поддержки. Чтобы внедрять шрифты с IE, вам потребуется использовать приложение Microsoft WEFT, которое конвертирует символы формата TrueType в формат OpenType (и затем ими можно воспользоваться только по определенной вами ссылке).

Из-за ограничений (и сложности) совместимости, рекомендуется не использовать шрифты, которые не имеют адекватной альтернативы среди системных шрифтов.

Страницы

page регулирует постраничные медиа и является продвинутым способом применять стили к печатным медиа. Это правило определяет блок страницы, который расширяется на блочной модели (box model, подробнее см Margins и Padding). Благодаря этому правилу вы определяете размер и представление единой страницы.

Существует несколько соглашений, которые применяются к page: не должно быть полей или рамок; стиль создается не для показа на экране компьютера, поэтому не допускается использование в качестве единиц измерений пикселей (точек) и em.

Существует несколько определенных свойств, которые могут использоваться. Например, size может принимать значение portrait, landscape, auto или length. Свойство marks используется для определения метки кадрирования:

@page {
	size: 15cm 20cm;
	margin: 3cm;
	marks: cross;
}

Псевдоклассы для постраничных медиа

Существует три псевдокласса, которые используются специально в связке с At правилом page. Выглядит их использование следующим образом:

@page :pseudo-class { stuff }.

:first — этот псевдокласс применяется к первой странице постраничных медиа.

:left и :right применяются для левых и правых страниц соответственно. Может использоваться для указания больших полей слева при печати левой страницы и справа – при печати правой страницы.

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

Фото



Видео



Автор Cascading Style Sheets