Лого SiteHere.ru

Урок 9. Наследование в CSS

Урок 9. Наследование

Здравствуй, уважаемый читатель.

Это девятый урок изучения CSS. В этом уроке мы рассмотрим что такое наследование и как избежать ошибок при наследовании.


Перед изучением данного урока (наследование в CSS) пройдите предыдущие уроки:


Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Урок 8. Оформление списков

Теория и практика

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

Пример html кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content">
        <div class="firstPar">
            <p>Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</p>
            <p>Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</p>
        </div>
        <div class="secondPar">
            <p>Cras</p>
            <ul>
                <li>amet condimentum</li>
                <li>aliquam volutpat</li>
                <li>elementum interdum</li>
            </ul>
        </div>
    </div>
</body>
</html>

Сейчас посмотрите на дерево, которое из себя представляет html:

HTML дерево

Сейчас вы видите что по отношению к чему и как относиться. А сейчас пример CSS кода с наследованием. Допустим для <div id="content"> зададим стиль текста и цвет красный, <div class="firstPar"> будет наследовать стиль и цвет текста, а <div class="secondPar"> будет иметь другой стиль и цвет.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#content{
    font:14px bold arial,verdana,sans-serif;
    color:#C91212;
}
 
.firstPar{
    font:inherit;
    color:inherit;
}
 
.secondPar{
    font:10px bold arial,verdana,sans-serif;
    color:#000CFF;
}

Как это выглядит в браузере:

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

Как видите во втором div-е мы задали другой стиль и не наследовали от блока родителя <div id="content">. Стиль <div class="firstPar"> является приоритетнее для элементов которые входят в этот блок, поэтому к ним не применился стиль <div id="content">.

Вот как это воспринимает браузер(скриншот из Firebug — плагин для Mozilla Firefox):

Скриншот Firebug

Сегодня мы рассмотрели наследование. Это был легкий урок и я уверен что вы разберетесь в нем! Если что-то непонятно — пишите в комментариях.

1 комментарий к записи
  • Алексей

    Теория и практика
    При написании CSS стилей мы сталкиваемся с проблемой, что некоторые наши свойства могут перекрывать другие свойства, которые (июмет).
    Ошибка в тексте, указал в скобках.

     

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

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