CSS для Чайников

Группировка

Запятые, которые разделяют селекторы, позволяют «разделять» декларации между селекторами. Правило, которое продемонстрировано ниже, указывает, что все элементы i, элементы класса «warning» и элементы с идентификатором id «important» будут подчеркнуты.

 

 

Иерархия селекторов

Если правила конфликтуют:

• Правило с более специфичным селектором идет первым

• Если два селектора имеют одинаковый уровень специфичности, правило, которое указано позднее в документе, идет первым

Как определяется специфичность селектора

Допустим, ваши селекторы объединены в следующем порядке и те, что наверху имеют самый высокий уровень специфичности

1. Декларации в атрибутах стиля идут без селектора и обладают самым высоким приоритетом

2. Селекторы с атрибутом идентификатора id (например, h1#foo ) являются следующими по важности в иерархии

3. Селекторами с другими атрибутами (например, h1.foo и a[target]) или псевдоклассы (например, a:hover) размещаются следующими в иерархии наиболее важных

4. Селекторы без других атрибутов кроме имени элемента (например, h1) занимают следующую строчку в иерархии наиболее важных

5. Универсальный селектор (*) обладает наименьшим приоритетом

Для корректного определения точного значения специфичности, пройдите следующий процесс:

1. Начните со значения 0.0.0.0

2. Если вы найдете декларацию в атрибуте стиля, вы должны изменить первую цифру на 1, что даст вам 1.0.0.0. Тогда вы получаете самое высокое значение специфичности и необходимости в дальнейших расчетах нет

3. Каждый раз, когда наступает условие 2, добавьте 1 ко второй цифре. Например, для ol#foo li#bar добавьте 2 (1 за каждый id), что дает вам 0.2.0.0

4. Каждый раз как вы сталкиваетесь с третьим случаем, добавьте единицу к третьей цифре. Например, для ol#foo li#bar a[target] добавьте 1, что дает вам 0.2.1.0.

5. Каждый раз, когда выполняется условие 4, добавьте 1 к четвертой цифре. Например, для ol#foo li#bar a[target] добавьте 3 (по одном за каждое имя элемента), что дает нам 0.2.1.3

Когда вы сравниваете специфичность двух селекторов, начните с самых больших цифр слева. Число, которое больше другого, будет более специфичным. Если они равны, идите дальше и сравнивайте следующие цифры.

Каскад

Правила стиля могут определяться веб-дизайнерами в трех различных местах:

1. Во внедренном стиле

2. Во внешней таблице стилей (на которую ссылается HTML-файл или которая импортируется)

3. В строке элемента

Внедренные таблицы стилей

Внедренные таблицы стилей могут быть обнаружены в элементе стиля в верхней части HTML-страницы. Следующий код демонстрирует пример страницы со встроенной таблицей стилей:

Пример кода

01