Урок 20. Стилевое оформление Web-страниц

Одним из важных условий создания действительно хорошего сайта является оформление всех Web-страниц, входящих в его состав, в едином стиле. На первый взгляд, подобная задача является тривиальной. Действительно, что может быть проще — установить одинаковые значения для всех визуальных свойств объектов. Однако при большом объеме Web-страниц, входящих в проект, установка всех значений может занять достаточно большое время. Хотелось бы автоматизировать подобную деятельность. И здесь на помощь приходит технология каскадных таблиц стилей — CSS (Cascading Style Sheets).

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

Первая версия стандарта CSS содержала правила отображения текста Web-страниц, размещения текстового содержимого на странице и некоторые детали отображения страниц и ячеек таблиц. Вторая версия добавила несколько новых возможностей, таких как визуальные эффекты или автоматическая нумерация элементов.

Стилевая таблица представляет собой обычный текстовый файл специализированного формата. В спецификациях данный формат имеет обозначение text/ess. В CSS-файле записываются правила отображения для некоторых тегов. Пример записи одного такого правила может выглядеть приблизительно следующим образом: a {color : navy; font-family : Arial}

Это правило указывает на то, что текстовое содержимое всех тегов <а>, которым в HTML обозначаются гиперссылки, будет отображаться при помощи любого доступного шрифта из семейства Arial, темно-синего цвета (navy).

Все правила CSS состоят из двух частей. В первой части записывается наименование тега, к содержимому которого и будет примерено данное правило оформления. Это объявление в спецификации CSS называют selector. Иногда это выражение в виде кальки переносят в русскоязычную техническую литературу. Поэтому при описании технологии CSS можно увидеть, что наименования тегов в стилевых таблицах называют селекторами.

После наименования тега в фигурных скобках записывается правило оформления текстового содержимого. Посмотрим еще раз на наш пример.

a (color : navy; font-family : Arial}

Как видно, в фигурных скобках может записываться сразу несколько правил, разделенных символом точки с запятой. Само правило состоит из двух частей. Сначала записывается наименование параметра отображения, например, вид применяемого шрифта, а затем, после двоеточия, мы пишем значение этого параметра. В примере все это достаточно хорошо видно.

Итак, как мы видели, в фигурных скобках мы можем записать сразу несколько правил отображения содержимого. Но иногда случается и так, что сразу для нескольких тегов задаются одинаковые правила отображения. Мы можем не указывать одинаковые правила для каждого тега отдельно, а объединить теги в одну группу и задать правила отображения для всех тегов сразу. При этом объединяемые наименования тегов разделяются запятой. Это можно увидеть на примере следующей конструкции:

a, hi { color : navy }

Данное правило указывает, что текстовое содержимое гиперссылок и заголовков первого уровня будет отображаться темно-синим цветом.

В правила синтаксиса CSS входят еще правила оформления комментариев. Комментарии в CSS создаются в стиле языка С. Начинается комментарий с символа наклонной черты и звездочки (/*), а завершается обратным соче-танием (*/). Все это легко увидеть в следующем примере:

/*Это комментарий*/

Мы знаем, что полное наименование CSS — каскадные таблицы стилей. Почему они называются таблицами стилей, мы уже поняли. Возникает вполне обоснованный вопрос, при чем тут каскадность, и что это вообще обозначает?

В компьютерной индустрии очень велик темп развития. Следствием этого является множество самых различных тенденций и течений. Часть из них вскоре отмирает, а часть переходит из разряда тенденций в ранг идеологии. Одной из таких тенденций является повторное использование кода и наследование ранее созданных решений. К CSS это имеет самое прямое отношение.

Мы не обязаны для каждого документа использовать только одну стилевую таблицу. Мы можем подключать их сразу несколько. Например, при добавлении новых документов к сайту придется добавлять новые правила отображения, создавать новые стили. Иногда это делается коррекцией уже существующей стилевой таблицы, но никто не запрещает нам создать дополнительный файл и подключить его к документу. Как мы только что говорили, мы можем подключать сразу несколько таблиц.

Иногда может возникнуть ситуация, когда в нескольких CSS-файлах содержатся правила отображения для одного и того же тега. И правила эти могут не совпадать. В этом случае браузером используется самое последнее объявление правила отображения.

Рассмотрим эту концепцию на примере. Предположим, у нас есть два файла стилевых таблиц. В файле style Less мы размещаем объявления правил отображения для двух элементов HTML-документа с наименованиями list и item. Получаем следующий код:

list {font-family: Times New Roman} item (color: blue; font-family: Arial}

А в дополнительном файле style2.css мы объявляем правила отображения для элементов item и part следующим образом:

item {color: green; font-family: Arial} part {color: black}

Теперь, если мы подключим к HTML-документу эти два стилевых файла, окажется, что для элемента item задано два различных правила отображения. В первом файле style Less указано, что текст элемента item будет отображаться синим цветом, а во втором файле правило указывает, что применяться для отображения содержимого этого же элемента будет уже зеленый цвет. То, какой цвет будет использоваться на самом деле, зависит от того, в каком порядке к XML-документу будут подключаться файлы стилевых таблиц.

Используется всегда последнее правило. А именно, если сначала мы подключим файл style Less, а потом файл style2.css, то текстовое содержимое элемента item будет отображаться зеленым цветом.

Но мы можем устанавливать специальный модификатор для правил отображения, который будет заставлять браузер игнорировать порядок подключения стилевых таблиц. Так, если мы приписываем к какому-либо правилу оформления модификатор important, то для отображения текстового содержимого элемента будет использоваться именно это правило, вне зависимости от того, были ли еще подключены правила для отображения этого же элемента. Иначе говоря, использование ключевого слова important позволяет установить для какого-либо правила привилегированный уровень и убрать его из иерархии каскадных таблиц стилей. Рассмотрим пример. Возьмем знакомый нам файл style Less и немного модифицируем его код. Получаем следующую совокупность правил отображения:

