Иллюстрированный самоучитель по Adobe Dreamweaver MX › Каскадные таблицы стилей › Введение в каскадные таблицы стилей. Зачем они нужны. [страница - 231] | Самоучители по работе в Internet

Введение в каскадные таблицы стилей. Зачем они нужны.

А следующий текст:

<I>Обычный курсив</I>
<H2>Экспериментируем с курсивом</H2>

…будет отображаться как обычно. А такой стиль:

I.cit { 
    color: #FF0000; 
    font-size: smaller 
}

…будет применяться только к тексту, помещенному внутрь тега с атрибутом CLASS, установленном в cit (своеобразный гибрид стилевого класса и переопределения тега; этот стиль так и называется – гибридный), т. е. к такому тексту:

<I class="cit">Маленький зеленый курсивчик

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

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

<P ID="cit">это цитата.</P>

Тогда определение стиля в таблице должно выглядеть следующим образом:

#cit { 
    font-size: smaller; 
    font-style: italic 
}

Такой стиль называется стилем-селектором.

Конечно, в одной таблице стилей вы можете определить одновременно несколько стилей:

.cit { 
    font-size: smaller; 
    font-style: italic 
} 
I { 
    color: #00FF00 
}  
H1 I { 
    color: #FF0000; 
    font-size: larger 
}

Используя стили, можно задать для текста даже такие параметры, о которых и не мечтал "чистый" HTML. Например, можно создать рамку вокруг фрагмента текста или сделать так, что при наведении курсора мыши на текст он (курсор) будет менять форму. Обо всем этом будет рассказано ниже.

С помощью таблиц стилей можно форматировать не только текст. Любому элементу страницы – изображению, таблице, горизонтальной линии – может быть присвоен стилевой класс.

Например, вы можете переопределить поведение тега <BODY> таким образом:

BODY { 
    background-color: #000000
}

Здесь мы задали черный цвет фона страницы с помощью нового атрибута background-color.

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

В составе Dreamweaver вместе со справочным руководством по HTML поставляется справочник по CSS. Чтобы вызвать его на экран, сначала вызовите панель Reference, выбрав пункт Reference в меню Window или нажав комбинацию клавиш SHIFT + F1. После этого в раскрывающемся списке Book этой панели выберите пункт O'REILLY CSS Reference. Чтобы просмотреть справочную информацию по какому-либо атрибуту, достаточно выбрать его имя в раскрывающемся списке Style. Например, на рис. 10.1 представлена справочная информация по уже знакомому нам атрибуту color.

Иллюстрированный самоучитель по Adobe Dreamweaver MX › Каскадные таблицы стилей › Введение в каскадные таблицы стилей. Зачем они нужны.
Рис. 10.1. Справка по атрибуту color в панели Reference

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