Наследование стилей

Наследование стилей

Здравствуйте!  Для упрощения определения стилей в CSS применяется механизм наследования стилей. Этот механизм предполагает, что вложенные элементы могут наследовать стили своих элементов-контейнеров. Например, пуcть у нас на веб-странице есть заголовок и параграф, которые должны иметь текст красного цвета. Мы можем отдельно к параграфу и заголовку применить соответствующий стиль, который установит нужный цвет шрифта:

наследование стилей

<!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>

Просмотреть  пример

В итоге определение стилей стало проще, а результат остался тем же. Если нам нежелателен унаследованный стиль, то мы его можем переопределить для определенных элементов:

body {color: red;}
p {color: green;}

При нескольких уровнях вложенности элементы наследуют стили только ближайшего контейнера:

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

Просмотреть  пример

 

Для элемента div переопределяется цвет текста. И так как элемент h2 и один из параграфов находятся в элементе div, то они наследуют стиль именно элемента div. Второй параграф находится непосредственно в элементе body и поэтому наследует стиль элемента body.

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

Читайте также  Селекторы потомков

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

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

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