Полный путеводитель по CSS — от синтаксиса до стилизации своего первого сайта. Никаких знаний не нужно.
HTML строит структуру — CSS делает её красивой. Разбираемся, что это такое и зачем нужно.
CSS (Cascading Style Sheets — каскадные таблицы стилей) — это язык, который описывает внешний вид HTML-элементов. Без CSS страница — серый текст на белом фоне. CSS добавляет цвета, шрифты, отступы, анимации и макет.
Представь: HTML — это скелет здания (стены, окна, двери), а CSS — это дизайн интерьера (краска, мебель, освещение). Одну и ту же HTML-структуру можно оформить совершенно по-разному.
CSS можно добавить на страницу тремя способами. Самый популярный для обучения — тег <style> внутри <head>. Именно его мы будем использовать в практике.
.css — это удобнее и быстрее для браузера. Но для обучения тег <style> идеален.Правила CSS выглядят всегда одинаково. Один раз понять — и пишешь на автомате.
Каждое CSS-правило состоит из трёх частей: селектор (кого стилизуем), свойство (что меняем) и значение (на что меняем). Всё внутри фигурных скобок { }.
Селектор — это "адрес" элемента. Можно выбрать элемент по названию тега, по классу (атрибут class) или по уникальному идентификатору (атрибут id).
.name) можно использовать у нескольких элементов. ID (#name) — только у одного на странице. Классы используй чаще.Самые используемые свойства CSS — те, что меняют цвет, фон, отступы и размеры.
В CSS цвет можно задать несколькими способами. Самый популярный — HEX-код (шестнадцатеричный), который начинается с #. Также можно использовать названия цветов и формат RGB.
#1C1C1C — очень тёмно-серый, почти чёрный. Именно такой фон нужно будет сделать в практике!Свойство background-color задаёт цвет фона элемента. Свойство background более мощное — оно может быть и цветом, и картинкой, и градиентом.
padding — внутренний отступ (между содержимым и границей элемента). margin — внешний отступ (между элементами). Оба можно задать для каждой стороны отдельно или сразу для всех.
Свойство border задаёт рамку вокруг элемента: толщину, стиль и цвет. border-radius скругляет углы — значение 99px или 50% делает элемент круглым (кнопки-пилюли).
Шрифт — это первое, что замечают на сайте. Узнай, как подключить любой шрифт из интернета.
Google Fonts — бесплатный сервис с тысячами шрифтов. Чтобы использовать шрифт, нужно подключить его через тег <link> в <head>, а потом применить в CSS через font-family.
Кнопка по умолчанию выглядит некрасиво. Но с CSS её можно сделать современной и привлекательной — задать цвет фона, убрать рамку, добавить скругления, тень и эффект при наведении.
cursor: pointer меняет курсор на "руку" при наведении на кнопку. Без этого свойства пользователь может не понять, что это кликабельный элемент.CSS-анимации оживляют страницу без JavaScript. Разберём с нуля.
@keyframes описывает что происходит во время анимации — от начального состояния до конечного. Свойство animation применяет её к элементу: имя, длительность, функция плавности, задержка, количество повторений.
Используй проценты (0%, 50%, 100%) для сложных анимаций с промежуточными состояниями. Один блок @keyframes — одна анимация, но можно применять несколько через запятую.
animation: имя длит. функция задержка кол-во fill-mode. Например: animation: fadeIn 0.5s ease 0.2s both.Применяй всё, что изучил. Напиши CSS прямо в редакторе — предпросмотр обновляется мгновенно.
Отличная работа! Ты научился делать страницы красивыми: задавать фон, цвета, шрифты и стилизовать кнопки. Это фундамент любого современного сайта.
Следующий шаг — Flexbox и Grid для вёрстки макетов, а потом анимации. Ты на верном пути!
Нарастающая сложность. Напиши код → ▶ Запустить → ✓ Проверить.
#1C1C1C, белый текст, Google Fonts, цветные акценты.border-radius:99px), shadow. Каждой — :hover.position:fixed, логотип + ссылки, transition, backdrop-filter:blur.@keyframes: fadeIn для заголовка, пульс для кнопки, градиентный фон.