16. Наследственность.
Наследственность есть один из основопологающих принципов CSS.
Означает этот принцип то, что дочернии элементы могут наследовать значения некоторых свойств от своих родителей. Однако, ключевое слово здесь "некоторых" и в этом заключается сложность в освоении CSS.
Попробуем нарисовать таблицу и в ней отобразить наследуются или нет некоторые популярные свойства.
Бывают и исключения, например, подобные такому: если для элемента <body> указано значение для свойства font-size, то для дочерних элементов <p> оно будет наследоваться, но для дочерних элементов <h1> - нет.
Правила наследования достаточно логичны и с небольшим опытом приходит интуитивное понимание, что будет наследоваться, а что не будет.
Рассмотрим пример.
css_016_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_016_001.zip ← скачайте пример, чтобы установить на свой сайт...
Означает этот принцип то, что дочернии элементы могут наследовать значения некоторых свойств от своих родителей. Однако, ключевое слово здесь "некоторых" и в этом заключается сложность в освоении CSS.
Попробуем нарисовать таблицу и в ней отобразить наследуются или нет некоторые популярные свойства.
| Свойства | Наследуются |
|---|---|
| background и родственные: background-color, background-image и пр. | Нет |
| border-collapse | Да |
| border-color и родственные | Нет |
| border-spacing | Да |
| color | Да |
| cursor | Да |
| font и родственные | Да |
Правила наследования достаточно логичны и с небольшим опытом приходит интуитивное понимание, что будет наследоваться, а что не будет.
Рассмотрим пример.
Для элемента родителя div id="div_css_016" определяем некоторые свойства:
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #F0FFF9;
color: #FF00FF;
и далее смотрим, что из этого будет наследоваться в его "дочках":
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #F0FFF9;
color: #FF00FF;
и далее смотрим, что из этого будет наследоваться в его "дочках":
Элемент-дочка <p> должен унаследовать все из вышеуказанного...
Элемент-дочка <h2> отказывает наследовать font-size !
css_016_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_016_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
