Главная страница   /   3.6. Каскадирование стилей (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

3.6. Каскадирование стилей

Ключом к понимаю таблиц стилей является понимание их наследования и каскадирования. Для применения свойств CSS могут быть использованы различные источники, а каскадирование и наследование являются теми средствами, благодаря которым браузер определяет, какое значение должно быть использовано при отображении элемента. Вы видели три различных метода, которыми можно назначить стили (применение внутренних стилей, т.е. использование атрибута style; назначение встроенных стилей, т.е. применение элемента style; и использование внешней таблицы стилей). Но также нам нужно знать о двух других источниках стилей: это стили браузера и пользовательские стили.

Стили браузера (user agent styles) – это набор стилей, которые браузер применяет к элементу, если не были заданы другие стили. Вы видели пример соглашения по стилям в начале главы.

Кроме того, большинство браузеров позволяют пользователям определять собственные таблицы стилей. Стили, которые содержат эти таблицы, называются пользовательскими стилями. Это не очень широко используемая возможность, но те пользователи, которые назначают свои собственные таблицы стилей, часто придают этому большое значение, не в последнюю очередь из-за того, что это дает возможность сделать страницы более доступными.

У каждого браузера есть собственный механизм для пользовательских стилей. Google Chrome под Windows, например, создает в директории пользовательского профиля файл Default\User StyleSheets\Custom.css. Все стили, добавленные в этот файл, применяются ко всем сайтам, которые посещает пользователь, с соблюдением правил каскадирования, которые я опишу с следующем разделе.

Каскадное расположение стилей

Теперь, когда рассмотрены все источники стилей, которые должен учитывать браузер, можно обратить внимание на порядок, в котором браузер будет искать значение свойства, чтобы отобразить элемент. Этот порядок очень точный:

  1. Внутренние стили (Inline styles) – стили назначаются при использовании атрибута style элемента
  2. Встроенные стили (Embedded styles) – стили назначаются в элементе style
  3. Внешние стили (External styles) – стили импортируются при помощи элемента link
  4. Стили пользователя (User styles) – стили устанавливаются пользователем
  5. Стили браузера (Browser styles) – набор стилей, применяемых браузером

Представьте, что браузеру нужно представить элемент p. Ему, естественно, нужно знать, каким цветом будет отображаться текст. Чтобы ответить на этот вопрос, браузеру нужно найти значение CSS свойства color. Во-первых, он проверит, существует ли для элемента, который он собирается отображать, внутренний стиль, который определяет значение для color, например:

<p style="color: red">We are pleased to announce that we are starting a home delivery
service for your flower needs. We will deliver within a 20 mile radius of the store
for free and $1/mile thereafter.</p>

Если внутреннего стиля нет, браузер будет искать элемент style, который содержит нужный стиль для отображаемого элемента, например:

<style>
	p {color: red};
</style>

Если элемента style нет, браузер просматривает таблицы стилей, которые были подключены при помощи элемента link. И так продолжается, пока браузер либо не найдет значения для свойства color, либо он будет использовать собственные стили по умолчанию, если другие значения для данного свойства недоступны.

Совет

Первые три источника свойств CSS (внутренние стили, встроенные стили и таблицы стилей) также принято называть авторскими стилями. Стили, которые определены в таблицах стилей пользователя, называются пользовательскими стилями. А стили, которые определены в браузере, называются стилями браузера.

Изменение иерархии при помощи стилей с !important

Можно переопределить обычный порядок следования стилей, дав свойству самый высокий приоритет (important), как показано в листинге 3-11.

Листинг 3-11: Назначение высшего приоритета стилю при помощи сопроводительного слова !important

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		p {color: black !important};
	</style>
</head>
<body>
	<h1 lang="en">
		New Delivery Service
	</h1>
	<h2 lang="en">
		Color and Beauty to Your Door
	</h2>
	<p style="color: red">
		We are pleased to announce that we are starting a home delivery service for your
		flower needs. We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter.
	</p>
</body>
</html>

Можно придать особое значение стилю, используя в блоке объявлений сопроводительное слово !important. Браузер отдает предпочтение таким стилям, независимо от того, где они были определены. Вы можете увидеть результат применения стиля с высоким приоритетом на рисунке 3-10, где встроенное значение свойства color переопределяет внутреннее значение (весь текст черного цвета).

Рисунок 3-10: Значение с наивысшим приоритетом переопределяет внутреннее значение свойства

Совет

Единственной свойство, которое может быть в еще более высоком приоритете, нежели обозначенное вами как !important, является таким же образом объявленное свойство, назначенное в пользовательской таблице стилей. В обычной иерархии авторские стили превалируют над пользовательскими стилями, но если речь идет о стиле с сопроводительным словом !important, то все наоборот.

Проблема конфликта стилей

Вы можете столкнуться с конфликтом стилей, когда есть два стиля, которые можно применить к элементу, они расположены на одной ступени иерархии, и оба содержат значения для искомого CSS свойства. Определяя, какое значение использовать, браузер оценивает специфичность каждого стиля и использует наиболее специфичный. Браузер определяет специфичность стиля путем сложения результатов значений трех различных характеристик. Вот они:

  • количество атрибутов id в селекторе стиля
  • количество других атрибутов и псевдоклассов в селекторе
  • количество элементов и псевдоэлементов в селекторе

Браузер суммирует эти значения и применяет свойства наиболее специфичного стиля. Самый простой пример специфичности стилей можно увидеть в листинге 3-12.

Листинг 3-12: Специфичность стилей

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		p
		{
			background-color: grey;
			color: white;
		}
		p.details
		{
			color: red;
		}
	</style>
</head>
<body>
	<h1 lang="en">
		New Delivery Service</h1>
	<h2 lang="en">
		Color and Beauty to Your Door</h2>
	<p class="details">
		We are pleased to announce that we are starting a home delivery service for your
		flower needs. We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter.</p>
</body>
</html>

При оценке специфичности, вы создаете число в форме a-b-c, каждая буква которого – это общая сумма значений трех характеристик. Это не трехзначное число. Тот стиль считается более специфичным, у которого это значение больше. Если значения a одинаковы, браузер сравнивает значения b. В этом случае более специфичным считается стиль с наибольшим значением b. И только если значения a и b одинаковы, браузер обращается к значению c. Это обозначает, что стиль с числом специфичности 1-0-0 превалирует над стилем с 0-5-5.

В нашем случае селектор p.details включает атрибут class, что означает, что специфичность стиля равна 0-1-1 (число id 0, 1 атрибут, 1 элемент), у другого селектора специфичность равна 0-0-1 (в нем нет атрибута id и других атрибутов, есть имя элемента).

При представлении элемента p браузер будет искать значение свойства color. Если элемент p является членом класса details, тогда стиль с селектором p.details будет более специфичным, и для представления элемента будет использоваться красный цвет (red). Для всех других элементов p будет использован белый цвет (white). На рисунке 3-11 можно увидеть, как браузер выбирает и применяет значения для представления элемента в нашем примере.

Рисунок 3-11: Применение стилей на основе их специфичности

Если стили обладают одинаковой специфичностью, тогда браузер выбирает свойство, которое он будет использовать, на основании порядка, в котором они объявлены. Будет использовано то свойство, которое определено последним. В листинге 3-13 представлены два стиля с одинаковой специфичностью.

Листинг 3-13: Стили с одинаковой специфичностью

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		p.details
		{
			color: red;
		}
		p.information
		{
			color: blue;
		}
	</style>
</head>
<body>
	<h1 lang="en">
		New Delivery Service</h1>
	<h2 lang="en">
		Color and Beauty to Your Door</h2>
	<p class="details information">
		We are pleased to announce that we are starting a home Delivery service for your
		flower needs. We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter.</p>
</body>
</html>

Оба стиля определены в элементе style, имеют одинаковое количество очков специфичности и оба применяются к элементу p. Когда браузер будет отображать элемент p, он выберет значение blue для свойства color, поскольку это значение представлено в стиле, объявленном последним. Это можно увидеть на рисунке 3-12.

Рисунок 3-12: Выбор значения свойства на основании порядка следования стилей

Совет

Эти правила специфичности применяются только тогда, когда стили находятся на одной ступени иерархии. Это обозначает, например, что свойство, определенное в атрибуте style всегда будет превалировать над свойством, определенным в элементе style.