Каскадирование. CSS. Учебник от Маржевича
Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей), где 1 из ключевых слов выступает «каскад». Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа - с помощью подключения нескольких стилевых файлов, наследования свойств и других методов. Чтобы в подобной ситуации браузер понимал, какое в итоге правило применять к элементу, и не возникало конфликтов в поведении разных браузеров, введены некоторые приоритеты.
Ниже приведены приоритеты браузеров, которыми они руководствуются при обработке стилевых правил. Чем выше в списке находится пункт, тем ниже его приоритет, и наоборот.
Самым низким приоритетом обладает стиль браузера - оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей.
Как задавать пользовательский стиль рассказывалось в главе 1 (см.рис.1.3 и 1.4).
!important
Ключевое слово !important играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для 1 и того же элемента не совпадает, то !important позволяет повысить приоритет стиля или его важность, иными словами.
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
Синтаксис применения !important следующий.
Свойство: значение !important
Вначале пишется желаемое стилевое свойство, затем через двоеточие его значение и в конце после пробела указывается ключевое слово !important.
Повышение важности требуется не только для регулирования приоритета между авторской и пользовательской таблицей стилей, но и для повышения специфичности определенного селектора.
Специфичность
Если к одному элементу одновременно применяются противоречивые стилевые правила, то более высокий приоритет имеет правило, у которого значение специфичности селектора больше. Специфичность это некоторая условная величина, вычисляемая следующим образом. За каждый идентификатор (в дальнейшем будем обозначать их количество через a) начисляется 100, за каждый класс и псевдокласс (b) начисляется 10, за каждый селектор тега и псевдоэлемент (c) начисляется 1. Складывая указанные значения в определённом порядке, получим значение специфичности для данного селектора.
*{}/*a=0 b=0 c=0 -> специфичность = 0*/
li{} /*a=0 b=0 c=1 -> специфичность = 1*/
li:first-line {} /*a=0 b=0 c=2 -> специфичность = 2*/
ul li{} /*a=0 b=0 c=2 -> специфичность = 2*/
ul ol+li{} /*a=0 b=0 c=3 -> специфичность = 3*/
ul li.red{} /*a=0 b=1 c=2 -> специфичность = 12*/
li.red.level{} /*a=0 b=2 c=1 -> специфичность = 21*/
#t34{} /*a=1 b=0 c=0 -> специфичность = 100*/
#content #wrap {}/*a=2 b=0 c=0 -> специфичность = 200*/
Встроенный стиль, добавляемый к тегу через атрибут style, имеет специфичность 1000, поэтому всегда перекрывает связанные и глобальные стили. Однако добавление !important перекрывает в том числе и встроенные стили.
Если 2 селектора имеют одинаковую специфичность, то применяться будет тот стиль, что указан в коде ниже.
В примере 19.1 показано, как влияет специфичность на стиль элементов списка.
Пример 19.1. Цвет списка
HTML5 CSS2.1 IE Cr Op Sa Fx
<title>Список</title>
<style>
#menu ul li{color:green}
.two{color:red}
</style>
<div id=menu>
<li>Первый
<li class=two>2-й
<li>3-й
</ul>
</div>
В данном примере цвет текста списка задан зелёным, а 2-й пункт списка с помощью класса two выделен красным цветом. Вычисляем специфичность селектора #menu ul li - 1 идентификатор (100) и 2 тега (2) в сумме дают значение 102, а селектор .two будет иметь значение специфичности 10, что явно меньше. Поэтому текст окрашиваться красным цветом не будет. Чтобы исправить ситуацию, необходимо либо понизить специфичность 1-го селектора, либо повысить специфичность 2-го (пример 19.2).
Пример 19.2. Изменение специфичности
/*Понижаем специфичность 1-го селектора*/
ul li{…}/*Убираем идентификатор*/
.two{…}
/*Повышаем специфичность 2-го селектора*/
#menu ul li{…}
#menu .two{…}/*Добавляем идентификатор*/
#menu ul li{…}
.two{color:red!important}
Добавление идентификатора используется не только для изменения специфичности селектора, но и для применения стиля только к указанному списку. Поэтому понижение специфичности за счёт убирания идентификатора применяется редко, в основном, повышается специфичность нужного селектора.
