Зі звичайного фронтендера в техліда
Перевірте, чи підійде вам цей курс, відповівши на одне з питань для співбесіди фронтенд-інженера в IBM
Яким буде значення властивості background-color в першому і в другому варіанті і чому?
Спробуйте відповісти самі, а потім порівняйте свої відповідь і пояснення з авторськими.
програма курсу/* Варіант 1 */
:root {
--not-a-color: 20px;
}
p {
background-color: red;
}
p {
background-color: var(--not-a-color);
}
/* Варіант 2 */
p {
background-color: red;
}
p {
background-color: 20px;
}
Натисніть, щоб розкрити...
Курс проходить в асинхронному форматі. Це означає, що ви можете почати навчання в будь-який час і рухатися за програмою з комфортною вам швидкістю.
Проходження курсу займе від 2 до 3 тижнів, якщо ви готові займатися 5 годин на тиждень.
Розділ 1. Обробка значень і каскад
Розглянемо поняття каскаду і обробки значень. Розберемося, як браузер обчислює значення, і в який момент запускається каскад.
теорія
- поняття каскаду.
- обчислення значень: стадії declared, cascaded, specified, computed, used і actual.
- контрольні тести за темами розділу
Поговоримо про стилі автора, користувача і браузера, а також про "віртуальних" стилях. Розберемо, як браузер парсит CSS-код, фільтрує оголошення і відбирає значення. Торкнемося валідності, префіксів, псевдонімів, умовних правил і пошуку елементів в Dom-дереві.
теорія
- джерела стилів: авторські, браузерні і призначені для користувача.
- Парсинг і фільтрація.
- контрольні тести за темами розділу
Детально розглянемо порядок оголошення властивостей і каскадування. Розберемося з тим, як відбувається розрахунок специфічності селекторів і яку роль вона відіграє в каскаді.
теорія
- детальний розбір алгоритму каскаду.
- Порядок підключення стильових файлів і оголошення властивостей.
- Порядок каскадування: в якій черговості застосовуються стильові правила. Анотація !important.
- селектори і розрахунок специфічності.
- контрольні тести за темами розділу
Подивимося, що відбувається, якщо не задати значення явно. Розберемося з успадкованими і ненаслідуваними властивостями і значеннями за замовчуванням. Розглянемо спадкування кастомних властивостей і способи повернути каскад назад.
теорія
- успадковані і ненаслідувані властивості.
- Значення за замовчуванням.
- кастомні властивості.
- примусове успадкування. Ключове слово inherit.
- відкат каскаду. Ключові слова revert, unset, initial.
- властивість all.
- контрольні тести за темами розділу
Розберемося, що відбувається з каскадованими значеннями далі, як вони обчислюються в конкретні значення, використовувані для відтворення в браузері.
теорія
- етапи обчислень: computed, used, actual value.
- контрольні тести за темами розділу
Попрацюємо з каскадом на практиці. У докладних покрокових демонстраціях розберемо реалізацію типових прийомів і компонентів.
теорія
- властивість font-size-adjust.
- стилізація компонента спиннер.
- стилізація кастомних компонентів.
- " Липкий " підвал сторінки.
- функції для обчислень в CSS.
Вам потрібно буде виконати завдання-реалізувати алгоритм каскаду на JavaScript, використовуючи всі отримані знання про CSS-каскаді.
Продає сайт:
https://privatelink.de/?https://l.htmlacademy.ru/anatomy-of-cascade?_ga=2.40679842.1236153396.1643136155-933805181.1643136155#rec403190192