CSS для Початківців

Керівництво для початківців по CSS

Ет-правила CSS

Русский перевод: Эт-правила CSS

Прим. перекладача: англійською мовою знак “@” вимовляють як “Ет”. Ет-правила CSS починаються зі знака “@” і тому так називаються.

Ет-правила містять всередині себе набір CSS-правил і застосовують їх до чогось конкретного.

Імпортування

Ет-правило @import приєднує іншу таблицю стилів:

@import url(addonstyles.css);

Можна використовувати всередині тега <style>:

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

Перевага: старі браузери не підтримують ет-правила і залишають простий HTML робочим.

Медіа-типи

@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-family: somerandomfontname;
    src: url(somefont.eot);
    font-weight: bold;
}
p {
    font-family: somerandomfontname;
    font-weight: bold;
}

Примітка: підтримка впроваджуваних шрифтів обмежена. IE має певну підтримку, Mozilla-браузери – ні.

Сторінки

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

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

  • :first – перша сторінка
  • :left – ліві сторінки
  • :right – праві сторінки

Інші особливості включають перехід на нову сторінку та найменування сторінок.

← Класи та ідентифікатори