Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
>. К будут применены оба стиля. 120 Часть 1. Основы CSS ПРИМЕЧАНИЕ Описание того, что произойдет в случае конфликта стилей, следует далее. Одинаковое название стиля встречается несколько раз в таблице. Это может быть групповой селектор (см. раздел «Стилизация групп тегов» гл. 3). Напри- мер, .leadHeadline , .secondaryHeadline , .newsHeadline и стилевой класс .leadHeadline в той же таблице. Форматирование элемента leadHeadline будет определяться обоими стилями. К тегу одновременно применены стилевой класс и ID-стиль. Это может быть ID-селектор #banner и класс .news . HTML-код имеет вид: > . К будут применены оба стиля. С веб-страницей связано несколько таблиц, и в каждой из них содержится одинаковое название стиля. Стили с одинаковыми названиями могут появ- ляться во внешней таблице стилей и во внутренней таблице стилей. Или же один и тот же стиль может появиться в нескольких внешних таблицах стилей, каждая из которых связана с одной и той же страницей. Единственный тег веб-страницы может быть объектом воздействия сложных селекторов. Это обычная ситуация, когда вы используете производные селек- торы (см. раздел «Селекторы классов: точное управление» гл. 3). Допустим, на веб-странице имеется тег (например: ) и внутри него заключен абзац со стилевым классом: . Здесь будут примене- ны следующие селекторы: y #mainContent p ; y #mainContent .byline ; y p.byline ; y .byline Если к конкретному элементу веб-страницы применено несколько стилей, то браузер объединяет их свойства при условии, что они не конфликтуют между собой. Приведенный ниже пример разъясняет этот принцип. Предположим, есть абзац, в котором указаны имя автора веб-страницы и ссылка на адрес его электронной почты. HTML-код может выглядеть следующим образом: Written by mailto:jean@cosmofarmer.com">Jean Graine de Pomme Между тем в таблице стилей веб-страницы есть три стиля для форматирования гиперссылки: a { color: #6378df; } p a { font-weight: bold } .byline a { text-decoration: none; } Первый стиль окрашивает элемент тега в зеленовато-голубой цвет; второй стиль форматирует все , находящиеся в , полужирным шрифтом; а третий стиль убирает подчеркивание ссылок, вложенных в элементы, которые принадле- жат стилевому классу byline Глава 5. Управление сложной структурой стилей: каскадность 121 Воздействие всех трех стилей распространяется на такой часто используемый тег, как . Ни одно из свойств этих стилей не конфликтует с остальными. Ситуа- ция похожа на случай, рассмотренный выше в подразделе «Объединение унасле- дованных стилей» данного раздела: стили объединяются между собой и образуют один комбинированный суперстиль, содержащий все три свойства. Таким образом, данная гиперссылка отображается зеленовато-голубым полужирным шрифтом без подчеркивания. ПРИМЕЧАНИЕ Имейте в виду, что на стиль форматирования этой ссылки также могут влиять переданные свойства. Например, может быть унаследовано начертание шрифта абзаца. Лучше понять работу механизма каскадности вам помогут несколько инструментов, описанных во врезке «Часто задаваемые вопро- сы. Инструменты для облегчения работы» ниже. Особенности механизма каскадности: какие стили имеют преимущество Предыдущий пример слишком прост. Но что получится, если каждый из трех сти- лей, приведенных выше, имеет свое определение начертания в свойстве font-family ? Какой из них выберет браузер? Если вы внимательно читали книгу, то помните, что механизм каскадности уста- навливает несколько правил. Побеждают (имеют преимущество) свойства самого близкого по отношению к стилизуемому элементу, самого явно определенного стиля. Однако, как и в примере со стилями, не совсем понятно, какой из них является на- иболее определенным. К счастью, CSS предлагает метод определения приоритетов. Он основан на присвоении значений в условных единицах (пунктах) каждому типу стилевых селекторов: тегов, классов, ID-селекторам и т. д. Система работает так. Селектор тегов имеет значимость 1 пункт. Селектор классов — 10 пунктов. ID-селектор — 100. Встроенный (inline) стиль — 1000. ПРИМЕЧАНИЕ Математические расчеты, используемые для определения приоритетов, на самом деле немного более сложные. Но эта формула работает во всех случаях, кроме самых странных и запутанных. Чтобы узнать о том, как браузеры рассчитывают приоритеты, посетите страницу www.w3.org/TR/ /css3- selectors/#specificity. Чем больше числовое значение, тем выше значимость данного типа селектора. Предположим, вы создали три стиля: теговый стиль для (значимость = 1); стилевой класс .highlight (значимость = 10); ID-стиль #logo (значимость = 100). Веб-страница содержит следующий HTML-код: < img id="logo" src="logo.gif" /> . Если определить одинаковый атрибут во всех трех стилях (на- пример, рамка border ), то будет применено значение атрибута ID-стиля ( #logo ), как наиболее значимого. 122 Часть 1. Основы CSS ПРИМЕЧАНИЕ Псевдоэлемент (например, :first-child) обрабатывается браузером как теговый селектор и имеет значимость 1 пункт. Псевдокласс (например, :link) рассматривается как класс и имеет значимость 10 пунктов (см. раздел «Псевдоклассы и псевдоэлементы» гл. 3). Поскольку производные селекторы состоят из нескольких простых — например, content p или h2 strong , — определить их значимость сложнее: необходимо найти суммарное значение их приоритетов (табл. 5.1). Таблица 5.1. Когда к единственному тегу применяется несколько стилей, браузер должен определить, какой из них будет применен в случае возникновения конфликта Селектор Идентификатор Класс Тег Итого p 0 0 1 1 .byline 0 1 0 10 p.byline 0 1 1 11 #banner 1 0 0 100 #banner p 1 0 1 101 #banner .byline 1 1 0 110 a:link 0 1 1 11 p:first-line 0 0 2 2 h2 strong 0 0 2 2 #wrapper #content .byline a:hover 2 2 1 221 ПРИМЕЧАНИЕ Наследуемые свойства вообще лишены такого показателя, как значимость. Так, даже если тег уна- следует, например, селектор #banner, то эти свойства в любом случае будут заменены теми, что непосредственно относятся к этому тегу. Разрешение конфликтов: побеждает последний стиль. Два стиля могут иметь одинаковый приоритет. Конфликт значимостей может произойти в случае двой- ного определения одинаковых селекторов. У вас может быть селектор тега во внутренней таблице и такой же во внешней. Или два различных стиля могут иметь одинаковый приоритет. В таком случае более значимым будет последний опреде- ленный стиль таблицы. Вот пример HTML-кода: Written by href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme В таблице для веб-страницы, содержащей вышеприведенные абзац и гипер- ссылку, у вас будет два стиля: p .email { color: blue; } .byline a { color: red; } Оба стиля имеют значимость, равную 11 (10 — для названия класса и 1 — для селектора тега), и относятся к . Конфликт этих стилей очевиден. Какой цвет выберет браузер для окрашивания гиперссылки в приведенном абзаце? Красный, так как он последний в таблице стилей. Глава 5. Управление сложной структурой стилей: каскадность 123 ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ Инструменты для облегчения работы Может возникнуть вопрос: не существу- ет ли какого-нибудь вспомогательного средства, чтобы представить в понят- ной форме воздействие, оказываемое ме- ханизмом каскадности на конечный ди- зайн веб-страницы? Попытки определить все входы и выходы унаследо ванных свойств и конфликтующие стили сбивали с тол ку многих исследователей. Более того, применение математических приемов для определения специфики стиля както не привлекает обычного вебдизайнера, особенно при использовании огромных таблиц стилей с большим количеством селекторов потомков. Во всех применямых в настоящее время веббраузерах имеется встроенная помощь в виде инспектора. Проще всего провести обследование элемента на странице и всех CSSнастроек, влияющих на его внешний вид с по мощью щелчка правой кнопкой мыши (щелчка с нажа той клавишей управления на Mac) на элементе (на за головке, ссылке, абзаце или изображении) и выборе из контекстного меню пункта Inspect Element (Просмотр кода элемента). Откроется панель (обычно в нижней части вебстраницы), показывающая HTMLкод стра ницы с выделенным выбранным HTMLэлементом. (Чтобы добиться этого в Safari, сначала нужно устано вить флажок Show Develop Menu (Показывать меню Разработка в строке меню) в окне, открывающемся после выбора пунктов Preferences Advanced (Настройки Дополнения).) В правой стороне панели вы увидите стили, примененные к элементу. Обычно это «вычисленный» стиль, итоговая сумма всех CSSсвойств, примененных к элементу путем наследования и каскадирования, или некий синтезиро ванный стиль элемента. Чуть ниже будут показаны сти левые правила, которые применены к элементу, перечис ленные в порядке от более конкретных (в верхней части списка) к менее конкретным (в нижней части списка). Вероятнее всего, в перечне стилей вы увидите, что некоторые свойства зачеркнуты. Это свидетельствует о том, что данное свойство либо не применяется к эле менту, либо оно было заменено более конкретным стилем. Чтобы просмотреть два кратких учебных посо бия по использованию инструментария разработчика по анализу CSS, зайдите на сайты https://developers. google.com/chrome-developer-tools/docs/elements- styles и http://webdesign.tutsplus.com/tutorials/ workflowtutorials/faster-htmlcss-workflow-with- chrome-developertools/ Теперь представьте, что таблица стилей имеет следующий вид: .byline a { color: red; } p .email { color: blue; } В данном случае гиперссылка была бы красного цвета. Cтиль с селектором .byline a расположен в таблице после p .email , поэтому его свойства имеют преимущество. Рассмотрим, что произойдет, если имеются конфликтующие стили (или их свойства) во внешней и во внутренней таблицах стилей. В этом случае важна последовательность размещения на веб-странице (в HTML-файле). Если вы сна- чала добавляете внутреннюю таблицу, используя |