list {font-family: Times New Roman}

item {color: blue ! important; font-family: Arial)

Теперь, при том порядке подключения стилевых файлов style Less и style2.css, который мы рассматривали ранее, текстовое наполнение элемента item будет отображаться синим цветом.

Из примера виден порядок использования модификатора important. Если нам необходимо какое-либо правило сделать привилегированным, мы после него ставим символ восклицательного знака и записываем ключевое слово important, отделенное пробелом.

Впрочем, вполне возможна ситуация, когда в нескольких CSS-файлах существуют правила отображения для одного и того же элемента, и сразу несколько из них имеют модификатор important. В этом случае формируется дополнительная иерархия из этих привилегированных правил и используется для отображения самое последнее подключенное правило.

Естественно, для того чтобы успешно применять стилевые таблицы, необходимо знать наименования параметров изображения. Мы не будем сейчас детально описывать все эти параметры, полное описание CSS займет слишком много места, поэтому тем, кто еще не знаком со стилевыми таблицами, придется посоветовать найти литературу, в которой стилевые таблицы рассмотрены детально. Однако в приложении приведен список наиболее часто используемых параметров отображения.

На самом деле, разработчик приложений ASP.NET может устанавливать любые параметры отображения содержимого Web-страниц без стилевых фай-, лов, напрямую используя свойства тех или иных элементов. Но тогда придется писать слишком уж большой объем кода. Подобное решение никак нельзя назвать изящным. Попробуем воспользоваться стилевыми таблицами.

Существует две возможности использования технологии CSS. Мы можем либо установить значение атрибута style для тех тегов HTML-страниц, ко-гторые будут подвергаться стилевой обработке, либо подключить внешний файл, содержащий определение стилевой таблицы. Увы, ASP.NET не позволяет указывать подключаемую к Web-странице стилевую таблицу как свой-' ство страницы. Поэтому мы создадим стилевую таблицу, в которой правила «отображения будут ассоциированы не с наименованиями тегов, а с наименованием классов-селекторов. Для каждого визуального компонента Web; Forms предусмотрено свойство CssClass, в котором и указывается наименование класса-селектора.

Итак, для начала мы создадим CSS-файл. Для включения в состав проекта внешнего стилевого файла следует выполнить команду меню Project | Add New Item (Проект Добавить новый элемент). После выполнения этой команды на экране будет отображено диалоговое окно Add New Item (Добавить новый элемент). В группе Templates (Шаблоны) следует выбрать элемент Style Sheet (Стиль). После этого в состав проекта будет включен дополнительный файл.

По умолчанию в создаваемую стилевую таблицу включается заготовок для определения стиля, предназначенного для тега <body>, т. е. в этом правиле мы можем задавать правила отображения, которые будут влиять на весь документ в целом.

Для того чтобы добавить новое правило оформления в стилевую таблицу, следует нажать на кнопку Add Style Rule (Добавить правило оформления), находящуюся на инструментальной панели Style Sheet (Стиль). При этом будет активировано диалоговое окно Add Style Rule (Добавить правило оформления), чей внешний вид показан на рис. 3.21.

Так как мы планируем создавать правила оформления содержимого Web-страницы, опираясь на классы-селекторы, стоит выбрать кнопку-переключатель Class Name (Имя класса). В связанное с ней поле текстового ввода следует ввести наименование класса-селектора, для которого мы будем создавать правило отображения. После того, как наименование класса будет введено, нажатие на кнопку ОК перенесет в код стилевой таблицы заготовку для создания правил оформления искомого класса.

После того, как мы создадим все заготовки для наших классов, можно будет создать для них правила оформления. Для этого следует установить курсор на том селекторе, на который мы и будем накладывать условия оформления, и нажать кнопку Build Style (Создать стиль). Она активирует диалоговое окно интерактивного построителя стилей Style Builder (Построитель стилей)

При помощи диалогового окна построителя стилей можно задать правила отображения для каждого класса-селектора в визуальном режиме. Однако никто не запрещает разработчику просто написать код правил CSS вручную. Все зависит от личных предпочтений. Но следует отметить, что при использовании диалогового окна построителя стилей всегда можно видеть, как будет выглядеть текст с учетом установленных правил отображений, так как в диалоговом окне присутствует панель, на которой отображается пример текста в том виде, как он будет выглядеть в итоговом варианте на Web-странице.

Л истинг З.ЗЗ

.bl

{

background-color: deepskyblue;

}

.bl

"color: black;

font-style: italic;

font-family: 'Arial Black;

text-decoration: underline;

}

После того, как CSS-файл был создан, следует подключить его к нашей Web-странице. Для этого следует перейти на разрабатываемую Web-страницу, к которой мы собираемся подключить стилевую таблицу, и выполнить команду меню Format | Document Styles (Формат | Стили документа). Данная команда активизирует диалоговое окно Document Styles (Стили документа). В этом окне следует нажать кнопку Add Style Link (Добавить ссылку на стилевую таблицу), которая позволит привязать к Web-странице существующий стилевой файл. Для этого будет использовано диалоговое окно Select Style Sheet (Выбор стилевой таблицы), чей внешний вид показан на рис. 3.23.

Все, теперь стилевой файл привязан к данной Web-странице. При этом в ее HTML-коде, в разделе заголовка документа появилась строка следующего вида:

<LINK href="StyleSheetl.css" type="text/css" rel="stylesheet">

Теперь достаточно лишь подключить созданную CSS-таблицу ко всем Web-страницам проекта, установить значения свойств cssciass для необходимых компонентов, и задача стилевого оформления сайта решена.