Каскадность Порядок каскадов Таблицы стилей могут иметь три источника происхождения: автор, пользователь и обозреватель. Автор задает таблицу стилей для своего документа, как было описано выше. Пользователь также может задать свою таблицу стилей для конкретного документа. Обозреватель должен применить к документу свою таблицу стилей по умолчанию прежде, чем применять к нему все остальные таблицы стилей. Каскадность языка CSS состоит в том, что каждому правилу приписан определенный вес; если к конкретному элементу применимы несколько правил, то используется то, которое имеет наибольший вес. В результате происходит кумулятивное накопление свойств элементов в соответствии с правилами наследования, и, тем самым, образуется каскад свойств, распространяющийся от предков к потомкам. По умолчанию, вес правил таблицы автора больше, чем вес правил таблицы пользователя (за исключением правил с атрибутом !important, для которых это соотношение является обратным). Вес правил таблиц автора и пользователя больше, чем вес правил таблицы обозревателя. Общий порядок определения правила и свойства, которые будут применены к элементу, таков: Выбираются все декларации, которые соответствуют данному устройству отображения; из них выбираются все правила, чьи селекторы соответствуют данному элементу. Декларации сортируются по весу их источника происхождения, как описано выше. Производится вторичная сортировка по специфичности селектора: более специфичные селекторы сильнее, чем более общие. И, наконец, последняя сортировка: если два правила имеют одинаковый вес и специфичность, то применяется последнее из них. При этом правила импортированных таблиц располагаются до всех правил импортирующей таблицы. Атрибут !important Для того, чтобы правила пользовательской таблицы стилей могли перекрывать авторскую, CSS содержит атрибут !important. Правило пользовательской таблицы стилей, имеющее такой атрибут, имеет больший вес, чем соответствующее правило авторской таблицы стилей. Рассмотрим следующий пример: /* Из таблицы стилей пользователя */ P { text-indent: 1em !important } P { font-style: italic !important } P { font-size: 18pt } /* Из таблицы стилей автора */ P { text-indent: 1.5em !important } P { font: 12pt sans-serif !important } P { font-size: 24pt } Здесь первое правило таблицы стилей пользователя содержит атрибут !important, поэтому оно весомей, чем первое правило таблицы стилей автора. Второе правило пользователя также более весомо, по той же самой причине. Однако, третье правило пользователя менее весомо, чем второе правило автора. Точно также, третье правило автора менее весомо, чем его второе правило. Специфичность селектора Специфичность селектора вычисляется следующим образом: подсчитать количество атрибутов id в селекторе; подсчитать количество атрибутов class в селекторе; подсчитать количество имен элементов в селекторе (все псевдоэлементы игнорируются). Теперь запишем эти три числа подряд, чтобы получить число из трех цифр (нам, возможно, придется привести числа a, b и c к системе счисления с большим основанием, чтобы каждое из них выражалось одной цифрой). Результатом и будет специфичность селектора (чем она выше, тем селектор специфичней). Приведем список примеров селекторов, отсортированных по их специфичности: #id1 {:} /* a=1 b=0 c=0 --> спефифичность = 100 */ UL UL LI.red {:} /* a=0 b=1 c=3 --> спефифичность = 013 */ LI.red {:} /* a=0 b=1 c=1 --> спефифичность = 011 */ LI {:} /* a=0 b=0 c=1 --> спефифичность = 001 */ Если перевести это описание с формального языка на обычный, то можно сказать, что класс элементов является более специфичным, чем просто элемент, а идентификатор элемента более специфичен, чем класс <<<  Назад  1  2   8  Комментарии к статье  8 8  Обсудить в чате

8  В тему Введение в таблицы стилей Селекторы, псевдоклассы и псевдоэлементы Границы, заполнители и рамки Позиционирование элементов Визуализация элементов Цвет и фон Шрифты Текст Таблицы Генерация содержимого, нумерация и списки Страничные устройства вывода Звуковые таблицы стилей