Важной частью оформления веб-сайта с помощью CSS является понимание концепции наследования.
Наследование CSS автоматически определяется стилем используемого свойства. Когда вы посмотрите на свойство стиля background-color, вы увидите раздел под названием «Наследование». Если вы похожи на большинство веб-дизайнеров, вы проигнорировали этот раздел, но он действительно служит цели.
Что такое наследование CSS?
Каждый элемент в HTML-документе является частью дерева, и каждый элемент, кроме начального элемента <html>, имеет родительский элемент, который его заключает. Какие бы стили ни применялись к этому родительскому элементу, его можно применять к элементам, заключенным в него, если эти свойства являются наследуемыми.
Например, этот HTML-код ниже имеет тег <h1>, включающий тег <em> :
<h1> Здравствуйте, <em> Lifewire </ em> </ h1>
Элемент <em> является дочерним элементом элемента <h1> , и любые стили в <h1> , которые унаследованы, также будут переданы в текст <em> . Например:
<style>
h1 {
font-size: 2.5rem;
}
</ style>
Поскольку свойство font-size наследуется, текст с надписью «Lifewire» (который заключен в теги <em> ) будет иметь тот же размер, что и остальные элементы <h1> . Это потому, что он наследует значение, установленное в свойстве CSS.
Как использовать наследование CSS
Самый простой способ его использования — ознакомиться со свойствами CSS , которые наследуются и не наследуются. Если свойство наследуется, то вы знаете, что значение останется одинаковым для каждого дочернего элемента в документе.
Лучший способ использовать это — установить базовые стили на элементе очень высокого уровня, таком как <body> . Если вы установите семейство шрифтов в свойстве body, то благодаря наследованию весь документ сохранит то же семейство шрифтов. Это на самом деле будет делать для небольших таблиц стилей, которыми легче управлять, потому что общих стилей меньше. Например:
body {
font-family: sans-serif;
цвет: # 121212;
размер шрифта: 1.rem;
выравнивание текста: слева;
}
h1, h2, h3, h4, h5 {
font-weight: bold;
семейство шрифтов: засечек;
выравнивание текста: по центру;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.75rem;
}
h4, h5 {
font-size: 1.25rem;
}
p.callout {
font-weight: bold;
выравнивание текста: по центру;
}
a {
color: # 00F;
текстовое оформление: нет;
}
Используйте значение Inherit Style
Каждое свойство CSS включает значение «наследовать» в качестве возможного параметра. Это говорит веб-браузеру, что даже если свойство обычно не наследуется, оно должно иметь то же значение, что и родительское свойство. Если вы устанавливаете стиль, такой как поле, которое не наследуется, вы можете использовать значение наследования для последующих свойств, чтобы дать им то же поле, что и у родительского. Например:
<style>
.outer-div {
background: # 00F;
высота: 20рем;
ширина: 100%;
маржа: 5рем авто;
}
.inner-div {
background: # F00;
высота: 10рем;
ширина: 75%;
маржа: наследовать;
}
</ style>
<div class = "external-div">
<div class = "inner-div">
</ div>
</ div>
Наследование использует вычисленные значения
Это важно для унаследованных значений, таких как размеры шрифтов, которые используют длины. Вычисленное значение — это значение, которое относится к некоторому другому значению на веб-странице.
Если вы установите размер шрифта 1em для элемента <body> , вся ваша страница будет иметь размер не более 1em. Это связано с тем, что такие элементы, как заголовки ( <h1> — <h6> ) и другие элементы (некоторые браузеры по-разному вычисляют свойства таблицы), имеют относительный размер в веб-браузере. При отсутствии другой информации о размере шрифта веб-браузер всегда создает заголовок <h1> самого большого текста на странице, затем <h2> и так далее. Когда вы устанавливаете для элемента <body> определенный размер шрифта, он используется в качестве «среднего» размера шрифта, и элементы заголовка вычисляются из этого.
<style>
body {
font-size: 1em;
}
h1 {
font-size: 2.25em;
}.
намного больше {
font-size: 1.25em;
}
</ style>
<h1> Здравствуйте, <em class = "намного больше"> Lifewire </ em> </ h1>
Посмотрите на пример. Базовый размер установлен в 1em. Это примерно 16 пикселей в большинстве браузеров. Затем <h1> устанавливается на 2,25em. Поскольку базовое значение равно 1em, что в любом случае обычно является значением по умолчанию, значение <h1> вычисляется в 2,25 раза больше этого значения, примерно 16 пикселей. Это делает <h1> около 36 пикселей.
Теперь вы можете ожидать, что элемент <em> станет меньше. Это определено только в 1.25em. Это не тот случай, хотя. Поскольку <em> является дочерним элементом для <h1> , размер шрифта вычисляется в 1,25 раза больше значения <h1> . Таким образом, текст внутри тега <em> будет иметь размер около 45 пикселей.
Замечание о наследовании и свойствах фона
Существует ряд стилей, которые перечислены как не унаследованные в CSS на W3C, но веб-браузеры по-прежнему наследуют значения. Например, если вы написали следующий HTML и CSS:
<style>
h1 {
background-color: yellow;
}
</ style>
<h1> <em> Большой </ em> заголовок </ h1>
Слово «Большой» все равно будет иметь желтый фон, хотя свойство background-color не должно наследоваться. Это потому, что начальное значение свойства фона является «прозрачным». Таким образом, вы не видите цвет фона на <em>, а скорее, что он сияет от родителя <h1>.