Оглавление
Учебник HTML & CSS
Последовательный курс HTML & CSS с нуля: от первой программы до продвинутых тем.
1.Основы HTML
- Что такое HTMLЧто такое HTML, из чего состоят теги и элементы, как их вкладывать друг в друга и как писать комментарии.
- Структура документаКаркас HTML-страницы — doctype, html, head и body, кодировка, заголовок вкладки, viewport и первый файл index.html.
- Заголовки и абзацыШесть уровней заголовков, абзацы, пробелы и переносы строк, разделительная линия и цитаты в HTML.
- Форматирование текстаСтрочные теги для текста — strong и em, mark, del и ins, sub и sup, code, kbd и pre, abbr и q.
- СсылкиТег a и атрибут href, абсолютные и относительные адреса, переходы внутри страницы, новая вкладка, почта и телефон.
- ИзображенияТег img, атрибуты src и alt, размеры, подпись figure и figcaption, форматы картинок и отложенная загрузка.
- СпискиМаркированные и нумерованные списки, настройка нумерации, вложенные списки и списки определений в HTML.
- ТаблицыТаблицы в HTML — строки и ячейки, заголовки столбцов, thead, tbody, tfoot и caption, объединение ячеек.
- АтрибутыКак устроены атрибуты HTML, глобальные атрибуты id, class, title, lang, hidden и style, логические атрибуты и data-атрибуты.
- Семантическая разметкаНейтральные div и span и смысловые теги header, nav, main, article, section, aside и footer для разметки страницы.
- Специальные символыМнемоники HTML — как показать на странице служебные знаки, неразрывный пробел, знак копирайта, длинное тире и любой символ по номеру.
2.Формы
- ФормыКак устроена форма в HTML — тег form, поле input, атрибут name, кнопка отправки, action и методы GET и POST.
- Виды полей вводаАтрибут type у input — текст, почта, пароль, числа и ползунок, даты, флажки, переключатели, цвет и файл.
- Подписи и группы полейТег label и связь подписи с полем через for и id, вложенные подписи, группировка полей с fieldset и legend.
- Списки выбора и многострочный текстВыпадающий список select и option, группы optgroup, выбор нескольких вариантов, textarea и подсказки datalist.
- КнопкиТег button и его типы submit, reset и button, кнопка с иконкой, отключённая кнопка и разница между кнопкой и ссылкой.
- Проверка формВстроенная проверка полей в браузере — required, minlength и maxlength, min и max, pattern, оформление ошибок и novalidate.
3.HTML: следующие шаги
- Аудио и видеоТеги video и audio, панель управления controls, автозапуск, повтор, несколько форматов через source и субтитры.
- Встраивание страниц: iframeТег iframe — встраивание чужой страницы, карты и видео, размеры и title, srcdoc, отложенная загрузка и ограничения sandbox.
- Метатеги и SEOЧто писать в head — title, meta description, viewport, Open Graph для соцсетей, иконка сайта, canonical и robots.
- ДоступностьКак сделать страницу удобной для всех — работа с клавиатуры, фокус, подписи и alt, aria-label, контраст и смысловые теги.
- SVG-графикаВекторная графика SVG прямо в HTML — фигуры, viewBox и масштабирование, линии и контуры, path, заливка и currentColor.
- Раскрывающиеся блоки и диалогиТег details и summary, аккордеон, модальное окно dialog, закрытие через form method=dialog и всплывающие блоки popover.
4.Основы CSS
- Что такое CSSКак устроено правило CSS, где писать стили, как подключить отдельный файл и зачем нужны комментарии.
- СелекторыКак выбрать элементы для оформления — по тегу, классу, id, вложенности и атрибуту.
- Каскад и специфичностьКакое правило побеждает, если несколько задают одно свойство: порядок, специфичность, наследование и !important.
- ЦветаЦвет текста и фона, способы записи цвета в CSS — названия, hex, rgb() и hsl() — и прозрачность.
- Единицы измеренияПиксели, проценты, em, rem и единицы экрана — чем они отличаются и когда какую выбрать.
- Текст и шрифтыШрифт, размер, жирность, курсив, высота строки, выравнивание и оформление текста, подключение своего шрифта.
- Блочная модельИз чего состоит элемент в CSS — содержимое, padding, border и margin, размеры, центрирование и box-sizing.
- Фон и рамкиФоновые картинки, их повтор, размер и положение, виды рамок, скругление углов и outline.
- Свойство displayБлочные и строчные элементы, значения block, inline, inline-block и none, скрытие элементов.
- ПсевдоклассыСтили для состояний и положения элементов — hover, focus, ссылки, first-child, nth-child, not и поля форм.
- ПсевдоэлементыКак оформить часть элемента или добавить декоративное содержимое — before, after, first-letter, marker, placeholder и selection.
- CSS-переменныеПользовательские свойства — как объявить переменную, прочитать её через var(), переопределить и задать запасное значение.
- Общие значенияКлючевые слова inherit, initial, unset и revert, которые принимает любое CSS-свойство, и свойство all для сброса всех стилей сразу.
- Оформление списков и таблицВид маркеров и list-style, свои маркеры через ::marker, меню из списка без точек, а также рамки, отступы, выравнивание, полосы-зебра и подпись таблицы.
- Оформление формКак оформить поля и кнопки — отступы и рамки, состояние фокуса, подсказка, выключенные и ошибочные поля, accent-color и свои флажки через appearance: none.
- Веб-шрифтыКак подключить свой шрифт — правило @font-face, формат woff2, font-display, вариативные шрифты, Google Fonts с preconnect, запасные шрифты и выбор между своим сервером и CDN.
- Счётчики CSSАвтоматическая нумерация средствами CSS — counter-reset, counter-increment, функции counter() и counters(), нумерованные заголовки, вложенная нумерация 1.1, 1.2 и правило @counter-style.
5.Раскладка страницы
- ПозиционированиеСвойство position — static, relative, absolute, fixed и sticky, координаты top, right, bottom, left и inset.
- FlexboxРаскладка элементов в ряд или колонку с помощью flexbox — оси, направление, промежутки, выравнивание и перенос.
- Flex-элементыКак управлять отдельными элементами во flexbox — flex-grow, flex-shrink, flex-basis, сокращение flex, align-self, order и margin auto.
- GridСетка CSS Grid — колонки и строки, единица fr, функции repeat и minmax, промежутки и адаптивная сетка без медиазапросов.
- Линии и области сеткиКак поставить элемент в нужное место сетки — номера линий, grid-column и grid-row, span, именованные области grid-template-areas.
- МедиазапросыАдаптивная вёрстка с медиазапросами — тег viewport, правило @media, min-width и max-width, подход mobile first и перестройка каркаса.
- Адаптивные изображенияКак картинки подстраиваются под экран — max-width, aspect-ratio, object-fit, атрибуты srcset и sizes, элемент picture.
- Переполнение и слоиЧто делать, когда содержимое не помещается в блок — overflow, прокрутка, многоточие — и как z-index решает, какой элемент лежит сверху.
- Контейнерные запросыКак компонент подстраивается под ширину своего блока, а не окна — container-type, правило @container, имена контейнеров и единицы cqi.
- Обтекание: floatКак работает float, обтекание картинки текстом, clear и display: flow-root, и почему колонки сегодня строят на flexbox и grid.
- ПрокруткаПлавная прокрутка scroll-behavior, отступ для якоря под липкой шапкой scroll-margin-top, карусель на scroll-snap и overscroll-behavior.
- SubgridЗначение subgrid — как вложенный блок использует линии родительской сетки, выравнивание заголовков, текста и кнопок в соседних карточках и поддержка браузерами.
- Привязка к якорюCSS anchor positioning — как прикрепить подсказку или меню к другому элементу: anchor-name, position-anchor, функция anchor(), position-area, запасные позиции position-try-fallbacks и поддержка браузерами.
6.Эффекты и анимация
- Тени и градиентыТени блоков и текста — box-shadow и text-shadow, линейные и радиальные градиенты, точки цвета.
- ПереходыПлавная смена стилей с transition — длительность, задержка, функции плавности, что можно анимировать и где писать переход.
- ТрансформацииСвойство transform — сдвиг, поворот, масштаб и наклон элемента, точка опоры transform-origin и отдельные свойства translate, rotate, scale.
- АнимацииАнимации CSS — правило @keyframes, свойство animation, повторы и направление, ключевые кадры в процентах, fill-mode и prefers-reduced-motion.
- ФильтрыСвойство filter — размытие, чёрно-белый режим, яркость, контраст и тень по контуру drop-shadow, а также backdrop-filter для эффекта матового стекла.
- View TransitionsПлавная смена состояний страницы — document.startViewTransition(), свойство view-transition-name, псевдоэлементы ::view-transition и переходы между страницами.
- Обрезка и маскиКак придать элементу любую форму — clip-path с кругом, эллипсом и многоугольником, плавное исчезновение через mask-image с градиентом и обтекание текстом фигуры с shape-outside.
- Анимация появления и исчезновенияКак плавно показать и спрятать элемент — правило @starting-style, transition-behavior: allow-discrete, переход из display: none, анимация открытия диалога и popover, interpolate-size для height: auto.
- Анимация при прокруткеАнимации, привязанные к прокрутке, — animation-timeline с функциями scroll() и view(), индикатор чтения, появление блоков при прокрутке, animation-range, поддержка браузерами и запасной вариант.
7.Современный CSS
- Функции CSSВычисления прямо в CSS — calc(), min(), max() и clamp(), смешивание единиц, плавные размеры и функции вместе с переменными.
- Вложенность CSSВстроенная вложенность правил в CSS — правила внутри правил, символ &, вложенные медиазапросы и поддержка браузерами.
- Современные селекторыСелекторы :is(), :where(), :not() со списком и :has() — как сократить длинные селекторы и выбрать родителя по его содержимому.
- Тёмная темаКак сделать тёмную тему сайта — свойство color-scheme, медиазапрос prefers-color-scheme, цвета в переменных, функция light-dark() и переключатель темы.
- Логические свойстваСвойства, которые зависят от направления текста, а не от сторон экрана — margin-inline, padding-block, inline-size, inset-inline и writing-mode.
- Как организовать CSSПорядок в стилях проекта — внешние файлы, базовые стили, имена классов по БЭМ, комментарии и каскадные слои @layer.
- Инструменты разработчикаКак исследовать и отлаживать вёрстку в браузере — панель Elements, стили и перечёркнутые правила, блочная модель, подсказки flex и grid, режим устройства.
- Современные цветаФункция oklch() и почему с ней удобно строить палитры, смешивание цветов color-mix() и относительный синтаксис oklch(from ...).
- Проверка поддержки: @supportsПравило @supports и запросы возможностей, условия not, and и or, проверка селекторов через selector() и прогрессивное улучшение.
- Каскадные слои: @layerПравило @layer — как слои меняют каскад, порядок слоёв, стили вне слоёв, подключение файлов и чужих библиотек в слой.
- Область стилей: @scopeПравило @scope — стили, которые действуют только внутри компонента, нижняя граница to, псевдокласс :scope, близость корня при конфликте, сравнение с БЭМ и вложенностью, поддержка браузерами.
- Типизированные переменные: @propertyПравило @property — как задать CSS-переменной тип, наследование и начальное значение, почему после этого её можно анимировать, плавный градиент и вращение угла.
- Скорость страницыОсновы быстрой загрузки для HTML и CSS — блокирующий CSS и критические стили, preload и preconnect, размеры картинок, loading=lazy и fetchpriority, content-visibility и contain, сдвиги вёрстки и проверка в Lighthouse.
8.Методологии и архитектура CSS
- Зачем нужна архитектура CSSКакие проблемы появляются в больших стилях — войны специфичности, конфликты имён, мёртвый CSS — и что такое методология.
- БЭМ: блокиБлок в методологии БЭМ — самостоятельный компонент интерфейса: как его называть, почему он независим и как блоки вкладываются друг в друга.
- БЭМ: элементыЭлемент в БЭМ — часть блока: синтаксис имени с двумя подчёркиваниями, почему в имени не повторяют вложенность и когда часть стоит сделать отдельным блоком.
- БЭМ: модификаторыМодификатор в БЭМ меняет вид или состояние блока или элемента: булевые модификаторы и модификаторы ключ-значение, модификаторы элементов.
- БЭМ: миксыМикс в БЭМ — несколько сущностей на одном теге: узел, который одновременно блок и элемент, разделение внешней геометрии и внешнего вида.
- Правила БЭМ в HTML и CSSКак писать CSS по БЭМ: только классы, без тегов и id, плоская специфичность, допустимые исключения и файловая структура по блокам.
- БЭМ и SassКак писать БЭМ короче в препроцессоре Sass: &__element и &--modifier, почему это не работает во встроенной вложенности CSS и как не испортить специфичность.
- OOCSS, SMACSS и ITCSSДругие подходы к архитектуре CSS: объектно-ориентированный CSS, категории SMACSS, перевёрнутый треугольник ITCSS и их сравнение с БЭМ.
- Утилитарный CSS и CSS-модулиПодход utility-first и идея Tailwind, CSS-модули и scoped-стили во фреймворках — чем они отличаются от БЭМ и когда что выбрать.
- Практика: переводим компонент на БЭМПошаговый рефакторинг запутанной карточки товара в БЭМ — разбор проблем, поиск блоков, элементов и модификаторов, результат до и после.