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