13. Каскад і наслідування

Прокрутити вниз

Безплатні курси web розробки – в цьому уроці ми розглянемо каскад і успадкування. Адже це основоположні концепції CSS. В кінці ви зможете перевірити свої знання пройшовши тест. Сертифікат про проходження тесту – обмінюй на коїни в адміністратора у нас в школі. Коїни можна витратити на різні призи.

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

Безплатні курси web розробки. Конфліктуючі правила

CSS (Cascading Style Sheets) переводитися Каскадні таблиці стилів. Важливо звернути увагу на слово “каскадні”, воно важливе для розуміння CSS, адже те, як поводиться каскад – ключовий момент в розумінні CSS.

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

Концепція спадкування полягає в тому, що деякі властивості CSS успадковують за замовчуванням значення встановлені для батьківського елемента поточного елемента, а деякі не успадкують. Це також може стати причиною поведінки, яку ви, можливо, не очікуєте. Читайте інші уроки по HTML / CSS – безплатні курси web розробки.

Каскад

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

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

Безплатні курси web розробки

Специфічність: безплатні курси web розробки

Специфічність визначає, як браузер вирішує, яке саме правило застосовується в разі, коли кілька правил мають різні селектори, але, з усім тим, можуть бути застосовані до одного і того ж елементу. Різні типи селекторів (селектори елементів h1 {…}, селектори класів, селектори ідентифікаторів і т.д) мають різного ступеня вплив на елементи сторінки. Чим більше загальний вплив надає селектор на елементи сторінки, тим менше його специфічність, конкретність. По суті, це міра того, наскільки специфічним буде відбір по селектору:

  • Селектор елементів (наприклад h1) менш специфічний – він вибере всі елементи цього типу на сторінці – тому отримає менше балів.
  • Селектор класу більш специфічний – він вибере тільки ті елементи на сторінці, які мають конкретне значення атрибута class – тому отримає більше балів, селектор класу застосується після селектора елемента і тому перекриє його стилі.

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

Безплатні курси web розробки

Далі ми пояснимо, як зробити оцінку специфічності, і інші моменти.

Спадкування

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

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

Безплатні курси web розробки

Деякі властивості не успадковуються – наприклад, якщо ви встановили для елемента width рівним 50%, всі його дочірні елементи не отримають ширину в 50% від ширини свого батьківського елемента. Якби це було так, CSS було б надзвичайно важко використовувати!

Зверніть увагу: На сторінках довідника CSS-властивостей ви можете знайти вікно технічної інформації, зазвичай в кінці розділу специфікації, в якому перераховані деякі технічні дані про цю властивість, в тому числі успадковується воно чи ні.

Розуміння успадкування

Отже, спадкування. У прикладі нижче ми маємо з двома рівнями невпорядкованих списків, вкладених в нього. Ми встановили для зовнішнього стиль кордону, внутрішні відступи та колір шрифту.

Колір шрифту застосований до прямого нащадка, але також і до непрямого нащадку – до прямого нащадку і до елементів всередині першого вкладеного списку. Далі ми додали клас special до другого вкладеному списку і застосували до нього інший колір шрифту. Тепер ця властивість успадковується всіма його нащадками.

.main {
color: rebeccapurple;
border: 2px solid #ccc;
padding: 1em;
}

.special {
color: black;
font-weight: bold;
}
<ul class=”main”>
<li>Item One</li>
<li>Item Two
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
<li>Item Three
<ul class=”special”>
<li>3.1
<ul>
<li>3.1.1</li>
<li>3.1.2</li>
</ul>
</li>
<li>3.2</li>
</ul>
</li>
</ul>

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

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

Контроль успадкування

CSS надає чотири спеціальні універсальні значення властивості для контролю успадкування. Кожна властивість CSS приймає ці значення.

inherit

Встановлює значення властивості, застосованого до елементу, таким же, як у його батьківського елементу. Фактично, це “включає спадкування”.

initial

Встановлює значення властивості, застосованого до вибраного елементу, рівним initial value цієї властивості (відповідно до налаштування браузера за замовчуванням. Якщо в таблиці стилів браузера не вказане значення цієї властивості, воно успадковується природним чином.)

unset (en-US)

Повертає властивості його природне значення, що означає, що якщо властивість успадковується природним чином, воно діє як inherit, інакше воно діє як initial.

Зверніть увагу: Існує також більш нове значення revert, яке має обмежену підтримку браузерами.

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

Наприклад:

  1. Другий елемент списку має клас my-class-1. Тому, колір для наступного вкладеного елемента а встановлюється у спадок. Як зміниться колір, якщо це правило буде видалено?
  2. Чи зрозуміло, чому третій і четвертий елементи а мають саме такий колір? Якщо ні, перечитайте опис значень, представлене вище.
  3. Яка з посилань змінить колір, якщо ви задасте новий колір для елемента – наприклад: a {color: red; }?

Повернення всіх вихідних значень властивостей

Стенографічна властивість CSS all можна використовувати для того, щоб привласнити одне зі значень успадкування до (майже) всіх властивостей одночасно. Це одне з чотирьох значень (inherit, initial, unset, або revert). Це зручний спосіб для скасування змін, внесених в стилі, для того, щоб ви могли повернутися до стартової точки перед внесенням нових змін.

