Почему css каскадный

Каскадирование

Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей), где одним из ключевых слов выступает «каскад». Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа — с помощью подключения нескольких стилевых файлов, наследования свойств и других методов. Чтобы в подобной ситуации браузер понимал, какое в итоге правило применять к элементу, и не возникало конфликтов в поведении разных браузеров, введены некоторые приоритеты.

Ниже приведены приоритеты браузеров, которыми они руководствуются при обработке стилевых правил. Чем выше в списке находится пункт, тем ниже его приоритет, и наоборот.

  1. Стиль браузера.
  2. Стиль автора.
  3. Стиль пользователя.
  4. Стиль автора с добавлением !important.
  5. Стиль пользователя с добавлением !important.

Самым низким приоритетом обладает стиль браузера — оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей.

Как задавать пользовательский стиль рассказывалось в главе 1 (см. рис. 1.3 и 1.4).

!important

Ключевое слово !important играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля или его важность, иными словами.

При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.

  • !important добавлен в авторский стиль — будет применяться стиль автора.
  • !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
  • !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль пользователя.
  • !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.

Синтаксис применения !important следующий.

Вначале пишется желаемое стилевое свойство, затем через двоеточие его значение и в конце после пробела указывается ключевое слово !important .

Повышение важности требуется не только для регулирования приоритета между авторской и пользовательской таблицей стилей, но и для повышения специфичности определенного селектора.

Специфичность

Если к одному элементу одновременно применяются противоречивые стилевые правила, то более высокий приоритет имеет правило, у которого значение специфичности селектора больше. Специфичность это некоторая условная величина, вычисляемая следующим образом. За каждый идентификатор (в дальнейшем будем обозначать их количество через a) начисляется 100, за каждый класс и псевдокласс (b) начисляется 10, за каждый селектор тега и псевдоэлемент (c) начисляется 1. Складывая указанные значения в определённом порядке, получим значение специфичности для данного селектора.

Встроенный стиль, добавляемый к тегу через атрибут style , имеет специфичность 1000, поэтому всегда перекрывает связанные и глобальные стили. Однако добавление !important перекрывает в том числе и встроенные стили.

Если два селектора имеют одинаковую специфичность, то применяться будет тот стиль, что указан в коде ниже.

В примере 19.1 показано, как влияет специфичность на стиль элементов списка.

Пример 19.1. Цвет списка

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере цвет текста списка задан зелёным, а второй пункт списка с помощью класса two выделен красным цветом. Вычисляем специфичность селектора #menu ul li — один идентификатор (100) и два тега (2) в сумме дают значение 102, а селектор .two будет иметь значение специфичности 10, что явно меньше. Поэтому текст окрашиваться красным цветом не будет. Чтобы исправить ситуацию, необходимо либо понизить специфичность первого селектора, либо повысить специфичность второго (пример 19.2).

Пример 19.2. Изменение специфичности

Добавление идентификатора используется не только для изменения специфичности селектора, но и для применения стиля только к указанному списку. Поэтому понижение специфичности за счёт убирания идентификатора применяется редко, в основном, повышается специфичность нужного селектора.

Вопросы для проверки

1. Какая специфичность будет у селектора table.forum tr:hover p?

  1. 14
  2. 22
  3. 23
  4. 32
  5. 41

2. Какая специфичность будет у селектора #catalog .col3 .height div?

Каскадность в CSS

В этой статье учебника мы узнаем почему таблицы стилей называют каскадными, как происходит взаимодействие стилей между собой внутри документа, познакомимся с системой приоритетов и конечно рассмотрим необходимые для понимания этой темы примеры.

Прежде всего, что такое каскадность? Каскадность – это правила, по которым определяется какие стилевые свойства задаются браузером элементам на странице (последовательность применения стилей к определённым элементам и разрешение при необходимости, возникающих конфликтов).

Давайте рассмотрим следующее изображение, на нем отображены основные источники информации о стилях, которые образуют каскад:

Рис. 30 Основные источники информации о стилях.

Рис. 30 Основные источники информации о стилях.

