Работа с таблицами стилей. Основы технологии CSS.
Если описание стилей располагается непосредственно в Web-странице, то на это указывает атрибут TYPE тега <STYLE>:
<STYLE TYPE="tcxt/css"> ... </STYLE>CSS предоставляет возможность присваивать один и тот же стиль не всем однотипным элементам страницы подряд, а избирательно. Для этого используются атрибуты CLASS или ID.
Последние версии HTML (начиная с 3.2) позволяют устанавливать указанные атрибуты для любого элемента страницы.
Атрибут CLASS применяется в том случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (в том числе разнотипных, например, для H1 и Н2).
В частности, описание стиля для класса bold_text (имя класса разработчик выбирает сам) может выглядеть следующим образом:
.bold_text { font-weiqht: bold; text-aliqn: center }Оно означает, что все элементы класса bold_text будут отображаться жирным шрифтом с выравниванием по центру страницы.
Чтобы применить данный стиль к конкретному элементу страницы, необходимо указать для него соответствующее значение атрибута CLASS.
Например, конструкция:
<P CLASS="bold_tcxi">Текст параграфа</Р>…позволяет присвоить конкретному параграфу стиль класса bold_text, а конструкция:
<H2 CLASS="bold_Text">Текст заголовка</H2>…обеспечивает применение того же стиля к некоторому заголовку второго уровня.
Следует иметь в виду, что при написании названия класса в атрибуте CLASS должен учитываться регистр символов, использовавшийся при описании стиля.
Назначение стилей с помощью атрибута ID выполняется в тех случаях, когда данный стиль предполагается применить к единственному элементу страницы, имеющему уникальный идентификатор ID. Существует и чисто формальный признак, обеспечивающий различие в описании стиля класса и стиля элемента: первый начинается с точки (.), второй – с символа #.
Например, можно описать стиль #redtext {color: red} и затем использовать его для установки красного цвета для текста параграфа с идентификатором redtext:
<P ID="redtext">Текст параграфа</P>Кроме того, CSS позволяет переопределять стиль для стандартных тегов HTML. Например, если создать стиль:
li { background-color: #FFFFF0; font-size: 14px; }…то элементы любого списка будут выводиться на красном фоне с использованием 14 кегля.
Следует отметить, что при всей универсальности языка CSS наиболее интересные эффекты от применения CSS относятся непосредственно к дизайну создаваемых Web-страниц. Речь идет о том, что при описании стиля разрешается указывать значения отступов вокруг объектов как отрицательные величины. Это позволяет накладывать один "слой" текста на другой и получать весьма привлекательные (а иногда и достаточно неожиданные) результаты. Например, на приведенном выше рис. 4.36 показан относительно простой пример использования CSS для создания визуальных эффектов на странице только с помощью шрифтов – в нем не используется вообще никакой графики.