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

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

Например, все элементы, расположенные внутри элемента <body>, являются его дочерними элементами и потомками. Если в стиле для <body> задать с помощью CSS свойства color красный цвет текста, то цвет текста всех его дочерних элементов и потомков тоже станет красным:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      body { color: red; }
    </style>
  </head>
  <body>

    <h1>Цвет текста заголовка красный</h1>
    <p>Цвет текста абзаца тоже красный.</p>

  </body>
</html>

Попробовать »

Наследуемые свойства можно переопределить, применив индивидуальное правило для нужного элемента:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      body { color: red; }
      h1 { color: blue; } /* переопределили цвет текста внутри элементов h1 */
    </style>
  </head>
  <body>
    <h1>Цвет текста заголовка синий</h1>
    <p>Цвет текста абзаца красный.</p>
  </body>
</html>

Попробовать »

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

С этой темой смотрят: