Учебник Macromedia Dreamweaver (стр. 71 из 135)

Собственно, красивое форматирование текста таблицы стилей, которое вы видите здесь, совсем не обязательно. Ваша таблица стилей может выглядеть и следующим образом:

.cit {font-style:italic;color: #FF0000}

Так она получается даже компактнее — весьма немаловажное достоинство во времена господства медленных каналов связи. Но, согласитесь, красиво отформатированный вариант легче читается.

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

<Р CLASS="cit">3TO цитата.</Р>

Как видите, достаточно просто добавить в тег <р> атрибут CLASS и в качестве значения присвоить ему имя определенного нами стилевого класса, в нашем случае cit. Теперь этот фрагмент текста будет форматироваться курсивным красным шрифтом уменьшенного размера.

Но, кроме того, нам еще нужно добавить в секцию HTML-заголовка (тег <HEAD>) нашей страницы ссылку на таблицу стиля, чтобы Web-обозреватель смог ее найти. Эта ссылка будет иметь следующий вид:

Вот теперь точно все!

Вы уже, наверно, догадались, что таблицу стилей, сохраненную в отдельном файле, можно использовать во многих Web-страницах. Более того, она может находиться вообще на другом сайте. В частности, фирма Microsoft, насколько известно автору, предлагает бесплатно воспользоваться библиотекой таблиц стилей, помещенной на ее сайте. (Внимание: информация непроверенная!)

Кроме того, Web-страница может ссылаться одновременно на несколько таблиц стилей. Например, так:

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

Но как же в этом случае уменьшить шрифт всех цитат? Для этого достаточно добавить в определение стилевого класса еще один атрибут и присвоить ему соответствующее значение. В этом случае таблица стилей будет иметь такой вид (вновь вставленный код выделен полужирным шрифтом):

.cit { color: #FF0000;

font-style: italic; font-size: smaller }

Здесь мы поместили в определение стиля помещен новый атрибут font-size, задающий размер шрифта. И присвоили ему значение smaller, задающее шрифт на одну ступень меньший, чем у родительского элемента.

И это все! Никаких изменений в коде Web-страниц, ссылающихся на эту таблицу стилей, нам делать не нужно. Достаточно было только изменить файл таблицы стилей.

Удобно? Еще бы!

А еще с помощью таблицы стилей можно изменить внешний вид любого тега HTML. Для этого нужно просто переопределить его в таблице стилей следующим образом:

H1 | { color: #FF0000;

font-size: smaller }

После этого все фрагменты текста, заключенные внутрь тега <i> (курсив), будут отображаться уменьшенным шрифтом красного цвета. Такой стиль называется стилем переопределения тега.

А если вы создадите такой стиль:

H1 I { color: #FF0000;

font-size: smaller }

то уменьшенным шрифтом красного цвета будет отображаться только текст, заключенный внутрь тега <i>, который, в свою очередь, находится внутри тега <H1>. Вот такой:

<Н1><I>Курсивный</I> заголовок</Н1> А следующий текст:

<1>0бычный курсив</1>

<Н2>Экспериментируем с <i>курсивом</i></Н2>

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

I.cit { color: #FF0000;

font-size: smaller }

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

<i class="сit:">Маленысий зеленый курсивчик</i>

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

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

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

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

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

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

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

.cit { font-size: smaller;

font-style: italic } I { color: #00FF00 } HI I { color: #FF0000;

font-size: larger }

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

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

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

BODY ( background-color: #000000 )

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

background-color.

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

В составе Dreamweaver вместе со справочным руководством по HTML поставляется справочник по CSS. Чтобы вызвать его на экран, сначала вызовите панель Reference, выбрав пункт Reference в меню Window или нажав комбинацию клавиш <Shift>+<Fl>. После этого в раскрывающемся списке

Рис. 10.1. Справка по атрибуту color в панели Reference

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

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

Три способа задания стиля

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

1. Внешняя (или привязанная) таблица стилей. Стили сохраняются в отдельном файле с расширением css и привязываются к Web-странице с помощью особого тега <LINK>. Вы уже познакомились с внешними таблицами стиля, так что не будем сейчас подробно на них останавливаться.

2. Внутренняя (или внедренная) таблица стилей. Таблица стилей в этом случае имеет тот же самый формат, что и внешняя, но располагается в секции заголовка той же Web-страницы и помещается внутрь специального тега <STYLE>.

3. Внутренние (также встроенные или внедренные) стили. Определение стиля помещается прямо в нужный тег, для чего используется специальный атрибут STYLE.

С внешними таблицами стилей вы уже познакомились. Поэтому перейдем сразу к внутренним.

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

Давайте превратим внешнюю таблицу стилей, созданную выше, во внутреннюю. Это проще простого.

<STYLE>

.cit { font-size: smaller;

font-style: italic } I {color: #00FFOO } HI I { color: #FF0000;

font-size: larger } </STYLE>

Как видите, ничего радикально не изменилось. Единственное, добавился парный тег <STYLE>, определяющий таблицу стилей. Вся эта конструкция помещается в секции заголовка Web-страницы, т. е. внутри тега <HEAD>. Само собой, внутренняя таблица стилей может быть только одна на страницу.

Обращаться к внутренней таблице стилей можно так же, как и к внешней:

<Р CLASS="cit">Этo цитата.</Р>

Вот, собственно, и все о внутренних таблицах стилей.

Внутренние стили вообще помещаются внутри тегов, определяющих тот или иной элемент страницы. Делается это с помощью атрибута STYLE, поддерживаемого, как и CLASS, практически всеми тегами.

<Р STYLE="font-size: smaller; font-style: italic">этоцитата.</Р>

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

В каких случаях следует применять тот или иной способ задания стилей? На этот случай есть простое правило: выясните, где и как часто будет использован тот или иной стиль.

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

Если стиль должен быть использован в нескольких местах одной-един-ственной Web-страницы, смело переносите его во внутреннюю таблицу стилей. В результате внешние таблицы стилей не будут заполняться стилями, применяемыми только в одной странице, и их файлы сохранят компактность. Можно, конечно, вынести все такие стили во внешнюю таблицу, которая будет использоваться единственной страницей, но такой подход неоптимален.