CSS: Приоритет стилей
Говоря о каскадности, возникает вопрос: «А что произойдет, если в разных источниках будут одинаковые правила для элемента, но с разными значениями?». В таком случае есть правила, определяющие приоритеты стилей из разных источников. По степени важности список выглядит следующим образом:
- Стили в атрибуте тега
- Стили в отдельном файле
- Стили по умолчанию, которые добавляет браузер
Если в одном из источников правила дублируются, то применятся те, которые были указаны последними.
.blue {
color: blue;
}
.blue {
color: red;
}
/* В данном случае текст в блоках с классом .blue будет красным, так как будет использовано последнее указанное правило */
У селекторов также существуют приоритеты. Для определения приоритета можно использовать таблицу, где каждому селектору даётся «вес»:
- Селектор по тегу: 1
- Селектор по классу: 10
- Селектор по ID: 100
- Стиль в атрибуте тега: 1000
<style>
.blue {
color: blue;
}
#red-block {
color: red;
}
</style>
<div class="blue" id="red-block" style="color: white;">Текст</div>
Какого цвета будет текст внутри блока? Воспользуемся таблицей выше, из которой следует, что селектор по классу (.blue
) имеет приоритет 10, а селектор по id (#red-block
) имеет приоритет 100. Значит, правило для id #red-block
«перебьёт» правило для класса .blue
. Помимо этого у нас есть инлайн стиль style="color: white;"
, который имеет «вес» 1000, а это значит, что он обладает наивысшим приоритетом.
Таким образом текст внутри блока будет белым.
Задание
Добавьте в редактор p
с классом border
и id no-border
. Установите следующие правила:
* Для класса border
установите сплошную рамку любого цвета толщиной 1px.
* Для id no-border
отмените рамку. Используйте значение none
у правила border-style
.
Стили запишите в теге style
.