Как браузер применяет CSS

Браузер применяет CSS в несколько этапов: 1. **Парсинг CSS**: Браузер загружает и парсит CSS-файлы, преобразуя их в объектную модель (CSSOM). 2. **Создание DOM**: Параллельно строится DOM из HTML. 3. **Объединение DOM и CSSOM**: Формируется Render Tree — комбинация DOM и CSSOM, содержащая только видимые элементы с их стилями. 4. **Layout (Reflow)**: Вычисляются размеры и позиции всех элементов на странице. 5. **Paint**: Отрисовываются пиксели (цвета, тени, границы и т.д.). 6. **Composite**: Слои объединяются в финальное изображение (особенно важно для анимаций и transform/opacity). Пример приоритетов CSS: ```css /* 1. Inline стили */ /* 2. ID */ #myId { color: blue; } /* 3. Классы/атрибуты */ .myClass { color: green; } /* 4. Теги */ div { color: black; } ```