CSS
Существует 3 способа работы со стилями в HTML. Можно указывать стили с помощью атрибута style в тегах р, div и др., можно описывать стили в заголовках, а можно использовать внешний файл, описывающий все стили.
Последний вариант более предпочтителен, так как все страницы одного сайта желательно создавать в едином стиле. Если описание находится в отдельном файле, к которому обращаются остальные страницы, то это гарантирует единообразие дизайна. Любые изменения в файле, в котором хранится описание всех стилей, приводят к изменениям всего сайта.
В листинге 1.62 показывается, как можно подключить файл со стилями.
Листинг 1.62. Таблица стилей во внешнем файле
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML>
<HEAD>
<TITLE>Moя домашняя страница</Т1ТlЕ>
<LINK rel="stylesheet" href="my_style.css" type="text/css">
</HEAD>
<BODY>
<Н1>Моя домашняя страница</Н1> <P>Ha этой странице вы найдете информацию обо мне и моих друзьях.
</BODY> </HTML>
Перед тем как непосредственно приступить к описанию CSS, рассмотрим комментарии. Эти элементы в CSS начинаются с символов / * и заканчиваются символами * /. Они могут находиться в любом месте таблицы. Использовать комментарии очень удобно: они помогут вам быстро разобраться, за какую часть документа отвечает тот или иной CSS-код.
Пример CSS-кода с комментарием следующий:
/* Цвет основного заголовка - синий */ H1 { color: blue }
Селекторы
Селектором в CSS будем считать названия тегов, для которых задаются свойства. Рассмотрим, как можно задать одни и те же свойства разным тегам документа.
Группировка
Для задания разным тегам документа одних и тех же свойств в CSS используется группировка. Селекторы, то есть теги, можно сгруппировать в список, разделив запятыми.
В следующем примере разным тегам задается одно свойство:
Hi { color: red } Н2 { color: red } НЗ { color: red }
Этот пример можно значительно упростить, используя правило группировки:
HI, H2, НЗ { color: red }
Как отмечалось выше, при группировке селекторы разделяются запятыми. Селекторы потомков
Иногда необходимо задать свойства тегу, который располагается внутри другого тега, то есть является так называемым потомком. Селектор потомков состоит из двух и более селекторов, разделенных пробелом.
Предположим, HTML-документ имеет следующий код:
<Н1>0чень <ЕМ>важный</ЕМ> заголовок</Н1>
Теперь допустим, что вы хотите изменить свойства тега <Н1> и текста «важный». Если вы будете использовать CSS-код, приведений ниже, то повлияете на все теги <ЕМ> на странице (а этого вам не нужно):
H1 { color: red }
ЕМ { color: blue }
Чтобы повлиять на свойства текста «важный», который находится внутри тега <ЕМ>, а тот, в свою очередь, внутри тега <Н1>, нужно использовать следующий CSS-код:
H1 EM { color: blue }
Обратите внимание, что, в отличие от группировки, при обращении к потомкам запятые не ставятся. Количество тегов, которые можно записать потомками, неограниченно, например:
BODY DIV P SPAN { color: green }
Если в вашем документе есть тег <SPAN>, который находится внутри тега <р> который, в свою очередь, находится внутри тега <DIV>, то текст в данном теге будет зеленым. В столь длинных описаниях тег <BODY> можно опускать, так как
все теги и так находятся внутри тега <BODY>.
Если при разработке таблицы стилей вы еще точно не знаете, какой тег будет размещаться внутри какого, то можете воспользоваться знаком звездочки. Учтите, что с обеих сторон звездочки обязательно должны находиться пробелы.
Пример, представленный выше, можно перезаписать так:
BODY * SPAN { color: green }
Однако помните, что текст будет зеленым, даже если тег <SPAN> просто находится внутри тега <DIV>. Другими словами, звездочкой считается любой набор селекто ров и их потомков. ~~
Сестринские селекторы
Сестринскими тегами называются теги, которые следуют друг за другом. Предположим, у вас есть абзац, который имеет атрибут class со значением first. Если за ним следует еще какой-то абзац, то размер вертикального пространства между| ними можно уменьшить, используя такой код:
P.first + P {margin-top: -5mm }
Селекторы атрибутов
CSS позволяет создавать правила, сопоставляемые тегам с атрибутами, определе ными в исходном коде HTML-документа. Селекторы атрибутов могут сопостаЙ ляться в четырех случаях:
[att] — если для элемента установлен атрибут att, независимо от значен» этого атрибута;
[att=val] — если значение атрибута att данного элемента в точности равнС
val;
[att~=val ] — если значением атрибута att данного элемента является списо| слов, разделенных пробелами, одно из которых равно val;
[ att | =val ] — если значением атрибута att элемента является список разде-| ленных дефисом слов, начинающийся со слова val. Сопоставление всегда на-: чинается с начала значения атрибута.
бы разобраться с этим свойством, рассмотрим несколько примеров.
- Правило CSS сопоставляется всем элементам тега <Р>, для которых описывается атрибут align, независимо от его значения:
p[align] { color: blue;}
- Селектор, то есть правило CSS, сопоставляется всем элементам SPAN, у которых значение атрибута class равно example:
SPAN[class=example] { color: blue; }
Это значит, что это правило не описывает сам класс и тег <Р> с этим классом не будет отображать синий цвет.
Для обращения к нескольким атрибутам элемента или для многократного обра щения к одному и тому же атрибуту можно использовать несколько селекторов атрибутов. В этом примере селектор сопоставляется всем элементам TABLE, у ко торых значение атрибута width равно 90%, а значение атрибута height — 50%: TABLE[width="90r][height="50l"] { color: blue; }
Следующие селекторы иллюстрируют различия между «~=» и «=». Первый селектор сопоставляется значениям right или left атрибута align. Второй селектор будет сопоставляться только в том случае, если значение атрибута href равно http : //www. yoursite . com/:
P[align~="right left"]
A[href="http://www.yoursite.com/"]
Приведенное ниже правило скрывает все элементы, атрибут lang которых имеет значение f r , то есть элементы с текстом на французском языке:
*[LANG=fr] { display : none }
CI Следующее правило сопоставляется тем значениям атрибута lang, которые начинается со значения ru, включая ru, ru-RU и ru-UA: *[LANG|="ru"] { color : red }
Селекторы классов
В таблицах стилей, используемых с HTML-документами, при сопоставлении значениям атрибута clas s вы можете использовать точку («.») как альтернативу условному обозначению «~=». Таким образом, выражения DIV. value и DIV[class~=value] имеют одинаковый смысл. Значение атрибута должно находиться непосредственно после точки.
например, для всех элементов со значением class=test информацию о стиле можно определить следующим образом:
*.test { color: red } /* все элементы с class=test */ или сокращенно:
.test { color: red } /* все элементы с class=test */
Рассмотрим еще один пример. Следующее правило назначает стиль только элементу H1 со значением class=test:
HI.test { color: green } /* элемент HI с class=test */
Благодаря этому правилу в следующем примере при первом появлении элемент H1 не будет отображаться красным цветом, а при втором появлении будет:
<Н1>Не зеленый цвет</Н1>
<Н1 cl ass="test">HacTOflLqMii зеленый цвет</Н1>
Для сопоставления перед каждым значением атрибута class, подмножество которых записано в произвольном порядке, следует поставить точку.
Например, следующее правило сопоставляется любому элементу Р, атрибуту class которого в качестве значения назначен список разделенных пробелами значений, включающий слова test и marine:
P.test.marine { color: green }
Это правило сопоставляется, если, например, для тега <Р> задается атрибут class="Test blue aqua marine", и не сопоставляется, если задается атрибут
class="test blue"
ID-селекторы
Атрибут ID позволяет назначить идентификатор одному экземпляру элемента в дереве HTML-документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. ID-селектор содержит символ «#», непосредственно за которым следует значение атрибута ID.
Например, следующий ID-селектор сопоставляется элементу HI, значение атрибута ID которого равно chapter7:
Hl#chapter7 { text-align: center }
В примере из листинга 1.63 правило стиля сопоставляется элементу, у которого значение атрибута ID равно «first». Это значит, что данное правило будет сопоставляться элементу Р.
Листинг 1.63. ID-селектор сопоставляет правило любому тегу
<ТIТLE>Глава 7</ ТIТLE > <STYLE type="text/css">
*#first { letter-spacing: 0.3em }
</STYLE> </HEAD> <BODY>
<p id=z98y>TeKCT абзаца</Р>
</BODY>
Однако в примере из листинга 1.64 это правило стиля будет сопоставляться только элементу H1, у которого значение атрибута ID равно first. В этом примере данное правило не сопоставляется элементу Р.
Листинг 1.64. ID-селектор сопоставляет правило только тегу H1
<HEAD>
< ТIТLE >Глава 9</TITLE> <STYLE type="text/css">
Hl#first { letter-spacing: 0.5em } </STYLE>
</HEAD>
<BODY>
<P id=first>TeKCT абзаца</Р> </BODY>
Отметим, что ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов.
Псевдоклассы и псевдоэлементы
В CSS стиль обычно прикрепляется к элементу в зависимости от его местонахождения в дереве HTML-документа. В большинстве случаев эта простая модель оказывается приемлемой, но иногда из-за особенностей структуры дерева документа она не позволяет воплотить некоторые действия. Например, в HTML нет элемента, который указывает на первую строку абзаца, и поэтому нет простого селектора CSS, который смог бы на нее указывать.
В CSS вводится понятие о псевдоклассах и псевдоэлементах, позволяющих осуще ствлять форматирование на основании информации, не включенной в дерево HTML-документа. Сразу отметим, что при задании имен псевдоклассов и псевдо-элементов учитывается регистр.