Содержание
На сайте встречаются совершенно разные разделы. Хоть они и могут сильно отличаться друг от друга по построению элементов (навигация, контентная часть), тем не менее, они обладают общими схожими характеристиками. На любой странице моего сайта я должен подтверждать визуально посетителю, что он находится по-прежнему на моем сайте. Т.е. страницы я оформляю примерно в одном ключе. Для этого у меня есть файл, в котором написаны все общие правила 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} }
