Обучающий курс Front-end

Июль 22, 2022

Главная
Информатика
Обучающий курс Front-end

Содержание

10. Пример:
11. Позиционирование Свойство position: Значения: (статический - static, относительный - relative, абсолютный – absolute, или фиксированный -
12. Позиционирование Пример: Элемент со свойством position div { position: relative; top: 20px; left: 30px; } Свойство:
13. Flexbox Что такое Flexbox? Flexbox (сокращение от flexible box - "гибкий / резиновый блок") — это
14. Flexbox Как начать верстать по Flexbox? Для того, чтобы нам начать верстать по Flexbox необходимо разместить
15. Flexbox Пример: Пример размещения флекс контейнера section { display: flex; /* блочный флекс контейнер */ }
16. Flexbox Направление: Направление флекс элементов формируется исходя из положения двух осей: главной оси флекс контейнера и
17. Flexbox Однострочные и многострочные контейнеры: Любой флекс контейнер является однострочным по умолчанию, такое поведение не подходит
18. Flexbox Горизонтальное выравнивание: CSS свойство justify-content определяет как браузер распределяет пространство между и вокруг флекс элементов
19. Flexbox Выравнивание по высоте строки: CSS свойство align-items определяет выравнивание элементов внутри флекс контейнера вдоль поперечной
20. Адаптивность Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге разместить
21. Адаптивность Масштабируемые величины относительно экрана В CSS 3 существуют 4 (четыре) различных единицы измерения величины относительно
22. Адаптивность Размер шрифта Единица измерения еm. Em является стандартной единицей измерения, используемой в типографской системе, она
23. Адаптивность Медизапросы Медиазапросы позволяют установить страницам сайта стили на основании определенных характеристик устройства, связанных с отображением
25. Практическая работа:
26. Практическая работа
27. ПРАКТИЧЕСКАЯ РАБОТА
28. Домашняя работа
30. Скачать презентацию

Слайд 2

Слайд 3

Слайд 4

Слайд 5

Слайд 6

Слайд 7

Слайд 8

Слайд 9

Слайд 10

Пример:

Слайд 11

Позиционирование
Свойство position:
Значения:
(статический - static, относительный - relative, абсолютный – absolute, или фиксированный - fixed).
Свойства, задающие положение элемента на экране cовместо с position:
top (смещение

позиционированного элемента от верхнего края).
right (смещение позиционированного элемента от правого края).
bottom (смещение позиционированного элемента от нижнего края).
left (смещение позиционированного элемента от левого края).
position: absolute - элемент сдвигается (позиционируется) относительно заданного края его предка, при этом предок должен иметь значение position отличное от, установленного по умолчанию - static, иначе отсчёт (смещение) будет вестись относительно, указанного края окна браузера.
position: relative - элемент смещается (размещается) относительно положения в потоке документа, или другими словами относительно его текущей позиции.
position: fixed - элемент сдвигается относительно заданного края окна браузера. Отличительная особенность этого позиционирования заключается в том, что при прокрутке страницы элемент остается на одном месте, то есть, грубо говоря, он прокручивается вместе со страницей (элемент зафиксирован).

Слайд 12

Позиционирование
Пример:
Элемент со свойством position

div {
position: relative;
top: 20px;
left: 30px;
}
Свойство:

z-index
CSS свойство z-index определяет порядок расположения позиционированных элементов по оси Z (порядок наложения элементов друг на друга).
Элементы у которых указан более высокий индекс находятся перед элементами с более низким индексом.
CSS свойство z-index работает только с позиционируемыми элементами (position : absolute | fixed | relative;).
Допустимые значения: Допускаются как положительные так и отрицательные значения.

Слайд 13

Flexbox
Что такое Flexbox?
Flexbox (сокращение от flexible box - "гибкий / резиновый блок") — это

современный нативный метод верстки страниц сайта с помощью каскадных таблиц стилей. Flexbox был введен в составе отдельного модуля - CSS Flexible Box Layout Module, этот модуль (спецификация) описывает модель CSS, оптимизированную для дизайна пользовательского интерфейса и позволяет быстро решать такие важные задачи при построении макета как:
вертикальное выравнивание блока внутри родительского элемента.
размещение колонок макета одинаковой высоты независимо от наполнения их содержимым.
расположение дочерних элементов контейнера в необходимом нам направлении, распределяя при этом между собой доступную ширину, или высоту, независимо от её доступного количества, не вызывая при этом переполнения родительского элемента.
изменять порядок элементов независимо от порядка их описания в объектной модели документа DOM.

Слайд 14

Flexbox
Как начать верстать по Flexbox?
Для того, чтобы нам начать верстать по Flexbox необходимо

разместить внутри документа флекс контейнер, в качестве контейнера может быть использован совершенно любой семантически осмысленный элемент. Внутри этого флекс контейнера размещаются необходимые нам элементы, при этом все дочерние элементы этого контейнера автоматически становятся флекс элементами.
Обратите внимание на важный момент, что все дочерние элементы флекс контейнера становятся флекс элементами, а не все вложенные потомки, то есть элементы, вложенные уже в дочерние элементы не будут являться флекс элементами по умолчанию:

Первый абзац

Второй абзац

Третий абзац

Что требуется для того, чтобы сделать флекс контейнер? Для этого достаточно установить свойство display элемента в значение flex

Слайд 15

Flexbox
Пример:

    Пример размещения флекс контейнера











Первый абзац


Второй абзац


Третий абзац

Слайд 16

Flexbox
Направление:
Направление флекс элементов формируется исходя из положения двух осей: главной оси флекс контейнера

и его поперечной оси, которая всегда распологается перпендикулярно главной. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается слева направо, а поперечная – сверху вниз (это значение по умолчанию), для значения rtl отображается зеркально соответственно.
CSS свойство flex-direction позволяет указать направление, в соответствии с которым располагаются флекс элементы внутри флекс контейнера.

Слайд 17

Flexbox
Однострочные и многострочные контейнеры:
Любой флекс контейнер является однострочным по умолчанию, такое

поведение не подходит для решения многих задач, и в этом разделе мы с Вами рассмотрим как сделать флекс контейнер многострочным, и как внутри многострочного контейнера контролировать направление, в котором будут размещаться флекс элементы и в этом нам поможет CSS свойство flex-wrap , оно определяет, будет ли флекс контейнер однострочным, или многострочным.
Схематичное отображение работы свойства flex-wrap отображено на следующем изображении:

Слайд 18

Flexbox
Горизонтальное выравнивание:
CSS свойство justify-content определяет как браузер распределяет пространство между и вокруг

флекс элементов вдоль главной оси флекс контейнера (горизонтально).
Это свойство может использоваться в тех случаях, когда для флекс элементов явно указана ширина, и если ширина всех флекс элементов внутри контейнера не вызывает переполнение контейнера, иначе свойство justify-content не окажет на такой элемент никакого эффекта.
Схематичное отображение работы свойства justify-content отображено на следующем изображении:

Слайд 19

Flexbox
Выравнивание по высоте строки:
CSS свойство align-items определяет выравнивание элементов внутри флекс контейнера

вдоль поперечной оси. Действие свойства align-items похоже на свойство justify-content , но в отличие от него выравнивание происходит не по главной оси, а вдоль поперечной оси (перпендикулярно главной оси).
Схематичное отображение работы свойства align-items отображено на следующем изображении:

Слайд 20

Адаптивность
Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта,

необходимо в теге разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

Относительные единицы измерения
Процентные значения:
Как вы можете догадаться, процентные значения высчитываются относительно значения свойств родительского элемента. Максимальные значения эквивалентны 100%.
Пример:
body {
width: 100%;
height: 100%;
}
div {
width: 50%;
height: 50%;
margin: 0 auto;
}

Слайд 21

Адаптивность
Масштабируемые величины относительно экрана
В CSS 3 существуют 4 (четыре) различных единицы измерения величины

относительно экрана - две для каждой оси и две единицы измерения, определяющие минимальное и максимальное значение:
1vw (viewport width) = 1% от ширины области просмотра. При уменьшении ширины окна пропорционально уменьшается тот параметр элемента, который был задан.
Например, если ширина области просмотра 1000px, то 1vw будет соответствовать 10 (десяти) пикселям.
1vh (viewport height)= 1% от высоты области просмотра. При уменьшении высоты окна пропорционально уменьшается тот параметр элемента, который был задан.
Например, если высота области просмотра 500px, то 1vh будет соответствовать 5 (пяти) пикселям.
1vmin = 1vw или 1vh. Выбирает минимальное значение между высотой и шириной области просмотра.
1vmax = 1vw или 1vh. Выбирает максимальное значение между высотой и шириной области просмотра.

Слайд 22

Адаптивность
Размер шрифта
Единица измерения еm.
Em является стандартной единицей измерения, используемой в типографской системе,

она соответствует размеру заглавной буквы «M» шрифтом Цицеро. Но это, что касается типографской системы, давайте рассмотрим, как она применяется на веб-страницах и чему соответствует.
Единица измерения rеm.
Стандарт CSS 3 подарил нам новую относительную единицу измерения rem, что является сокращением от Root em – значение основано на размере текста корневого (root) элемента.
Основное отличие от em заключается в том, что размер текста задается от базового размера корневого элемента, а не текущего размера шрифта родительского элемента.
Задание размера шрифта (совет):
h1 {
font-size: calc(0.5rem + 0.5vmin);
}

Слайд 23

Адаптивность
Медизапросы
Медиазапросы позволяют установить страницам сайта стили на основании определенных характеристик устройства,

связанных с отображением контента, например, таких как ширина, высота, ориентация и разрешение экрана. Медиазапросы являются неотъемлемой частью CSS, они имеют широкое применение в адаптивном веб-дизайне, так как позволяют создать привлекательное и читаемое представление Вашего сайта на экране любого устройства с которого он просматривается.
Используя медиазапросы Вы сможете создавать точки останова, это чем то похоже на создание ключевых кадров в анимации, только в этом случае вы будете использовать разрешение экрана в пикселях, а не временные отрезки. Например, если ширина области простмотра устройства меньше 480 пикселей, то использовать одни стили, если ширина области простмотра устройства находится в диапозоне от 480 пикселей до 769 пикселей использовать другие стили и так далее.
Пример:
@media (max-width: 768px) {
...код CSS
}

Слайд 24

Слайд 25

Практическая работа:

Слайд 26

Практическая работа

Слайд 27

ПРАКТИЧЕСКАЯ РАБОТА

Слайд 28

Обучающий курс Front-end

Содержание

Пример:

ПозиционированиеПример:Элемент со свойством positiondiv { position: relative; top: 20px; left: 30px;} Свойство:

FlexboxЧто такое Flexbox?Flexbox (сокращение от flexible box - "гибкий / резиновый блок") — это

FlexboxКак начать верстать по Flexbox?Для того, чтобы нам начать верстать по Flexbox необходимо

FlexboxНаправление:Направление флекс элементов формируется исходя из положения двух осей: главной оси флекс контейнера

FlexboxОднострочные и многострочные контейнеры:Любой флекс контейнер является однострочным по умолчанию, такое

FlexboxГоризонтальное выравнивание:CSS свойство justify-content определяет как браузер распределяет пространство между и вокруг

FlexboxВыравнивание по высоте строки:CSS свойство align-items определяет выравнивание элементов внутри флекс контейнера

АдаптивностьДля того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта,

АдаптивностьМасштабируемые величины относительно экранаВ CSS 3 существуют 4 (четыре) различных единицы измерения величины

АдаптивностьРазмер шрифтаЕдиница измерения еm.Em является стандартной единицей измерения, используемой в типографской системе,

АдаптивностьМедизапросыМедиазапросы позволяют установить страницам сайта стили на основании определенных характеристик устройства,