Оформление веб-страницы с использованием стилей
Обзор других возможностей стилевых таблиц
В примерах предыдущих двух разделов мы кратко продемонстрировали способы применения стилевых таблиц 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, а Internet Explorer просто преобразует строчные буквы в прописные, а прописные не увеличивает.
Чтобы было интереснее, давайте рассмотрим некоторые свойства на конкретном примере. Помните веб-страничку гипотетической фирмы “Лентяй” из главы 2? Сейчас мы попробуем взять ее за основу и улучшить оформление.
Размещение блоков текста
Вообще-то “Лентяй”, хоть и гипотетическая, но все же фирма, поэтому на ее сайте должны присутствовать несколько разделов, без которых корпоративный сайт уже не воспринимается, типа “О компании”, “Услуги” (или “Продукция”), “Цены”, “Новости” и прочие. Поэтому мы тоже снаб дим для начала эту страничку блоком соответствующих гиперссылок:
<DIV CLASS="lnk">УСЛУГИ</DIV><DIV CLASS="lnk"> <A HREF="prices.html">ЦЕНЫ</A></DIV><DIV CLASS="lnk"> <A HREF="forml .html">ФОРМА ЗАКАЗА</A></DIV><DIV CLASS="lnk"> <A HREF="history.html">ИСТОРИЯ КОМПАНИИ</A> </DIV><DIV CLASS="lnk"> <A HREF="guestbook.html">КНИГА ОТЗЫВОВ</A></DIV>