(but: not: inside t:he <div>)
• This list item contains а sub-list
о Sub-i tem 1
o Sub-item 2
о Sub- item 3
• Item 2 of the main list
• Item 3 of the main list
Рис. 3.5.Диаграмма в виде дерева (справа) пока3ывает отношения между НТМL-тегами (слева)
ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ
СоJДание сnисков
Когда нужно использовать селекторы дочерних элементов?
Вы можете сказать, что уже 3Ноете достаточное
количество селекторов для выборки практически
любого элемента веб-строницы. Ток для чего
нужны остальные селекторы?
На самом деле существуют некоторые сложности дизайна
ве6-араниц, rде селекторы дочерних элементов
nросто незаменимы и никакме друrме не смоrут с тм
аtравитъся. Такая ооуация IICijle'laeYOI на боnьwинсrве
caii'ro8. в 1110бом мар1<Ир08аНН0М <JIIO<I!~ <W4Н
ИЛИ не<КОЛЬКО nу11К'10В-:wмetfi08 (JIИ(Xa ((М. рис. 35).
Здесь можно иаtользоаать селекrоры дочернихэnеменrов,
чтобы визуаnьно уnорядочить Дi1ННЫе в кareropмRX
(nунктах) и nодкатеrорi!Ях {nодпунктах). ВЫ формаtмруете
элементы nepвoro уров1111 сnиска одним сnособом,
82 Глава З. Селекторы: определение элементов стилизации
ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ
а второго- друrим. Содержимое, Представленное та!<Им
способом, выглядит четко, профессионально и читаемо.
Сначала создайте класс дnя самого верхнего - внешнего-
уровня вложенности элементов списка и назовите
его, скажем, .ma1nL 1st. Для первого уровня
вы можете использовать шрифт saпs-seгif, имеющий
немного больший размер по сравнению с основным
текстом _________________веб-страницы, возможно, в другом цвете.
Последующие категории могут быть представлены
Times дnя лучшего восприятия. При большом объеме
текста стилизация каждого уровня Подкатегорий с небольшим
отличием позволяет nосетителям веб-страниц
визуально ориентироваться в материале.
Теперь примените стилевой класс . ma1 nL 1st к первому
тery <ul> <ul class•"mai nllst">. Затем используйтеселектордочернихэлементов(
ul .mainL; st > 1 i)
дnя выбора элементов списка только первого уровнR
и придания пунктам необходимого форматирования.
Данный стиль будет применен только к тегу <1 i>,
являющемуся дочерним по отношению к <u 1 > и принадлежащему
классу .ma 1 nL i st. Все остальные подкатегори
и < l1> не будут затронуты. Наnример, чтобы
стилизовать теги < l 1> первого вложенного списка,
исnользуйте следующий селектор: u1 .ma1nL 1st >
11 > u1 > 1 i (он осуществит выборку маркированных
элементов списков во всех категориях и подкатеrориях).
Селекторысестринскихэлементов
Родительско-дочерние отношения - н~ единственная форма родственных связей
в дереве HTML. Иногда требуется выбрать тег, относящийся к группе элементов
одного уровня, находящихся в непосредственной близости друг от друга, с общим
родителем. Тег, следующий за несколькими другими , в HTML называется сестрuн.
С/ШМ. На рис. 3.5 <div>- сестринский no отношению к <hl>, а <р>- по отношению
к <h2> и т. д.
Используя селектор сестринских элементов, можно придать первому абзацу
раздела, идущему сразу за заголовком , форматирование, отличное от следующего
далее по тексту. Предположим, вы хотите удалить отступ, который автоматически
появляется перед абзацем <р>, чтобы между заголовком и тегом не было никакого.
промежутка. Или хотите придать абзацу, как небольшому вводному описанию,
другой цвет и размер шрифта.
Селектор сестринских элементов использует знак + для соединения одного
элемента с другим. Так, чтобы выбрать все первые абзацы, следующие за любым
<h2>, используйте h2 + р (пробелы необязательны, так что h2+p также будет прекрасно
работать). Последний элемент в селекторе (в данном случае- р)- тег,
который нужно отформатировать, но только при условии, что он соседствует
с <h2>.
Селекторыатрибутов
CSS обеспечивает возможность форматирования тегов на основе выборки любых
содержащихся в них атрибутов . Например, вы хотите оформить в рамку некоторые
важные изображения веб-страницы, при этом не форматируя логотип, кнопки
и другиенебольшие изображения , в которых также есть теГ <img>. Вы должны понимать,
что если у всех рисунков есть описание с атрибутом ti t le, то это способ-
Другие селекторы 83
ствует использованию селектора для выделения из массы изображений только
нужных.
ПРИМЕЧАНИЕ----------------------------------------~-----Применение
атрибутов title в HTML- отличный способ добавить подсказки (всплывающие сообщения)
к ссылкам и изображениям веб-страницы. Это также является одним иэ способов краткого
описания содержания для поисковых серверов. Узнать об этом больше вы моЖете по адресу http://
weЬdesigп.aЬout.com/od/htmltags/a/aa101095.htm.
С помощью селекторов атрибутов вы можете выбрать теги с конкретными элементами.
Вот пример, в котором выделены все теги <img> с атрибутами title:
img [title]
Первая часть селектора -название ( i mg); атрибут идет далее в квадратных скобках:
[title].
CSS не ограничивает селекторы атрибутов названиями тегов: вы можете также
комбинировать их с классами. Например, селектор . photo [ t i t l е J выбирает все элементы
стилевого класса .photo с НТМL-атрибутом title.
Если необходима более детальная выборка, то существует возможность найти
элементы, которые имеют не только определенный атрибут, но и точное значение.
Например, если вы хотите подсветить ссылки, указывающие на специфический
URL, создайте селектор атрибута с броским стилем:
а [href="http: 1 lwww. cosmofarmer. сот" J { со l or: red; font·-wei ght: Ьо l d; }
Уточнение конкретным значением очень полезно при работе с заполняемыми
формами. Многие элементы форм имеют теги с одинаковыми названиями, даже
если они выглядят и функционируют по-разному. Будь то флажок, текстовое поле,
кнопка отправки данных или какие-то другие поля форм - все они содержат
<i nput>. Тип атрибута - вот что придает определенную форму с соответствующими
функциональными возможностями. Например, <i nput type=" text "> создает текстовое
поле, а <i nput type=" checkbox" > - флажок.
Например, чтобы выбрать только текстовые поля в форме веб-страницы, используют
следующее выражение:
input[type="text"]
Селектор атрибута- очень разносторонний элемент. Он не только позволяет
находить теги с определенным значением атрибута (например, все поля формы
с типом checkbox), но и выбирать элементы со значением атрибута, начинающимся
с какого-либо значения, заканчивающимся им или содержащим его. Хоть эта
возможность сразу может показаться лишней, на самом деле она достаточно полезна.
Представьте, что вы хотите создать стиль, который бы выделял внешние ссылки
(ведущие за пределы вашего сайта), говоря пользователю: <~Ты покинешь
этот сайт, если выберешь ссылку~. Принимая во внимание то, что абсолютные
ссылки внутри собственного сайта не используются, мы устанавливаем, что любая
внешняя ссылка будет начинаться с http: 11 - первой части любой абсолютной
ссылки.
84 Глава 3. Селекторы: определение элементов стилизации
Тогда селектор будет выглядеть следующим образом:
a[href"'="http://"J
Символы л= означают «начинается на», так что вы можете использовать этот
селектор для форматирования любой ссылки, начинающейся на http: 11. С его помощью
вы легко стилизуете ссылку, указывающую на http://www.google.com либо
http:/ /www.sawmac.com - любую внешнюю ссылку.
ПРИМЕЧАНИЕ-----------------------------------------------Этот
селектор не будет работать в случае защищенного SSL-соединения, то есть когда ссылка начинается
на https://. Чтобы создать стиль, учитывающий данную проблему, вам понадобится групповой
селектор:
a[hrefA="http://"J. a[hrefA="https://"]
Встречаются ____________также ситуации, когда вам необходимо выбрать элемент с атрибутом,
заканчивающимся определенным значением. И снова ссылки пригодны для
этой задачи. Скажем, вы хотите добавить небольшой значок после ссылок, указывающих
на РDF-файлы. Поскольку они имеют разрешение PDF, вы знаете, что
ссылка на эти документы будет заканчиваться также этими символами, например
<а href = "download_instructions">. Значит, чтобы выбрать только такие ссылки,
нужен следующий селектор:
a[href$=" .pdf"]
А стиль целиком будет выглядеть так:
a[href$=".pdf"] {
} :
background-image: urlCdoc_icon.png) no-repeat:
padding-left: 15рх:
Не беспокойтесь о том, что не знаете конкретные свойства из этого стиля, -
вы познакомитесь с ними далее в книге. Только обратите внимание на один интересный
селектор: $означает «заканчивается на». Вы можете использовать его
для форматирования ссылок на документы Word ([а href$=" .doc"]), фильмы
([а href$=" .mov"J) и т. д.
И наконец, вы можете выбирать элементы с атрибутами, содержащими конкретное
значение. Например, вам нужно выделить фотографии сотрудников повсюду
на сайте. Вы хотите, чтобы у всех фотографий был общий стиль, допустим,
зеленая рамка и серый фон. Один из способов сделать это - создать класс стиля,
например . headshot, и добавлять вручную атрибут класса к соответствующим тегам
<img>. Однако если вы задали для фотографий последовательные названия, это не
самый быстрый метод.
Например, каждую из фотографий вы называли, используя при этом слово
headshot, - mcfa r l and _ headshot, mccord _headshot и т. д. В каждом файле встречается
слово headshot, поэтому и атрибут src тега <img> содержит это слово. Вы можете
создать селектор специально для этих изображений:
img[src*="headshot"J
Обучающий урок: примеры исnользования селекторов 85
Выражение переводится как ~выберите все изображения, атрибут src которых
содержит в любом месте слово headshot>). Это простой и изящный способ форматирования
фотографий сотрудников .
Internet Explorer 6, как и полагается, не поддерживает селекторы атрибутов,
поэтому используйте их, только если отсутствующий стиль не навредит отображению
страницы в IE 6. Во многих случаях вы можете использовать селекторы атрибутов
просто для того, чтобы добавить какую-нибудь оригинальную Идею на страницу
для современных браузеров.
1РИМЕЧАНИЕ ------------------------
8 версии CSS 3 разработчики обещают большее разнообразие селекторов атрибутов. Из гл. 16
вы узнаете о самых многообещающих селекторах (и о тех, которые можно _________________найти в реальных брауэе.
рах).
Обучающий урок: примеры использования
селекторов
В оставшейся части этой главы вы потренируетесь в создании разных селекторов
и увидите, как они влияют на дизайн веб-страницы. Обучающий урок начнем с представления
основных типов, а затем перейдем к более современным стилям.
Чтобы начать обучение, вы должны иметь в распоряжении файлы с учебным
материалом . Файлы текущей обучающей программы находятся в папке с названием
03, расположенной в архиве, работа с которым описана в конце гл. 2.
ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ
Раэрабатывая диэайн одиночных веб-страниц, испоnьэуйте внутренние
табnицы стиnей
Вы можете сnрО<Ить: nочему в тй обучающей nрограмме
мы nользуемся внутренними таблицами стилей?
Ведь в гл. 2 книги рекомендуется nрименять
внешние.
Да, они исnользуются для создания «быстрых» сайтов.
Однако внутренние таблицы стилей облегчают nроектирование
· одиночных веб-страниц, таких как в ~той
обучающей nрограмме. В данном случае гораздо
удобнее работать с одним файлом вместо того, чтобы
nереключаться между файлом внешней таблицы стилей
и веб-страницей. Вы можете nользоваться nред-
варительным nросмотром результатов своей работы
без nостоянного обновления кэша 6раузера.
Многие знатоки начинают разработку дизайна с внутренней
таблицы стилей, nоскольку так намного быстрее.
Это исключает все прочие проблемы, в том числе
с кэшем. Вот их методика: как только они добьются
требуемых результатов по созданию стиля отдельно
взятой веб-страницЬI, они nросто коnируют код внутренней
таблицы стилей и вставляют его во внешнюю,
а затем связывают ее со страницами сайта, как оnисано
в гл. 2.
1. Откройте файл select or bas ics .ht ml в программе редактирования.
Страница состоит из основных НТМL-теrов. Самая интересная вещь на ней -
это графический баннер (рис. 3.6). В этой обучающей программе мы попытаемел
