Как в CSS переопределить стили глобально

как в css переопределить стили глобально

В этом уроке я расскажу простыми словами как быстро и эффективно переопределить CSS стили на сайте. Селекторы, классы, идентификаторы. Рабочие трюки с примерами в CSS.

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

Например: вам нужно изменить выравнивание текста (text-align) в статьях на сайте. Но этот стиль прописан уже в исходном коде самой страницы (так называемые ВСТРОЕННЫЕ СТИЛИ). Выходя из этого, прописав стандартно стили в css файле – ничего не изменится. Встроенные стили имеют больший приоритет и перекрывают заданные вами!

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

Техника #1: переопределение с использованием идентификатора ID

Описание задачи: есть два абзаца в тексте. Им уже кто-то присвоил class и определил стили:

<p class="red">Абзац 2</p>
<p class="red">Абзац 3</p>
.red{color: red;}

pereopredelenie-css-styles

Таким образом класс red задает цвет для обоих абзацев. А что, если нам нужно переопределить цвет только Абзаца 3?

Решение: 

В таком случае лучше всего использовать идентификатор и отдельно прописать для него стили:

<p class="red" id="blue">Абзац 3<p>
#blue{color: blue;}

pereopredelenie-css-styles2

Таким образом, мы переопределили стиль для Абзаца 3.

Вывод: у идентификатора приоритет выше и он перекрывает стили заданного ранее класса!

Техника #2: переопределение с помощью атрибута !important

А теперь возьмем ситуацию посложнее. Когда у элемента целая каша: из селекторов, классов и идентификаторов. Вы прописываете стили для этого элемента – а ничего не происходит.

Что делать?

Банально просто: использовать декларацию (атрибут) !important.

Как он работает? Вы просто дописываете !important в конце вашего стиля, например:

p {text-align: left !important;}

И все. Он тупо “ломает” всю иерархию и приоритетность)) Для него правила не писаны!

Главное не переусердствовать – !important не панацея и если вы будете всюду его пихать, это может создать проблемы, сделает файл стилей сложным для понимания и отладки. Так что используйте в редких “ювелирных” случаях.

Удачи! Надеюсь этот урок был для вас полезным.

Оценка:
( 1 оценка, среднее 5 из 5 )
Подписка на KRASHENININ.TECH

Получайте регулярные обновления на почту!


Виталий Крашенинин/ автор статьи
Основатель блога, публицист, IT-специалист. Предоставляю услуги по администрированию, техническому обслуживанию и поисковому продвижению веб-сайтов.
Понравилась статья? Поделись в соцсетях:
KRASHENININ.TECH - блог о веб-технологиях, и не только
Подписаться
Уведомление о
guest
0 Комментарий
Встроенные отзывы
Просмотреть все комментарии
0
Буду рад вашим мыслям, пожалуйста, прокомментируйте.x
()
x