Каскадные таблицы стилей

Краткие теоретические сведения

Кроме собственно языка HTML существует еще большое количество дополнений, которые призваны облегчить жизнь веб-мастеру и немного навести порядок на сайте. Есть среди них полезные, есть и вредные, но есть два дополнения, которые нужно использовать обязательно, даже если сейчас вы не видите, как они могут вам пригодится. Эти два дополнения - SSI (Server Side Inclusions) и CSS (Cascade Stile Sheets), оба они довольно простые, хоть и обладают огромными возможностями.

С помощью SSI вы можете включать в свою страницу любые необходимые вам фрагменты (тексты, картинки, счетчики, результаты работы программы и пр.) непосредственно на сервере. Это дает вам возможность загружать в заданное место страницы повторяющиеся элементы по всему сайту из одного источника. Хороший пример - оглавление - оно обычно повторяется на всех страницах узла и всегда одинаковое. Поставив директиву SSI, вы сможете хранить оглавление в отдельном текстовом (или HTML) файле, который сервер будет вставлять на каждой странице в указанное вами место. Такой файл гораздо легче исправить, если возникает такая необходимость. Представьте, что у вас 200 файлов, в каждом надо исправить оглавление и положить на сервер, а тут - поменял текст в одном файле и положил на сервер за несколько секунд. Кроме того, при большом объеме сайта можно значительно выиграть в дисковом пространстве, которое вам потребуется, и вам, например, потребуется меньше времени на "заливку" файлов на сервер.

Второе важное дополнение - это каскадные таблицы стилей - CSS. Они позволяют определять и переопределять стили оформления текста, а также других элементов на странице. На самом деле, возможности CSS очень велики: используя эту систему вы можете задать оформление всего сайта, описав его параметры в одном единственном файле, а потом несколькими движениями мыши переделать все оформление, просто поставив другие параметры в файле-описании. Более того, существуют системы на основе CSS, позволяющие то же самое проделывать не только издателю, но и посетителям. Это немножко похоже на фокус. Если вы когда-нибудь игрались с Desktop Themes (штука такая в Control panel, меняющая оформление Microsoft Windows) или загружали себе на компьютер шкурки (skins), то здесь нечто похожее: поменял один файл-описание на другой, и на тебе: совершенно другой сайт.

В отличие от SSI, CSS - это инструкции для браузера, а не для сервера, причем, далеко не все браузеры в состоянии грамотно отобразить их, а, следовательно, не стоит удивляться тому, что не все пользователи смогут увидеть все красоты вашего сайта. Самая распространенная схема использования CSS - это переопределение стандартного ряда стилей H1-H6 и одновременное создание нескольких дополнительных стилей с собственными названиями. В результате, вы используете при верстке страниц стандартные стили, которые при открывании страницы пользователем выглядят в соответствии с заданными вами директивами. Если же браузер пользователя не в состоянии грамотно интерпретировать CSS инструкции, то человек увидит просто стандартные стили. Таким образом, сайт пострадает не катастрофично и все равно будет вполне читаемым, конечно, если вы использовали стили по назначению: H1 - самый крупный заголовок, H2 - немного помельче и т.д.

При желании, если вы определяете большое количество стилей, вы можете снести все записи в отдельный файл (обычно default.css), который браузер будет автоматически забирать при заходе на сайт. Это, кстати, реально увеличивает скорость загрузки, при длительном нахождении на сайте, поскольку файл описания стилей загружается один раз и только в самом начале сессии, а вот подставляется оно во все страницы, следовательно, при указывании стилей в заголовке каждой страницы, вы каждый раз увеличиваете объем файла на лишний 1-2 килобайта.

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

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

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

Виды таблиц стилей

Существует три вида таблиц стилей: внутренние таблицы стилей, глобальные таблицы стилей и связанные таблицы стилей.

• Внутренние таблицы стилей (Inline Style Sheets) мало чем отличаются от HTML тегов.
• Глобальные (Global Style Sheets) определяют стиль элементов во всем документе.
• Связанные (Linked Style Sheets) могут быть использованы для нескольких документов и хранятся во внешнем файле. Подробнее об этом написано ниже.

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

Пример 1:

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

Глобальные стили задают вид элементов всего документа. Для этого используется тег <STYLE>. Он размещается в заголовке документа.

Пример 2:

Связанные таблицы стилей используются для придания нескольким документам одного стиля. Хранятся они в отдельном файле, наример (файл default.css)

Это очень похоже на глобальные стили. Так оно и есть. Все что относилось к глобальным стилям справедливо и здесь. В самих же документах делается ссылка на этот файл при помощи тега <link>. Выглядит это так:

Пример 3:

Значение параметров

Значения параметров длины или размера.

Пример 4:

Значение параметра в процентах.

Пример 5:

Значение параметра цвета (color)

Пример 6:

Значением цвета может быть его название (red, coral и т.д.) или RGB значение.

Способы выразить цвет в RGB (red green blue)

Все примеры отображают один и тот же цвет -       

Значение параметра URL

Синтаксис: "URL" , потом в скобках приводится ссылка. Ссылку также можно, помимо скобок, заключить в одинарные или двойные кавычки (без пропусков)

Пример 7:

Параметры

Параметры шрифта

Параметры текста

Параметры цвета и фона

Параметры классификаций (списков)

Параметры отступа, границ и размеров

www.modern-computer.ru: Пример 8.2