Урок 9. Спадкування в css

Урок 9. Спадкування

Відео: Курс CSS - Урок №16. спадкування

Здрастуй, шановний читачу.

Це дев`ятий урок вивчення CSS. У цьому уроці ми розглянемо що таке спадкування і як уникнути помилок при спадкуванні.

Перед вивченням даного уроку (успадкування в CSS) пройдіть попередні уроки:

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

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

При написанні CSS стилів ми стикаємося з проблемою, що деякі наші властивості можуть перекривати інші властивості, які іюмет більший пріоритет. Але також, як ви вже знаєте з минулих уроків, деякі властивості можуть успадковувати значення від батьків. Розглянемо як в коді наочно це інша справа.

Приклад html коду:



1234567891011121314151617181920212223
lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;div id="Content"gt;lt;div class="FirstPar"gt;lt;pgt; Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.lt;/pgt;lt;pgt; Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.lt;/pgt;lt;/divgt;lt;div class="SecondPar"gt;lt;pgt; Craslt;/pgt;lt;ulgt;lt;ligt; amet condimentumlt;/ligt;lt;ligt; aliquam volutpatlt;/ligt;lt;ligt; elementum interdumlt;/ligt;lt;/ulgt;lt;/divgt;lt;/divgt;lt;/bodygt;lt;/htmlgt;

Відео: Курс CSS - урок №9. Специфічність селекторів CSS

Зараз подивіться на дерево, яке з себе представляє html:

HTML дерево

Зараз ви бачите що по відношенню до чого і як ставитися. А зараз приклад CSS коду з успадкуванням. Припустимо для задамо стиль тексту і колір червоний, буде успадковувати стиль і колір тексту, а буде мати інший стиль і колір.

1234567891011121314
#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 Євгенія Попова

Спадкування в CSS

Як бачите в другому div-е ми задали інший стиль і не успадковували від блоку батька. Стиль є пріоритетнішою для елементів які входять в цей блок, тому до них не применился стиль.

Відео: CSS. Базовий курс. (Євген Попов)

Ось як це сприймає браузер (скріншот з Firebug - плагін для Mozilla Firefox):

Скріншот Firebug

Сьогодні ми розглянули успадкування. Це був легкий урок і я впевнений що ви розберетеся в ньому! Якщо щось незрозуміло - пишіть в коментарях.

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!