TopStyle Lite

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

А теперь представьте, сколько различных описаний стиля придется внести на каждую страницу? Огромное количество. Причем, нужно ведь и не запутаться, сделать так, чтобы заголовки верхнего уровня были одинаковы на всем сайте, и при этом они должны отличаться от заголовков второго и последующих уровней. И так – для каждого элемента. Непосильная задача, на первый взгляд. Однако для нее давным-давно придумано эффективное решение, так называемые каскадные таблицы стилей. Суть технологии заключается в следующем. Создается особый файл, например, style.css, в котором последовательно описываются стили всех элементов, встречающихся на страницах сайта. Затем в код страниц вставляется примерно такая запись:

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

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

Как же написать всеобъемлющий файл стилевой разметки для всех страниц сайта? Предлагаю использовать для этого специализированную бесплатную утилиту TopStyle Lite. Программа довольно проста и не вызовет затруднений у пользователя, который знаком с основами описания стилей.

Главное окно программы разбито на три части:

• Поле ввода стилевых описаний, в котором, собственно, и фиксируются все требования к оформлению отдельных элементов страницы. Другими словами, это поле – обычный текстовый редактор, в котором создается наш файл стилевой разметки.
• Поле предварительного просмотра (Preview). Здесь мы увидим результат своей работы. Каждый из элементов, описанных в CSS-файле, отображается в поле предварительного просмотра в том виде, в котором он будет показан на готовых страницах сайта.
• Style Inspector (инспектор стилей). Наиболее важная часть главного окна, поэтому я опишу ее поподробнее.

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

Например, мы решили создать стиль оформления HTML-форм. Другими словами, выбираем для редактирования селектор form. Как только мы сделали это, в Style Inspector стали отображаться инструкции стилевой разметки, которые можно применить к HTML-формам. Выбираем одну за другой необходимые нам инструкции, задаем им необходимые значения, прямо в поле Style Inspector, и в поле Preview видим результат нашей работы.

Здесь необходимо сразу же учесть следующий нюанс. К сожалению, разные браузеры по-разному обрабатывают некоторые элементы стилевой разметки. Другими словами, есть несколько различных стандартов CSS. В поле Style Inspector вы можете выбрать один из множества наборов инструкций CSS. На каком из них остановиться? Консорциум W3C, вплотную занимающийся стандартизацией HTML, CSS и прочих технологий, рекомендует использовать два набора правил описания стилевых разметок: CSS1 или CSS2. Однако, если вдруг вы по какой-то причине создаете специальную страничку для просмотра, к примеру, в браузере Opera 3.5, то можете выбрать набор CSS-инструкций именно для этой версии данного браузера.

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