Спонсор Рассылки: Клуб Желающих Создать И Развивать Свой Сайт

CSS "От А до Я"

Никита Е. Сенченко
http://webmoney.kharkov.ua

Представьте себе такую ситуацию: вы сделали серьезный сайт. И вдруг через некоторое время понимаете: шрифт не тот, фон не тот, цвета не те и т.д. Все надо менять. Обремененный заботой о любимых посетителях, вы спешите исправить недоработки во всех 500 (к примеру) страницах вашего сайта. На это уходит целый день. В лучшем случае… Как этого избежать? Ответ прост - использовать каскадные таблицы стилей.

Прежде всего, хочу вас предупредить: если вы не знаете HTML, то из этой статьи ничего нового вы не узнаете. Просто потому, что не поймете. CSS придуманы специально для расширения возможностей HTML, поэтому прежде чем браться за каскадные таблицы, я советовал бы вам изучить язык маркировки гипертекстов (то бишь HTML). Тем более что много времени это не займет, а учебников по HTML вы сможете найти великое множество.

Но вернемся к нашим баранам :) .

Все, кто делал веб-страницы, так сказать, вручную (на HTML, а не в WYSIWYG-редакторах), знают, как мало возможностей предоставляет этот язык, когда он используется "в чистом виде" (я имею в виду, без каких-либо вспомогательных средств). К примеру, позиционирование элементов, форматирование списков, работа с фоновыми изображениями - это далеко не полный список того, что может принести головную боль программистам на HTML. И действительно, гипертекстовый язык настолько несовершенен, что порой несложные странички могут иметь огромный нечитаемый код. К тому же, автор страницы не может заранее определить настроек браузера пользователя, что существенно ограничивает число вариантов представления информации на странице.

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

Другой способ управления настройками браузера - программирование на JavaScript. Этот язык сейчас становится все более и более популярным, однако имеет один недостаток - большой объем кода, что делает его не самым оптимальным средством. По крайней мере, на ближайшие несколько лет.

Но выход все же есть. И имя ему - CSS (Cascading Style Sheets). Или, по-русски, каскадные таблицы стилей. Разработала спецификации каскадных таблиц небезызвестная фирма Microsoft. Наверно поэтому, кстати, Internet Explorer поддерживает CSS в несколько большей степени, чем Netscape (хотя NN6 сделал в этой области огромнейший шаг вперед). Да, кстати, неплохо поддерживает каскадные таблицы браузер Opera (хотя и хуже, чем ее "старшие братья"). Посему советую всем, кто будет использовать на своих страницах CSS, обзавестись хотя бы Нетскейпом и Эксплорером и проверять свои творения и там, и там.

Изначально CSS создавались для того, чтобы отделить содержание страницы от сопутствующих дополнительных тэгов описания. Предположим, нам надо писать некое выражение, часто повторяющееся в тексте, зеленым цветом, шрифтом отличным от шрифта текста и, к тому же, выделять курсивом. Если вы хотите обойтись только средствами HTML, то вам необходимо будет каждый раз писать что-то типа:

<font color=green face="ваш_шрифт"><i>текст</i></font>

Не слишком трудно, но если эту запись приходится повторять десятки раз, то это уже не очень удобно. CSS дает возможность задать описание объекта только однажды. Мало того, можно описать все стили для нескольких страниц или всего сайта в одном отдельном файле и все ваши странички будут иметь совершенно одинаковый вид - одинаковые шрифты, таблицы, рамки. При этом, если вы что-либо захотите изменить в оформлении своего сайта, вам нужно будет поменять только один файл - тот, в котором содержаться соответствующие стили описания. Кроме того, CSS позволяет использовать множество дополнительных эффектов для оформления страниц. Что тоже важно.

