 |
|
|
Архитектура Астрономия Аудит Биология Ботаника Бухгалтерский учёт Войное дело Генетика География Геология Дизайн Искусство История Кино Кулинария Культура Литература Математика Медицина Металлургия Мифология Музыка Психология Религия Спорт Строительство Техника Транспорт Туризм Усадьба Физика Фотография Химия Экология Электричество Электроника Энергетика |
Каскадные таблицы стилей
Одной из основных особенностей таблиц стилей является каскадность. Она означает, что при обработке стилей используется специальный механизм каскадирования. Для одного документа могут быть заданы различные правила. Один набор правил может определяться разработчиком документа, другие правила могут быть заданы пользователем. Кроме того, в каждом браузере имеется набор правил, используемых по умолчанию; они используются, если какое-либо из свойств явно не определено. Средства каскадирования собирают и объединяют различные правила, а также разрешают возникающие при этом конфликты. Свойство каскадности тесно связано со способом подключения стилей к HTML-документу, которое возможно осуществить тремя способами: inline-описание, описание в секции заголовка и использование внешнего файла. Самый простой способ -- это, так называемое, inline-описание или описание, встроенное в тег. При помощи дополнительного атрибута STYLE можно определить нужные стилевые параметры в любом теге. Основной недостаток этого способа в том, что определение стиля действует лишь в пределах одного тега. Представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега <FONT>.
Гораздо удобнее заранее определить все нужные стили оформления и впоследствии просто применять их к соответствующим тегам, т. е. воспользоваться способом описания стилей в секции заголовка. Именно этим способом мы пользовались в примерах, рассматривающих форматирование абзаца и оформление интервью. Действие таблицы стилей, подключенной таким образом, распространяется на весь HTML-документ. И наконец, третий способ, -- вынесение описания стилей во внешний файл (внешнюю таблицу стилей). Для этого нужно все описание стилей поместить в отдельный файл с расширением .css. В раздел HEAD документа включить строку, аналогичную следующей, где атрибут HREF содержит имя файла со стилями: <LINK REL="STYLESHEET" TYPE="text/css" HREF="list.css">Диапазон воздействия таблицы в этом случае простирается на все файлы, в которые включено такое описание. Если потребуется изменить внешний вид группы документов, то будет достаточно откорректировать лишь один стилевой файл. Сравните этот способ с предыдущими: в одном из них придется менять описание стилей в каждом документе, а в другом -- даже в каждом теге. На практике приходится пользоваться всеми тремя способами, и здесь в игру вступает "каскадность" стилей, позволяющая переопределять стили. Приведенный выше список способов подключения таблиц стилей соответствует порядку переопределения: вышерасположенный способ может переопределять нижерасположенный. Например, пусть во внешнем стилевом файле определено, что текст в теге <P> должен выводится шрифтом высотой 10 пунктов. Если при этом в разделе HEAD документа переопределить тег <P>, указав, что текст должен отображаться шрифтом в 12 пунктов, то он будет выведен именно таким кеглем - стиль, расположенный в заголовке документа, переопределит стиль внешнего файла. В целом, браузер расставляет приоритеты таблиц стилей следующим образом: 1. inline-стили (встроенные с помощью атрибута STYLE непосредственно в теги документа) -- наивысший приоритет; будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями; 2. внедренные стили (перечисленные в теге-контейнере <STYLE> в разделе <HEAD> документа) - чуть меньший приоритет; будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями (при возникновении такого конфликта будут применены inline-стили); 3. связанные стили (стили, присоединенные к HTML-файлу посредством тега <LINK>) - наименьший приоритет; будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей. Зная, в какой последовательности браузер анализирует таблицы стилей, можно задать одну общую связанную таблицу для всех страниц сайта и при этом гибко управлять стилями отдельных страниц и отдельных элементов на странице. Именно с этой особенностью и связано слово "каскадные" в названии CSS (cascading style sheets) - несколько таблиц стилей, присоединенных к HTML-файлу, прокатываются через анализатор (браузер) неким "каскадом" в порядке их приоритетности.
Подготавливая Web-материал, авторы всегда встают перед выбором, как организовать оформление материала: пользоваться обычными средствами HTML или подключать таблицы стилей? Профессиональные Web-дизайнеры всегда останавливают свой выбор на таблицах стилей. Какие же преимущества имеет этот подход? Во-первых, таблицы стилей позволяют разделить смысловое содержимое документа и его оформление. Согласно идеологии текстовой разметки все оформление рекомендуется вынести во внешний стилевой файл. Основной документ будет содержать только информацию и ссылки на необходимые стили. Такой подход дает возможность конкретному устройству при показе документа задействовать соответствующую таблицу стилей. Для сотового телефона и монитора компьютера они, разумеется, должны быть разными. В первом случае нужно использовать минимальное оформление, которое позволит представить информацию наиболее оптимально и компактно. Во втором же случае допустимо использовать все возможности шрифтового и цветового оформления. Во-вторых, как мы уже убедились, размещение всей стилевой информации в одном внешнем файле позволяет, изменив содержимое только одного (!) стилевого файла, в считанные секунды сменить дизайн целой группы документов. Причем никаких других переделок не понадобится. Разумеется, это верно лишь в том случае, если все документы группы ссылаются на одну и ту же таблицу стилей. В-третьих, таблицы стилей довольно часто используются для достижения единого стиля оформления какого-либо набора документов. Например, члены научного сообщества, готовя материалы к публикации их на WWW-сервере, могут пользоваться стандартными таблицами стилей, которые для них заранее подготовил Web-мастер.
1. Создайте HTML-документ, в котором а) заголовку первого уровня (тег <H1>) задайте следующий стиль оформления: цвет текста -- красный, выравнивание -- по центру, семейство шрифта (гарнитура) -- Arial, шрифт без засечек (sans-serif), размер шрифта -- 14 пунктов; б) заголовку второго уровня задайте выравнивание по правому краю, наклонное начертание, размер шрифта -- 12 пунктов. 2. Создайте HTML-документ, предназначенный для размещения интервью. Оформите таблицу стилей в виде отдельного файла и свяжите ее с документом. Переопределите при помощи внедренной таблицы стилей класс ask, сделав цвет текста зеленым.
Поиск по сайту: |
