• A~k фс ЕЧ>еФ
·~~
• DIY Proiecls
Рис. 3.4. Простейшая диаграмма в виде дерева, представляющая
структуру веб-страницы
На рисунке все тегивеб-страницы-nотомки (производные) <html>. Тег может
н роисходить от множества других. Например, первый тег <а> диаграммы является
IIOTOMKOM <strong>, <р>, <body> И <ht1'(1l>.
Этот стиль говорит: ~Нужно отформатировать все ссылки (а), которые расположены
в элементах списка (1 i ), исnользуя шрифт Arial~ . Вообще, наследуемые
селекторы могут включать болеедвух элементов. Ниже nредставлены nравильные
определения для тегов <а>, находящихся в маркированных списках (см. рис. 3.4):
u 1 1 i а
body 1 i а
html li а
html body u1 1i а
Псевдоклассы и nсевдоэлементы 75
ПРИМЕЧАНИЕ----------~-------------------------------------Несмотря
на то что лучше стараться исnользовать как можно более короткие селекторы nотомков, одна
из nричин, по которой удобно исnользовать доnолнительные селекторы nотомков, - возможность
замены нескольких различных стилей, одновременно форматирующих один и тот же тег. Команды
могут nереопределить стили классов или тегов. Подробнее об этом читайте в следующей главе.
Все четыре селектора, представленные выше, имеют один и тот же эффект, что
лишний раз демонстрирует отсутствие необходимости полностью онисывать всех
предков тега, который вы хотите отформатировать. Например, во втором примере
(body l i а) определение ul не требуется. Этот селектор вынолняет свои функции,
если есть <а>, являющийся потомком <l i >. Его одинаково просто нримешпь как
к <а>, расположенному внутри <em>, так и к <а> в <strong> или <l i >и т. д.
В любом случае вы не ограничены только селекторами типов. Можно комбинировать
различные типы, чтобы ссылки были окрашены в желтый цвет, когда они·
находятся в тексте введения (которое вы определили стилевым классом i ntro ).
Этого можно добиться с помощью следующего селектора:
р. intro а { color: yellow: }
ПРИМЕЧАНИЕ-------------------------------------------------Нужно
nрименить данный стиль ко всем ссылкам (а)- nотомкам абзаца (р), относящегосяк классу
с именем intro. Обратите внимание, что между р и intro нет nробелов. Это говорит CSS о том, что
класс intro должен сочетаться конкретно с тегом <р>.
Если вы добавите нробел, получится совсем другой эффект:
р .1ntro а { color: yellow: }
Данная корректировка селектора, на первый взгляд весьма незначительная,
сильно повлияет на область действия стиля. Будут выбраны <а>, расположенные
внутри любого тега класса . i ntro, который сам должен являться Iютомком <р>.
Если из названия селектора убрать имя тега-нредка (в данном случае р ), то нолучится
более гибкий стиль:
.1ntro а {color: yellow: }
Этот селектор указывает на любой тег <а>, расположенный внутри других тегов-
<div>, <hl>, <tаЫе> и т. д., обозначенных классом . intro.
Селекторы потомков - очень мощное оружие в арсенале CSS. Периодически
в книге будут описаны другие способы их использования, а в гл. 15 вы найдете
раздел, посвященный эффективным методикам их применения.
Псевдоклассы и псевдоэлементы
Иногда требуется выбрать фрагмент неб-страницы, в котором вообще нет тегов, но
в то же время его достаточно просто идентифицировать. Это может быть первая
строка абзаца или ссылка, на которую наведен указатель мыши. CSS предоставляет
для этих целей псевдоклассы и псевдоэлемепты.
76 Глава 3. Селекторы: оnределение элементов стилиэации
Стилизация ссылок
Существует четыре псевдокласса, которые позволяют форматировать ссылки,
в зависимости от того, какое действие над ними выполняет посетитель веб-страницы.
О а: 1 i nk - обозначает любую ссылку, по которой посетитель веб-страницы еще
не переходил, даже если на нее не наведен указатель мыши. Это обычный стиль
непосещенных гиперссылок.
О а: vi s i ted - является ссылкой, по которой посетитель веб-страницы уже переходил.
Она сохраняется в истории браузера. Можно разработать для этого типа
стиль, отличный от обычного, чтобы сказать посетителю, что он уже посещал
эту страницу.
О а: hover - позволяет изменять вид ссылки, на которую посетитель навел указатель
мыши. Вы можете добавить визуальные эффекты трансформации (переходов),
которые служат для улучшения визуального восприятия, например,
кнопки паиели навигации.
О Кроме того, можно использовать псевдокласс : hover для применеимя стилей
к элементам веб-страниц, отличным от ссылок. Например, вы можете использовать
его для выделения фрагмента текста, заключенного в теги <р>
или <di v>, каким-либо стилевым эффектом в тот момент, когда посетитель
веб-страницы перемещает указатель мыши над этим фрагментом. В данном
случае вместо использования а: hover для добавления эффекта наведения указателя
на ссылку вы можете создать стиль под названием р: hover, добавляющий
эффект наведения указателя на абзац. А если вы хотите добавить стиль к тегам,
применяя к ним специальный класс high1 ight, создайте стиль под названием
hi gh 1 i ght: hover.
ПРИМЕЧАНИЕ------------------------------------------------
8 Internet Explorer б и более ранних версиях браузера nсевдокласс :hover работает только со ссылками.
Как решить эту nроблему с nомощью JavaScript-кoдa, читайте чуть ниже, во вреэке «Информация
для оnытных nольэователей». (Если nри исnольэовании IE 7 страница не располагает nравильным
DOC1YPE, :hover также не будет работать ни с чем, кроме ссылок.)
О а: acti ve- позволяет определить, как будет выглядеть ссылка во время выбора
· ее посетителем веб-страницы. Другими словами, это стиль во время щелчка
кнопкой мыши.
В гл. 9 описывается, как спроектировать дизайн ссылок при использовании селекторов
для хорошего восприятия посетителями сайта (например, элементов навигации
для перехода по разделам сайта и т. д.).
ПРИМЕЧАНИЕ-----------------------------------------------Если
вы не собираетесь эаниматься nрофессиональным веб-диэайном, то не утруждайтесь чтением
последующих разделов о селекторах. Многие специалисты вообще никогда ими не nольэуются. Все,
что вы уже изучили, -селекторы тиnов, классов, nотомков и т. д. - nозволит создавать красивые,
функциональные, легко обновляемые, профессиональные с точки зрения диэайна сайты. Если вы
готовы к nрактической части, то nереходите сразу к обучающему уроку данной главы. Вы можете
закончить изучение теоретического материала nозже, в любое удобное для вас время.
Псевдоклассы и nсевдоэлементы 77
Стилизация фрагментов абзаца
На этапе становления Интернета не стоял вопрос дизайна страниц и сайтов, никто
и не думал о том, что они должны выглядеть красиво. Теперь же это важно. В CSS
имеется ____________два псеодаэлемента- : fi rst-letter и : fi rst-1 ine. Их использование обес,
Q_ечит вашим неб-страницам изящное оформление, которым печатные издания
обЛадают уже на протяжении многих столетий.
Псеодаэлемент : fi rst- l etter позволяет создавать буквицу - начальный символ
абзаца, который выделяется из остального текста, как в начале книжной главы.
Стилизация первой строки с помощью псеодаэлемента : fi rst- l i ne отличным
от основного абзаца цветом притягивает посетителей неб-страницы изяществом
оформления и легкостью визуального восприятия содержимого сайта (в гл. 6 читайте
все о форматировании текста, там же вы найдете подробное описание этих
двух псеодаэлементов ).
Дополнительные псевдокпассы и псевдоэлементы
В руководстве по языку CSS определены еще несколько мощных псевдоклассов,
псеодаэлементов и селекторов. К сожалению, все еще популярный на сегодняшний
день браузер- Internet Explorer 6 для Windows - не распознает их. По этой причине
большинство серверов Интернета не смогут оценить дизайн неб-страниц с использованием
этих элементов (по крайней мере, пока их Internet Explorer не обновится
до версии 8 или не будет использоваться браузер Firefox или Safari). Вы можете
обойти данную проблему, используя кoдjavaScript, как описано во врезке «Информация
для опытных пользователей~ чуть ниже.
:before. Псеодаэлемент : before выполняет такую функцию, которая не присуща
ни одному селектору: он позволяет добавлять сообщение, предшествующее
определенному элементу неб-страницы. Допустим, вы хотите поместить слово
ПОДСКАЗКА! перед абзацами, чтобы визуально выделить их. Вместо многократного
набора текста в НТМL-коде вашей неб-страницы вы можете сделать это с помощью
псевдоэлемента-селектора : before. Кроме того, такое решение позволит уменьшить
объем кода неб-страницы. Так, если вы решите изменить сообщение с ПОДСКАЗКА!
на ЭТО НУЖНО ЗНАТЬ, можно быстро отформатировать его на всех страницах сайта
путем изменения текста один раз в таблице стилей. Однако негативная сторона
состоит в том, что сообщениеневидимо для браузеров, которые не понимают CSS
или псеодаэлемента : before.
Для работы псеодаэлемента нужно создать класс (скажем, . t i р) и применять
его к абзацам, которым должно предшествовать данное сообщение, например
<р cl ass="tip">. Добавьте текст сообщения в таблицу стилей:
р. t i р: before { content : "ПОДСКАЗКА! " }
Всякий раз, когда браузеру встречается класс . tip внутри тега <р>, он будет
добавлять перед абзацем сообщение ПОДСКАЗКА!.
Текст, который добавляется этим псевдоэлементом-селектором, еще называют
сгенерированным содержимым, поскольку браузер создает его моментально. В исходном
программнам коде НТМL-страницы этой информации не содержится.
78Глава 3. Селекторы: определение элементое стмлиэации
Браузеры все время генерируют свое информационное содержимое, например
маркеры в маркированных списках или цифры в нумерованных. Чтобы понять, как
браузер отображает все это, можно даже использовать селектор : before.
Ни IE 6, ни IE 7 не понимают СSS-свойство content, так что вы, возможно, не
увидите повсеместного использования псевдоэлементов :before и :after, описанного
далее. Однако Internet Explorer 8, как и другие распространенные браузеры,
поддерживает это свойство, поэтому в гл. 16 приведены инструкции по его использованию.
ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ
Доnжен nи я обращать внимание на nробnемы с IE 67
Если вы работаете веб-ди3айнером, то на вашем комnьютере,
вероятно, установлена nоследняя обновленная
версия Firefox, Opera, Safari или IE. Но большинство
nользователей все еще работают с lntemet Explorer 6,
не редко называемым бедой длR веб-дизайна. В соответствии
с информацией от комnании Net Applications
(на май 2009 года), порядка 17% пользователей заходили
на сайты с браузера IE б. И хотя эта доля nродолжает
уменьшаться, IE 6 все еще будет востребованным
в ближайшее время.
Некоторые люди не желают обновnять nрограммное
обесnечение и продолжают nользоваться IE 6 даже
nри наличии новых версий. Другие же ограничены
программным обеспечением, установленным на их
рабочем месте, и не имеют возможности заменить
его.
Таким образом, проектируя сайт для широкой аудитории,
вы должны учитывать этот фактор, только
если сайтом не будут nользоваться исключительно
nродвинутые люди, часто обновляющие версии своих
браузеров.
Есть несколько лроблем IE 6, которые способны целиком
исnортить вид веб-страницы при прJ>смотре
в этом браузере, - в некоторых случаях содержимого
страниц nросто не видно или оно неnригодно для
чтения. Конечно, вы захотите устранитьэти проблемы,
и в книге будет описано, как зто сделать.
Ваш сайт не обязательно должен выглядеть одинаково
вiЕ 6 и других браузерах. Из-за незначитеnьных
различий браузеров вы часто можете увидеть, что визуально
одна и та же страница выглядит по-разному
в Flrefox, Safari или IE.
Вашей главной цеnью должна быть гарантия того, что
у каждого пользователя будет доступ к содержимому
сайта. Если на него можно зайти с браузера IE 6, нормально
читать, скачивать материалы без каких-либо
проблем, значит, вы сnравились со своей работой. И уже
после этого вы можете побесnокоиться о том, 1fТ06ы сайт
выглядел максимально одинаково во всех браузерах.
С помощью CSS вы можете делать много интересных
вещей, которые не будут работать в IE 6. Например,
селектор . focus nозволяет изменить стиль текстового
поля в форме, когда пользователь переходит к этому
nолю. Это отличный способ выделить поле для ввода
данных. Однако IE 6 и 7 не понимают этот селектор.
Вы можете использовать JavaScript, чтобы устранить
эту nробnему, или просто ничего не делать, nроигнорировав
т различия. Ведь если кто-то nосетит ваш
сайт с браузера IE 6, он все равно сможет воспользоваться
текстовым полем.
Свободно nрименяйте другие новшества CSS, работающие
в современных версиях браузеров. Другими словами,
если ваш сайт работает в IE 6, но выглядит еще
лучше в IE 8, Firefox, Safari и Opera, то все нормально.
:after. Псевдоэлемент-селектор : before добавляет сгенерированное содер~имое
перед определенным элементом, а : after- nосле. Например, им вы можете пользоваться
для добавления заключительных кавычек после процитированного мате·
риала.
Псевдокпассы и псевдоэлементы 79
ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ
Поnьзуйтесь обновnенной версией браузера
lntemet Explorer 6 уже устарел и не расnознает всех новшеств
CSS, причем даже не самых n001едних. Но вам не
nридется отказываться от всех интереоtых селекторов,
описаннь1х на этих страницах,- · before, after,
; hover. Всего лишь с небольшой помощью JavaScript
и nарочкой нововведений вы сможете наnисать сценарии,
которые научат IE обрабатывать этм селекторы.
Например, CSSHOVER научит, как обращаться с селекторами
focus и · hover (nрименительно к остальным
элементам веб-страниц, отличным от ссылок).
Вы можете nрочитать об этом по адресу www.xs4all.
nl/~petemed/csshover.html. Там же вы найдете небольшой
сценарий, уnрощающий создание основанных
на CSS раскрывающихся навигационных меню,
о которых вы можете nрочитать на сайте http://
sperling.com/examples/menuh.
Вдобавок, вы можете исnользовать библиотеку JavaScript
jQuery {www.jquery.com), чтобы, no существу, заста-
вить IE 6 nонимать любой селектор. Техника заключается
в создании двух стилей: nервого дл11 IE 7, Firefox
и других браузеров со встроенной nоддержкой; и второго-
класса стилей - с теми же свойствами CSS.
Вы можете исnользовать jQuery для динамического
nрименения класса в IE 6. Одно из существенных достоинств
jQuery заключается в возможности выбора любого
элемента на странице посредством исnользования
селектора CSS и nрименения класса к этому элементу.
Преимущества использования усовершенствованных
селекторов, например селекторов атрибутов, состоит
в отсутствии необходимости вносить какие-либо изменения
в HTML, чтобы все работало корректно. Так,
вам не нужно добавлять класс ко всей связке тегов
HTML Благодаря ]Query и небольшому куску кода вь1
добьетесь той же легкости использования и для IE 6.
Чтобы узнать больше об этой технике, зайдите на сайт
http:/ /somedirection.com/2007/06/10/using-jqueryto-
avoicl-dassitls·in·leб.
:first-child.Псевдоэлемент : fi rst-chi 1 d позволяет вам выбрать и отформатировать
первый из множества дочерних элементов, подчиненных родительскому.
Например, у тега <u 1 >, создающего маркированный список, может быть сколько
угодно дочерних элементов (на рис. 3.4 он имеет три подчиненных элемента списка
<1 i > ). Чтобы отформатировать только первый из них nолужирным шрифтом, можно
создать следующий стиль:
1i :first-chi1d { font -wei ght : bo1d: }
Поскольку селектор : fi rst -chi 1 d описывает лишь название дочернего элемента,
этот стиль будет применен к любому тегу <1 i>, который является первым подчиненным
элементом любого другого тега, а не тол~;>ко <u 1 >. Мы знаем, что элементы
списка всегда расположены внутри его. Селектор 1i :first-chi 1d воздействует на
все типы списков веб-страницы: маркированные и нумерованные. С остальными
он ведет себя по-другому. В примере на рис. 3.4 р: first-chi 1d никак не будет работать:
<р> - не первь1й дочерний элемент <body>.
•Родственные>) отношения между родительскими и дочерними НТМL-элементами
могут изменяться всякий раз, когда вы редактируете веб-страницу, поэтому
трудно предугадать, как поведет себя селектор : f i rst-chi 1d. Кроме того, он вообще
не работает в Internet Explorer 6 или более ранних вер~иях браузера - ещ~ одна
причина, по которой не рекомендуется пользоваться этим селектором.
:focus.Псевдокласс : focus функционирует __________________подобно : hover, с той лишь разницей,
что : hover применяется, когда посетитель перемешает указатель мыши над ссылкой,
80Глава 3. Селекторы: определение элементов стилизации
а : focus - когда нажимает клавишу табуляции или щелкает кнопкой мыши на
текстовом поле (то есть требуется акцентировать внимание посетителя на конкретном
(текущем) элементе неб-страницы). Щелчок на заполняемой форме программисты
называют фокусировкой. Это единственный способ для дизайнера неб-страницы
узнать, на чем сосредоточено внимание посетителя, с каким элементом
страницы он имеет дело.
Селектор : focus полезен в основном для обеспечения обратной связи с посетителями
сайта. Например, для смены цвета фона заполняемого поля формы, чтобы
указать, где именно нужно вводить данные ( однострочные текстовые поля, поля
ввода пароля, многострочные поля <texta rea> - везде можно использовать : focus ).
Этот стиль задает светло-желтый цвет любому текстовому полю, на котором посетитель
щелкает кнопкой мыши или в которое переходит с помощью табуляции:
input:focus { background-color: #FFFFCC; }
Селектор : focus задает стилевой эффект только на время, пока элемент находится
в фокусе. Когда посетитель переходит к другому полю или в другое место
неб-страницы, фокус, как и весь стилевой эффект CSS, исчезает. К сожалению, ни
IE 6, ни IE 7 не поддерживают этот селектор, однако вы все же можете использовать
его для создания визуальных эффектов в других браузерах (IE 6 и IE 7 просто
не узнают об этом).
ПРИМЕЧАНИЕ-----------------------------------------------Иэучение
правильного написания селекторов иногда похоже на изучение иероглифов. Чтобы перевести
селекторы на общепонятный язык, посетите веб-страницу http://gallery.theopalgroup.com/
selectoracle/. Этот информационный ресурс научит правильно определять селекторы и понимать,
к каким элементам веб-страниц они применяются.
Другие селекторы
В руководстве языка CSS 2 описывается несколько мощных селекторов, которые
обеспечивают еще более тонкое управление дизайном неб-страниц по сравнению
с уже изученными. Они также не работают в браузере Internet Explorer 6 и его более
ранних версиях (но вы можете воспользоваться языкoмjavaScript, как это было
описано во врезке <<Информация для опытных пользователей~).
Селекторыдочернихэлементов
Подобно применению селекторов потомков, описанных ранее, в CSS можно форматировать
вложенные элементы других тегов с помощью селектора дочерних элементов,
который использует дополнительный символ - угловую скобку(>) -для
указания отношения между двумя элементами. Например, body > hl выбирает любой
тег <hl>, дочерний по отношению к <body>.
В отличие от селектора потомков, который применяется ко всем потомкам
(то есть вложенным элементам), селектор дочерних элементов позволяет определить
конкретные дочерний и родительский элементы. На рис. 3.5 вы можете видеть
Другие селекторы 81
два тега <h2>. Использование body h2 привело бы к выбору обоих, так как они являются
вложенными по отношению к <body>. Только второй теr- дочерний элемент
<body>. Первый <h2> непосредственно вложен в <di v>, который и является родительским.
Поскольку у <h2> различные родительские теrи, то для тоrо, чтобы добраться
до каждого из них отдельно, можно использовать селектор дочерних элементов.
Для выбора только второго теrа <h2> используем body > h2. Если первый теr <h2>,
то div > h2.
