Приоритеты стилей и каскадность: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

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

Список тем

Базовая специфичность селекторов

В этом задании вам нужно заполнить пропуски в CSS-коде, чтобы понять, как работает базовая специфичность селекторов. Текст параграфа должен быть зеленого цвета, несмотря на наличие других правил для этого элемента.

CSS

p {
  color: red;
}

.text {
  color: blue;
}

input1 {
  color: green;
}

                     p {
  color: red;
}

.text {
  color: blue;
}

input1 {
  color: green;
}

HTML

<p class="text" id="special-text">Этот текст должен быть зеленым.</p>

Селекторы в CSS имеют разную специфичность (вес). Селекторы по ID (#id) имеют больший приоритет, чем селекторы по классу (.class), которые в свою очередь имеют больший приоритет, чем селекторы по тегу (p). Для решения этой задачи вам нужно использовать селектор с достаточной специфичностью, чтобы переопределить другие правила.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинированные селекторы и специфичность

В этом задании вам нужно заполнить пропуски в CSS-коде, чтобы понять, как работает специфичность комбинированных селекторов. Нужно подобрать селектор так, чтобы текст в абзаце внутри div с классом 'container' был красным.

CSS

p {
  color: blue;
}

.text {
  color: green;
}

input1 {
  color: red;
}

                     p {
  color: blue;
}

.text {
  color: green;
}

input1 {
  color: red;
}

HTML

<div class="container">
  <p class="text">Этот текст должен быть красным.</p>
</div>
<p class="text">Этот текст не должен быть красным.</p>

Комбинация нескольких селекторов увеличивает специфичность правила. Например, 'div p' имеет больший вес, чем просто 'p'. Чтобы выбрать элемент с конкретным классом внутри другого элемента, используйте комбинированный селектор вида 'контейнер элемент' или 'контейнер > элемент' для прямых потомков.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Порядок объявления стилей

В этом задании вам нужно заполнить пропуски в CSS-коде, чтобы понять, как влияет порядок объявления стилей. Текст должен быть фиолетовым, используя селектор такой же специфичности, как и предыдущий.

CSS

.paragraph {
  color: orange;
}

input1 {
  color: purple;
}

                     .paragraph {
  color: orange;
}

input1 {
  color: purple;
}

HTML

<p class="paragraph">Этот текст должен быть фиолетовым.</p>

При одинаковой специфичности селекторов, применяется правило, которое было объявлено последним в таблице стилей. Это называется 'каскадностью'. Чтобы переопределить цвет, вам нужно добавить селектор с той же специфичностью, что и существующий, но расположенный ниже в коде CSS.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Наследование стилей

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

CSS

.container {
  input1: blue;
  background-color: #f0f0f0;
  padding: 20px;
}

                     .container {
  input1: blue;
  background-color: #f0f0f0;
  padding: 20px;
}

HTML

<div class="container">
  <h2>Заголовок</h2>
  <p>Этот абзац должен быть синим.</p>
  <span>Этот текст тоже должен быть синим.</span>
</div>

Некоторые CSS-свойства наследуются от родительских элементов к дочерним. Например, свойства текста, такие как color, font-family, font-size и другие. Чтобы все текстовые элементы внутри div наследовали цвет, примените свойство color к родительскому div.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Каскадность и !important

В этом задании вам нужно заполнить пропуски в CSS-коде, чтобы понять, как работает правило !important. Добавьте правильный селектор и использование !important, чтобы текст был красным, несмотря на более специфичные селекторы.

CSS

#main .text {
  color: blue;
}

.container #content p {
  color: green;
}

input1 {
  color: red input2;
}

                     #main .text {
  color: blue;
}

.container #content p {
  color: green;
}

input1 {
  color: red input2;
}

HTML

<div id="main" class="container">
  <div id="content">
    <p class="text">Этот текст должен быть красным.</p>
  </div>
</div>

Правило !important позволяет переопределить обычный порядок каскадности и специфичность. Когда вы добавляете !important к свойству, оно получает наивысший приоритет. Однако использовать !important следует осторожно, так как это может затруднить поддержку кода в будущем.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Переопределение встроенных стилей

В этом задании вам нужно заполнить пропуски в CSS-коде, чтобы понять, как можно переопределить встроенные стили. Добавьте правильное свойство и значение с !important, чтобы текст был синим, несмотря на встроенные стили.

CSS

#special {
  input1: input2;
}

                     #special {
  input1: input2;
}

HTML

<p id="special" style="color: red;">Этот текст должен быть синим, а не красным.</p>

Встроенные стили имеют очень высокий приоритет, но их можно переопределить, используя правило !important в внешних таблицах стилей. Когда вы добавляете !important к свойству в CSS-файле, оно получает приоритет даже над встроенными стилями (если в них нет !important).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сложная специфичность и каскадность

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

CSS

p {
  color: black;
}

body p {
  color: blue;
}

.content p {
  color: red;
}

input1 {
  color: green;
}

                     p {
  color: black;
}

body p {
  color: blue;
}

.content p {
  color: red;
}

input1 {
  color: green;
}

HTML

<div class="wrapper">
  <div class="content" id="main-content">
    <p class="text">Этот текст должен быть зеленым.</p>
  </div>
</div>

Специфичность селектора можно рассчитать по формуле: (количество ID, количество классов и атрибутов, количество элементов). Например, '#id .class p' имеет специфичность (1,1,1). Чем выше числа, тем выше специфичность. Вам нужно создать селектор, который будет иметь достаточную специфичность для переопределения существующих правил.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку