CSS для Чайников

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

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

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

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

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

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

Медиа-типы

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

 

 

 

 

 

 

 

 

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

• all – правила CSS применяются ко всем возможным типам медиа

• aural – для речевых синтезаторов.

• handheld – для портативных устройств.

• print – для принтеров.

• projection – для проекторов.

• screen – для дисплеев компьютеров.

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

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

Кодировка

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

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

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

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

 

 

 

 

 

 

 

 

Это правило применит шрифт 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. Выглядит их использование следующим образом:

1

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

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

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