К основным источникам информации о стилях относятся:

  • Встроенные стили браузера по умолчанию.
  • Стили, заданные автором документа, их в свою очередь можно указать в трех местах:
  • Внешний CSS файл (с использованием элемента <link>, который размещается внутри элемента <head>).
  • В теле документа (в настоящее время разрешается размещать стили только в начале документа — стили помещаются внутри парного тега <style>, который в свою очередь должен находиться внутри элемента <head>).
  • Внутри элемента (стили, которые задаются с использованием глобального HTML атрибута style).

Наименьшим приоритетом из этого списка обладают встроенные стили браузера, а для пользовательских устанавливается наивысший приоритет, но это нас не должно интересовать, ведь кто как хочет, так и стилизует, и это не предмет этой статьи учебника.

Главное надо понять, что если на странице применяется несколько стилей к одному элементу, то браузер объединит свойства этих стилей, при условии, что они не конфликтуют между собой (имеют различные значения для однотипных свойств). А если конфликтуют?

Давайте перейдем к практической части.

Предположим, что у нас есть абзац (элемент <p>), в котором указана определенная гиперссылка (элемент <a>). HTML код может выглядеть следующим образом:

На нашу страницу добавим следующие стили:

Создадим разметку и добавим стили в наш документ:

Результат нашего примера:

Рис. 30а Каскадность в CSS. Рис. 30а Каскадность в CSS.

Давайте рассмотрим какие стили были применены к элементу <a>:

Рис. 30б Применение стилей к элементу.Рис. 30б Применение стилей к элементу.

В данном примере вы можете увидеть, что все три наших селектора с различными стилями были применены к элементу <a>, а встроенные стили элемента — цвет и декорирование текста (нижнее подчеркивание) были заменены на авторские стили (стили автора документа) по той причине, что они имеют больший приоритет.

Система приоритетов в CSS

Давайте рассмотрим пример, где не всё так очевидно и однозначно. К примеру, с использованием свойства font-family зададим элементу <a> различный тип шрифта с использованием аналогичных селекторов:

Результат нашего примера:

Рис. 31 Пример конфликтования стилей. Рис. 31 Пример конфликтования стилей.

Давайте рассмотрим какой шрифт получил элемент <a>:

Рис. 31a Выбор типа шрифта при конфликте стилей.Рис. 31a Выбор типа шрифта при конфликте стилей.

Обратите внимание, что для нашего элемента был установлен шрифт Courier. Как мы видим в "инструментах разрабочика" браузера Chrome этот шрифт выбран из селектора потомков в котором используется как селектор класса, так и селектор типа (.main a), а в остальных селекторах тип шрифта для элемента перечеркнут. Но почему?

Я уже обращал Ваше внимание на тот факт, что основное правило механизма каскадности — побеждает тот, у кого установлен самый явно определенный стиль. Для этих целей в CSS существует своя система приоритетов, которая основана на присвоении значений в пунктах для каждого типа селекторов, чем выше это значение, тем выше его значимость:

  • Селектор типа, псевдоэлементы — 1 пункт.
  • Селектор класса, псевдоклассы — 10 пунктов.
  • Id селектор — 100 пунктов.
  • Встроенный (inline) стиль (стиль задается в самом элементе с использованием глобального HTML атрибута style) — 1000 пунктов.

Давайте перейдем к следующему примеру в котором рассмотрим как работает система приоритетов:

В данном примере для элемента <p> был установлен красный цвет текста благодаря id селектору, который имеет более высокое значение в пунтах чем другие селекторы (100). Кроме того, для демонстрации системы приоритетов мы применили встроенный (inline) стиль для элемента <span> и установили для него зеленый цвет шрифта. Обратите внимание, что на изображении, все значения селекторов перечеркнуты, так как встроенный стиль имеет самое высокое значение в пунктах (1000).

 Рис. 32 Пример системы приоритетов в CSS. Рис 32 Пример системы приоритетов в CSS.

Чтобы подсчитать специфичность комбинированных селекторов необходимо их просто сложить между собой, например:

Отмена значимости стилей

