Тема 1.3.3 Каскадные таблицы стилей

1. Основы web-технологий Каскадные таблицы стилей (CSS)

2.

Специфичность
Пример:
Селектор #some состоит из одного идентификатора. Один
селектор = 1. Увеличиваем первую цифру на 1. В итоге вес
такого селектора равен 1.0.0.
.class состоит из одного класса. Увеличиваем вторую цифру на 1.
Получаем вес селектора 0.1.0.
section состоит из одного тега. Увеличиваем последнюю цифру
на 1. Вес селектора равен 0.0.1.

3.

section #div-main-container – 1.0.1
* :after :before – 0.0.2
* .list a – 0.1.1
ul .list-item.list-active – 0.2.1

4.

Цвет
Существует множество способов задания цвета:
Числовой цвет – шестнадцатеричные (#b71540), имеет
диапазон 0-9 и A-F. Последовательность переводится в RGB.
Также допустимо установка альфа-канала + 2 числа в конце:
0% альфа, т. е. полная прозрачность — 00: #00000000
50% альфа — это 80: #00000080
75% альфа — это BF: #000000BF
#00000000
#00000080
#000000BF

5.

Цвет
RGB:
Используется цветовая функция rgb(), используемая в
качестве параметров числа или проценты:
rgb(255, 255, 255)
rgb(100%, 100%, 100%)
Альфа канал добавляется символом / после параметров, или
используется функция rgba(), где альфа канал указывается в
процентах или десятичной дроби.
rgb(0 0 0 / 50%)
rgba(0, 0, 0, 0.5)

6.

Цвет
HSL:
Оттенок, насыщенность, светлота. Оттенок измеряется от 0
до 360 градусов.
Насыщенность в %
Светлость в %
Используется функция
hsl()
hsl(0deg 0% 0%)
Альфа канал как у rgb()

7.

Цвет
Ключевые слова:
CSS имеет 148 названий цветов
transparent — полностью прозрачный цвет (начальное
значение background-color)
currentColor — контекстно вычисляемое динамическое
значение свойства color
Если цвет элемента red, то свойство border-color в значении
currentColor будет иметь красный цвет.

8.

FlexBox
Flexbox — это модуль макета гибкого контейнера, который
позволяет располагать элементы в одном из четырёх
направлений (слева направо, справа налево, сверху вниз или
снизу вверх), переопределять порядок отображения
элементов, автоматически определять размеры элементов и
решать проблемы горизонтального и вертикального
центрирования.

9.

Flex-контейнер — гибкий контейнер, который содержит flexэлементы.
Flex-элементы — элементы, которые выстраиваются в строку
или столбик в соответствии с заданными свойствами flexконтейнера.
Свойства flex-контейнера:
flex-direction — направление главной оси (по умолчанию —
слева направо).
flex-wrap — управление многострочностью flex-контейнера (по
умолчанию — nowrap).
flex-flow — краткая запись направления и многострочности.
order — порядок отображения flex-элементов.

10.

Свойства flex-элементов:
flex — задание гибких размеров одним свойством.
flex-grow — коэффициент роста.
flex-shrink — коэффициент сжатия.
flex-basis — базовый размер.
Выравнивание элементов:
justify-content — выравнивание по главной оси.
align-items — выравнивание по поперечной оси.
align-self — выравнивание отдельного flex-элемента.

11.

12.

Grid
Grid — это современный и гибкий метод вёрстки вебстраниц, позволяющий создавать адаптивные макеты с
использованием таблиц.
В отличие от Flexbox, Grid позволяет создавать двумерные
таблицы, то есть одновременно и ряды, и колонки.

13.

Grid-контейнер — главный элемент, содержащий все
остальные элементы.
Grid-ячейка — единица сетки, содержащая один или
несколько блоков кода.
Grid-линия — горизонтальная или вертикальная линия,
разделяющая столбцы и колонки.
Grid-строка (row) — ряд ячеек.
Grid-столбец (column) — колонка ячеек.
Grid-элемент — любой элемент страницы.
Grid-область (area) — пространство из ячеек, в CSS можно
объединить несколько ячеек в одну и работать с ними как с
единым целым.

14.

15.

Границы
Границы в CSS — это визуальные рамки, которые окружают
элементы на веб-странице.
Они состоят из трёх свойств: border-color, border-style и
border-width.
Типы границ и их положение:
Граница сверху (border-top).
Граница снизу (border-bottom).
Граница слева (border-left).
Граница справа (border-right).

16.

Сокращённые свойства CSS позволяют задать все три
свойства сразу:
border — устанавливает все три свойства границы
одновременно.
border-top — устанавливает только верхнюю границу.
border-bottom — устанавливает только нижнюю границу.
border-left — устанавливает только левую границу.
border-right — устанавливает только правую границу.

17.

18.

Внешний отступ (margin) определяет расстояние между
элементом и его границей.
Виды отступов:
Внешние отступы
со всех сторон:

19.

Виды отступов:
Центрирование
элемента:

20.

Виды отступов:
Перекрытие соседей:

21.

Внутренний отступ (padding) определяет расстояние между
содержимым элемента и его границами.
Виды отступов:
Внутренние отступы:

22.

Виды отступов:
Отдельные стороны: