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

Оцените материал
(0 голосов)

Для упрощения определения стилей в 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>

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

Здесь веб-страница имеет следующую структуру:

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

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

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

Прочитано 568 раз Последнее изменение Четверг, 30 июня 2016 15:02
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+