Импорт в CSS и Media директива

На сайте встречаются совершенно разные разделы. Хоть они и могут сильно отличаться друг от друга по построению элементов (навигация, контентная часть), тем не менее, они обладают общими схожими характеристиками. На любой странице моего сайта я должен подтверждать визуально посетителю, что он находится по-прежнему на моем сайте. Т.е. страницы я оформляю примерно в одном ключе. Для этого у меня есть файл, в котором написаны все общие правила CSS, которые применимы для любой страницы. Но в то же время для любого раздела должен быть свой файл css, в котором будут индивидуальные правила для раздела.

Импорт CSS

Обычно при написании сайта мы создаем шаблоны на основе html и подключаем их к движку. После этого менять html код шаблона не надо! Я буду менять только css. Поэтому, если мне надо подключить еще один файл, я не буду лезть в шаблон html, а использую импорт в css.

Использую следующий синтаксис:

@import url («имя файла») типы носителей;

@import «имя файла» типы носителей;

@import url(header.css);

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

• all — все.
• aural — голосовые браузеры.
• braille — шрифт Брайля.
• handheld — переносные устройства.
• print — принтеры.
• projection — проекторы.
• screen — мониторы.
• tv — телевизионные устройства.

По умолчанию я создаю стили для всех типов устройств.

Media директива

Данная директива в css используется для перечисления устройств, для которых я пишу правила. Например:

@media screen {
BODY {color: navy}
H1 {border: 2px dashed maroon;color: sienna;padding: 7px }
}
@media print {
BODY, H1 {color: black}
}

---