Наследование в CSS.

Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.

Например, пусть у на web-странице есть заголовок и параграф, которые должны иметь текст красного цвета. Мы можем отдельно к параграфу и заголовку применить соответствующий стиль, который установит нужный цвет шрифта:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Наследование стилей в CSS3</title>
        <style>
            p {color: red;}
            h2 {color: red;}
        </style>
    </head>
    <body>
        <h2>Наследование стилей</h2>
        <p>Текст про наследование стилей в CSS 3</p>
    </body>
</html>

Однако поскольку и элемент p, и элемент h2 находятся в элементе body, то они наследуют от этого контейнера – элемента body многие стили. И чтобы не дублировать определение стиля, можно написать так:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Наследование стилей в CSS3</title>
        <style>
            body {color: red;}
        </style>
    </head>
    <body>
        <h2>Наследование стилей</h2>
        <p>Текст про наследование стилей в CSS 3</p>
    </body>
</html>

Значение inherit

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

Например, чтобы заставить теги <p> унаследовать рамку border от своего предка <body>, необходимо записать:

p { 
border: inherit; 
} 

Однако не ко всем свойствам CSS применяется наследование стилей. Например, свойства, которые представляют отступы (margin, padding) и границы (border) элементов, не наследуются.

Узнать, наследуется ли то или иное свойство, можно в стандарте CSS. Если в колонке «Inherited?» напротив нужного свойства стоит «yes», значит оно наследуется.

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

!important

Если после значения CSS свойства поставить пробел и написать !important, то это свойство всегда и везде будет иметь наивысший приоритет. Пример записи:

p{
color:red !important;
}

Благодаря тому, что наследование существует, можно экономить очень большое количество времени, сил и места в коде. Если бы таких правил не существовало, трудно представить, насколько бы усложнилась работа программиста.

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

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

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: