Библиотека Интернет Индустрии I2R.ru

• Предыдущий материал - Основы web-дизайна. Внедряемые объекты

Когда нам нужно задать свойства какого-нибудь фрагмента текста, мы пишем:

Если же мы решим покуролесить от души, т. е. чуть ли не каждому элементу страницы предстоит выглядеть неким уникальным и незабываемым образом, трудно даже представить, какое количество этих <font>...</font> придётся тянуть на свой компьютер бедному посетителю, который, между прочим, пришёл почитать новости, а не покачать теги.

Исконной мечтой веб-дизайнеров со времен Золотой Орды было отделение мух от котлет, т. е. содержания от оформления. С появлением технологии CSS (Cascading Stylesheets, или каскадные таблицы стилей) эта мечта наконец исполнилась.

Что это такое

Как мы с вами уже знаем, HTML -- не что иное, как набор объектов-контейнеров, таких как <p>...</p>, <H1>...</H1>, <table>...</table> или <form>...</form>. Для каждого такого объекта определы правила его отображения на веб-странице, иначе говоря -- стиль. Стандартным тегам HTML соответствует набор встроенных стилей, используемых по умолчанию.

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

О каких свойствах речь, спросите вы. О самых обычных: отбивках от границ внешнего контейнера, типах шрифтов, поведении в ответ на различные события и т. д.

Единственная неприятность состоит в том, что для описания свойств в CSS используется специфический синтаксис, практически не пересекающийся с чем-то уже изученным нами. Так что снова придётся кое-что прочитать и выучить. ;-)

top

Как это делается

Стиль в CSS описывается при помощи ключевого слова STYLE. Существуют три основных способа его использования.

1. Использование в качестве параметра (Inline Styles)

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

2. Создание блока дескрипторов (описаний)

Где-нибудь в блоке HEAD создаём новый контейнер:

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

Если вы укажете в качестве названия стиля имя одного из стандартных объектов HTML, этот объект в результате примет описанные в блоке стилей свойства без каких-либо дополнительных действий с вашей стороны. Например, все параграфы в документе, сформированные с помощью тега <P>, теперь будут отформатированы именно так, как это описано в первом дескрипторе блока.

Теперь внимательно посмотрите на последний стиль: «.lgg». Именно таким образом -- при помощи имени, начинающегося с точки -- создаётся класс, т. е. сложное комплексное свойство, которое можно придавать любому объекту документа. Достаточно указать имя класса (уже без точки) в качестве параметра объекта, и он унаследует все применимые к нему свойства класса:

или

Этот способ определения стилей лучше первого, но всё ещё недостаточно хорош, т. к. сам блок стилей загромождает html-документ.

3. Создание внешнего файла дескрипторов.

В блоке HEAD (популярное, чёрт побери, местечко) пишем следующее:

В файл, имя которого вы задали в предыдущей строке, вставляем все нужные описания стилей по образцу блока STYLE из описания предыдущего способа, причём сами границы контейнера <STYLE>...</STYLE> можно опустить. Всё остальное -- точно так же.

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

...

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

top

• Предыдущий материал - Основы web-дизайна. Внедряемые объекты