Приоритет стилей

Говоря о каскадности, возникает вопрос: «А что будет, если в разных источниках стиля будут одинаковые правила, но с разными значениями?». В таком случае есть правила, определяющие приоритеты стилей из разных источников. По степени важности список выглядит следующим образом:

  • Стили в атрибуте тега
  • Стили в отдельном файле
  • Стили по умолчанию, которые добавляет браузер

Если в одном из источников правила дублируются, то применятся те, которые были указаны последними.

.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.

Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.