Обзор других возможностей стилевых таблиц
В примерах предыдущих двух разделов мы кратко продемонстрировали способы применения стилевых таблиц CSS и их удобство. Однако, помимо упорядочивания стилевой информации, таблицы стилей CSS открывают для создателя веб-страниц и многие новые возможности, которые недоступны в стандартном языке HTML. Правда, к сожалению, употребляя новые возможности CSS, нужно четко представлять себе, что не все броузеры смогут их проинтерпретировать правильно. На сегодняшний день существует два “абстрактных” стандарта CSS — так называемый стандарт CSS1 и более новый стандарт CSS2. Реальные броузеры по-разному поддерживают (или не поддерживают) их. Некоторые свойства стилей, описанные в CSS1 и, особенно, CSS2, до сих пор не получили поддержки в ряде броузеров, а некоторые не поддерживаются вообще. И, наоборот, существуют броузерные расширения, не описанные в стандартах CSS1/CSS2.
Однако не надо этого пугаться: все равно новые возможности использовать стоит, просто надо проверять результаты своей работы в разных бро-узерах и сравнивать их. Впрочем, это относится даже не столько к CSS, сколько к динамическим страницам, создаваемым с использованием JavaScript Итак, давайте познакомимся с некоторыми новыми возможностями CSS. Замечательно, что многие стилевые свойства здесь можно применять практически ко всем элементам. Например, цвет фона (свойство background-color), который мы в предыдущих примерах определяли для элемента
<BODY>
, может с таким же успехом задаваться и для отдельных текстовых блоков и даже слов. Более того, все элементы могут иметь свой фоновый рисунок (свойство background-image).
Практически для всех элементов можно теперь также определить поля (свойство margin), рамки различного вида и толщины (свойство border), и отступы (свойство padding). Различие между полем и отступом заключается в том, что отступ находится внутри рамки элемента, а поле — вне нее. Свойства полей, рамок и отступов могут задаваться индивидуально для каждой из сторон блока. Более гибко можно выбирать свойства шрифта: его начертание, размер, степень “жирности”, гарнитуру и оформление (это, соответственно, свойства: font-stlye, font-size, font-weight, font-family, text-decoration). Интересное свойство text-decoration позволяет, например, не только зачеркнуть или подчеркнуть текст, но и сделать его подчеркнутым (text-decoration: overline) или даже мигающим (text-decoration: blink). Правда, значение blink поддерживается пока только в Netscapel и Opera 4. Можно несколько “оживить заголовки с помощью свойства font-variant: small-caps. Правда, пока что это работает только в Netscape 6, a Internet Explorer просто преобра зует строчные буквы в прописные, а прописные не увеличивает.
Чтобы было интереснее, давайте рассмотрим некоторые свойства на кон кретном примере. Помните веб-страничку гипотетической фирмы “Лентяй” из главы 2? Сейчас мы попробуем взять ее за основу и улучшить оформление.
