Каким образом броузер определяет, какие стили нужно использовать
Как броузер может «понять» намерения разработчика? Если к одному и тому же элементу могут быть применены несколько стилей, то опре- деление, какие из них будут использованы, происходит по принципу каскадирования.
Принцип каскадирования чрезвычайно важен для понимания CSS, по- скольку большинство ошибок разработки, связанных с таблицами сти- лей, происходят из-за того, что применение стиля не соответствует на- мерениям разработчика. В данной главе мы уже рассмотрели пример, в котором было определено общее правило стиля для элементов типа абзац, а также более конкретное правило для одного или нескольких определенных абзацев. Оба правила предназначены для изменения оформления абзацев, однако более конкретные правила имеют прио- ритет над более общими.
Решение
На выбор применяемого броузером стиля влияют четыре фактора: вес, источник, конкретность и порядок следования.
Вес определенного описания стиля можно определить с помощью клю- чевого слова !important, добавляемого после значения свойства. При этом свойство приобретает приоритетное значение над аналогичны- ми свойствами, указанными в других правилах стиля, за исключени- ем редких случаев. Применение ключевого свойства !important сильно усложняет процесс поддержки кода; кроме того, необходимость в его использовании возникает не слишком часто. Ввиду приведенных при- чин рекомендуется по возможности избегать его, как в примерах дан- ной книги. Дополнительную информацию о данном ключевом слове можно найти в документации SitePoint CSS Reference.1
Существуют три возможных источника стилей – они могут быть опре- делены броузером, разработчиком или пользователем. В данной книге нас интересуют таблицы стилей, написанные разработчиком веб-стра- ницы, т. е. вами. Мы уже говорили, что у броузера есть своя внутренняя таблица стилей, определяющая оформление всех элементов по умолча-
33
нию, однако стили, написанные разработчиком, всегда имеют более высокий приоритет и переопределяют настройки по умолчанию. Кроме того, возможно применение пользовательской таблицы стилей – набо- ра стилей, созданного пользователями, однако и они, за исключением редких случаев, переопределяются таблицей стилей разработчика. Ис- точникам стилей посвящен целый раздел документации SitePoint CSS Reference.1
Помимо этого, влияние каскадирования на поведение стилей CSS зави- сит от степени конкретности свойств и порядка их следования.
Правило стиля с более конкретным селектором переопределяет стили, задаваемые правилом с более общим селектором. Рассмотрим этот ме- ханизм на практическом примере со следующим несложным HTML- кодом:
<div id=”content”>
<p class=”message”>
This is an important 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 всегда будет иметь более вы- сокий приоритет, чем селектор типа или класса. Чем сложнее исполь- зуемые вами селекторы, тем труднее разобраться в степени их важно- сти, при этом приведенные в данной книге примеры достаточно про-
1 http://reference.sitepoint.com/css/cascade/
сты. Точную формулу измерения степени конкретности вы можете най- ти в документации SitePoint CSS Reference.1
Если, несмотря на вышеперечисленные факторы, остается несколько стилей, которые могут быть применены по отношению к одному и тому же элементу, в расчет принимается порядок следования правил – в этом случае будет использовано последнее из них. В приведенном выше при- мере степень значимости селекторов p и .message одинакова, поэтому при отсутствии иных регулирующих принципов используется правило сти- ля, записанное последним, – в данном случае с селектором .message. Так же дело обстоит и при объявлении в таблице стилей нескольких правил с одним и тем же селектором – например, .message. В этом случае будет применено правило, определенное вторым. В последующих главах мы увидим, что такой механизм работы можно эффективно использовать для достижения своих целей.
Заключение
В данной главе вы познакомились с основными принципами и способа- ми использования CSS. Мы даже затронули такую сложную тему, как правила каскадирования. Даже если вы никогда раньше не работали с CSS, но разобрались с понятиями, представленными в данной главе, этого будет достаточно для понимания приводимых далее примеров.
Так как примеры, представленные в начале книги, проще, чем при- меры в конце книги, то, если вы новичок в области применения CSS, рекомендую вам начать чтение с первых глав. Таким образом вы смо- жете пополнить знания, приобретенные в первой главе, и приступить к практике, погрузившись в увлекательный (надеюсь) мир каскадных таблиц стилей.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- КАК РАБОТАЕТ ПОИСКОВАЯ СИСТЕМА GOOGLE (0)
- Репутация на примере «рейтинга школ» (0)
- CSS: основы основ (0)
- Что такое селекторы и как их правильно использовать (0)
- Выделение текста на странице (0)
- Удаление отступов по умолчанию для всех элементов страницы (0)
- Добавление комментария в файл с каскадной таблицей стилей (0)