Таким образом, задумка была хорошая. Но получилось сами знаете как. До сих пор ни один браузер не поддерживает каскадные таблицы на все 100%. Даже IE. И поэтому многие возможности CSS остаются пока невостребованными. Когда ко мне в руки впервые попал перевод спецификаций CSS в оригинале, я читал их как научную фантастику: столько всего полезного предоставляют в наше распоряжение каскадные таблицы стилей. Но, увы, корректно поддерживается пока только определенная часть из них.

Итак, начнем.

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

Для применения CSS в HTML-страничке существует четыре основных способа. Рассмотрим подробно каждый из них.

Переопределение стиля в элементе разметки.

Вообще говоря, этот метод приводит к потере главного преимущества CSS - возможности отделения информации от описания представления этой информации. Однако им все равно часто пользуются. Для того чтобы описать стиль таким способом необходимо применить атрибут STYLE у данного элемента HTML-страницы. Его общий синтаксис таков:

<элемент style="свойство: значение; свойство: значение">текст или любой другой объект</элемент>

Рассмотрение конкретных свойств мы оставим на потом, а пока посмотрим, как вообще работают каскадные таблицы.

А вот и первый пример:

<P style="font-size: 14pt; font-style: italic; background-color: lime">Этот абзац будет напечатан курсивом, шрифтом с размером 14 пунктов, и на светло-зеленом фоне.</P>

 

В результате выполнения данного фрагмента кода, вы увидите следующее:

Размещение описания стиля в заголовке документа.

Описание стилей этим способом осуществляется с помощью элемента (а не атрибута) 'STYLE', размещенного в заголовке документа, т.е. между тегами <HEAD> и </HEAD>.

Это самый распространенный способ применения каскадных таблиц. При этом он самый надежный. Общий синтаксис при этом способе таков:

<HEAD>
<STYLE TYPE="text/css">
элемент {свойство: значение; свойство: значение}
</STYLE>
</HEAD>

Теперь во всем документе элемент, описанный с помощью 'STYLE' в заголовке, будет форматироваться и представляться на экране в соответствии с установленным для него стилем, если только он не будет переопределен с помощью атрибута STYLE (см. пункт 1) или средствами обычного HTML. Кстати, параметр TYPE="text/css" является обязательным и служит для указания браузеру использовать CSS.

Приведу пример:

<HEAD>
<STYLE TYPE="text/css">
B {color: red; font-size: 120%}
</STYLE>
</HEAD>
<BODY>
...
<B>Этот текст будет отображен в соответствии с описанием в заголовке: красным цветом и размером шрифта в 120% от размера, принятого по умолчанию. </B><BR>
<B style="color:blue">А этот текст будет отображаться синим цветом, так как это свойство переопределено. Однако размер будет тот же.</B>
...
</BODY>

Вот что мы увидим:

Этот текст будет отображен в соответствии с описанием в заголовке: красным цветом и размером шрифта в 120% от размера, принятого по умолчанию.
А этот текст будет отображаться синим цветом, так как это свойство переопределено. Однако размер будет тот же.

Чтобы определить несколько элементов одинаковыми стилями, можно использовать группирование. Тогда все элементы нужно перечислить друг за другом через запятую, вот так:

H1, H2, H3 {text-decoration: line-though}

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

CSS предоставляет нам еще одну замечательную возможность: определение классов. С помощью классов можно присваивать стили не всем одинаковым элементам страницы, а избирательно. Хотя классы плохо поддерживаются Нетскейпом, однако они предоставляют такую гибкость контроля над элементами, что подчас от них просто невозможно отказаться. Для того чтобы использовать класс, его необходимо вначале определить внутри элемента 'STYLE', а затем сослаться на этот класс в каком-либо элементе внутри 'BODY' с помощью атрибута CLASS:

<HEAD>
<STYLE TYPE="text/css">
.имя_класса {свойство: значение; свойство: значение}
</STYLE>
</HEAD>
<BODY>
...
<элемент CLASS="имя класса">что-то, что будет форматироваться в соответствии с заданными в классе стилями</элемент>
...
</BODY>

Вот пример:

<HEAD>
<STYLE TYPE="text/css">
.x {width: 160px}
.y {padding: 15px}
</STYLE>
</HEAD>
<BODY>
<TABLE BORDER=1 BGCOLOR=gray BORDERCOLOR=white<
<TR>
<TD>Ячейка1</TD>
<TD CLASS="x">Ячейка2</TD>
</TR>
<TR>
<TD CLASS="y">Ячейка3</TD>
</TR>
</TABLE>
</BODY>

1. В этом примере Ячейка2 отформатирована в соответствии с классом "x", для элементов которого установлена ширина в 160 пикселей, а Ячейка3 - в соответствии с классом "y", для всех элементов которого устанавливается внутренний отступ ("набивка") в 15 пикселей. Ячейке1 ни один из классов не присваивается, поэтому она форматируется в соответствии с общепринятыми стандартами HTML, а также согласно описанным в теге <TABLE> атрибутам.
   
   Допустим, что по замыслу автора все элементы 'CITE' (логическая разметка, используется обычно для выделения названия какой-либо книги или статьи и отображается курсивом), расположенные внутри заголовков 'H3', должны быть выведены фиолетовым цветом. При этом все элементы 'CITE' вне заголовка 'H3' должны иметь цвет по умолчанию (то бишь черный). Для удобного использования каскадных таблиц в этом случае существует так называемые контекстные селекторы. Например, в нашем случае необходимого результата можно достигнуть так:
   
   H3 CITE {color: purple}
   
   Здесь элемент 'H3' является как бы маской поиска. Описанный стиль (color: purple) применяется только к последнему элементу (в данном случае 'CITE'), и только тогда, когда результат поиска является положительным. Продемонстрируем работу контекстного селектора на данном примере:
   
   <BODY>
   <H3>В этом заголовке используется <CITE>элемент логической разметки 'CITE' </CITE></H3>
   </BODY>
   
   Эта запись выведет на страничке следующее:

   В этом заголовке используется элемент логической разметки 'CITE'

2. 
   
   Ссылка на внешний файл описания стилей.
   
   В любую страничку описание стилей можно импортировать из внешнего файла, который необходимо создать заранее и присвоить ему расширение .css. Содержанием этого файла должны быть описания стилей, построенные с синтаксисом, рассмотренным в пункте 2. Подключение внешнего файла осуществляется с помощью элемента 'LINK', который может располагаться как в заголовке, так и в теле документа:
   
   <LINK TYPE="text/css" REL="stylesheet" HREF="http://path/to/your/css">
   
   Значение атрибута REL обязательно должно быть "stylesheet".
3. 
   
   Импорт описания стилей.
   
   Это аналог описанному выше способу задания описаний. С его помощью также можно ссылаться на внешние файлы каскадных таблиц:
   
   <STYLE type="text/cs">
   @import: url (http://path/to/your/css)
   </STYLE>
   
   Импортируемый стиль можно переопределить с помощью любых перечисленных ранее методов. Однако такой способ подключения внешних файлов не рекомендуется по той причине, что он поддерживается далеко не всеми браузерами.
   
   webmasterpro.com.ua

Веб-дизайн

Веб-дизайн: книга Якоба Нильсена

Веб-дизайн: книга Дмитрия Кирсанова

Веб-дизайн: книга Джесса Гарретта. Элементы опыта взаимодействия

CD-ROM (MP3). Бизнес-путь: AMAZON.COM: секреты самого успешного в мире веб-дизайна

По ту сторону веб-страницы

Веб-редизайн: книга Келли Гото и Эмили Котлер

Современный дизайн

Цифровой дизайн

Web-дизайн: справочник

Философия CSS-дизайна

Моя жизнь в дизайне

CD-ROM. Web-дизайн для гуманитариев

Мультимедиа-дизайн во Flash 8