Загрузка...

Введение в CSS

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

Что такое CSS?

CSS (Cascading Style Sheets) — стандартный язык оформления HTML-документов. Вы пишете правила, которые говорят браузеру, как должны выглядеть элементы: цвет текста, шрифты, поля, фоны, вёрстка и другое. HTML отвечает «что это за контент?» CSS отвечает «как он должен выглядеть?»

HTML и CSS работают вместе

Считайте HTML скелетом страницы, а CSS — одеждой и отделкой. Вам по-прежнему нужен крепкий HTML — заголовки, абзацы, ссылки и landmarks — чтобы у CSS были осмысленные элементы для оформления. Этот курс предполагает базовые знания HTML.

📊 Роли HTML и CSS

Слой	Главная задача	Типичные вопросы
HTML	Структура и смысл	Это заголовок, абзац или ссылка?
CSS	Оформление и вёрстка	Какой цвет, размер, отступы и расположение?
JavaScript (позже)	Поведение и интерактив	Что происходит по клику?

JavaScript вы изучите в следующем курсе. Пока держите разделение ясным: структура в HTML, внешний вид в CSS.

Первый взгляд на правило CSS

У правила CSS есть селектор (что оформлять) и объявления (как оформлять). Объявления стоят в фигурных скобках и используют свойство и значение.

Простое правило

css

CSS Code

h1 {
color: navy;
font-size: 2rem;
}

Что делает это правило

h1 — селектор: он выбирает каждый элемент h1
color: navy; задаёт цвет текста
font-size: 2rem; задаёт размер заголовка
Каждое объявление заканчивается точкой с запятой
Селекторы и единицы вы изучите глубже позже. Здесь достаточно увидеть форму правила.

Как увидеть CSS на странице

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

HTML с блоком style

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Demo</title>
<style>
body {
font-family: Georgia, serif;
background-color: #f5f7fb;
}
h1 {
color: #1a365d;
}
p {
color: #334155;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Styled with CSS</h1>
<p>This paragraph uses the p rule above.</p>
</body>
</html>

Что изменилось

Без правил <style> страница берёт вид браузера по умолчанию. С CSS фон мягче, заголовок тёмно-синий, абзац получает читаемые отступы. Тот же HTML-контент — другое оформление.

Почему важен «cascading» (превью)

«Cascading» в CSS значит: стили могут приходить из нескольких мест, и браузер решает, какое правило победит, через cascade и specificity. Полный алгоритм пока не нужен. Запомните идею: несколько правил могут целиться в один элемент, и у CSS есть ясная система итогового вида. Позже cascade и specificity сделают это практичным.

Попробуйте сами

Создайте файл intro.html.
Вставьте пример HTML-со-style, сохраните и откройте в браузере.
В правиле h1 замените color: #1a365d; на color: teal;, сохраните и обновите.
Убедитесь, что цвет заголовка обновился. Если нет — проверьте сохранение и нужную вкладку.

Частые ошибки

Ждать, что CSS создаст структуру страницы — для заголовков, списков и ссылок используйте HTML; оформляйте их CSS
Писать имена свойств без селектора или скобок, так что браузер игнорирует объявления
Забывать точку с запятой после объявления, что может сломать следующее свойство в том же правиле
Класть видимый контент только в CSS — CSS оформляет контент; он не заменяет текст HTML

Итог

CSS оформляет HTML-страницы: цвета, шрифты, отступы, вёрстка и представление
HTML структурирует контент; CSS управляет его видом
Правило CSS соединяет селектор с объявлениями свойство/значение внутри { }
Можно начать с блока <style>, затем перейти к внешним таблицам стилей
Cascading значит, что могут применяться несколько правил; позже — какое побеждает
Практикуйтесь, меняя маленькое правило и обновляя браузер

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

Внимательно прочитайте каждый вопрос
Выберите лучший ответ на каждый вопрос
Вы можете пересдавать тест столько раз, сколько захотите
Ваш прогресс будет показан вверху

Язык