Учебник HTML и CSS для новичков
Основы HTML
Введение
Язык HTML
HTML теги
Атрибуты
Стили
Основная структура страницы
Основные теги
Абзацы
Заголовки
Выделение текста жирным
Выделение текста курсивом
Неупорядоченные списки
Упорядоченные списки
Ссылки
Внутренние ссылки
Изображения
Ширина картинки
Высота картинки
Установка ширины и высоты картинки
Таблицы
Ширина и высота таблицы
Ячейки-заголовки
Практикум
Основы CSS
Введение в CSS
Как работать с CSS
Значения для цвета
Любые цвета
Ширина и высота
Выравнивание текста
Выравнивание текста вправо
Выравнивание текста по центру
Выравнивание текста влево
Выравнивание текста одновременно вправо и влево
Практика на выравнивание текста
Жирность
Курсив
Размер шрифта
Семейство шрифта
Межстрочный интервал
Значение line-height без единиц
Свойство-сокращение font
Красная строка текста
Эффекты текста
Нижнее подчеркивание текста
Верхнее подчеркивание текста
Перечеркивание текста
Отмена эффектов для текста
Практикум
Селекторы
Родственные связи тегов
Наследование свойств
Группировка селекторов
Общие свойства
Селекторы потомков
Дочерний селектор
Селектор класса
Тег span
Тег div
Группировка классов
Тег с заданным классом
Селектор потомков и классы
Сложные комбинации селектора потомков и классов
Ошибка новичков в селекторе потомков
Элемент с несколькими классами
Селектор по id
Селектор по id и классы
Использование id
Селектор по нескольким классам
Несколько селекторов слитно
Ошибка несколько селекторов
Группировка сложных селекторов
Ошибка при группировке
Тренировка на комбинации селекторов
Приоритет селекторов
Замечание к конфликту свойств
Правила специфичности
Приоритет селекторов потомков
Соседний селектор
Родственный селектор
Универсальный селектор
Селекторы атрибутов
Состояния ссылок
Нюансы последовательности состояния ссылок
Состояния link и visited
Обычное использование состояния ссылок
Сложные селекторы со ссылками
Ссылка с классом
Выборка концевых элементов
Выборка по позиции
Выборка единственного потомка
Выборка пустых элементов
Выборка по позиции и типу элементов
Отрицание not
Оформление
Фоновый цвет
Основы работы с границами
Сплошная граница
Точечная граница
Граница в виде тире
Выпуклая граница
Двойная граница
Свойство-сокращение для границы
Границы для разных сторон
Скругление границ блока
Скругление границ фона
Создание круга
Скругление для разных углов
Четыре значения
Два значения
Три значения
Скругление в процентах
Создание круга при скруглении в процентах
Картинка для фона
Повторение картинки фона
Другие свойства для фона
Маркеры списков ul
Квадратные маркеры списков ul
Маркеры списков ul в виде кружков
Маркеры списков ul в виде закрашенных кружков
Отсутствие маркеров списков ul
Маркеры списков ol
Строчные римские цифры для списков ol
Заглавные римские цифры для списков ol
Строчные латинские буквы для списков ol
Заглавные латинские буквы для списков ol
Строчные греческие буквы для списков ol
Числа с нулем впереди для списков ol
Блочная модель
Внешний отступ margin
Отступы margin для разных сторон
Несколько значений в margin
Четыре значения в margin
Два значения в margin
Три значения в margin
Внутренний отступ padding
Отступы padding для разных сторон
Несколько значений в padding
Расширение элементов
Влияние границы на расширение элементов
Совместное влияние padding и границы на расширение элементов
Отмена расширения элементов
Блочные элементы
Ширина и высота блочного элемента
Ширина блочного элемента
Высота блочного элемента
Высота без содержимого
Несколько блочных элементов рядом
Строчные элементы
Ширина и высота строчного элемента
Несколько строчных элементов рядом
Отступы между строчными элементами
Определение блочной модели
Свойство display
Строчно-блочные элементы
Ширина и высота строчно-блочного элемента
Ширина строчно-блочного элемента
Высота строчно-блочного элемента
Несколько строчно-блочных элементов рядом
Выравнивание блочных элементов
Выравнивание блочного элемента с отступом слева
Выравнивание блочного элемента с отступом справа
Выравнивание строчных элементов
Центрирование строчных элементов
Центрирование нескольких строчных элементов
Выравнивание строчных элементов по правому краю
Выравнивание строчно-блочных элементов
Центрирование строчно-блочных элементов
Выравнивание строчно-блочных элементов по правому краю
Флекс элементы
Высота родителя флекс элементов
Ширина родителя флекс элементов
Строчно-блочный родитель
Отступы padding родителя
Отступы margin потомкам
Выравнивание флекс элементов
Выравнивание флекс элементов по центру
Выравнивание флекс элементов по родителю
Выравнивание флекс элементов по родителю с отступами
Выравнивание флекс элементов по родителю с равными отступами
Позиционирование
Абсолютное
Относительное
Абсолютное относительно родителя
Абсолютное относительно абсолюта
Абсолютное без координат
Центрирование через absolute
Отрицательные значения absolute
Фиксированное позиционирование
Блок на всю ширину экрана
Наложение элементов по оси Z
Регулирование наложения элементов по оси Z
Нюансы применения отрицательного значения z-index
Флоаты
Введение в свойство float
Свойство float и теги
Сочетание float и margin
Сочетание float и padding
Плавающие элементы под тегами
Действие флоатов на родителя
Высота родителя флоатов
Текст в родителе флоатов
Обтекание
Отмена обтекания
Отдельный див с клиарфиксом
Высота родителя и клиарфикс
Свойство float для блоков
Свойство float и несколько блоков
Свойство float и родитель без текста
Флексы
Размещение в ряд или колонку
Размещение флекс элементов в перевернутом ряду
Размещение флекс элементов в колонку
Переворачивание колонки с флекс элементами
Главная и поперечная оси
Выравнивание по главной оси
Выравнивание по поперечной оси
Значение center свойства align-items
Центрирование без высоты блоков
Центрирование с разной высотой блоков
Значение stretch свойства align-items
Практика на выравнивание по осям
Выравнивание отдельного элемента
Порядок flex блоков
Гриды
Введение в гриды
Треки и линии
Отображение в отладчике
Столбцы
Единица fr
Дробные fr
Пиксели и fr
Проценты и fr
Функция repeat
Значение auto
Значение auto-fill
Функция minmax
Значение auto-fit
Ряды
Сокращение для рядов и столбцов
Объединение рядов
Объединение столбцов
Комбинации объединений
Перекрытие столбцов
Расстояние между столбцами
Расстояние между рядами
Расстояние между столбцами и рядами
Плиточка