В некоторых случаях, два стиля могут иметь одинаковый приоритет (одинаковое количество пунктов), что доставляет сильную головную боль по той причине, что браузер в этом случае выбирает последний определенный стиль в таблице стилей, что может не соответствовать вашим ожиданиям. Если вы поменяете местами конфликтующие стили, то действовать будет тот, который будет указан ниже в таблице стилей. Старайтесь избегать подобных ситуаций и запомните этот момент. Эти знания помогут Вам сэкономить большое количество времени.

В CSS предусмотрена возможность отменить значимость стилей (не учитывать количество пунктов). Для этого необходимо добавить к значению CSS свойства ключевое слово !important .

Давайте рассмотрим пример использования ключевого слова !important :

В этом примере с использованием ключевого слова !important мы отменили значимость стилей и установили цвет текста для гиперссылки красный. В данном случае если бы мы не использовали ключевое слово !important , то цвет бы остался зеленым по той причине, что он имеет большую значимость (задан с использованием селектора класса).

Результат нашего примера:

Рис. 33 Пример отмены значимости стилей. Рис. 33 Пример отмены значимости стилей.

Обратите внимание, что !important указывается в конце каждого свойства и действует только на одно свойство, а не на весь блок объявлений!

Если вы указали значение !important для двух однотипных свойств различных стилей, то в этом случае браузер рассматривает их по принципу правил значимости (приоритет отдаётся более значимому свойству). Старайтесь избегать подобных ситуаций.

Сброс и нормализация встроенных стилей.

Ещё один необходимый метод для грамотного построения кроссбраузерных страниц — это необходимость сброса встроенных в браузер внутренних стилей (сброс стандартных стилей браузера). Другими словами, независимо какой браузер у пользователей, которые посещают Ваш сайт, отображение должно быть в одном стиле — с одинаковыми отступами, границами и форматированием.

Для этого существуют различные шаблоны, которые сбрасывают внутренние стили (reset.css). Как правило, шаблоны адаптируются под себя (под Ваши нужды) и служат для удаления полей и отступов, устанавливая например 100% размер шрифта, убирая выделения полужирным шрифтом, устанавливают пространство между строками в абзаце, убирают маркеры в списках и тому подобное.

В настоящее время часто в своей работе используют альтернативу традиционному reset.css (сбросу внутренних стилей), нормализовывая таблицы стилей — normalize.css.

Данный проект (normalize.css) появился после глубокого исследования различий между изначальными стилями браузера под руководством Николаса Галахера. Основные задачи normalize.css заключаются в том, чтобы сохранить полезные настройки браузера, а не стирать их, и при этом нормализовать стили для широкого круга HTML элементов.

Как вы понимаете, normalize.css значительно отличается от reset.css. Впоследствии, я Вам рекомендую попробовать в своей работе оба метода, чтобы определиться, соответствует ли конкретный метод вашим предпочтениям в разработке.

Вопросы и задачи по теме

Перед тем как перейти к следующей статье ответьте на следующие вопросы:

    подсчитайте специфичность комбинированного селектора: Показать ответ

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

Наверно у многих, кто занимается (занимался) версткой и в плотную сталкивался с таблицами стилей, наступали моменты когда !important на !important’e сидел, css превращался в вереницу длинных цепочек, но все равно кто-то, где-то, кого-то перебивал (или наоборот). И не совсем ясно, почему так происходит.

Давайте раз и навсегда разберемся с каскадированием стилей и специфичностью селекторов.

Специфичность селекторов определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.
Подсчитать приоритет селектора очень просто.

  • inline-стили имеют специфичность 1000
  • за каждый идентификатор (#) 0100
  • за каждый класс (.) и псевдо-класс (. []) 0010
  • за каждый тег и псевдо-элемент 0001
  • * и стили браузера 0000

При добавлении !important приоритет становится главенствующим. Если !important несколько стоит задуматься о смене профессии они начинают подчиняться тем же правилам.

После всех манипуляций специфичность совпала — выигрывает последнее (то что ниже) правило.

Ну и конечно же CSS-анимации, имеющие приоритет выше, даже чем !important в inline-стилях.

UPD Почему 11 классов не имеют большего приоритета над идентификатором читать здесь

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *