Базовый CSS от htmlacademy

Введение в CSS

CSS-правила

Продвинутые селекторы

Свойства для оформления текста

Свойства для задания размеров и отступов

Позиционирование элементов

Создание сетки страницы

Декоративные свойства

Каскадность

Каскадность. Переопределение стилей

Каскадность и приоритеты

Каскадность. Коктейль из классов

Наследование

Ненаследуемые свойства

Испытание: макет-прототип

Нелёгкая жизнь без селекторов

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

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

Отрабатываем селекторы по классам

Контекстные селекторы

Соседние селекторы

Контекстные и соседние селекторы

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

Псевдоклассы

Псевдокласс :nth-child

:nth-child и контекстные селекторы

Псевдокласс :hover

Динамические эффекты с помощью :hover

Псевдоклассы :link, :visited и :active

Псевдокласс :focus

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

Селектор по id

Испытание. Дуэль.

Иерархическое дерево

Наследование

Наследование «на пальцах»

Ещё немного про наследование

Наследуемые свойства

Ненаследуемые свойства

Принудительное наследование

Каскадирование

Битва за курочку

Битва за курочку. Раунд второй

Битва за курочку. Раунд третий

Битва за курочку. Борьба накаляется

Битва за курочку. Запрещённый приём

Ещё одна задачка на специфичность

Расчёт значения специфичности

Ещё задачка на порядок кода

Перекрестное наследование

Испытание: взломанный котопрофайл

Главный текстовый тег — span

Свойство font-size: задаём размер шрифта

Свойство font-weight: толщина начертания

Свойство font-style: курсив

Свойство font-family: шрифт

Свойство color: цвет текста

Свойство text-decoration: подчёркивание и другие эффекты

Декоративное подчёркивание

Задаём регистр символов с помощью text-transform

Управляем пробелами: white-space

Горизонтальное выравнивание текста: text-align

Вертикальное выравнивание: vertical-align

Верхние и нижние индексы на CSS

Свойство line-height: управляем высотой строки

Вертикальный ритм текста

Испытание: рецепт на CSS

Cвойство background-color

Свойство background-image

Свойство background-repeat

Свойство background-position

Ещё немного background-position

Свойство background-attachment

Свойство background

Испытание: котокомикс

Формат JPEG

Формат PNG-8

Формат PNG-24

Формат GIF

Несколько фонов

Эффекты с повторяющимся фоном

Спрайты

Испытание: CAT Academy

Блочные элементы

Строчные элементы

Ширина и высота

Внутренние отступы, свойство padding

Внешние отступы, свойство margin

Рамки

Стандартная блочная модель

Первое испытание

«Схлопывание» внешних отступов

«Выпадание» внешних отступов

Как отцентровать элемент?

Блочная модель и строчные элементы

Ширина 100% и ширина по умолчанию

Проблемы обычной блочной модели

Изменяем блочную модель, свойство box-sizing

Второе испытание

Управление типом элемента, свойство display

display: inline-block

display: table

display: table-row

display: table-cell

display: none

Последнее испытание

Пробуем управлять потоком

Управление потоком, шаг 2

Управление потоком, шаг 3

Создадим другой поток

Другой поток, шаг 2

Другой поток, шаг 3

Другой поток, финал

Погружение в флоаты

float и ширина

float и выпадание из потока

Флоат рядом с флоатом

Когда флоатов много, а места мало

Испытание: пазл на флоатах

Свойство clear

Борьба с выпаданием флоатов: распорки

Борьба с выпаданием флоатов: псевдораспорки

Простейшая сетка, шаг 1

Простейшая сетка, шаг 2

Простейшая сетка, финал

Сетка посложнее, шаг 1

Сетка посложнее, шаг 2

Сетка посложнее, шаг 3

Сетка посложнее, добавляем содержание

Последняя сетка, шаг 1

Последняя сетка, шаг 2

Последняя сетка завершена

Испытание: строим сетку

Погружение в inline-block

float vs inline-block

Простая сетка на inline-block

inline-block и пробелы в коде

Испытание: котогалерея на inline-block

Поток документа

Относительное позиционирование

position: relative и свойство top

position: relative и свойство left

position: relative и свойство bottom

position: relative и свойство right

Относительное позиционирование на практике

Абсолютное позиционирование

Абсолютное позиционирование и строчные элементы

position: absolute и свойство left

position: absolute и свойство top

position: absolute и свойство right

position: absolute и свойство bottom

Точка отсчёта координат

Тренируемся задавать координаты

Неявная точка отсчёта

Абсолютное позиционирование на практике

Фиксированное позиционирование

z-index или кто кого перекроет

Испытание: собери слово «вечность»

Создаём вертикальное меню

Добавляем ссылки

Сбрасываем стили списка

Оформляем контейнер меню

Оформляем пункты, простой вариант

Более сложное оформление пунктов

Добавляем разделители

Оформляем состояния пунктов

Испытание: вертикальное меню

Многоуровневое вертикальное меню

Устраняем проблемы оформления

Переносим рамки, задаём отступы подменю

Оформляем пункты подменю

Тестируем на большой вложенности

Испытание: многоуровневое меню

Горизонтальное меню

Что делать, если пункты не влезают?

Усложненное оформление пунктов

Завершаем оформление пунктов

Испытание: горизонтальное меню

Вертикальное меню с выпадающим подменю

Позиционируем выпадающее подменю

Отображаем подменю при наведении

Горизонтальное меню с выпадающим подменю

Оформляем выпадающее меню

Включаем механизм выпадания

Состояние «открытое подменю»

Испытание: выпадающее меню

Социальные кнопки, шаг 1

Социальные кнопки, шаг 2

Социальные кнопки, шаг 3

Переключатель страниц, шаг 1

Переключатель страниц, шаг 2

Переключатель страниц, шаг 3

Переключатель страниц, шаг 4

Переключатель страниц, тестирование

Испытание: карточка курса

Контакты, шаг 1

Контакты, шаг 2

Контакты, шаг 3

Комментарии, шаг 1

Комментарии, шаг 2

Комментарии, шаг 3

Комментарии, шаг 4

Комментарии, шаг 5

Испытание: анонс поста