• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как перезаписать встроенные стили в CSS (Переустановить встроенные по умолчанию стили с помощью CSS)
Как перезаписать встроенные стили в CSS
Kosten
Дата: Четверг, 2019-09-12, 19:47 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


Мы часто оказываемся в ситуациях, когда мы хотим переписать стиль, к которому у нас нет доступа, трудно найти или мы хотим переписать с помощью CSS стиль, который был написан в коде HTML или был установлен с помощью Javascrpt.

В этой статье мы собираемся обсудить силу различных стилевых объявлений и как мы можем их перезаписать.

Допустим, что у нас есть предложение ниже:

Код
<p>Здесь идет <span id="highlighted">Ключевое слово</span>.</p>

Чтобы выделить тег span, мы обычно используем стили CSS:

Например:

Код
#highlighted {
    color: red;
}

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

В этом случае текст будет синим:

Код
#highlighted {
    color: red;
}
#highlighted {
    color: blue;
}

Мы можем более точно нацелить диапазон, чтобы установить его цвет. В обоих случаях ниже цвет выделенного текста будет зеленым.

Код
span#highlighted {
    color: green;
}
#highlighted {
    color: red;
}

p #highlighted {
    color: green;
}
#highlighted {
    color: red;
}

Используйте знак !Important, чтобы переопределить свойство независимо от его положения в документе. «Важная» декларация всегда сильнее, чем без нее. Рекомендуется использовать их, только если это действительно необходимо.

В нашем примере ниже текст будет красным.

Код
p #highlighted {
    color: green;
}
#highlighted {
    color: red !important;
}

Встроенные стили HTML сильнее, чем CSS, поэтому в этом случае текст будет серым, но мы можем перезаписать это с помощью важного правила из таблицы стилей.

Код
p #highlighted {
    color: green;
}

HTML

Код
<p>Здесь идет <span id="highlighted" style="color: grey;">Ключевое слово</span>.</p>

В некоторых случаях стиль сбрасывается с помощью JavaScript / jQuery, и мы не можем перезаписать его таблицами стилей. В этом случае мы можем использовать самое сильное объявление CSS, которое перезаписывает все:
Код
#highlighted[style] {
   color: yellow !important;
}
Страна: (RU)
-SAM-
Дата: Пятница, 2019-09-13, 06:43 | Сообщение 2
Оффлайн
Друзья сайта
Сообщений:599
Награды: 25


Чтобы стиль обозначить тем, где нет инлайнового стиля, то можно так:
Код
#highlighted:not([style]) {
   color: yellow;
}
Но в случае с id - пример явно неудачный, поскольку на странице не должно быть в исходном коде элементов с одним и тем же id... то есть и стили соответственно, когда пишутся для id - нужно один раз указывать желаемые, не дублировать их.

И еще пример такой ситуации, когда ваши стили перекрываются другими. Допустим, ваш сайт на uCoz, что идёт my.css и под ним система ставит base.min.css... иногда нужно перекрыть стили системные, а там идёт в них !important (или еще ставит в инлайн-стиль это)... ставишь себе еще раз !important - толку не будет, ибо те стили подключены системой после пользовательских. Тогда можно использовать связку подобную:
Код
.highlighted:not([id]) {
   color: yellow !important;
}
То есть смотреть нужно код исходный, что когда там нет какого-то атрибута, то можно этим воспользоваться.




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи и ответы на ваши вопросы по системе uCoz.


Сообщение отредактировал
-SAM- - Пятница, 2019-09-13, 07:13
Страна: (UA)
Форум » Web-Раздел » Начинающему вебмастеру » Как перезаписать встроенные стили в CSS (Переустановить встроенные по умолчанию стили с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: