import-css

Импорт в 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}
}



Добавить комментарий

Ваш e-mail не будет опубликован.