У прикладі нижче є два блоки. Перший має стиль, який застосований до самого елементу blockquote, другий має клас fix-this, який встановлює значення all в unset.

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

Розуміння каскаду

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

Ось три фактори, перераховані в порядку зростання важливості. Наступний скасовує попередній.

  • Послідовність
  • Специфічність
  • Важливість

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

Послідовність

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

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

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

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

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

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

Обчислення специфічності

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

Ступінь специфічності, якою володіє селектор, вимірюється з використанням чотирьох різних значень (або компонентів), які можна представити як тисячі, сотні, десятки та одиниці – чотири однозначні цифри в чотирьох стовпчиках:

  1. Тисячі: поставте одиницю в цю колонку, якщо оголошення стилю знаходиться всередині атрибута style (вбудовані стилі). Такі оголошення не мають селектор, тому їх специфічність завжди просто тисячі.
  2. Сотні: поставте одиницю в цю колонку за кожен селектор ID, що міститься в загальному селекторі.
  3. Десятки: поставте одиницю в цю колонку за кожен селектор класу, селектор атрибуту або псевдоклас, що міститься в загальному селекторі.
  4. Одиниці: поставте загальне число одиниць в цю колонку за кожен селектор елемента або псевдоелемент, що міститься в загальному селекторі.

Важливо: Універсальний селектор (*), комбінатори (+,&gt;, ~, ”) і псевдоклас заперечення (: not) не впливають на специфічність.

Безплатні курси web розробки: таблиця специфічності селектор

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

Перш ніж ми продовжимо, подивімося на приклад в дії.

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

  • Перші два правила конкурують за стилізацію кольору фону посилання – друга виграє і робить фоновий колір синім, тому що у нього є додатковий селектор ID в ланцюжку: його специфічність 201 проти 101.
  • Третє і четверте правило конкурують за стилізацію кольору тексту посилання – друга виграє і робить текст білим, тому що, хоча у нього на один селектор елемента менше, відсутній селектор замінюється на селектор класу, який оцінюється в десять замість одиниці. Таким чином, пріоритетна специфічність складає 113 проти 104.
  • Правила 5-7 змагаються за визначення стилю кордону посилання при наведенні курсору. Шостий селектор зі специфічністю 23 явно програє п’ятого зі специфічністю 24 – у нього в ланцюжку на один селектор елемента менше. Сьомий селектор, однак, перевершує як п’ятий, так і шостий – він має таку саму кількість підселекторів в ланцюжку, що і п’ятий, але один елемент замінений селектором класу. Таким чином, пріоритетна специфічність 33 проти 23 і 24.

Примітка: Це був умовний приклад для більш простого засвоєння. Насправді кожен тип селектора має власний рівень специфічності, який не може бути заміщений селекторами з більш низьким рівнем специфічності. Наприклад, мільйон з’єднаних селекторів класу не здатні переписати правила одного селектора id. Безплатні курси web розробки – зроби перший крок в успішне майбутнє вже сьогодні!

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

! important

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

Погляньте на цей приклад, де у нас є два абзаци, один з яких має ID.

Пройдімось по цьому прикладу

Щоб побачити, що відбувається – спробуйте видалити деякі властивості, щоб побачити, що вийде, якщо вам важко зрозуміти:

  1. Ви побачите, що застосовані значення color (en-US) і padding третього правила, але background-color – немає. Чому? Дійсно, всі три безумовно повинні застосовуватися, тому що правила, більш пізні в порядку проходження, зазвичай скасовують більшранні правила.
  2. Однак вищенаведені правила виграють, тому що селектори класів мають більш високу специфічність, ніж селектори елементів.
  3. Обидва елементи мають class з назвою better, але у другого також є id з назвою winning. Оскільки ID мають ще більш високу специфічність, ніж класи (у вас може бути тільки один елемент з кожним унікальним ID на сторінці, але багато елементів з одним і тим же класом – селектори ID дуже специфічні, на що вони та націлені), червоний колір фону та однопіксельна чорна межа повинні бути застосовані до 2-го елементу, причому перший елемент отримує сірий фоновий колір і відсутність кордону, як визначено класом.
  4. 2-й елемент отримав червоний колір фону і відсутність кордону. Чому? Через оголошення! Important в другому правилі – розміщення якого після border: none означає, що це оголошення переважить значення кордону в попередньому правилі, навіть якщо ID має більш високу специфічність.

Врахуйте: Єдиний спосіб перевизначити оголошення! Important – це включити інше оголошення! Important в правило з такою ж специфічністю пізніше або в правило з більш високою специфічністю. Безплатні курси web розробки серія статей про засади мовної розмітки HTML і стилізації CSS.

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

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

Вплив розташування CSS

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

Підбивання підсумків

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

  1. Оголошення в таблицях стилів клієнтського додатка (наприклад, стилі браузера за замовчуванням, що використовуються, коли не задані інші стилі).
  2. Звичайні оголошення в призначених для користувача таблиці стилів (індивідуальні стилі встановлюються користувачем).
  3. Звичайні оголошення в авторських таблицях стилів (це стилі, встановлені нами, веброзробниками).
  4. Важливі оголошення в авторських таблицях стилів.
  5. Важливі оголошення в призначених для користувача таблиці стилів.

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

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