В этом уроке я расскажу простыми словами как быстро и эффективно переопределить CSS стили на сайте. Селекторы, классы, идентификаторы. Рабочие трюки с примерами в CSS.
Вообще-то техника переопределения стилей – базовая штука. Но если вы самоучка, то могли банально с этим какое-то время не сталкиваться, работая только с глобальными селекторами (а это значит, что одинаковые стили будут применяться глобально для всех элементов). Но со временем появиться желание поэкспериментировать и индивидуализировать дизайн своего сайта – прописать отдельные стили для тех или других элементов (абзацы, блоки, поля, изображения etc). И тут появятся первые проблемы. К примеру, вам нужно изменить выравнивание текста (text-align) в текстах. Но этот стиль прописан уже в исходном коде самой страницы (так называемые inline стили). Выходя из этого, прописав стандартно стили в css файле – ничего не изменится. Встроенные стили имеют больший приоритет и перекрывают заданные вами. На этом этапе банальных знаний в CSS будет не хватать и нужно искать решения. А чтобы вы долго не “гуглили” и не думали, предлагаю ознакомиться с моей техникой на очень простых и базовых примерах, которые будут понятны каждому новичку.
Техника #1: переопределение с использованием идентификатора ID
Описание задачи: есть два абзаца в тексте. Им уже кто-то присвоил class и определил стили:
<p class=”red”>Абзац 2</p>
<p class=”red”>Абзац 3</p>
.red{color: red;}
Таким образом класс red задает цвет для обоих абзацев. А что, если нам нужно переопределить цвет только Абзаца 3?
Решение: В таком случае лучше всего использовать идентификатор и отдельно прописать для него стили:
<p class=”red” id=”blue”>Абзац 3<p>
#blue{color: blue;}
Таким образом, мы переопределили стиль для Абзаца 3.
Вывод: у идентификатора приоритет выше и он перекрывает стили заданного ранее класса!
Техника #2: переопределение с помощью атрибута !important
А теперь возьмем ситуацию посложнее. Когда у элемента целая каша: из селекторов, классов и идентификаторов. Вы прописываете стили для этого элемента – а ничего не происходит.
Что делать?
Банально просто: использовать декларацию (атрибут) !important.
Как он работает? Вы просто дописываете !important в конце вашего стиля, например:
p {text-align: left !important;}
И все. Он тупо “ломает” всю иерархию и приоритетность. Для него правила не писаны!
Главное не переусердствовать – !important не панацея и если вы будете всюду его пихать, это может создать проблемы, сделает файл стилей сложным для понимания и отладки. Так что используйте в редких “ювелирных” случаях.
Удачи! Надеюсь данный урок был для вас полезным.
