Обзор наследования CSS

Как наследование CSS работает в веб-документах

Важной частью стиля веб-сайта с помощью CSS является понимание концепции наследования.

Наследование CSS автоматически определяется стилем используемого свойства. Когда вы посмотрите на свойство стиля background-color, вы увидите раздел под названием «Наследование». Если вы похожи на большинство веб-дизайнеров, вы проигнорировали этот раздел, но он действительно служит цели.

Что такое наследование CSS?

Каждый элемент в HTML-документе является частью дерева, и каждый элемент, за исключением исходного, имеет родительский элемент, который его охватывает. Какие бы стили ни применялись к этому родительскому элементу, его можно применять к элементам, заключенным в него, если эти свойства являются наследуемыми.

Например, этот HTML-код ниже имеет тег H1, содержащий тег EM:

Элемент EM является дочерним элементом элемента H1, и любые стили в H1, которые наследуются, также будут переданы в текст EM. Например:

Поскольку свойство font-size наследуется, текст с надписью «Большой» (который заключен в теги EM) будет того же размера, что и остальная часть H1. Это потому, что он наследует значение, установленное в свойстве CSS.

Как использовать наследование CSS

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

Лучший способ использовать это – установить базовые стили на элементе очень высокого уровня, таком как BODY. Если вы установите семейство шрифтов в свойстве body, то благодаря наследованию весь документ сохранит то же семейство шрифтов. Это на самом деле будет делать для небольших таблиц стилей, которыми легче управлять, потому что в целом меньше стилей. Например:

Используйте значение Inherit Style

Каждое свойство CSS включает значение «наследовать» в качестве возможного параметра. Это говорит веб-браузеру, что даже если свойство обычно не наследуется, оно должно иметь то же значение, что и родительское свойство. Если вы устанавливаете стиль, такой как поле, которое не наследуется, вы можете использовать значение наследования для последующих свойств, чтобы дать им то же поле, что и у родительского. Например:

Наследование использует вычисленные значения

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

Если вы установите размер шрифта 1em для элемента BODY, вся ваша страница будет иметь размер не более 1em. Это связано с тем, что такие элементы, как заголовки (H1-H6) и другие элементы (некоторые браузеры по-разному вычисляют свойства таблицы), имеют относительный размер в веб-браузере. При отсутствии другой информации о размере шрифта, веб-браузер всегда делает заголовок H1 самым большим текстом на странице, затем H2 и так далее. Когда вы устанавливаете для элемента BODY определенный размер шрифта, он используется в качестве «среднего» размера шрифта, и элементы заголовка вычисляются из этого.

Замечание о наследовании и свойствах фона

Существует ряд стилей, которые перечислены как не унаследованные в CSS на W3C, но веб-браузеры по-прежнему наследуют значения. Например, если вы написали следующий HTML и CSS:

Слово «Большой» все равно будет иметь желтый фон, хотя свойство background-color не должно наследоваться. Это связано с тем, что начальное значение свойства фона является «прозрачным». Таким образом, вы не видите цвет фона на , а скорее, что цвет сияет от родителя.

Оцените статью
Solutics.ru
Добавить комментарий