Курсы
Уроки
Шаг 3 из 11 на пути «Веб-разработка»
CSS
CSS — это способ оформлять веб-страницы. Освоив HTML и CSS, вы сможете создавать любые красивые сайты.
Уроки
Уроки
CSS — это способ оформлять веб-страницы. Освоив HTML и CSS, вы сможете создавать любые красивые сайты.
Уроки
Урок 1
Подключайте CSS через атрибут style, элемент <style> или файл style.css с помощью <link>.
За урок вы получите 55 XP
Урок 2
Выбирайте элементы по типу, классу и id, оформляйте :hover и узнайте, какое правило победит.
За урок вы получите 115 XP
Урок 3
Задавайте color и background-color через rgb(), hex и hsl() и приглушайте целые элементы с помощью opacity.
За урок вы получите 55 XP
Мини-проект
Раскрасьте меню кафе, отметьте веганские и закончившиеся блюда и выделите предложение дня.
За урок вы получите 30 XP
Урок 5
Выбирайте шрифты через font-family, задавайте размер текста в rem и подключайте веб-шрифт с Google Fonts.
За урок вы получите 75 XP
Урок 6
Задайте блокам ширину, отступы и рамку и отцентрируйте их с помощью margin: 0 auto.
За урок вы получите 95 XP
Мини-проект
Оформите карточку профиля: скруглённые углы, инициалы в синем кружке и текст по центру.
За урок вы получите 30 XP
Урок 8
Выстраивайте элементы в ряд и скрывайте их через display, а размещайте — через position: absolute или sticky.
За урок вы получите 95 XP
Урок 9
Расположите панель навигации и карточки с помощью display: flex, justify-content и align-items.
За урок вы получите 60 XP
Мини-проект
Разложите страницу с тарифами: панель навигации, карточки с ценами в ряд и метку на самом популярном тарифе.
За урок вы получите 30 XP
Урок 11
Соберите сетку карточек со столбцами по 1fr и разложите целую страницу с помощью grid-template-areas.
За урок вы получите 75 XP
Урок 12
Оформите целую страницу сами: веб-шрифт, цвета, отступы, flexbox и сетка.
За урок вы получите 80 XP
CSS определяет, как выглядит веб-страница: её цвета, шрифты, отступы и расположение элементов. Курс начинается с селекторов и цветов, затем проходит через текст, блочную модель и позиционирование и заканчивается двумя системами раскладки, на которых держатся современные сайты, — Flexbox и CSS Grid.
Вы практикуетесь на настоящих страницах — меню кафе, карточке профиля и странице с тарифами, — а в итоговом проекте сами оформляете целую страницу. Каждое упражнение проверяет ваши стили в живом предпросмотре. Лучше всего сначала пройти курс HTML.