
Май 31, 2020 Запись была обновлена
Урок 9. Наследование в CSS

Здравствуй, уважаемый читатель.
Это девятый урок изучения 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:

Сейчас вы видите что по отношению к чему и как относиться. А сейчас пример CSS кода с наследованием. Допустим для
зададим стиль текста и цвет красный, будет наследовать стиль и цвет текста, а будет иметь другой стиль и цвет.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; } |
Как это выглядит в браузере:

Как видите во втором div-е мы задали другой стиль и не наследовали от блока родителя
. Стиль является приоритетнее для элементов которые входят в этот блок, поэтому к ним не применился стиль .Вот как это воспринимает браузер(скриншот из Firebug — плагин для Mozilla Firefox):

Сегодня мы рассмотрели наследование. Это был легкий урок и я уверен что вы разберетесь в нем! Если что-то непонятно — пишите в комментариях.
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Теория и практика
При написании CSS стилей мы сталкиваемся с проблемой, что некоторые наши свойства могут перекрывать другие свойства, которые (июмет).
Ошибка в тексте, указал в скобках.