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

Эт-правила CSS

Переклад українською: Ет-правила CSS

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

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

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

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

@import url(addonstyles.css);

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

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

Преимущество: старые браузеры (например Netscape) не понимают эт-правила и не загружают таблицу стилей. Документ при этом остаётся рабочим, хотя и без стилей.

Медиа-типы

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

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

Возможные типы: all, aural, handheld, print, projection, screen, а также braille, embossed, tty, tv.

Примечание: IE поддерживает только all, screen, print.

Кодировка

@charset "ISO-8859-1";

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

Эт-правило @font-face внедряет внешний шрифт. Пример:

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

Поддержка ограничена: IE поддерживает частично, Mozilla-браузеры – нет.

Страницы

Эт-правило @page регулирует постраничные медиа:

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

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

Используются :first, :left, :right в связке с @page.

← CSS границы | Классы и идентификаторы →