Приднестровская поддержка XOOPS
Как браузер может «понять» намерения разработчика? Если к одному и тому же элементу могут быть применены несколько стилей, то определение, какие из них будут использованы, происходит по принципу
каскадирования.
Принцип каскадирования чрезвычайно важен для понимания CSS, поскольку большинство ошибок разработки, связанных с таблицами стилей, происходят из-за того, что применение стиля не соответствует намерениям разработчика. В данной главе мы уже рассмотрели пример, в котором было определено общее правило стиля для элементов типа абзац, а также более конкретное правило для одного или нескольких определенных абзацев. Оба правила предназначены для изменения оформления абзацев, однако более конкретные правила имеют приоритет над более общими.
Решение
На выбор применяемого браузером стиля влияют четыре фактора: вес, источник, конкретность и порядок следования.
Вес определенного описания стиля можно определить с помощью ключевого слова !important, добавляемого после значения свойства. При этом свойство приобретает приоритетное значение над аналогичными свойствами, указанными в других правилах стиля, за исключением редких случаев. Применение ключевого свойства !important сильно усложняет процесс поддержки кода; кроме того, необходимость в его использовании возникает не слишком часто. Ввиду приведенных причин рекомендуется по возможности избегать его, как в примерах данной книги. Дополнительную информацию о данном ключевом слове можно найти в документации SitePoint CSS Reference
Существуют три возможных источника стилей – они могут быть определены браузером, разработчиком или пользователем. В данной книге нас интересуют таблицы стилей, написанные разработчиком веб-страницы, т. е. вами. Мы уже говорили, что у браузера есть своя внутренняя таблица стилей, определяющая оформление всех элементов по умолчанию, однако стили, написанные разработчиком, всегда имеют более высокий приоритет и переопределяют настройки по умолчанию. Кроме того, возможно применение пользовательской таблицы стилей – набора стилей, созданного пользователями, однако и они, за исключением редких случаев, переопределяются таблицей стилей разработчика. Источникам стилей посвящен целый раздел документации SitePoint CSS Reference
Помимо этого, влияние каскадирования на поведение стилей CSS зависит от степени конкретности свойств и порядка их следования.
Правило стиля с более конкретным селектором переопределяет стили, задаваемые правилом с более общим селектором. Рассмотрим этот механизм на практическом примере со следующим несложным HTML- кодом:
<div id="content">
<p class="message">
Это - важное сообщение.
</p>
</div>
А теперь обратите внимание на правила стилей, применяемых к приведенной выше разметке:
p { color: #000000; }
.message { color: #CCCCCC; }
p.message { color: #0000FF; }
#content p.message { color: #FF0000; }
В данном примере действие всех четырех селекторов, задающих цвет шрифта, направлено на элемент p. Какой же цвет будет использован? Совершенно верно, красный (#FF0000). Селекторы p (любой элемент p) и .message (любой элемент класса message) имеют одинаковую степень значимости; приоритет селектора p.message (любой элемент p класса message) выше, но самым высоким приоритетом обладает селектор #content p.message (любой элемент p класса message, являющийся дочерним для элемента со значением content атрибута id).
Однако длину селекторов не стоит рассматривать как показатель степени конкретности. К примеру, селектор ID всегда будет иметь более высокий приоритет, чем селектор типа или класса. Чем сложнее используемые вами селекторы, тем труднее разобраться в степени их важности, при этом приведенные в данной книге примеры достаточно просты. Точную формулу измерения степени конкретности вы можете найти в документации SitePoint CSS Reference
Если, несмотря на вышеперечисленные факторы, остается несколько стилей, которые могут быть применены по отношению к одному и тому же элементу, в расчет принимается порядок следования правил – в этом случае будет использовано последнее из них. В приведенном выше примере степень значимости селекторов p и .message одинакова, поэтому при отсутствии иных регулирующих принципов используется правило стиля, записанное последним, – в данном случае с селектором .message. Так же дело обстоит и при объявлении в таблице стилей нескольких правил с одним и тем же селектором – например, .message. В этом случае будет применено правило, определенное вторым. В последующих главах мы увидим, что такой механизм работы можно эффективно использовать для достижения своих целей.
Отправитель | Нити |
---|
4 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 4 далее... |