Без применения CSS

С применением CSS

Структура HTML 

HTML-документ — это обычный текстовый документ, может быть создан как

Элемент  предназначен для указания типа текущего документа — DTD (document type

Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа,

Элемент …

Элемент

Заголовок страницы

Основной текст.

Вложения элементов

https://webref.ru/course/html-tutorial/element#task

Этот текст набран полужирным курсивом

Код HTML

Этот текст набран

Цвет в HTML

Названия цветов HTML

https://colorscheme.ru/web-safe-colors.html

Схема RGB

RGB - Red-Green-Blue,
Красный-Зеленый-Синий
Интенсивность компоненты записывается двузначным шестнадцатеричным числом.
Шестнадцатеричные цифры:
0,

Схема RGBA

Текстовый файл с расширением .css, в котором находится набор CSS-стилей элементов.
Внутри

Встраиваются в раздел  HTML-документа.
Определяются внутри тега .
Внутренние стили имеют приоритет над внешними.

Способы

Пишем CSS-код в HTML-файл, непосредственно внутри тега элемента.
Используем атрибут style.
Такие стили действуют

Понятие селекторов

https://html5book.ru/osnovy-css/#part1

Универсальный селектор *

Селектор элемента

Селекторы элементов позволяют форматировать все элементы данного типа на всех

Селектор класса

Селекторы класса позволяют задавать стили для одного и более элементов

Селектор идентификатора

Группировка селекторов

Один и тот же стиль можно одновременно применить к нескольким

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

https://webref.ru/css/letter-spacing

https://webref.ru/css/line-height

https://webref.ru/css/text-indent

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

https://webref.ru/css/white-space

https://webref.ru/css/word-spacing

https://webref.ru/css/text-transform

Единицы измерения

https://learn.javascript.ru/css-units

Один px – это как раз один такой пиксель на экране.

https://www.youtube.com/watch?v=dPzoBD2Z68A

Классификация тегов

display display: block | inline | inline-block |

margin, padding, border

https://webref.ru/css/box-sizing

margin

Если у элемента нет родителя, отступом будет расстояние от края элемента

margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
margin: 10px 20px 15px 20px;
margin: 10px 20px

width: 200px;
height: 200px;
border: 1px solid;

width: 200px;
height: 200px;
border: 1px solid;
margin: 10px 50px;

width: 200px;
height: 200px;
border: 1px solid;
margin: 10px -50px;

width: 200px;
height: 200px;
border: 1px solid;
margin:

padding

Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить

height: 200px;
border: 1px solid;
padding: 20px 80px;

width: 200px;
height: 200px;
border: 1px solid;
padding: 20px

width , height

https://webref.ru/html/img/width

https://webref.ru/html/img/height

border

https://webref.ru/css/border

border: border-width || border-style || border-color

background-color

background-color: <цвет> | transparent

https://webref.ru/css/background-color

body{ background-color: #3366CC; /* Цвет фона веб-страницы

Неупорядоченные списки

https://webref.ru/html/ul

Упорядоченные списки

https://webref.ru/html/ol

Создание вложенных списков

Создание вложенных списков

Форматирование списков при помощи CSS

https://webref.ru/css/list-style-type

list-style-type

list-style-type: none;

list-style-type: square;

list-style-type: lower-alpha;

list-style-image

https://webref.ru/css/list-style-image

list-style-image: none;

list-style-image: url(icons/winter_16.png);

list-style-position

list-style-position: outside;

list-style-position: inside;

https://webref.ru/css/list-style-position

list-style

https://webref.ru/css/list-style

list-style: list-style-type || list-style-position || list-style-image

list-style: inside url("sqpurple.gif");

Оформление многоуровневых списков

Правило !important

Meta-тег description

Meta-тег keywords

Meta-тег viewport

Meta-тег charset

Meta тег refresh

Селектор потомка

Дочерний селектор

Сестринский селектор

Селектор атрибута

Селектор псевдокласса

Селектор структурных псевдоклассов

Селектор структурных псевдоклассов типа

Селектор псевдоэлемента

Комбинация селекторов

Правило @import

Правило @import также используется для подключения веб-шрифтов:

https://fonts.google.com/

@import url('https://fonts.googleapis.com/css?family=Livvic&display=swap');

Единицы измерения

https://learn.javascript.ru/css-units

Задаёт размер относительно шрифта родителя. Определяются по текущему контенту.

Единицы измерения

https://learn.javascript.ru/css-units

Относительно такого же свойства родителя (как правило, но не всегда),

Единицы измерения

https://learn.javascript.ru/css-units

Единица rem задаёт размер относительно размера шрифта элемента .