Каскадные таблицы стилей —  или CSS — это технология, которую следует изучать непосредственно после HTML. В отличие от HTML, который служит для определения структуры и семантики контента, CSS отвечает за его внешний вид и отображение. К примеру, с помощью CSS можно изменять шрифт, цвет, размер, межстрочный интервал, разделять содержимое на колонки, а также добавлять анимацию и другие декоративные элементы.

Путь обучения (образовательная траектория)

Прежде, чем браться за CSS, вам стоит разобраться с основами HTML. Мы рекомендуем изучить модуль Введение в HTML. После его прохождения переходите к:

  • изучению CSS, начиная с модуля Введение в CSS;
  • далее - к более продвинутой теме "HTML-модули";
  • после этого - к модулю "JavaScript" и тому, как его использовать, чтобы добавить вашим веб-страницам динамического функционала.

Мы рекомендуем изучать HTML и CSS одновременно. HTML гораздо интереснее в сочетании с CSS и изучать эти языки не комплексно было бы ошибкой.

В данном разделе содержится информация, которая требует самой базовой ознакомленности с компьютером и веб. В статье Установка рабочего пространства подробно описано необходимое ПО и способы его установки, необходимо также будет уметь создавать и управлять файлами, в чем поможет статья Разбираемся с файлами — которая включена в полное руководство для новичка Основы веб.

Перед тем как начинать данный раздел мы рекомендуем пройти руководство Основы веб, хотя это абсолютно не обязательно; большая часть того, что вы найдете в статье об основах CSS также встречается в разделе Введение в CSS, хотя и более детально.

Модули

Этот раздел содержит модули в порядке, наиболее подходящем для работы с ними. Лучше всего начать с самого первого.

Введение в CSS
Этот раздел поможет разобраться в том как работает CSS включая селекторы и значения, писать правила и применять CSS в HTML, как устанавливать длину, цвет и другие единицы измерения CSS, наследование, основы блочной модели и отладка CSS.
Дизайн текста
Здесь мы рассмотрим основы стилизации текста, в том числе изменение шрифта, жирности, курсивного написания, межстрочного и межбуквенного интервалов, теней и других особенностей текста. Завершается модуль демонстрацией применения пользовательских шрифтов на вашей странице, оформлением списков и ссылок.
Стилизирование блоков
Далее мы рассмотрим дизайн блоков, один из основных шагов к разметке веб-страницы. В этом модуле мы кратко рассмотрим работу с блочными элементами, а затем ознакомимся с приемами управления блоками, установив такие свойства, как поля, оступы и границы, настроим фоновые цвет и изображение, а также рассмотрим более сложные функции, такие как тени и фильтры.
CSS-вёрстка
На данный момент мы уже смотрели на основы CSS, такие как стиль текста и как стилизовать и манипулировать блоками, в которых находится ваш контент. Теперь пришло время посмотреть, как разместить ваши блоки в нужном месте в отношении просмотра, и друг друга. Мы рассмотрели необходимые предпосылки, так что теперь можно погрузиться в верстку, глядя на различные параметры отображения, современные инструменты постройки макетов, такие как flexbox, CSS grid и позиционирование, и некоторые из устаревших методов, о которых вы, возможно, все еще хотите знать.
Адаптивный дизайн (TBD)
В настоящее время существоет множество устройств, способных осуществлять просмотр веб-страниц, адаптивный веб-дизайн (RWD - Responsive Web Design) стал основным навыком веб-разработки. В этом модуле рассказывается об основных принципах и инструментах RWD, объясняется, как применять различные CSS к документу в зависимости от таких функций устройства, как ширина экрана, ориентация и разрешение, а также изучить имеющиеся возможности отображения различных видео и изображений в зависимости от характеристик используемого пользователем устройства.

Решаем часто встречающиеся проблемы  в CSS

В разделе Использование CSS для решения общих проблем даны ссылки на разделы, объясняющие как следует использовать CSS для решения самых распространенных проблем при создании веб-страницы.

В самом начале вы будете применять цвет к тексту и фону HTML элементов, изменять их размер, форму, местоположение, добавлять и стилизовать границы. Однако с уверенным знанием даже основ CSS, вы сможете сделать практически что угодно. Одним из плюсов изучения CSS является то, что вы быстро начтене понимать, можно или нельзя что-то сделать средствами CSS, даже если вы еще не уверены как это сделать.   

Смотрите также

CSS на MDN
Основная точка входа для CSS документации на MDN, с подробными ссылками на дополнительные учебники.
CSS-справочник
Комплексный справочник по всем многочисленным особенностям языка CSS — если вы хотите знать, какие значения свойство может иметь, для примера, это отличное место для начала.

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, skrikl, izhurav, alexbs, sborenko, niktariy, bezik, Shychara, kolanski, VladdOs, BychekRU, uleming, Andrew_Pfeiffer
Обновлялась последний раз: mdnwebdocs-bot,