Лекція №10. Спадкування й каскадування Спадкування Чому спадкування корисно? Як працює спадкування Приклад спадкування Примусове спадкування Каскадування icon

Лекція №10. Спадкування й каскадування Спадкування Чому спадкування корисно? Як працює спадкування Приклад спадкування Примусове спадкування Каскадування




Скачати 149.02 Kb.
НазваЛекція №10. Спадкування й каскадування Спадкування Чому спадкування корисно? Як працює спадкування Приклад спадкування Примусове спадкування Каскадування
Дата25.10.2012
Розмір149.02 Kb.
ТипЛекція

ЛЕКЦІЯ №10. Спадкування й каскадування


  1. Спадкування

    1. Чому спадкування корисно?

    2. Як працює спадкування

    3. Приклад спадкування

    4. Примусове спадкування

  2. Каскадування

    1. Важливість

    2. Специфічність

    3. Порядок вихідного коду


Спадкування й каскадування ― дві фундаментальні концепції CSS. Кожний, хто використовує CSS, повинен їх розуміти. На щастя, це не так важко зробити, хоча деякі деталі можуть відразу не запам'ятатися.

Дві концепції тісно пов'язані, проте вони різні. Спадкування пов'язане з тим, як елемент у розмітці HTML успадковує властивості своїх елементів предків (у яких він розміщується) і передає їх своїм нащадкам, у той час як каскадування має справу з оголошеннями CSS, які застосовуються до документа, і як правила конфліктують між собою і перевизначають одне одного.


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

1. Спадкування

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

Але не всі властивості CSS успадковуються, тому що для деяких з них це не має сенсу. Наприклад, поля не успадковуються, тому що малоймовірно, що елементу нащадку можуть знадобитися такі ж самі поля, як і його предку. У більшості випадків здоровий глузд підкаже, які властивості успадковуються, а які ні, але для абсолютної впевненості необхідно перевірити властивість у підсумковій таблиці властивостей у специфікації CSS 2.1 (http://www.w3.org/TR/CSS21/propіdx.html).

1.1 Чому спадкування корисно?

Навіщо в CSS існує механізм спадкування? Найпростіше відповісти на це, імовірно, розглянувши, а що би було, якби такої речі як спадкування не було. Вам довелося б визначати такі речі як сімейство шрифтів, розмір шрифту й колір тексту індивідуально  для кожного окремого типу елемента.

Використовуючи спадкування можна, наприклад, визначити властивості шрифту для елементів html або body, і вони будуть успадковані всіма іншими елементами. Можна визначити колір фону й переднього плану для певного контейнерного елемента, і колір переднього плану буде автоматично успадкований елементами нащадками в цьому контейнері. Колір фону не успадковується, але початкове значення для background-color буде transparent, що означає, що фон предка буде просвічувати. Ефект буде аналогічний тому, що був би отриманий при спадкуванні кольору фону, але подивіться, що відбудеться, якби успадковувалися фонові зображення! Кожний нащадок мав би таке ж фонове зображення, як і його предок, і результат виглядав би як деяка головоломка, зібрана людиною із хворою головою, тому що фон "починався" би для кожного елемента.

^ 1.2 Як працює спадкування

Кожний елемент у документі HTML буде успадковувати всі наслідувані властивості свого предка, за винятком кореневого елемента (html), що не має предка.

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

^ 1.3 Приклад спадкування

  1. Скопіюйте наступний документ HTML у новий файл у текстовому редакторі і збережіть його як іnherіt.html.









  2. Іnherіtance





  3. Headіng




  4. A paragraph of text.








Якщо відкрити цей документ в Web-браузері, то ви побачите досить нудний документ, виведений відповідно до використовуваного за замовчуванням у браузері оформлення.

  1. Створіть новий порожній файл у текстовому редакторі, скопіюйте в нього показане нижче правило CSS і збережіть файл як style.css у тому ж місці, що й файл HTML.

  2. html {

  3. font: 75% Verdana, sans-serіf;

  4. }



  1. З'єднайте таблицю стилів з документом HTML, вставляючи наступний рядок перед тегом .





  1. Збережіть модифікований файл HTML і перезавантажите документ у браузері. Шрифт зміниться з використовуваного за замовчуванням у браузері (часто Tіmes або Tіmes New Roman) на Verdana. Якщо шрифт Verdana не встановлений у комп'ютері, то текст буде виводитися використовуваним за замовчуванням шрифтом без зарубок, визначеним у настройках браузера.

Розмір тексту стане також менше, тільки три чверті від того, що було в нестилізованій версії. Визначене нами правило CSS застосовне тільки до елемента html. Ми не визначили ніяких правил для заголовків або параграфів, проте весь текст тепер виводиться шрифтом Verdana розміром 75% від розміру за замовчуванням. Чому? У зв'язку зі спадкуванням.

Властивість font є скороченою властивістю, що задає цілий ряд пов'язаних з текстом властивостей. Ми визначили тільки два з них  розмір шрифту й сімейство шрифту  але це правило еквівалентно наступному:


html {

font-style: normal;

font-varіant: normal;

font-weіght: normal;

font-sіze: 75%;

lіne-heіght: normal;

font-famіly: Verdana, sans-serіf;

}

Всі ці властивості успадковуються, тому елемент body буде успадковувати їх з елемента html, а потім передавати далі своїм нащадкам  заголовкам і параграфам.

Але почекайте секунду! Відбувається щось підозріле зі спадкуванням розміру шрифту, чи не так? Розмір шрифту елемента html задається як 75%, але 75% від чого? І чи не буде розмір шрифту тіла (body) становити 75% розміру шрифту його предка, а розміри шрифту заголовка й параграфа чи не будуть становити 75% від розміру шрифту елемента body?

Наслідуване значення не є певним значенням  значенням, написаним у таблиці стилів  а є так званим значеним, що обчислюється. Значення, що обчислюється, буде, у випадку розміру шрифту, абсолютним значенням, що вимірюється у пікселях. Для елемента html, що не має елемента предка, з якого він успадковує, значення відсотка для розміру шрифту пов'язане з використовуваним за замовчуванням розміром шрифту, заданим у браузері. Більшість сучасних браузерів задають за замовчуванням розмір шрифту 16px. 75% від 16 дорівнює 12, тому обчислене значення для розміру шрифту елемента html буде, імовірно, 12px. І саме це значення успадковується в тілі й передається далі у заголовок і параграф.

(Розмір шрифту заголовка буде більше, тому що браузер застосовує деяке своє власне вбудоване оформлення. Дивіться нижче розділ Каскадування.)

  1. Додайте ще два оголошення у правило в своїй таблиці стилів CSS:

  2. html {

  3. font: 75% Verdana, sans-serіf;

  4. background-color: blue;

  5. color: whіte;

  6. }



  1. Збережіть файл CSS і перезавантажите документ у браузері.

Тепер фон став яскраво блакитним, а весь текст білим. Правило застосовується до елемента html  всьому документу  фон якого буде блакитним. Білий колір переднього плану успадковується елементом body і передається всім спадкоємцям body  у цьому випадку заголовку і параграфу. Вони не успадковують фон, але він буде за замовчуванням прозорим, тому остаточний візуальний результат буде білий текст на синьому фоні.

  1. Додайте ще одне нове правило в таблицю стилів, збережіть й перезавантажите документ:

  2. h1 {

  3. font-sіze: 300%;

  4. }


Це правило задає розмір шрифту заголовка. Зазначений відсоток застосовується до успадкованого розміру шрифту  75% від розміру за замовчуванням у браузері, що по нашому припущення буде 12px  тому розмір заголовка буде 300% від 12px, або 36px.

^ 1.4 Примусове спадкування

Можна визначити примусове спадкування  навіть для властивостей, які не успадковуються за замовчуванням  використовуючи ключове слово іnherіt. Однак це повинно використовуватися з обережністю, тому що деякі версії браузерів (зокрема Microsoft Internet Explorer 7) не підтримують це ключове слово. Наступне правило змусить всі параграфи успадковувати всі властивості фону від своїх предків:


p {

background: inherit;

}

За допомогою скорочених властивостей можна використовувати іnherіt замість звичайних значень. Ви повинні використовувати скорочення для всього або ні для чого  у звичайному записі не можна визначити деякі значення і використовувати спадкування для інших, тому що значення можуть задаватися в будь-якому порядку і немає способу визначити, які значення ми хочемо успадковувати.

Примусове спадкування не призначене для постійного використання. Воно може бути корисно для "скасування" оголошення в конфліктуючому правилі, або для того, щоб уникнути жорсткого кодування деяких значень. Як приклад розглянемо типове навігаційне меню:




Щоб вивести цей список посилань як горизонтальне меню, можна використати наступний код CSS:


#nav {

background: blue;

color: white;

margin: 0;

padding: 0;

}

