Курс CSS. Урок 44.
Наследование ненаследуемых свойств с помощью значения inherit.
Наследование ненаследуемых свойств с помощью значения inherit.
Какие популярные свойства наследуются, а какие нет, мы изучали на
уроке 16
На данном уроке мы изучим специальное значение свойств inherit, которое обычно используется для того, чтобы насильно заставить унаследовать значения свойств, которые не наследуются по умолчанию.
Начнем с того, что расширим нашу таблицу по наследованию свойств. При этом не стоит бояться, что в нее войдут некоторые неизвестные нам свойства, как, например, azimuth. Дойдет с течением времени дело и до этих свойств.
Рассмотрим, как работает механизм наследования ненаследуемых свойств, используя значения inherit таких свойств: background-color, border. Из таблицы выше видно, что эти свойства не наследуют значения родителей и имеют по умолчанию следующие значения:
background-color:transparent; (прозрачный)
border:Зависит от браузера (чаще всего отсутствует)
Пример 1. Вложенный элемент не наследует значения свойств родителя.
Пример 2. Вложенный элемент наследует значения свойств родителя с помощью специального значения inherit.
Пример 3. Вложенный элемент меняет значения свойств при изменения значений свойств родителя.
В данном примере при нажатии кнопки "Изменить цвет фона" изменяется цвет фона родительского дива. А дочерний элемент меняет цвет фона благодаря значению inherit в свойстве background-color.
Ключевые моменты в файле стилей css.
А сам этот головной файл css подключаем к файлу html точно также, как и раньше.
css_044_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_044_001.zip ← скачайте пример, чтобы установить на свой сайт...
На данном уроке мы изучим специальное значение свойств inherit, которое обычно используется для того, чтобы насильно заставить унаследовать значения свойств, которые не наследуются по умолчанию.
Начнем с того, что расширим нашу таблицу по наследованию свойств. При этом не стоит бояться, что в нее войдут некоторые неизвестные нам свойства, как, например, azimuth. Дойдет с течением времени дело и до этих свойств.
| Свойства | Значения по умолчанию | Наследуются ли? |
|---|---|---|
| azimuth | center | Да |
| background-attachment | scroll | Нет |
| background-color | transparent | Нет |
| background-image | none | Нет |
| background-position | 0% 0% | Нет |
| background-repeat | repeat | Нет |
| background | См значения составных свойств | Нет |
| border-collapse | separate | Да |
| border-color | См значения составных свойств | Нет |
| border-spacing | 0 | Да |
| border-style | См значения составных свойств | Нет |
| border-top border-right border-bottom border-left | См значения составных свойств | Нет |
| border-top-color border-right-color border-bottom-color border-left-color | Значение свойства color | Нет |
| border-top-style border-right-style border-bottom-style border-left-style | none | Нет |
| border-top-width border-right-width border-bottom-width border-left-width | medium | Нет |
| border-width | См значения составных свойств | Нет |
| border | См значения составных свойств | Нет |
| bottom | auto | Нет |
| caption-side | top | Да |
| clear | none | Нет |
| clip | auto | Нет |
| color | Зависит от браузера | Да |
| content | normal | Нет |
| counter-increment | none | Нет |
| counter-reset | none | Нет |
| cue-after | none | Нет |
| cue-before | none | Нет |
| cue | См значения составных свойств | Нет |
| cursor | auto | Да |
| direction | ltr | Да |
| display | inline | Нет |
| elevation | level | Да |
| empty-cells | show | Да |
| float | none | Нет |
| font-family | Зависит от браузера | Да |
| font-size | medium | Да |
| font-style | normal | Да |
| font-variant | normal | Да |
| font-weight | normal | Да |
| font | См значения составных свойств | Да |
| height | auto | Нет |
| left | auto | Нет |
| letter-spacing | normal | Да |
| line-height | normal | Да |
| list-style-image | none | Да |
| list-style-position | outside | Да |
| list-style-type | disc | Да |
| list-style | См значения составных свойств | Да |
| margin-right margin-left | 0 | Нет |
| margin-top margin-bottom | 0 | Нет |
| margin | См значения составных свойств | Нет |
| max-height | none | Нет |
| max-width | none | Нет |
| min-height | 0 | Нет |
| min-width | 0 | Нет |
| orphans | 2 | Да |
| outline-color | invert | Нет |
| outline-style | none | Нет |
| outline-width | medium | Нет |
| outline | См значения составных свойств | Нет |
| overflow | visible | Нет |
| padding-top padding-right padding-bottom padding-left | 0 | Нет |
| padding | См значения составных свойств | Нет |
| page-break-after | auto | Нет |
| page-break-before | auto | Нет |
| page-break-inside | auto | Нет |
| pause-after | 0 | Нет |
| pause-before | 0 | Нет |
| pause | См значения составных свойств | Нет |
| pitch-range | 50 | Да |
| pitch | medium | Да |
| play-during | auto | Нет |
| position | static | Нет |
| quotes | Зависит от браузера | Да |
| richness | 50 | Да |
| right | auto | Нет |
| speak-header | once | Да |
| speak-numeral | continuous | Да |
| speak-punctuation | none | Да |
| speak | normal | Да |
| speech-rate | medium | Да |
| stress | 50 | Да |
| table-layout | auto | Нет |
| text-align | безымянное значение, которое действует как 'left' если direction:ltr, и 'right' если direction:rtl |
Да |
| text-decoration | none | Нет |
| text-indent | 0 | Да |
| text-transform | none | Да |
| top | auto | Нет |
| unicode-bidi | normal | Нет |
| vertical-align | baseline | Нет |
| visibility | visible | Да |
| voice-family | Зависит от браузера | Да |
| volume | medium | Да |
| white-space | normal | Да |
| widows | 2 | Да |
| width | auto | Нет |
| word-spacing | normal | Да |
| z-index | auto | Нет |
Рассмотрим, как работает механизм наследования ненаследуемых свойств, используя значения inherit таких свойств: background-color, border. Из таблицы выше видно, что эти свойства не наследуют значения родителей и имеют по умолчанию следующие значения:
background-color:transparent; (прозрачный)
border:Зависит от браузера (чаще всего отсутствует)
Пример 1. Вложенный элемент не наследует значения свойств родителя.
Вложенный элемент не наследует значения свойств родителя.
свойства: background-color, border - по умолчанию...
Большой див является родителем для внутреннего маленького дива, но он не передает дочке значения ненаследуемых свойств.
свойства: background-color, border - по умолчанию...
Пример 2. Вложенный элемент наследует значения свойств родителя с помощью специального значения inherit.
Вложенный элемент наследует значения свойств background-color, border родителя
с помощью специального значения inherit...
Большой див является родителем для внутреннего маленького дива. Значения свойств background-color, border родителя передаются дочке с помощью специального значения inherit...
с помощью специального значения inherit...
Пример 3. Вложенный элемент меняет значения свойств при изменения значений свойств родителя.
Вложенный элемент наследует значения свойств background-color, border родителя
с помощью специального значения inherit...
Большой див является родителем для внутреннего маленького дива. Значения свойств background-color, border родителя передаются дочке с помощью специального значения inherit...
с помощью специального значения inherit...
В данном примере при нажатии кнопки "Изменить цвет фона" изменяется цвет фона родительского дива. А дочерний элемент меняет цвет фона благодаря значению inherit в свойстве background-color.
Ключевые моменты в файле стилей css.
.block_big_css_044 {
background-color:#D2F2F2;
width:400px;
height:60px;
padding:10px;
border:3px ridge #00FF00;
padding: 5px;
margin: 5px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:10px;
position:relative;
}
.block_little_css_044 {
width:220px;
height:40px;
padding:5px;
margin:5px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:8px;
position:absolute;
bottom:-30px;
right:-100px;
}
.block_little_inherit_css_044 {
background-color:inherit;
border:inherit;
}
css_044_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_044_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
