Блочная модель

Свойство display
Свойство display определяет поведение отображения (тип поля визуализации) элемента.
1
Отображает элемент как сточный (например,
). Cвойства height и width не работают.
Отображает элемент как блочный (например,
). Начинается с новой строки и занимает всю ширину.
Элемент полностью удален со страницы.
Отображает элемент как сточный, при этом его внутренняя часть форматируется как блочный элемент. height и width работают.

Свойство display
Отображает элемент как сточный. Свойства height и width не работают.
Отображает элемент как блочный (например,
). Начинается с новой строки и занимает всю ширину.
Элемент полностью удален со страницы.
Отображает элемент как сточный, его внутренняя часть форматируется как блочный элемент. height и width работают.

Свойство opacity
Свойство opacity задает уровень непрозрачности для элемента.
Уровень прозрачности описывает уровень прозрачности, где 1 – не является прозрачным, 0,5 – составляет 50%, а 0 – полностью прозрачен. После применения данного свойства мы можем взаимодействовать с элементами на странице.
1
Примечание: При использовании свойства opacity для добавления прозрачности к фону элемента все его дочерние элементы также становятся прозрачными. Это может сделать текст внутри полностью прозрачный элемент трудно читать. Если вы не хотите применять непрозрачность к дочерним элементам, используйте вместо этого значения цвета RGBA .
2

Свойство opacity

Свойство visibility
Свойство visibility указывает, является ли элемент видимым.
Скрытые элементы занимают место на странице, но мы больше не можем взаимодействовать с данными элементами.
1

Свойство border-radius
Свойство border-radius определяет радиус углов элемента.
1

Свойство border-radius
Свойство border-radius определяет радиус углов для элемента с границей:
!
Свойство border-radius определяет радиус углов для элемента с фоновым изображением:
!

Свойство outline
Свойство outline определяет внешнюю границу блока:
!
Свойство outline-offset добавляет пространство между контуром и краем или границей элемента:
!

Свойство box-shadow
Свойство box-shadow добавляет тени к различным элементам
:
!

Свойство background
Свойство background универсальное сокращенное свойство, которое задает все свойства фона в одном объявлении. Свойства, которые могут быть заданы, являются:
background-color - определяет цвет фона;
background-image - задает одно или несколько фоновых изображений, которые будут использоваться;
background-position - определяет положение фоновых изображений;
background-size - определяет размер фоновых изображений;
background-repeat - указывает, как повторить фоновые изображения;
background-origin - Определяет область позиционирования фоновых изображений;
background-clip - определяет область рисования фоновых изображений;
background-attachment - указывает, являются ли фоновые изображения фиксированными или прокручивается с остальной частью страницы;
!

Свойство background
Свойство background-color определяет цвет фона. Ссылка на сайт с подбором необходимого цвета и кодировки https://www.webfx.com/web-design/color-picker/ .
!

Свойство background
Свойство background-image задает фоновое изображение для элемента :
!

