Один из лучших способов научиться программировать веб-сайты - это посмотреть на исходные коды других сайтов. Именно на этой практике многие веб-профессионалы научились своему ремеслу, особенно в те дни, когда еще не было так много вариантов для веб-дизайн курсы, книги и сайты онлайн-обучения.
Если вы попробуете эту практику и посмотрите на каскадные таблицы стилей сайта, вы можете увидеть в этом коде строку, в которой говорится: !важный. Этот термин изменяет приоритет обработки в таблице стилей.
Каскад CSS
Каскадные таблицы стилей действительно каскад, то есть они расположены в определенном порядке. Как правило, стили применяются в том порядке, в котором они читаются браузером. Применяется первый стиль, затем второй и так далее.
В результате, если стиль отображается в верхней части таблицы стилей, а затем изменяется в документе ниже, то второй экземпляр этого стиля применяется в последующих экземплярах, а не первый. По сути, если два стиля говорят об одном и том же (что означает, что они имеют одинаковый уровень специфичности), будет использоваться последний из перечисленных.
Например, представим, что следующие стили содержатся в таблице стилей. Текст абзаца будет отображаться черным, даже если первое примененное свойство стиля будет красным. Это потому, что «черное» значение указано вторым. Поскольку CSS читается сверху вниз, последний стиль будет «черным», и поэтому он выигрывает.
p {цвет: красный; }
п {цвет: черный; }
Как! Important меняет приоритет
В !важный Директива влияет на способ каскадирования CSS при соблюдении правил, которые, по вашему мнению, являются наиболее важными и должны применяться. Правило, содержащее эту директиву, всегда применяется независимо от того, где это правило появляется в документе CSS.
Чтобы сделать текст абзаца всегда красным, из предыдущего примера измените стиль следующим образом:
п {цвет: красный! важно; }
п {цвет: черный; }
Теперь весь текст будет отображаться красным, даже если «черное» значение указано вторым. Директива! Important отменяет обычные правила каскада и придает этому стилю очень высокую специфичность.
Если вам абсолютно необходимо, чтобы абзацы выглядели красными, этот стиль подойдет, но это не значит, что это хорошая практика.
Когда использовать! Important
Директива! Important полезна при тестировании и отладке веб-сайта. Если вы не уверены, почему стиль не применяется, и считаете, что это может быть конфликт специфичности, добавьте объявление! Important в свой style, чтобы увидеть, исправляет ли это его - и если это так, измените порядок селекторов и удалите директивы! important из вашего продукта код.
Если вы слишком сильно опираетесь на объявление! Important для достижения желаемых стилей, в конечном итоге вы получите таблицу стилей, заваленную стилями! Important. Вы коренным образом измените способ обработки CSS страницы. Это ленивая практика, которая не годится с точки зрения долгосрочного управления.
Используйте! Important для тестирования или, в некоторых случаях, когда вам абсолютно необходимо переопределить встроенный стиль, который является частью темы или структуры шаблона. Даже в этих случаях используйте этот подход экономно и вместо этого пишите чистые таблицы стилей, учитывающие каскад.
Таблицы пользовательских стилей
Эта директива также была введена, чтобы помочь пользователям веб-страниц справляться с таблицами стилей, которые затрудняют их использование или чтение.
Когда кто-то определяет таблицу стилей для просмотра веб-страниц эта таблица стилей отменяется таблицей стилей автора страницы. Если пользователь отмечает стиль как! Important, этот стиль имеет приоритет над таблицей стилей автора веб-страницы, даже если автор отмечает правило как! Important.
Эта иерархия полезна для пользователей, которым нужно задавать стили определенным образом. Например, читателю с ослабленным зрением может потребоваться увеличить размер шрифта по умолчанию на всех веб-страницах, которые они используют. Умеренно используя директиву! Important на страницах, которые вы создаете, вы учитываете уникальные потребности своих читателей.