Стилистическое оформление всех страниц Web-сайта является одним из важных условий создания хорошего сайта. Казалось бы, что сделать это достаточно просто, стоит только установить одинаковые значения для всех визуальных свойств объектов. Но, если Web-страницы, входящие в проект, имеют достаточно большой объем, этот процесс может отнять много времени. Для автоматизации данного процесса можно использовать технологию каскадных таблиц стилей — CSS (Cascading Style Sheets).
В рамках данной технологии создаются отдельные внешние файлы, содержащие правила отображения тегов в браузере. Далее эти файлы подключаются к Web-страницам. Так можно легко достичь оформления в едином стиле всех Web-страниц, входящих в состав сайта.
В первой версии стандарта CSS содержались правила отображения текста Web-страниц, принципы размещения содержимого текстов на страницах и некоторые детали отображения страниц и ячеек таблиц. В следующей версии добавилось несколько новых возможностей (визуальные эффекты, автоматическая нумерация элементов и т.п.).
Таблица стилей - это обычный текстовый файл, имеющий специализированный формат.
В спецификациях этот формат обозначается как text/ess. CSS-файл хранит правила отображения некоторых тегов. Запись такого правила выглядит следующим образом:
a {color : navy; font-family : Arial}
Это правило говорит о том, что текстовое содержимое всех тегов $$, которые обозначают гиперссылки, отобразится с помощью любого доступного шрифта, принадлежащего семейству Arial, темно-синего цвета (navy).
Правила CSS
Любое правило CSS состоит из 2 частей. Первая часть содержит наименование тега, к которому будет применено указанное правило оформления. Это объявление в спецификации CSS называется selector. Иногда наименования тегов в стилевых таблицах называют селекторами.
После наименования тега в фигурных скобках будет записано правило оформления его содержимого. В приведенном выше примере записи в фигурных скобках записано сразу несколько правил, разделенных точкой с запятой. Правило состоит из 2 частей. Вначале записано наименование параметра отображения (например, вид применяемого шрифта), а после двоеточия - значение этого параметра.
В фигурных скобках могут быть записаны сразу несколько правил отображения содержимого. Но бывает и такое, что одновременно для нескольких тегов задаются одинаковые правила отображения. Можно не указывать одинаковые правила для каждого тега в отдельности, а объединить теги в одну группу и задать правила отображения для всех тегов одновременно. В этом случае наименования тегов будут разделяться запятой. Например: a, hi { color : navy }
Правило в приведенном примере указывает на то, что текстовое содержимое гиперссылок и заголовков 1 уровня отобразится темно-синим цветом.
Правила синтаксиса CSS содержат также правила оформления комментария. Комментарий в CSS создается в стиле языка С: начинается с символов наклонной черты и звездочки ($/*$), а завершается обратным сочетанием символов ($*/$). Например: $/*$ Это комментарий $*/$
Теперь разберемся с понятием каскадности таблиц данного типа.
Каскадный принцип построения таблиц
Компьютерная индустрия развивается очень быстро. И как следствие появляется много самых разнообразных тенденций и течений. Часть из которых не находит применения, а часть возводится в ранг идеологии. К категории последних можно отнести повторное применение кода и наследование ранее созданных решений. Все это относится и к CSS.
К каждому документу можно подключать сразу несколько стилевых таблиц. К примеру, в случае добавления новых документов на сайт приходится добавлять и новые правила отображения, создавать новые стили. Иногда это достигается путем коррекции существующих стилевых таблиц, но можно создавать дополнительные файлы и подключать их к документам.
Случаются ситуации, когда в нескольких CSS-файлах содержатся правила отображения одного и того же тега, причем правила эти могут и не совпадать. В подобном случае браузер использует самое последнее объявление правила отображения.
Познакомимся с этой концепцией на примере. Допустим, имеется 2 файла стилевых таблиц. В файле style_Les будут содержаться объявления правил отображения 2 элементов документа: 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_Les содержит указание на то, что текст элемента item должен отобразиться синим цветом, а второй файл содержит правило, указывающее на применение для отображения содержимого этого же элемента зеленого цвета. Какой цвет будет использован в действительности, будет зависеть от того, в каком порядке к XML-документу подключатся файлы стилевых таблиц.
Применяется всегда последнее правило. Если вначале подключить файл styleLes, а затем файл style2.css, то текстовое содержимое элемента item отобразится зеленым цветом.
Однако можно установить специальный модификатор для правил отображения, заставляющий браузер игнорировать порядок, в котором подключены стилевые таблицы. Так, если приписать к какому-либо правилу оформления модификатор important, то при отображении текстового содержимого элемента используется именно данное правило не зависимо от наличия других подключенных правил отображения данного элемента. Другими словами, ключевое слово important устанавливает для определенного правила привилегию и убирает его из иерархии каскадных таблиц.
Например, при модификации кода файла styleLes получим совокупность правил отображения:
list {font-family: Times New Roman}
item {color: blue ! important ; font-family : Arial )
Теперь, при установленном ранее порядке подключения стилевых файлов styleLes и style2.css текстовое содержание элемента item отобразится исключительно синим цветом.
Таким образом, при необходимости получения определенным правилом привилегии необходимо после него ставить символ «!» и записывать ключевое слово important после пробела.
Если несколько CSS-файлов для одного и того же элемента имеют модификатор important, то будет сформирована дополнительная иерархия из данных привилегированных правил, а для отображения будет использовано самое последнее подключенное правило.
Естественно для успешного применения стилевых таблиц нужно знать параметры изображений (их названия).
Возможности использования технологии CSS
Имеются 2 возможности использования данной технологии. При первой устанавливается значение атрибута style для тех тегов HTML-страниц, которые будут подвержены стилевой обработке. Вторая возможность предусматривает подключение внешнего файла, содержащего определение стилевой таблицы. Однако, ASP.NET не разрешает указывать подключаемую к странице стилевую таблицу в качестве свойства страницы. Будем создавать стилевую таблицу, содержащую правила отображения, ассоциированные не с наименованиями тегов, а с наименованиями классов-селекторов. Для всех визуальных компонентов Web; Forms предусмотрено свойство CssClass, в котором и будет указываться название класса-селектора.
Вначале создается CSS-файл. Чтобы включить в состав проекта внешний стилевой файл нужно выполнить команду Project - Add New Item (Проект - Добавить новый элемент). После завершения этой команды на экране отобразится диалоговое окно Add New Item (Добавить новый элемент). В группе Templates (Шаблоны) выберем элемент Style Sheet (Стиль). В результате в составе проекта появится дополнительный файл.
По умолчанию в создаваемой стилевой таблице появляется заготовка для определения стиля, предназначенная для тега , т. е. в данном правиле можно задать правила отображения, влияющие на весь документ.
Для добавления нового правила оформления в стилевую таблицу необходимо воспользоваться кнопкой Add Style Rule (Добавить правило оформления), находящейся на панели инструментов Style Sheet (Стиль). В результате чего активизируется диалоговое окно Add Style Rule (Добавить правило оформления) (рис.1).
Поскольку планируется создать правила оформления содержимого страницы с учетом классов-селекторов, необходимо отметить кнопку-переключатель Class Name (Имя класса). В открывшемся рядом с ней поле вводится название класса-селектора, для которого создается правило отображения. При нажатии кнопки ОК произойдет перенос в код стилевой таблицы заготовки для создания правила оформления искомого класса.
Заготовки создаются для всех классов, после чего для них создаются правила оформления. Для этого курсор устанавливается на том селекторе, на который накладываются условия оформления, и нажимается кнопка Build Style (Создать стиль), которая активизирует диалоговое окно интерактивного построителя стилей Style Builder (Построитель стилей).
С помощью данного окна задаются правила отображения для всех классов-селекторов в визуальном режиме. При этом разработчик может сам по желанию написать код правил CSS вручную. После создания CSS-файла подключаем его к Web-странице. Для этого переходим на разрабатываемую Web-страницу, к которой будет подключаться стилевая таблица, и выполняем команду Format - Document Styles (Формат - Стили документа), которая делает активным диалоговое окно Document Styles (Стили документа). В открывшемся окне нажимаем кнопку Add Style Link (Добавить ссылку на стилевую таблицу), привязывающую к Web-странице существующий стилевой файл. Для этого используется диалоговое окно Select Style Sheet (Выбор стилевой таблицы). Таким образом, стилевой файл привязали к данной Web-странице, в HTML-коде которой в разделе заголовка документа появляется строка:
$$
Теперь остается только подключить созданную CSS-таблицу ко всем Web-страницам проекта, установив значения свойств cssciass для нужных компонентов, и стилевое оформление сайта выполнено.
