Переопределение стиля CSS — довольно простая и базовая штука. Обычно на всех обучающих курсах по CSS говорят об этом. Но как быть тем, кто обучался CSS самостоятельно и до сих пор просто не сталкивался с проблемой переопределения стилей?
Как правило, многие молодые разработчики работают только с глобальными стилями. Разрабатывают небольшие проекты, задают блокам и классам стили — и все довольны. Но что делать, когда нужно в уже стилизованном объекте поменять стиль какого-то его компонента? Это может быть следующее:
у вас есть блок ссылок, которым задан стиль, а вам нужно изменить стиль одной ссылки;
у вас задано в документе выравнивание текста по центру, а вам в одном из блоков нужно выровнять текст по правому или левому краю;
у вас задан глобальный стиль абзацев, но вам нужно выделить один абзац из всех другим цветом или шрифтом;
и др.
Подобных ситуаций может возникнуть очень много, и во всех из них есть только одно верное решение — переопределение стиля в CSS.
Как осуществить переопределение стиля CSS?
Есть много интересных методов, как переопределить стиль CSS. Мы вам расскажем про три самых популярных способа осуществить переопределение стиля CSS.
Переопределение стиля CSS с использованием места его написания
Это довольно известный способ переопределить стиль CSS. Вы должны знать о том, что написать стиль CSS для одного и того же элемента можно в 3-х местах:
в отдельном документе — это самый популярный способ для многостраничных сайтов;
в «head» страницы — это популярный способ для одностраничных сайтов;
в атрибутах самого элемента.
Стили из этих трех мест задаются в строгой иерархии. Вначале «считываются» стили из атрибутов элемента, потом «считываются» из «head» страницы, потом из отдельного документа. Из этого получается, что стиль из «head» перекроет стиль из отдельного документа, а стиль из атрибута компонента перекроет стили из «head» и отдельного документа.
Как это выглядит на практике? Например, у нас есть некий элемент <p class=“text“>. Если мы зададим цвет классу «text» в отдельном документе «red», то все абзацы с классом «text» будут у нас красные. В документе это будет выглядеть так:
.text {color: red;}
Понятно, что если изменить цвет на другой, то все элементы с этим классом тоже изменят цвет. Но что делать, если мы хотим только на одной странице переопределить цвет класса «text»? Тогда мы можем на нужной странице в разделе «head» прописать другой стиль, чтобы задать другой цвет:
.text {color: green;}
В этом случае на нашей странице все элементы класса «text» будут зеленые, несмотря на то что в отдельном документе прописано «red». Но мы не хотим на этом останавливаться, и нам нужно, чтобы один абзац на этой странице был голубого цвета, несмотря ни на что. Для этого в выбранном абзаце в атрибутах укажем «color: blue» и он будет голубым, несмотря на то что в «head» прописано «green», а в отдельном документе прописано «red».
Так это работает в зависимости от места написания стилей. Но есть еще и другие способы осуществить переопределение стиля CSS.
Переопределение стиля CSS при помощи идентификатора
Ситуация та же: у нас есть абзацы с классом «text» со значением цвета «red». Как переопределить стиль, если мы хотим некоторые абзацы сделать зеленого цвета, но при этом не хотим пользоваться предыдущим способом, а хотим сохранить все стили в одном документе?
В этом случае нам поможет идентификатор. По иерархии CSS стили идентификаторов перекрывают стили классов. К примеру, у нас есть наш элемент <p class=“text“ id=“green“>. Мы можем прописать стили для него, используя класс и идентификатор. В этом случае стили будут «накладываться» друг на друга, если они будут разными. Но если они в чем-то пересекутся, то главным будет стиль идентификатора. Например, в CSS мы укажем:
.text {color: red;}
#green {color: green;}
В этом случае абзацы с идентификатором «green» будут зеленого цвета, а не красного, так как значение идентификатора переопределяет значение класса! В общем, так можно переопределить стиль CSS, используя возможности идентификатора, но есть еще один интересный способ.
Переопределение стиля CSS при помощи атрибута «!important»
Может сложиться такая ситуация, что у вас в стилях получилась целая каша: куча разных селекторов, классов и идентификаторов. Вы испробовали разные методы, но у вас все равно не получается изменить стиль до нужного. Вы окончательно запутались в иерархии стилей и не знаете, что можно предпринять. Именно в этих случаях на помощь приходит атрибут «!important».
Работает он просто. Вам нужно дописать «!important» в конце стиля, который вы хотите добавить, и все. Например:
.text {color: red !important;}
Для этого атрибута не писаны правила и иерархия. Он указывает, что нужно использовать именно этот стиль, несмотря ни на что!
Но не нужно его «пихать» везде, где захочется. Если есть возможность решить проблему другими, более мягкими способами, то лучше это сделать ими, а «!important» использовать только в исключительных случаях. Потому что от его неправильного применения ситуация со стилями может только ухудшиться.
Заключение
Как видите, переопределение стиля CSS — это не самая сложная задача. Для любой ситуации можно найти свой подход. Если подход не нашли, тогда «!important» вам всегда поможет.
Web