Front-end skillup

План занятия
Процесс отображения страницы
CSS
Практика таблицы, блоки

Процесс отображения страницы
Последовательность работы браузера при отображении документа:
1.Из полученного HTML-документа формируется DOM (Document Object Model).
2.Загружаются и распознаются стили, формируется CSSOM (CSS Object Model).
3.На основе DOM и CSSOM формируется дерево рендеринга, или render tree - набор объектов рендеринга (Webkit использует термин «renderer», или «render object», а Gecko - «frame»). Render tree дублирует структуру DOM, но сюда не попадают невидимые элементы (например - или элементы со стилем display: none;)
4.Также, каждая строка текста представлен в дереве рендеринга как отдельный renderer. Каждый объект рендеринга содержит соответствующий ему объект DOM (или блок текста), и рассчитан для этого объекта стиль. Проще говоря, render tree описывает визуальное представление DOM.
5.Для каждого элемента render tree рассчитывается положение на странице - происходит layout. Браузеры используют поточный метод (flow), при котором в большинстве случаев достаточно одного прохода для размещения всех элементов (для таблиц проходов нужно больше).
6.Наконец, происходит отражение в браузере - painting.

Repaint
Repaint
В случае изменения стилей элемента, которые не влияют на его размеры и положение на странице (например, background-color, border-color, visibility)
браузер просто прорисовывает его заново, с учетом нового стиля - происходит repaint (или restyle).

Reflow
Если же изменения затрагивают содержание, структуру документа, положения элементов - происходит reflow (или relayout).
Причинами таких изменений обычно являются:
Манипуляции с DOM (добавление, удаление, изменение, перестановка элементов);
Изменение содержания, в т.ч. текста в полях форм;
Расчет или изменение CSS-свойств;
Добавление, удаление таблиц стилей;
Манипуляции с атрибутом class
Манипуляции с окном браузера - изменения размеров, прокрутка;
Активация псевдо-классов (например,: hover).

Оптимизация со стороны браузера
Браузеры по возможности локализуют repaint и reflow в пределах элементов,которые подвергли изменению.
Например, изменение размеров абсолютно или фиксировано позиционируемого элемента коснется только самого елемента и его потомков.
Изменение статически позиционируемого - повлечет reflow всех элементов, следующих за ним
How browsers work

CSS
Каскадные таблицы стилей (англ. Cascading Style Sheets или сокращенно CSS) - специальный язык, используемый для описания страниц, написанных на языках разметки данных.
Чаще всего CSS используют для визуальной презентации страниц, написанных HTML и XHTML, но формат CSS может применяться к другим видам XML-документов.
Спецификации CSS были созданы и развиваются Консорциумом Всемирной сети.
Одно из главных преимуществ - возможность разделить содержание страницы (или контент, наполнение, обычно HTML, XML или подобный язык разметки) и вида документа (что описывается в CSS).
CSS также позволяет адаптировать контент к различным условиям отображения (на экране монитора, мобильного устройства (КПК), в распечатанном виде и т.д ..
Один и тот же HTML или XML документ может быть отображен по-разному в зависимости от использованного CSS.

CSS преимущества
Информация о стиле для всего сайта или его частей может содержаться в одном .css файле, что позволяет быстро производить изменения в дизайне и презентации страниц,
Различная информация о стиле для различных типов пользователей
Страницы уменьшаются в объеме и становятся более структурированными, поскольку информация о стиле отделена от текста;
Ускорение загрузки страниц и уменьшения объемов информации, передаваемой нагрузки на сервер и канал передачи. Достигается за счет того, что современные браузеры способны кэшировать (запоминать) информацию о стиле и использовать для всех страниц, а не загружать для каждого.

CSS подключение
Чтобы включить таблицу стилей CSS, нужно сохранить код CSS в файл (это можно сделать любым текстовым редактором), например example.css, и затем включить или импортировать его в HTML страницу.

CSS подключение

CSS подключение

CSS синтаксис
CSS имеет сравнительно простой синтаксис и использует немного английских слов для наименования различных составляющих стиля.
Стили состоят из списка правил. Каждое правило имеет один или более селекторов и блок определения. Блок определения состоит из окруженного фигурными скобками списка свойств.
Свойства в списке оформляются в виде название свойства, двоеточие (:), значение, точка с запятой (;).

CSS селекторы

Дополнительная информация
CSS комментарии
CSS единицы измерений
CSS цвета
CSS box model

Практика

Домашнее задание
https://codepen.io/tholman/pen/EwlKd - пересмотреть, и попытаться объяснить почему именно такой цвет браузер отображает.
Используя блочную и табличную верстку (результатом должно быть два варианта), реализовать: