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

Для упрощения определения стилей в 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 многие стили. И чтобы не дублировать определение стиля, мы могли бы написать так:

		Это интересно Это интересно 0 0	Как всё будет выглядеть в блоге: Наследование стилей Для упрощения определения стилей в CSS применяется механизм наследования стилей Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/luchshie-kompyuternyie-programmyi/13221257/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Наследование стилей </a> <div class="insert-intro" style="font-family:trebuchet MS;">Для упрощения определения стилей в CSS применяется механизм наследования стилей </div> </div> Наследование стилей <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/luchshie-kompyuternyie-programmyi/13221257/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Наследование стилей</a> <div style="font-family:trebuchet MS;">Для упрощения определения стилей в CSS применяется механизм наследования стилей </div> </div>

webguru

08.02.2017

В избранное Пожаловаться Просмотров: 154

Следить

Комментарии ⁰

Лучшие компьютерные программы 6768

Активные участники:

Последние откомментированные темы:

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

Комментарии временно отключены

Открытая группа
1557 участников