HTML — это список того, что есть на странице: заголовок, абзац, кнопка.
CSS — это инструкции, как всё это показать: какого цвета, какого размера, где стоит.
Представь, что HTML — это манекен, а CSS — одежда. Манекен один и тот же, но в футболке он выглядит как повседневный вариант, а в костюме — как деловой.
Пример: HTML без CSS
<!DOCTYPE html> <html> <head> <title>Просто HTML</title> </head> <body> <h1>Привет, это заголовок</h1> <p>Это обычный текст. Браузер сам решает, какой у него шрифт и отступы.</p> <button>Кнопка</button> </body> </html>
Открой это в браузере — получишь максимально «базовый» вид: чёрный текст, стандартный шрифт, кнопка серая и скучная. Всё решает браузер по умолчанию.
Как подключить CSS и сразу увидеть разницу
Самый простой способ для примера — блок <style> внутри <head>:
<!DOCTYPE html> <html> <head> <title>HTML + CSS</title> <style> body { font-family: Arial, sans-serif; background-color: #f5f5f5; color: #333; padding: 20px; } h1 { color: #2b5e8b; border-bottom: 2px solid #4facf9; padding-bottom: 10px; } p { line-height: 1.6; max-width: 600px; } button { background-color: #4facf9; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; } button:hover { background-color: #3a8bd7; } </style> </head> <body> <h1>Привет, это заголовок</h1> <p>Теперь текст выглядит приятнее: у него нормальный межстрочный интервал и ограничение по ширине.</p> <button>Нажми меня</button> </body> </html>
Что тут происходит:
bodyзадаёт общий стиль всей страницы: шрифт, фон, цвет текста, отступы.h1перекрашивает заголовок и добавляет под ним синюю линию.pделает текст читаемым:line-height— расстояние между строками,max-width— чтобы не растягивался на весь экран.buttonделает кнопку цветной, убирает рамку, скругляет углы.button:hover— это реакция на наведение: при наведении цвет кнопки становится чуть темнее.
Если открыть этот файл, разница с первым вариантом будет заметна сразу.
Как CSS «находит», к чему применить стиль
CSS использует селекторы — это способ сказать «примени эти правила вот к этим элементам».
Примеры:
/* ко всем заголовкам h1 на странице */ h1 { color: red; } /* ко всем элементам с class="card" */ .card { background: white; padding: 16px; } /* к элементу с id="main-title" */ #main-title { font-size: 24px; }
В HTML это выглядит так:
<h1 id="main-title">Главный заголовок</h1> <div class="card">Карточка с контентом</div>
Обрати внимание:
- тег (
h1) — стиль для всех таких элементов; .class— стиль для группы элементов;#id— стиль строго для одного элемента.
Три способа подключить CSS
- Внутри HTML (
<style>) — удобно для быстрых примеров и тестов. - Отдельный файл (
<link rel="stylesheet" href="style.css">) — нормальный вариант для реальных проектов. - Прямо в теге (
style="...") — лучше почти не использовать: сложно поддерживать.
Пример подключения внешнего файла:
<head> <link rel="stylesheet" href="style.css"> </head>
А в style.css пишешь только CSS:
h1 { color: #2b5e8b; } button { background-color: #4facf9; }
Важная штука: CSS не меняет структуру
Это частая путаница у новичков. CSS не может:
- превратить
<h1>в кнопку, - добавить новый текст на страницу,
- вытащить данные из базы,
- сделать проверку формы.
Он только управляет тем, как уже существующие элементы выглядят и где стоят.
Например, если в HTML нет кнопки — CSS её не создаст. Если в HTML есть список — CSS может сделать его в одну строку или поменять маркеры, но не может заменить его на таблицу.
Практический пример: меняем один блок
Допустим, у тебя есть карточка:
<div class="product-card"> <h2>Товар</h2> <p>Описание товара.</p> <button>Купить</button> </div>
И ты хочешь, чтобы она была белой, с тенью и рамкой:
.product-card { background: white; border: 1px solid #ddd; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 16px; border-radius: 8px; }
Теперь каждая карточка с классом product-card получит этот вид. Один стиль — много элементов. В этом и сила CSS.
Ещё один момент: каскад и порядок
Слово «каскадные» в названии Cascading Style Sheets не просто так. Если на один элемент попадает несколько правил, браузер решает, какое применить, по приоритету.
Простой пример:
p { color: blue; } .special { color: red; }
<p class="special">Текст</p>
Цвет будет красный, потому что класс .special «сильнее», чем просто тег p.
Загрузка...