Внешний файл со стилями

Можно поместить стили в отдельный файл (таблицу стилей), связав его с неограниченным числом страниц сайта, чтобы стили имели глобальное (на уровне сайта) действие. Заданные стили будут воздействовать на все страницы сайта, а не только на отдельные теги или страницы. Это единственный из методов, который подразумевает полное разделение структуры и презентации. Сведя все правила CSS в один файл, вы существенно облегчите редактирование и изменение дизайна сайта.

Например, если потребуется внести изменения в дизайн всего сайта (допустим, клиент попросил сделать шрифт текста синим, а не черным), можно просто изменить одно правило CSS в таблице стилей. Это гораздо легче, чем менять каждый атрибут FONT для каждого абзаца (так происходило до появления CSS).

Можно добавить таблицу стилей к любому количеству XHTML-страниц с помощью всего одной строки кода, добавленной в раздел head каждой страницы:

<link href="my_style_sheet.css" media="screen" rel="stylesheet" type="text/css" />

После этого в ходе загрузки стили будут добавляться к каждой странице.

Обратите внимание, что в теге link атрибут media указан как "screen". Это означает, что таблица стилей создана для отображения страницы на экране, то есть для просмотра в браузере. Определенные пользовательские агенты ищут атрибуты при выбope загружаемых стилей, наиболее подходящие им. Среди возможных вариантов есть атрибуты all, projection, handheld, print, aural.

Теперь благодаря тегу link при открытии страницы браузер будет загружать и таблицу стилей. Добавив второй тег link со значением "print" для атрибута media, мы можем использовать вторую таблицу стилей, которую браузер будет использовать для печати. В частности, таблица стилей для печати может скрывать навигацию и прочие элементы, не имеющие смысла на бумаге.

Если создать вторую таблицу стилей для печати, тег link будет выглядеть так:

<link href="my_style_sheet_print.css" media="print" rel="stylesheet" type="text/css" />




Rambler's Top100