Front-end skillup

Сентябрь 13, 2022

Содержание

2. План занятия Процесс отображения страницы CSS Практика таблицы, блоки
3. Процесс отображения страницы Последовательность работы браузера при отображении документа: 1.Из полученного HTML-документа формируется DOM (Document Object
4. Repaint Repaint В случае изменения стилей элемента, которые не влияют на его размеры и положение на
5. Reflow Если же изменения затрагивают содержание, структуру документа, положения элементов - происходит reflow (или relayout). Причинами
6. Оптимизация со стороны браузера Браузеры по возможности локализуют repaint и reflow в пределах элементов,которые подвергли изменению.
7. CSS Каскадные таблицы стилей (англ. Cascading Style Sheets или сокращенно CSS) - специальный язык, используемый для
8. CSS преимущества Информация о стиле для всего сайта или его частей может содержаться в одном .css
9. CSS подключение Чтобы включить таблицу стилей CSS, нужно сохранить код CSS в файл (это можно сделать
10. CSS подключение
11. CSS подключение
12. CSS синтаксис CSS имеет сравнительно простой синтаксис и использует немного английских слов для наименования различных составляющих
13. CSS селекторы
14. Дополнительная информация CSS комментарии CSS единицы измерений CSS цвета CSS box model
15. Практика
16. Домашнее задание https://codepen.io/tholman/pen/EwlKd - пересмотреть, и попытаться объяснить почему именно такой цвет браузер отображает. Используя блочную
18. Скачать презентацию

Слайд 2

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

Слайд 3

Процесс отображения страницы
Последовательность работы браузера при отображении документа:
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.

Слайд 4

Repaint
Repaint
В случае изменения стилей элемента, которые не влияют на его размеры

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

Слайд 5

Reflow
Если же изменения затрагивают содержание, структуру документа, положения элементов - происходит

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

Слайд 6

Оптимизация со стороны браузера
Браузеры по возможности локализуют repaint и reflow в

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

How browsers work

Слайд 7

CSS
Каскадные таблицы стилей (англ. Cascading Style Sheets или сокращенно CSS) -

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

Слайд 8

CSS преимущества
Информация о стиле для всего сайта или его частей

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

Слайд 9

CSS подключение
Чтобы включить таблицу стилей CSS, нужно сохранить код CSS

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

Слайд 10

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

Слайд 11

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

Слайд 12

CSS синтаксис
CSS имеет сравнительно простой синтаксис и использует немного английских слов

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

Слайд 13

CSS селекторы

Слайд 14

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

Слайд 15

Практика

Слайд 16

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

цвет браузер отображает.
Используя блочную и табличную верстку (результатом должно быть два варианта), реализовать:

Front-end skillup

Содержание

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

Процесс отображения страницы Последовательность работы браузера при отображении документа:1.Из полученного HTML-документа

RepaintRepaintВ случае изменения стилей элемента, которые не влияют на его размеры

ReflowЕсли же изменения затрагивают содержание, структуру документа, положения элементов - происходит

Оптимизация со стороны браузераБраузеры по возможности локализуют repaint и reflow в

CSS Каскадные таблицы стилей (англ. Cascading Style Sheets или сокращенно CSS) -

CSS преимущества Информация о стиле для всего сайта или его частей

CSS подключение Чтобы включить таблицу стилей CSS, нужно сохранить код CSS

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

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

CSS синтаксисCSS имеет сравнительно простой синтаксис и использует немного английских слов

CSS селекторы

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

Практика

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

Похожие презентации

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

Процесс отображения страницы
Последовательность работы браузера при отображении документа:
1.Из полученного HTML-документа

Repaint
Repaint
В случае изменения стилей элемента, которые не влияют на его размеры

Reflow
Если же изменения затрагивают содержание, структуру документа, положения элементов - происходит

Оптимизация со стороны браузера
Браузеры по возможности локализуют repaint и reflow в

CSS
Каскадные таблицы стилей (англ. Cascading Style Sheets или сокращенно CSS) -

CSS преимущества
Информация о стиле для всего сайта или его частей

CSS подключение
Чтобы включить таблицу стилей CSS, нужно сохранить код CSS

CSS синтаксис
CSS имеет сравнительно простой синтаксис и использует немного английских слов

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

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