Свойство background
Свойство background-image позволяет создавать линейный и радиальный градиент (ссылка для создания градиента https://www.colorzilla.com/gradient-editor/ ) :
!

Свойство background
Свойство background-repeat устанавливает, будет ли повторно использоваться фоновое изображение:
!

Свойство background
Свойство background-repeat со значением no-repeat (устанавливает одно фоновое изображение в элементе без его повторений):
!

Свойство background
Свойство background-repeat со значениями repeat-x (фоновый рисунок повторяется только по горизонтали) и repeat-y (фоновый рисунок повторяется только по вертикали) :
!

Свойство background
Свойство background-repeat со значением space позволяет изображению повторяться столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство:
!

Свойство background
Свойство background-repeat со значением round позволяет изображению повторяться так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются:
!

Свойство background
Свойство background-position задает начальное положение фонового изображения, где первое значение (проценты, px, слово) определяет расположение по горизонтали, второе - вертикали:
!

Свойство background
Свойство background-position задает начальное положение фонового изображения, где первое значение (проценты, px, слово) определяет расположение по горизонтали, второе - вертикали:
!

Свойство background
Свойство background-position задает начальное положение фонового изображения, где первое значение (проценты, px, слово) определяет расположение по горизонтали, второе - вертикали:
!

Свойство background
Свойство background-position задает начальное положение фонового изображения, где первое значение (проценты, px, слово) определяет расположение по горизонтали, второе - вертикали:
!

Свойство background
Свойство background-position задает начальное положение фонового изображения, где первое значение (проценты, px, слово) определяет расположение по горизонтали, второе - вертикали:
!

Свойство background
Свойство background-attachment со значением scroll (по умолчанию) позволяет перемещаться фону вместе с окном браузера:
!

Свойство background
Свойство background-attachment со значением fixed делает фоновое изображение элемента неподвижным, а так же устанавливает фоновое изображение относительно окна браузера:
!

Свойство background
Свойство background-attachment со значением local позволяет фону фиксироваться с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте:
!

Свойство background
Свойство background-size масштабирует фоновое изображение согласно заданным размерам. В цифрах, где первое значение (проценты, px) определяет ширину, второе - высоту. Либо специальным значением. Со значением auto:
!

Свойство background
Свойство background-size масштабирует фоновое изображение согласно заданным размерам. В цифрах, где первое значение (проценты, px) определяет ширину, второе - высоту.
!

Свойство background
Свойство background-size масштабирует фоновое изображение согласно заданным размерам. В цифрах, где первое значение (проценты, px) определяет ширину, второе - высоту.
!

Свойство background

Свойство background
Установка нескольких фоновых изображений для блока.
Свойство background позволяет задать несколько фоновых изображений одному блоку, причем со своими настройками позиционирования масштабирования и прокрутки. Указывать значения следует через запятую. Каждая следующая ложится под предыдущую.
!

Подключение шрифтов

Свойство font-family
Шрифты применённые к HTML документу могут контролироваться при помощи свойства font-family. Оно принимает одно и более имён семейств шрифтов и браузер следует по списку пока не найдёт тот шрифт, который является доступным в системе, под управлением которой он работает:
!
Типы шрифта:
serif - шрифты с засечками (антиквенные), типа Times;
sans-serif - рубленные шрифты (шрифты без засечек или гротески), Arial - типичный представитель;
cursive - курсивные шрифты;
fantasy - декоративные шрифты;
monospace - моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

Свойство font-family
Шрифты применённые к HTML документу могут контролироваться при помощи свойства font-family. Оно принимает одно и более имён семейств шрифтов и браузер следует по списку пока не найдёт тот шрифт, который является доступным в системе, под управлением которой он работает:
!
Дополнительно можно подключить свой шрифт:
!

Основные свойства шрифтов
Свойство font-weight устанавливает насыщенность шрифта.
Синтаксис:
либо значения от 100 до 900.
!
Свойство font-style тип символов в тексте.
Синтаксис:
!

Форматы шрифтов
Существует четыре разных формата:
WOFF/WOFF2 (Web Open Font Format versions 1 and 2) – открытый сжатый формат шрифта OpenType или TrueType, поддерживающий дополнительные метаданные. Вторая версия Web Open Font Format в среднем на 30% «легче» первой, что ускоряет загрузку шрифтов.
TTF (TrueType format) – формат поддер­живается практически всеми современны­ми браузерами. Особенностью исполь­зуемого в веб-комплекте TTF является защищенность формата, препятствующая его использованию локально на компью­тере.
EOT (Embedded OpenType) – компактный формат OpenType-шрифтов. поддерживает­ся исключительно браузером Internet Explorer.
SVG (Scalable Vector Graphics) – формат векторной графики в формате svg фор­мируется, в основном, для корректности отображения шрифта в старых версиях iOS.
!

Подключение шрифтов
Существует несколько способов подключения шрифтов ко проекту сайта:
1 способ: локальное подключение;
2 способ: использование Google Fonts.
!

Подключение шрифтов
1 способ: локальное подключение в файл стилей style.css при помощи @font-face{}:
1
@font-face {
font-family: 'Имя шрифта';
font-display: swap;
src: url("../fonts/файл шрифта.eot");
src: local("O"), url("../fonts/файл шрифта.woff") format("woff"),
url("../fonts/файл шрифта.ttf") format("truetype"),
url("../fonts/файл шрифта.svg") format("svg");
font-weight: normal;
font-style: normal;
}

Подключение шрифтов
2 способ: использование Google Fonts (https://fonts.google.com/):
2
Через элемент
. Строка будет иметь примерно следующий вид:
2.1
Через правило @import. Такую строку вставляем в свой CSS-файл в самом верху:
2.1

Каталоги шрифтов
При локальном подключении:
https://nomail.com.ua/
https://bestfonts.pro/
Использование Google Fonts:
https://fonts.google.com/
!