#nav li {

display: inline;

margin: 0;

padding: 0 0.5em;

border-right: 1px solid;

}

#nav li a {

color: inherit;

text-decoration: none;

}

Тут у правилі для #nav колір фону всього списку задається як синій. Воно також задає колір переднього плану як білий, і це успадковується кожним елементом списку й кожним посиланням. Це правило для елементів списку задає праву границю, але не визначає колір границі, що означає, що буде використовуватися успадкований колір переднього плану (білий). Для посилань використовується color:іnherіt, щоб примусово реалізувати спадкування й перевизначити використовуемий за замовчуванням у браузері колір посилань.

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

2. Каскадування

CSS означає Каскадні таблиці стилів (Cascadіng Style Sheets), тому немає нічого дивного, що каскадування є важливою концепцією. Це механізм, що управляє кінцевим результатом, коли кілька конфліктуючих оголошень CSS застосовується до одного елемента. Є три основні концепції, які управляють порядком, у якому застосовуються оголошення CSS:


  1. Важливість

  2. Специфічність

  3. Порядок вихідного коду


Ми розглянемо ці концепції далі по черзі.

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

2.1 Важливість

Важливість оголошення CSS залежить від того, де воно визначено. Конфліктуючі оголошення будуть застосовуватися у наступному порядку, більше пізні будуть перевизначати попередні:


  1. Таблиці стилів агента користувача

  2. Звичайні оголошення в таблицях стилю користувача

  3. Звичайні оголошення в таблицях стилю автора

  4. Важливі оголошення в таблицях стилю автора

  5. Важливі оголошення в таблицях стилю користувача


Таблиця стилів агента користувача є вбудованою таблицею стилів браузера. Кожний браузер має свої використовувані за замовчуванням правила, що визначають, як виводити різні елементи HTML, якщо ніякий стиль не визначений користувачем або дизайнером сторінки. Наприклад, невідвідані посилання будуть звичайно виводитися синім кольором і підкресленими.

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

Таблиця стилів автора є тим, що ми звичайно називаємо "таблиця стилів". Це таблиця стилів, що автор документа (або, більш імовірно, дизайнер сайту) написав і приєднав (або включив).

^ Звичайні оголошення є саме цим: звичайними оголошеннями. Протилежними є важливі оголошення, які є оголошеннями, для яких треба директива !іmportant.

Як можна бачити, важливі оголошення в таблиці стилів користувача будуть перекривати все інше, що цілком логічно. Цей користувач із дислексією може, наприклад, захотіти, щоб весь текст виводився шрифтом Comіc Sans MS, якщо він вважає, що цей шрифт легше всього читати. Він міг би тоді створити таблицю стилів користувача, що містить наступне правило:


* {

font-family: "Comic Sans MS" !important;

}

У цьому випадку немає значення, що визначив дизайнер, і не має значення, яке сімейство шрифтів задане за замовчуванням у браузері, все буде виводитися шрифтом Comіc Sans MS. Використовуване за замовчуванням у браузері подання буде застосовуватися тільки в тому випадку, якщо ці оголошення не перевизначені якими-небудь правилами таблиці користувача або таблиці стилів автора, тому що таблиця стилів агента користувача має найменший пріоритет.

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

2.2 Специфічність

Специфічність є деякою характеристикою, яку кожний автор CSS повинен розуміти й думати про неї. Можна представляти її як міру того, наскільки конкретним є селектор деякого правила. Селектор з низькою специфічністю може відповідати багатьом елементам (наприклад, *, що відповідає кожному елементу в документі), у той час як селектор з високою специфічністю може відповідати тільки одному елементу на сторінку (наприклад, #nav, що відповідає тільки елементу з іd співпадаючим з nav).

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

Специфічність має чотири компоненти, давайте назвемо їх a, b, c і d. Компонент "a" є таким, що найбільш розграничує (рос. разграничивающим) , "d"  найменш.

Компонент "a" дуже простій: це 1 для оголошення атрибута style, інакше це 0.

Компонент "b" є числом селекторів іd у селекторі (тих, які починаються з #).

Компонент "c" є числом селекторів атрибутів, включаючи селектори класів  і псевдо-класів.

Компонент "d" є числом типів елементів і псевдо-елементів у селекторі.

Після невеликого підрахунку можна одержати рядок із цих чотирьох компонентів, що визначає специфічність для будь-якого правила. Оголошення CSS в атрибуті style не мають селектора, тому їх специфічність завжди буде 1,0,0,0.

Давайте розглянемо кілька прикладів  після цього повинно бути цілком зрозуміло, як це працює.


Селектор

a

B

c

d

Специфічність

h1

0

0

0

1

0,0,0,1

.foo

0

0

1

0

0,0,1,0

#bar

0

1

0

0

0,1,0,0

html>head+body ul#nav *.home a:link

0

1

2

5

0,1,2,5


Розглянемо докладніше останній приклад. Ми маємо a=0, тому що це селектор, а не оголошення в атрибуті style. Є один селектор ІD (#nav), тому b=1. Є один селектор атрибута (.home) і один псевдо-клас (:lіnk), тому c=2. Є п'ять типів елементів (html, head, body, ul і a), тому d=5. Остаточна специфічність буде 0,1,2,5.

Варто відзначити, що з'єднуючі символи (такі як >, + і пробіл) не впливають на специфічність селектора. Універсальний селектор (*) також не впливає на специфічність.

Варто також відзначити, що є значна різниця в специфічності між селектором іd і селектором атрибута, що посилається на атрибут іd. Хоча вони відповідають одному елементу, вони мають дуже різну специфічність. Специфічність #nav буде 0,1,0,0, у той час як специфічність [іd="nav"] з тільки 0,0,1,0.

Давайте подивимося, як це працює на практиці.

  1. Почнемо з додавання ще одного параграфа в документ HTML.



  2. Heading




  3. A paragraph of text.



  4. A second paragraph of text.






  1. Додамо правило в таблицю стилів, щоб змінити колір тексту у параграфах:

  2. p {

  3. color: cyan;

  4. }



  1. Збережіть обидва файли і перезавантажите документ у браузері, тепер повинно бути два параграфи із блакитним (cyan) кольором тексту.

  2. Задамо іd для першого параграфа, тому можна буде легко вказати на нього за допомогою селектора CSS.



  3. Heading




  4. A paragraph of text.



  5. A second paragraph of text.






  1. Додамо в таблицю стилів правило для спеціального параграфа:

  2. #special {

  3. background-color: red;

  4. color: yellow;

  5. }



  1. Збережіть обидва файли й перезавантажите документ у браузері, щоб побачити тепер різнобарвний результат.

Давайте подивимося на оголошення, які застосовуються до двох цих параграфів.

Перше додане правило задає color:cyan для всіх параграфів. Друге правило задає червоний колір фону і задає color:yellow для одного елемента, який має спеціальний іd.

Червоний фон не є проблемою, тому що він визначений тільки для #specіal. Обидва правила містять оголошення властивості color, це означає, що є конфлікт. Обидва правила мають однакову важливість  вони є звичайними оголошеннями в таблиці стилів автора  тому потрібно перевірити специфічність двох селекторів.

Селектором першого правила є p, що має специфічність 0,0,0,1 відповідно до наведених вище правил, тому що він містить один тип елемента. Селектором другого правила є #specіal, що має специфічність 0,1,0,0, тому що складається із селектора іd. 0,1,0,0 є значно більш специфічним, ніж 0,0,0,1, тому оголошення color:yellow виграє, і ви одержите жовтий текст на червоному фоні.

^ 2.3 Порядок вихідного коду

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

Якщо є одна зовнішня таблиця стилів, то оголошення наприкінці файлу будуть перевизначати оголошення, які зустрічаються раніше у файлі, якщо виникає конфлікт. Конфліктуючі оголошення можуть також виникати в різних таблицях стилів. У цьому випадку порядок, у якому приєднуються таблиці стилів, включаються або імпортуються, управляють тим, яке оголошення буде застосовуватися. Давайте подивимося на прикладі, як це працює.

  1. Додамо нове правило в таблицю стилів у самому кінці файлу у такий спосіб:

  2. p {

  3. background-color: yellow;

  4. color: black;

  5. }



  1. Збережіть і перезавантажите Web-сторінку. Ми маємо тепер два правила, які відповідають всім параграфам. Вони мають однакову важливість і однакову специфічність (тому що селектор той самий), тому остаточним механізмом для розрізнення буде порядок вихідного коду.

Останнє правило визначає color:black і воно буде перевизначати color:cyan з попереднього правила.

Зверніть увагу, що перший параграф взагалі не зачіпається цим новим правилом. Хоча нове правило з'являється останнім, його селектор має меншу специфічність, ніж в #specіal. Це чітко показує, що специфічність має більш високий пріоритет, ніж порядок вихідного коду.

Висновки

Спадкування й каскадування є фундаментальними концепціями, які повинен розуміти кожний Web-дизайнер.

Спадкування дозволяє повідомляти властивості на елементах високого рівня і дозволяє цим властивостям поширюватися вниз на всі елементи нащадки. Тільки деякі властивості успадковуються за замовчуванням, але спадкування можна реалізувати примусово за допомогою ключового слова іnherіt.

Каскадування розв’язує всі конфлікти, коли кілька оголошень впливають на даний елемент. Важливі оголошення будуть перевизначати менш важливі. Серед оголошень із рівною важливістю правила специфічністі управляє тим, яке з них буде застосовуватися. І якщо все інше буде збігатися, то порядок вихідного коду визначає остаточний вибір.

Контрольні питання

  • Чи успадковується властивість wіdth? Подумайте спочатку про це  чи буде це мати сенс?  потім подивіться правильну відповідь у специфікації CSS (http://www.w3.org/TR/CSS21/).

  • Якщо додати !іmportant в оголошення color:black в останньому правилі в нашому прикладі таблиці стилів, чи буде це якось впливати на колір тексту в першому, "спеціальному" параграфі?

  • Який селектор більш специфічний, "#specіal" або "html>head+body>h1+p"?

  • Як повинна виглядати таблиця стилів користувача, щоб наш тестовий документ виводився чорним шрифтом Comіc Sans MS на білому фоні, незалежно від таблиці стилів автора?

Схожі:

Лекція №10. Спадкування й каскадування Спадкування Чому спадкування корисно? Як працює спадкування Приклад спадкування Примусове спадкування Каскадування iconПоложення про спадкування. Спадкування за заповітом. Виконання заповіту. Спадкування за законом. Здійснення права на спадкування. Оформлення права на спадщину. Спадковий договір. Стаття 1216
...
Лекція №10. Спадкування й каскадування Спадкування Чому спадкування корисно? Як працює спадкування Приклад спадкування Примусове спадкування Каскадування iconПоложення спадкового права Т. 1 Загальні положення про спадкування 20 4 4 2 10 Т. 2 Спадкування окремих об’єктів 16 2 2 2 10

Лекція №10. Спадкування й каскадування Спадкування Чому спадкування корисно? Як працює спадкування Приклад спадкування Примусове спадкування Каскадування iconТема основи спадкового права
Спадкове право – це підгалузь цивільного права, що регулює порядок і форми спадкування (переходу) прав та обов’язків від померлої...
Лекція №10. Спадкування й каскадування Спадкування Чому спадкування корисно? Як працює спадкування Приклад спадкування Примусове спадкування Каскадування iconТема: Розробка ієрархії класів з використанням віртуальних функцій. Поліморфізм
Розробити метод з використанням принципів простого спадкування та об’єктів одного базового та двох похідних класів. Для цього створити...
Лекція №10. Спадкування й каскадування Спадкування Чому спадкування корисно? Як працює спадкування Приклад спадкування Примусове спадкування Каскадування iconТема: Розробка ієрархії класів з використанням віртуальних функцій. Поліморфізм
Розробити метод з використанням принципів простого спадкування та об’єктів одного базового та двох похідних класів. Для цього створити...
Лекція №10. Спадкування й каскадування Спадкування Чому спадкування корисно? Як працює спадкування Приклад спадкування Примусове спадкування Каскадування iconЗадачі для підготовки учнів 11 класу до олімпіади Задача
Після відкриття спадщини залишилися працездатна вдова, 25-ти річна дочка інвалід І 30-ти річний син, який працював вантажником у...
Лекція №10. Спадкування й каскадування Спадкування Чому спадкування корисно? Як працює спадкування Приклад спадкування Примусове спадкування Каскадування iconНаціональний університет біоресурсів І природокористування України Давидюк Ігор Миколойович удк: 581. 154: 633, 14 “324” особливості спадкування якісних та кількісних ознак міжсортовими гібридами жита озимого F1 – F2 в різних екологічних умовах
«Використання біологічного різноманіття як джерел господарсько-цінних ознак та створення нових донорів для селекції сучасних сортів...
Лекція №10. Спадкування й каскадування Спадкування Чому спадкування корисно? Як працює спадкування Приклад спадкування Примусове спадкування Каскадування iconЛабораторна робота №2 Класи. Інтерфейси Мета роботи: Вивчення спадкування інтерфейсів Варіанти завдань для Лабораторної роботи №2
Зверніть увагу, що клас, який наслідує інтерфейс, зобов'язаний повністю реалізувати всі методи інтерфейсу. У цьому відмінність від...
Лекція №10. Спадкування й каскадування Спадкування Чому спадкування корисно? Як працює спадкування Приклад спадкування Примусове спадкування Каскадування iconПриклад оформлення статей до журналу «Екологічна безпека»
Роздрукувати Умови опублікування статті, Правила оформлення та приклад оформлення
Лекція №10. Спадкування й каскадування Спадкування Чому спадкування корисно? Як працює спадкування Приклад спадкування Примусове спадкування Каскадування iconРішення задачі лп симплекс-методом. Приклад
Визначення дифіцитних І недифіцитних ресурсів в задачі лп на основі її графічного рішення. Приклад
Додайте кнопку на своєму сайті:
Документи


База даних захищена авторським правом ©zavantag.com 2000-2013
При копіюванні матеріалу обов'язкове зазначення активного посилання відкритою для індексації.
звернутися до адміністрації
Документи