Наследование и каскадирование / Каскадирование [8/18]
×

Каскадирование [8/18]

CSS расшифровывается как «Cascading Style Sheets» или «каскадные таблицы стилей».

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

Например, для элемента:

<p class="text" style="color: red;"></p>

CSS-правила существуют как минимум в трёх разных местах:

  1. в подключаемом файле style.css для селекторов p или .text;
  2. в атрибуте style;
  3. в стандартных стилях отображения, встроенных в браузер.

Каскадирование как раз и определяет, какие именно свойства из этих источников применятся к данному абзацу.

Имеется три основные концепции, управляющие порядком, в котором применяются CSS-свойства:

  1. важность;
  2. специфичность;
  3. порядок исходного кода.

Самыми важными для нас являются последние две и подробнее о них мы поговорим отдельно.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Каскадирование</title> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="block1"> <p>Строка текста в первом блоке</p> <p class="message">Еще одна строка текста в первом блоке</p> <ul> <li>Первый элемент списка</li> <li>Второй элемент списка</li> <li>Третий элемент списка</li> </ul> </div> <div class="block2 message"> <p>Строка текста во втором блоке</p> <p class="message">Еще одна строка текста во втором блоке</p> </div> </body> </html>
CSS
body { font-family: "PT Sans", sans-serif; }
HTML Academy
  1. Для всех p задайте размер шрифта 11px.
  2. Для блока .block1 установите цвет текста #1abc9c.
  3. Для элементов с классом .message установите внутренний отступ 5px, рамку 1px solid #95a5a6 и цвет текста #95a5a6.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.