Front-end skillup

Содержание

Слайд 2

План занятия

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

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

Слайд 3

Процесс отображения страницы
Последовательность работы браузера при отображении документа:

1.Из полученного HTML-документа формируется

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

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

Слайд 5

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

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

Слайд 6

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

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

How browsers work

Слайд 7

CSS

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

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

Слайд 8

CSS преимущества

Информация о стиле для всего сайта или его частей может

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

Слайд 9

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

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

Слайд 10

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

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

Слайд 11

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

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

Слайд 12

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

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

Слайд 13

CSS селекторы

CSS селекторы

Слайд 14

Дополнительная информация

CSS комментарии
CSS единицы измерений
CSS цвета
CSS box model

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

Слайд 15

Практика

Практика

Слайд 16

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

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