Представьте себе такую ситуацию: вы сделали серьезный сайт. И вдруг через некоторое время понимаете: шрифт не тот, фон не тот, цвета не те и т. д. Все надо менять. Обремененный заботой о любимых посетителях, вы спешите исправить недоработки во всех 50-и (к примеру) страницах вашего сайта. На это уходит целый день. В лучшем случае…
Как этого избежать? Ответ прост — использовать каскадные таблицы стилей.
Прежде всего хочу вас предупредить: если вы не знаете HTML, то из этой статьи ничего нового вы не узнаете. Просто потому, что не поймете. CSS придуманы специально для расширения возможностей HTML, поэтому прежде чем браться за каскадные таблицы, я советовал бы вам изучить язык маркировки гипертекстов (то бишь HTML). Тем более, что много времени это не займет, а учебников по HTML вы сможете найти великое множество.
Но вернемся к нашим баранам .
Все, кто делал веб-страницы, так сказать, вручную (на HTML, а не в WYSIWYG-редакторах) знают, как мало возможностей предоставляет этот язык, когда он используется «в чистом виде» (я имею в виду, без каких-либо вспомогательных средств). К примеру, позиционирование элементов, форматирование списков, работа с фоновыми изображениями — это далеко не полный список того, что может принести головную боль программистам на HTML. И действительно, гипертекстовый язык настолько несовершенен, что порой несложные странички могут иметь огромный нечитаемый код. К тому же, автор страницы не может заранее определить настройки браузера пользователя, что существенно ограничивает число вариантов представления информации на странице.
Нельзя сказать, что разработчики браузеров не предпринимали попыток изменить данную ситуацию. В ранних версиях браузеров CERN для платформы NEXT автору страницы давалась возможность переопределять настройки по умолчанию браузера через HTML-разметку. Но этот подход не получил продолжения в коммерческих продуктах и постепенно «завял».
Другой способ управления настройками браузера — программирование на JavaScript. Этот язык сейчас становится все более и более популярным, однако имеет один недостаток — большой объем кода, что делает его не самым оптимальным средством. По крайней мере, на ближайшие несколько лет.
Но выход все же есть. И имя ему — CSS (Cascading Style Sheets). Или, по-русски, каскадные таблицы стилей. Разработала спецификации каскадных таблиц небезызвестная фирма Microsoft. Наверно поэтому, кстати, Internet Explorer поддерживает CSS в значительно большей степени, чем Netscape. Я не являюсь поклонником продуктов дяди Билла, однако всех приверженцев Нетшкафа хочу предупредить: особенность темы заставит меня не раз хвалить IE и ругать старого навигатора. Да, кстати, неплохо поддерживает каскадные таблицы браузер Opera (там даже есть отдельные их настройки). Посему советую всем, кто будет использовать на своих страницах CSS, обзавестись хотя бы Нетскейпом и Эксплорером, чтобы проверять свои творения на предмет совместимости с обоими браузерами.
Изначально CSS создавались для того, чтобы отделить содержание страницы от сопутствующих дополнительных тэгов описания. Предположим, нам надо писать некое выражение, часто повторяющееся в тексте, зеленым цветом, шрифтом, отличным от шрифта текста, к тому же и выделять курсивом. Если вы хотите обойтись только средствами HTML, то вам необходимо будет каждый раз писать что-то типа:
Не слишком трудно, но если эту запись приходится повторять десятки раз, то это уже начинает досаждать.
CSS дает возможность задать описание объекта лишь однажды. Мало того, можно описать все стили для нескольких страниц или всего сайта в одном отдельном файле, и все ваши странички будут иметь совершенно одинаковый вид — одинаковые шрифты, таблицы, рамки. При этом, если вы что-либо захотите изменить в оформлении своего сайта, вам достаточно будет изменить только один файл — тот, в котором содержаться соответствующие стили описания. Кроме того, CSS позволяет использовать множество дополнительных эффектов для оформления страниц. Что тоже важно.
Как видите, задумка была хороша. Но получилось сами знаете как. До сих пор ни один браузер не поддерживает каскадные таблицы на все 100%. Даже IE. И поэтому многие возможности CSS остаются пока невостребованными. Когда ко мне в руки впервые попал перевод спецификаций CSS в оригинале, я читал их как научную фантастику: столько всего полезного предоставляют в наше распоряжение каскадные таблицы стилей! Но, увы, корректно поддерживается пока только часть из них.
Итак, начнем.
А начнем мы с того, как таблицы стилей включаются в HTML-документ. Информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде веб-странички. Речь пойдет о том, где и в какой форме в документе автор страницы может описать стиль и как он может сослаться на стиль, определенный в другом документе.
Для применения CSS в HTML-страничке существует четыре основных способа. Рассмотрим подробно каждый из них.
1) Переопределение стиля в элементе разметки.
Вообще говоря, этот метод приводит к потере главного преимущества CSS — возможности отделения информации от описания представления этой информации. Однако им все равно часто пользуются. Для того чтобы описать стиль таким способом, необходимо применить атрибут STYLE к данному элементу HTML-страницы. Его общий синтаксис таков:
<элемент STYLE="свойство: значение; свойство: значение">текст или любой другой объект</элемент>
Рассмотрение конкретных свойств мы оставим на потом, а пока посмотрим, как вообще работают каскадные таблицы.
А вот и первый пример:
<P STYLE="font-size: 14pt; font-style: italic; background-color: lime">Этот абзац будет напечатан курсивом, шрифтом с размером 14 пунктов, и на светло-зеленом фоне.</P>
Таким образом, к тексту, заключенному между тэгами <P> и </P>, были применены соответствующие стили, описанные вслед за атрибутом STYLE. Этот атрибут можно применить внутри любого элемента разметки. Однако допустимый набор пар «свойство: значение» в каждом конкретном случае будут несколько различаться (об этом мы поговорим в дальнейшем).
Хотел бы сразу высказать несколько замечаний касательно синтаксиса. Атрибут STYLE написан большими буквами только ради удобства. Его можно писать как угодно, так: style или даже так: sTyLe — эффект будет абсолютно одинаковым. Совокупность пар «свойство: значение» обязательно берется в кавычки; каждая пара отделяется от последующей точкой с запятой.
2) Размещение описания стиля в заголовке документа.
Описание стилей этим способом осуществляется с помощью элемента (а не атрибута) ‘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>
Вот что мы увидим:
Многие для наглядности описывают свойства, начиная каждую пару «свойство: значение» с новой строки, вот так:
B {color: red;
font-size: 120%;
font-family: monospace}
Однако лучше так не делать: IE вполне нормально справляется с таким написанием, а вот Netscape начинает хандрить :-).
Чтобы определить несколько элементов одинаковыми стилями, можно использовать группирование. Тогда все элементы нужно перечислить друг за другом через запятую, вот так:
H1, H2, H3 {text-decoration: line-though}
Такая запись означает, что заголовки первого, второго и третьего уровней будут отображаться перечеркнутыми.
CSS предоставляет нам еще одну замечательную возможность: определение классов. С помощью классов можно присваивать стили не всем одинаковым элементам страницы, а избирательно. Хотя классы плохо поддерживаются Нетскейпом, однако они предоставляют такую гибкость контроля над элементами, что подчас от них просто невозможно отказаться. Для того чтобы использовать класс, его необходимо вначале определить внутри элемента ‘STYLE’, а затем сослаться на этот класс в каком-либо элементе внутри ‘BODY’ с помощью атрибута CLASS:
<HEAD>
<STYLE TYPE="text/css">
.имя_класса {свойство: значение; свойство: значение}
</STYLE>
</HEAD>
<BODY>
...
<элемент CLASS="имя класса">что-то, что будет форматироваться в соответствии с заданными в классе стилями</элемент>
...
</BODY>
В этом примере Ячейка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>
Эта запись выведет на страничке следующее:
3) Ссылка на внешний файл описания стилей.
В любую страничку описание стилей можно импортировать из внешнего файла, который необходимо создать заранее и присвоить ему расширение *.css. Содержанием этого файла должны быть описания стилей, построенные согласно синтаксической модели, рассмотренной в пункте 2. Подключение внешнего файла осуществляется с помощью элемента ‘LINK’, который может располагаться как в заголовке, так и в теле документа:
Импортируемый стиль можно переопределить с помощью любых перечисленных ранее методов. Однако такой способ подключения внешних файлов не рекомендуется по той причине, что он поддерживается далеко не всеми браузерами.
Позвольте мне сделать небольшое отступление, которое, однако, имеет к нашей теме прямое отношение. Это отступление касается браузеров.
В первой статье я предупредил, что специфика рассматриваемой темы неоднократно заставит меня хвалить Internet Explorer и ругать Netscape. Однако при этом я подразумевал NN версии 4. Поразмыслив немного над ситуацией и посмотрев статистику SpyLog за последний год, я пришел к выводу: Netscape 4 — живой труп (уж извините за грубость), в скором времени он окончательно выйдет из употребления. Поэтому заострять внимание на четвертой версии, мне кажется, не имеет смысла. Давайте лучше заглянем в светлое будущее :-) и все свои опыты будем проверять в самых последних версиях ведущих браузеров: IE 5, NN 6 и в моей любимой Opera 5.02.
Итак, определились. Все опыты будем проводить именно на этих подопытных кроликах. Забегая вперед, скажу, что все три браузера хорошо поддерживают последние спецификации CSS2, однако Ослик (читай: IE :-)) идет немного впереди своих конкурентов.
Итак, отходная молитва прочитана :-). Можно начинать.
Все объекты html-страницы в применении к каскадным таблицам могут быть строковыми или блочными (табл. 1).
В зависимости от того, в каком контексте (блочном или строковом) рассматривается элемент, к нему можно применить те или иные правила CSS.
К примеру, возьмем текстовую информацию в html-документе. Текст, заключенный в тэги параграфа (<P>, </P>) — это блочный элемент разметки, а выделение курсивом (<I>, </I>) — строковый.
Если необходимо строковый элемент «принудительно» сделать блочным, то нужно задать параметру display значение block. Например:
I {display: block}
Блочные элементы можно вкладывать друг в друга, но нельзя пересекать друг с другом. Строковые элементы можно и вкладывать, и пересекать.
По набору стилей, которые можно применять к элементам, блочные и строковые элементы отличаются. При этом к блочным элементам можно применять «строковые» стили, но не наоборот.
Мы пойдем по пути от простого к сложному, и потому сегодня остановимся на строковых элементах разметки — они легче для понимания.
Строковые элементы могут включаться в блочные:
<P>Несколько <EM>подчеркнутых</EM> слов <STRONG>имеется</STRONG> в этой строке.</P>
Элемент P — блочный, содержит внутри себя строковые элементы EM и STRONG.
До сих пор мы оперировали HTML-тэгами. Но настало время перейти непосредственно к применению каскадных таблиц. Для того чтобы задать стили для строковых элементов, необходимо воспользоваться элементом разметки SPAN. Он может заменять собой любые «строковые» тэги: FONT, I, B, U, SUB, SUP и т. д.:
<P>Начало абзаца. <SPAN style=”color: red”>Красный текст в середине абзаца.</SPAN> Конец абзаца.</P>
«Ну и что тут такого? — спросите вы, — Ведь то же самое можно сделать и без CSS»:
<P>Начало абзаца. <FONT color=red>Красный текст в середине абзаца.</FONT> Конец абзаца.</P>
Да, можно, и так даже удобнее, если подобное выделение нужно сделать только один раз. Но когда нам необходимо применить определенный стиль форматирования раз эдак сорок, то, согласитесь, CSS в этом случае — наше единственное спасение от рутинной работы.
К примеру, пусть в html-страничке присутствует 40 слов, которые определяют некие понятия или термины. Допустим, нам захотелось выделить их зеленым цветом, отобразить полужирным курсивом и к тому же шрифтом, большим по размеру, чем шрифт родительского элемента. Если пользоваться только средствами HTML, то получим следующее:
Очень просто, не правда ли? Но напомню: нам необходимо применить подобное форматирование в 40 местах, поэтому на деле получится гораздо труднее и утомительнее. А если потом нам захочется поменять, скажем, цвет с зеленого на синий? Представьте, сколько это займет времени!
Куда проще было бы применить CSS. В заголовке документа (между тэгами <HEAD> и </HEAD>) определим класс с необходимыми стилями:
Преимуществ у такого подхода много: во-первых, запутаться (как в случае с HTML-тэгами) практически невозможно; во-вторых, удобство этого способа возрастает пропорционально увеличению элементов, к которым нужно применить одинаковое форматирование. Если они встречаются не на одной, а на нескольких страницах, то описание класса “terms” можно вынести в отдельный файл и подключить его ко всем документам — сэкономим еще больше времени. И, в-третьих, все описания содержатся в одном месте, поэтому если вы захотите, к примеру, изменить цвет, то вам придется править код только в одном месте и один раз — а цвет поменяется везде! Впрочем, о преимуществах CSS мы уже говорили в первой статье, и больше останавливаться на них не будем.
Прежде чем перейти к детальному описанию «строковых» стилей, приведу еще один, более сложный пример:
Средствами HTML сделать такое будет довольно сложно!
Ну а теперь — самое интересное. Какие же конкретно возможности предоставляет нам CSS для форматирования строчных элементов? Начнем со свойств шрифта.
Свойства шрифта
Рассмотрим каждое свойство отдельно.
1. font-family
Определяет гарнитуру (наименование) шрифта. Можно (и даже нужно) указать не один, а несколько шрифтов через запятую. В этом случае шрифты будут рассматриваться браузером в порядке приоритетности слева направо:
Как видно по скриншоту, мой Explorer отобразил надпись из последнего примера шрифтом a_Bragga. Почему?
Никакой веб-дизайнер не может знать на 100%, какой набор шрифтов установлен на компьютере пользователя. Если задавать шрифт явно с помощью <FONT face=название_шрифта>, то есть большая вероятность того, что заданный шрифт на компьютере пользователя не поддерживает русские кодировки или вообще не установлен. Браузер автоматически подставит шрифт по умолчанию, но тогда могут произойти нежелательные изменения на странице или, как минимум, задумка автора останется не реализованной.
Проблема решается приведенным выше способом, т. е. с помощью CSS. Браузер проверяет весь список шрифтов слева направо и применяет первый же шрифт из этого списка, который оказывается установленным на компьютере пользователя. У меня, как видите, шрифта Traktir не оказалось, поэтому был применен следующий за ним шрифт a_Bragga.
Это очень удобно. К примеру, на вашем сайте используется в качестве основного шрифт Verdana. А определенную надпись вы непременно хотите вывести каким-нибудь экзотическим шрифтом Х. Но при этом вы понимаете: этот шрифт Х окажется установленным только у небольшого числа пользователей. У остальных он будет автоматически заменен шрифтом по умолчанию (чаще всего это Times). Шрифт Times никак не впишется в общий дизайн странички, на которой использована Verdana, поэтому было бы неплохо обеспечить «запасной» вариант: в случае, если шрифта Х у пользователя все-таки не окажется, выводить надпись, как и весь остальной текст, шрифтом Verdana. Тогда пишем так:
В конце списка советую указывать предпочтительную группу шрифтов: serif, sans-serif или monospace. Делается это вот для чего: если браузер не обнаружит в системе ни одного из перечисленных шрифтов, то он применит любой доступный шрифт из указанной группы. Вот перечень наиболее употребляемых семейств шрифтов с примерами (табл. 3).
2. font-style
Тут вроде бы все ясно. Этот стиль — замена тэга <I>.
3. ‘font-variant’
Если этому свойству присвоено значение small-caps, то текст будет отображаться малыми прописными буквами. Сравните:
<SPAN>ЭКСПЕРИМЕНТИРУЕМ С FONT-VARIANT</SPAN><BR>
<SPAN style=”font-variant: small-caps”>Экспериментируем с font-variant</SPAN>
4. ‘font-weight’
Задает жирность шрифта (bold). Значения bolder и lighter определяют жирность шрифта по отношению к тексту родительского элемента:
Вообще говоря, существует специальная «шкала жирности», определяющая жирность текста в интервале от 100 до 900 с интервалом в 100. Например, normal (обычный текст) соответствует по этой шкале 400, а bold — 700. Но кажется, нет ни одного браузера, который поддерживал бы эту шкалу хотя бы наполовину.
5. ‘font-size’
С помощью этого правила можно задавать размер (кегль) шрифта. Размер может задаваться в пикселях (px), пунктах (pt), условных единицах (em) или процентах (%). Также существует специальная таблица размеров, содержащая следующие индексы (перечислены в порядке возрастания размера шрифта): xx-small, x-small, small, medium, large, x-large, xx-large. Для указания размера шрифта можно воспользоваться и этими индексами. По умолчанию принято medium.
При этом, как и в случае с font-weight, существует возможность задания относительного размера с помощью smaller и larger.
Но, как говорится, лучше один раз увидеть, чем сто раз услышать. Вот пример:
<SPAN>Размер по умолчанию, <SPAN style=”font-size: large”>больше<SPAN style=”font-size: larger”> и еще больше</SPAN></SPAN></SPAN>
Что касается единиц измерения, то тут CSS (в отличие от обычного HTML) предоставляет довольно большой выбор. Есть абсолютные единицы, которые ни от чего не зависят и выглядят одинаково независимо от экранного разрешения, параметров родительского элемента и т. д. Есть и относительные единицы, на которые влияют какие-нибудь «внешние» факторы. С помощью таких единиц (абсолютных и относительных) можно задавать значение многих свойств каскадных таблиц, и font-size — одно из них.
К абсолютным единицам относятся пиксели (px) и пункты (pt). К относительным — условные единицы (em) и проценты (%). Свойства, размер которых определен с помощью относительных единиц, зависят от соответствующего размера родительского элемента. Например
Напоследок хотелось бы сказать, что абсолютно все примеры, которые я привел выше, корректно отрабатывают и в Опере 5.02 и в шестом Нетскейпе. Кое с чем справляется даже Netscape 4.
