Если внешняя таблица стилей хранится отдельно от Web-страницы, значит, нужно как-то привязать ее к Web-странице. Для этого предназначен одинарный метатег <LINK>, который помещается в секцию заголовка соответствующей Web-страницы. (О метатегах и секциях Web-страниц говорилось в главе 1.) Вот формат его написания:
<LINK REL="stylesheet" HREF="<интернет-адрес файла таблицы стилей>" TYPE="text/css">
Интернет-адрес файла таблицы стилей записывают в качестве значения атрибута HREF этого тега.
Остальные атрибуты тега <LINK> для нас несущественны. Атрибут REL указывает, чем является файл, на который ссылается тег <LINK>, для текущей Web-страницы; его значение "stylesheet" говорит, что этот файл - внешняя таблица стилей. А атрибут TYPE указывает тип MIME файла, на который ссылается данный тег; внешняя таблица стилей имеет тип MIME text/css.
Листинг 7.5
<HEAD>
. . .
<LINK REL="stylesheet" HREF="main.css" TYPE="text/css">
. . .
</HEAD>
В примере из листинга 7.5 мы привязали внешнюю таблицу стилей, хранящуюся в файле main.css, к текущей Web-странице.
Преимущество внешних таблиц стилей в том, что их можно привязать сразу к нескольким Web-страницам. Недостаток всего один, да и тот несущественный, - внешняя таблица стилей хранится в отдельном файле, так что есть вероятность его "потерять".
Внутренняя таблица стилей (листинг 7.6) записывается прямо в HTML-код Web- страницы. Ее заключают в парный тег <STYLE> и помещают в секцию заголовка. В остальном она не отличается от ее внешней "коллеги".
Листинг 7.6
<HEAD>
. . .
<STYLE>
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM { color: #00FF00; font-weight: bold }
P EM { color: #0000FF }
</STYLE>
. . .
</HEAD>
Преимущество внутренней таблицы стилей в том, что она является неотъемлемой частью Web-страницы и, стало быть, никогда не "потеряется". Недостатков два. Во-первых, стили, определенные во внутренней таблице стилей, применяются только к той Web-странице, в которой эта таблица стилей находится. Во-вторых, внутренняя таблица стилей не соответствует концепции Web 2.0, требующей отделять содержимое Web-страницы от ее представления.
В одной и той же Web-странице могут присутствовать сразу несколько таблиц стилей: несколько внешних и внутренняя (листинг 7.7).
Листинг 7.7
<HEAD>
. . .
<LINK REL="stylesheet" HREF="styles1.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="styles2.css" TYPE="text/css">
. . .
<STYLE>
. . .
</STYLE>
. . .
</HEAD>
В таком случае действие всех этих таблиц стилей складывается. А по каким правилам - мы сейчас выясним.
Правила каскадности и приоритет стилей
Как мы уже выяснили, на один и тот же элемент Web-страницы могут действовать сразу несколько стилей. Это могут быть стили разных видов (стиль переопределения тега, стилевой класс, комбинированный стиль, встроенный стиль) или определенные в разных таблицах стилей (внешних и внутренней). Такое встречается сплошь и рядом, особенно на Web-страницах со сложным оформлением.
Но как Web-обозреватель определяет, какой именно стиль применить к тому или иному элементу Web-страницы? Мы уже знаем, что в таких случаях действие стилей как бы складывается. Но по каким правилам?
Предположим, что мы создали внешнюю таблицу стилей (листинг 7.8).
Листинг 7.8
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM { color: #00FF00; font-weight: bold }
После этого мы изготовили Web-страницу, содержащую внутреннюю таблицу стилей (листинг 7.9).
Листинг 7.9
<STYLE>
.redtext { color: #0000FF } EM { font-size: smaller }
</STYLE>
А в самой Web-странице написали вот такой фрагмент HTML-кода:
<P CLASS="redtext">Это красный текст.</P>
<P ID="bigtext" STYLE="color: #FFFF00">Это большой текст.<P>
<P><EM>Это курсив.</EM></P>
Хорошо видно, что на элементы этой Web-страницы действуют сразу по нескольку стилей. Так, во второй строке кода к тегу <P> привязаны и именованный стиль bigtext, и встроенный стиль. Но этого мало - и внешняя, и внутренняя таблицы стилей содержат определение двух одинаковых стилей - стилевого класса redtext и стиля переопределения тега <EM>!
Так что же мы получим в результате?
Рассмотрим сначала последнюю строку приведенного HTML-кода с тегом <EM>. Сначала Web-обозреватель загрузит, обработает и сохранит в памяти внешнюю таблицу стилей. Затем он обработает внутреннюю таблицу стилей и добавит все содержащиеся в ней определения стилей к уже хранящимся во внешней таблице стилей. Это значит, что стили переопределения тега <EM>, заданные в разных таблицах стилей, будут сложены, и результирующий стиль, написанный на языке CSS, станет таким:
EM { color: #00FF00; font-size: smaller; font-weight: bold }
Именно его и применит Web-обозреватель ко всем тегам <EM>, что присутствуют на Web-странице.
Вторая строка HTML-кода, что содержит тег со встроенным стилем, будет обработана так же. Web-обозреватель добавит к считанному из внешней таблицы стилей определению именованного стиля bigtext определение встроенного стиля. Результирующий стиль, если записать его на языке CSS, будет таким:
#bigtext { color: $FFFF00; font-size: large }
И, наконец, самая трудная задача - первая строка HTML-кода. Поскольку оба определения стилевого класса redtext задают один и тот же параметр - цвет текста (атрибут стиля color) - Web-обозреватель поступит так. Он отменит значение этого атрибута, заданное в стиле из внешней таблицы стилей, и заменит его тем, что задано в стиле из внутренней таблицы стилей. Поскольку, с его точки зрения и с точки зрения стандартов CSS, внутренняя таблица стилей - это та рубашка, что "ближе к телу". И тогда результирующий стиль будет таким:
.redtext { color: #0000FF }
Здесь мы столкнулись с тем, что стили разных видов и заданные в разных таблицах стилей имеют разный приоритет. Web-обозреватель руководствуется этим приоритетом, когда формирует в своей памяти окончательные определения стилей.
Теперь познакомимся с правилами, описывающими поведение Web-обозревателя при формировании окончательных стилей. Их еще называют правилами каскадности.
- Внешняя таблица стилей, ссылка на которую (тег <LINK>) встречается в HTML- коде страницы позже, имеет приоритет перед той, ссылка на которую встретилась раньше.
- Внутренняя таблица стилей имеет приоритет перед внешними.
- Встроенные стили имеют приоритет перед любыми стилями, заданными в таблицах стилей.
- Более конкретные стили имеют приоритет перед менее конкретными. Это значит, например, что стилевой класс имеет приоритет перед стилем переопределения тега, поскольку стилевой класс привязывается к конкретным тегам. Точно так же комбинированный стиль имеет приоритет перед стилевым классом.
- Если к тегу привязаны несколько стилевых классов, то те, что указаны правее, имеют приоритет перед указанными левее.
Важные атрибуты стилей
А теперь представим себе следующую ситуацию. Предположим, мы создали стили, приведенные в листинге 7.10.
Листинг 7.10
.redtext { color: #FF0000; font-weight: normal }
EM { color: #00FF00; font-weight: bold }
Значение normal атрибута стиля font-weight задает обычную "жирность" шрифта, т. е. простой, светлый шрифт.
Далее мы поместили на Web-страницу вот такой абзац:
<P><EM CLASS="redtext">Это курсив.</EM></P>
Правила каскадности мы уже рассмотрели, так что можно сразу сказать, что получится в результате. Текст этого абзаца будет выведен обычным шрифтом красного цвета.
Но предположим, будто нам нужно, чтобы весь текст, выделенный тегом <EM>, в любом случае выводился полужирным шрифтом! Что делать? Создавать другой стилевой класс, специально для такого случая?
Совсем не обязательно. Стандарт CSS предоставляет нам замечательную возможность превратить отдельные атрибуты стиля в определении стиля в важные. Параметры, задаваемые важными атрибутами стиля, будут иметь приоритет над всеми аналогичными атрибутами стиля, заданными в других стилях, даже более конкретных. Фактически таким образом мы нарушим правила каскадности стандартными средствами CSS.
Обратим внимание, что важными можно сделать только отдельные атрибуты стиля в определении стиля. Атрибуты стиля, не объявленные важными, все так же будут подчиняться правилам каскадности.
Чтобы сделать атрибут стиля важным, достаточно после его значения через пробел поставить слово !important (пишется слитно, без пробелов между восклицательным знаком и словом "important"). Вот так:
EM { color: #00FF00; font-weight: bold !important }
Теперь текст, выделенный тегом <EM>, всегда будет выводиться полужирным шрифтом, даже если данный параметр переопределен в более конкретном стиле.
Важные атрибуты стиля могут очень пригодиться при создании поведения Web- страницы, которое управляет стилями, привязанными к элементам Web-страницы, в ответ на действия посетителя. Мы столкнемся с этим уже в главе 14, когда будем создавать свое первое полезное поведение.
На этом рассмотрение принципов создания стилей и таблиц стилей можно закончить. Осталось только поговорить о том...
Какие стили в каких случаях применять
Удачно подобранный набор стилей - результат долгих экспериментов. Нам придется изрядно повозиться, прежде чем мы его получим. Но несколько правил, при- веденных далее, помогут нам получить его заметно быстрее.
Прежде всего, следует выделить все правила оформления, которые должны быть применены ко всем Web-страницам и их элементам. К таким правилам относятся параметры шрифта обычных абзацев и заголовков, цвет фона Web-страницы, выравнивание текста, величины отступов и параметры рамки обычных таблиц и пр. В общем, то, что определяет вид всех Web-страниц.
Эти правила преобразуются в общие стили, обычно стили переопределения тегов. Их помещают в одну внешнюю таблицу стилей и привязывают ее ко всем Web- страницам Web-сайта. Такая таблица стилей называется глобальной.
Далее выделяют правила оформления, которые должны применяться к некоторым элементам Web-страниц. Это могут быть параметры шрифта каких-то избранных абзацев (например, предупреждений о чем-то), их фрагментов, параметры гиперссылок, входящих в полосу навигации, и др. Данные правила формируют так, что- бы дополнять полученные ранее, но не перекрывать их полностью, - это позволит сократить размер CSS-кода таблиц стилей.
Так мы получим более конкретные стили, дополняющие созданные ранее. Их мы оформим в виде стилевых классов и комбинированных стилей и поместим все в ту же глобальную таблицу стилей. Также можно поместить их в отдельную таблицу стилей (вторичную), которую привязать только к тем Web-страницам, где они используются; этот подход оправдан только если таких стилей получается слишком много, и нет резона "раздувать" глобальную таблицу стилей.
На следующем этапе мы выделим правила, применяемые только к одному элементу Web-страниц. Это могут быть параметры полосы навигации, заголовка Web-сайта, различных контейнеров, определяющих дизайн Web-страниц (о контейнерах речь пойдет в главе 10). Они также должны дополнять правила, полученные на предыдущих этапах, но не заменять их полностью.
Эти еще более конкретные стили мы оформим в виде именованных стилей - в данном случае это будет наилучшим выбором. И поместим их в глобальную таблицу стилей. Если их получается слишком много, мы также можем поместить их во вторичную таблицу стилей и привязать ее ко всем Web-страницам.
Последний этап - выделение правил, применяемых к совсем небольшому количеству элементов, которые присутствуют только на отдельных Web-страницах, а то и вообще на одной из них. К таким правилам можно отнести параметры очень специфических абзацев, отдельных иллюстраций и таблиц. Не забываем, что и эти правила, по возможности, не должны полностью перекрывать полученные ранее.
Так мы выделим самые конкретные стили. Их можно оформить в виде стилевых классов или именованных стилей. Помещаться они могут в глобальную таблицу стилей или во вторичную таблицу стилей, привязанную только к тем Web-страницам, где должны использоваться.
Что касается внутренних таблиц стилей и встроенных стилей, то в готовых Web- страницах от них рекомендуется отказаться. Как мы помним еще из главы 1, концепция Web 2.0 настоятельно рекомендует разделять содержимое и представление Web-страниц. А внутренние таблицы стилей и встроенные стили нарушают данное правило - о чем мы неоднократно говорили.
Сейчас внутренние таблицы стилей и встроенные стили применяют, в основном, во время экспериментов, чтобы выяснить, как тот или иной стиль влияет на отображение элементов Web-страницы. По завершении экспериментов готовые стили переносят во внешние таблицы стилей и соответствующим образом оформляют.
Так или иначе, конкретные примеры выбора нужной разновидности стиля мы рассмотрим в последующих главах, когда начнем создавать представление для наших Web-страниц. В конце концов, учиться лучше всего на примерах.
Комментарии CSS
В главе 2 мы узнали о комментариях - особых фрагментах HTML-кода, которые не обрабатываются Web-обозревателем и служат для того, чтобы Web-дизайнер смог оставить какие-то заметки для себя или своих коллег. Для этого язык HTML предоставляет специальный тег.
Создавать комментарии позволяет и язык CSS. Более того, с его помощью мы можем формировать комментарии двух видов.
Комментарий, состоящий из одной строки, создают с помощью символа / (слэш) в самом начале строки, которая станет комментарием:
/ Это комментарий
P { color: #0000FF }
Однострочный комментарий начинается с символа / и заканчивается концом строки. Комментарий, состоящий из произвольного числа строк, создают с помощью последовательностей символов /* и */. Между ними помещают строки, которые станут комментарием (листинг 7.11).
Листинг 7.11
/*
Это комментарий, состоящий из нескольких строк.
*/
P { color: #0000FF }
Многострочный комментарий начинается с последовательности символов /* и заканчивается последовательностью */.
Что дальше?
В этой главе мы получили понятие о стилях, таблицах стилей и используемом для их создания языке CSS. Мы разобрались с правилами каскадности и выяснили, какие стили в каких случаях следует применять.
В следующей главе мы приступим к изучению языка CSS. Мы начнем с самых простых атрибутов стилей - тех, что задают правила оформления шрифта. И наконец- то начнем создавать представление наших Web-страниц.
ГЛАВА 8. Параметры шрифта и фона. Контейнеры
В предыдущей главе мы познакомились со стилями и таблицами стилей CSS, с помощью которых создается представление Web-страниц. Мы изучили четыре разно- видности стилей и две разновидности таблиц стилей и выяснили, как их правильно применять. В этой главе мы начнем изучать возможности языка CSS. Сначала рассмотрим атрибуты стилей, задающие параметры шрифта и фона элементов Web-страниц. Затем мы изучим новый элемент Web-страницы - встроенный контейнер - и соответствующий ему HTML-тег, который нам в дальнейшем весьма пригодится. Заметим сразу, что все атрибуты стиля, описанные в этой главе, применимы к любым элементам Web-страниц - и блочным, и встроенным. Есть, правда, одно исключение, о котором мы предупредим особо.
Параметры шрифта
Начнем с атрибутов стиля, задающих параметры шрифта, которым набран текст. Ведь текст на Web-страницах - всему голова.
Атрибут стиля font-family задает имя шрифта, которым будет выведен текст:
font-family: <список имен шрифтов, разделенных запятыми>|inherit
Имена шрифтов задаются в виде их названий, например, Arial или Times New Roman. Если имя шрифта содержит пробелы, его нужно взять в кавычки:
P { font-family: Arial }
H1 ( font-family: "Times New Roman" }
Если данный атрибут стиля присутствует во встроенном стиле, кавычки заменяют апострофами:
<P STYLE="font-family: 'Times New Roman'">
Если указанный нами шрифт присутствует на компьютере посетителя, Web- обозреватель его использует. Если же такого шрифта нет, то текст выводится шрифтом, заданным в настройках по умолчанию. И наша Web-страница, возможно, будет выглядеть не так, как мы задумывали. (Впрочем, шрифты Arial и Times New Roman присутствуют на любом компьютере, работающем под управлением Win- dows.) Можно указать несколько наименований шрифтов через запятую:
P { font-family: Verdana, Arial }
Тогда Web-обозреватель сначала будет искать первый из указанных шрифтов, в случае неудачного поиска - второй, потом третий и т. д. Вместо имени конкретного шрифта можно задать имя одного из семейств шрифтов, представляющих целые наборы аналогичных шрифтов. Таких семейств пять: serif (шрифты с засечками), sans-serif (шрифты без засечек), cursive (шрифты, имитирующие рукописный текст), fantasy (декоративные шрифты) и monospace (моноширинные шрифты):
H2 { font-family: Verdana, Arial, sans-serif }
Особое значение inherit указывает, что текст данного элемента Web-страницы должен быть набран тем же шрифтом, что и текст родительского элемента. Говорят, что в данном случае элемент Web-страницы "наследует" шрифт от родительского элемента. Это, кстати, значение атрибута стиля font-family по умолчанию. Атрибут стиля font-size определяет размер шрифта:
font-size: <размер>|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit
Размер шрифта можно задать в абсолютных и относительных величинах. Для этого используется одна из единиц измерения, поддерживаемая CSS (табл. 8.1).
Таблица 8.1. Единицы измерения размера, поддерживаемые стандартом CSS
| Название | Обозначение в CSS |
|---|---|
| Пикселы | px |
| Пункты | pt |
| Дюймы | in |
| Сантиметры | cm |
| Миллиметры | mm |
| Пики | pc |
| Размер буквы "m" текущего шрифта | em |
| Размер буквы "x" текущего шрифта | ex |
| Проценты от размера шрифта родительского элемента | % |
Обозначение выбранной единицы измерения указывают после самого значения:
P { font-size: 10pt } STRONG { font-size: 1cm } EM { font-size: 150% }