Привет! Если ты уже знаешь, что такое HTML и как с помощью тегов создавать структуру страницы, то пришло время сделать сайт красивым. За внешний вид отвечает CSS (Cascading Style Sheets — каскадные таблицы стилей).
CSS — это язык, который говорит браузеру: «Сделай этот текст красным, этот блок широким, а эту картинку выровняй по центру». В этом уроке мы разберём самый базовый синтаксис CSS — как писать правила, из чего они состоят и как подключать их к HTML-элементам.
1. Как выглядит правило CSS
Самое простое правило CSS состоит из трёх частей:
селектор {
свойство: значение;
свойство: значение;
}
- Селектор — кому мы задаём стили (какому элементу или группе элементов).
- Свойство — что именно меняем (цвет, размер, отступ и т.д.).
- Значение — на что меняем.
Пример:
h1 {
color: blue;
font-size: 36px;
}
Это правило говорит: «Все заголовки <h1> сделай синими и размером текста 36 пикселей».
2. Обязательные правила пунктуации
- После каждого значения ставится точка с запятой;
- Последнему свойству тоже желательно ставить точку с запятой — так проще добавлять новые строки позже.
- Фигурные скобки { } обязательны.
Правильно:
p {
color: #333333;
line-height: 1.6;
margin-bottom: 20px;
}
Неправильно (будет работать, но это плохой стиль):
p {
color: #333333
line-height: 1.6
}
3. Основные виды селекторов (самые простые)
|
Селектор |
Что выбирает |
Пример |
|
по тегу |
все элементы этого типа |
p { } — все абзацы |
|
по классу |
элементы с указанным классом |
.alert { } |
|
по id |
один уникальный элемент |
#header { } |
|
универсальный |
все элементы на странице |
* { } |
4. Примеры подключения CSS к HTML
Самый простой способ — написать стили прямо в файле style.css и подключить его в <head>:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Мой первый сайт с CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="main-title">Привет, мир!</h1>
<p class="text">Это мой первый стилизованный абзац.</p>
<div class="box">А это красивый блок</div>
</body>
</html>
А в файле style.css:
/* 1. По тегу */
h1 {
color: #2c3e50;
text-align: center;
}
/* 2. По id (идентификатор уникальный, ставим #) */
#main-title {
font-size: 48px;
font-family: Arial, sans-serif;
}
/* 3. По классу (ставим точку) */
.text {
color: #34495e;
line-height: 1.8;
font-size: 18px;
}
.box {
background-color: #3498db;
color: white;
padding: 20px;
width: 300px;
margin: 30px auto; /* отступ сверху/снизу и выравнивание по центру */
text-align: center;
border-radius: 10px;
}
5. Ещё один простой пример «всё в одном файле»
Если пока не хочется создавать отдельный файл, можно писать CSS прямо в HTML внутри тега <style>:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Тест CSS</title>
<style>
body {
background-color: #f0f0f0;
font-family: Verdana, sans-serif;
}
.highlight {
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<p>Обычный текст</p>
<p class="highlight">А этот текст выделен жёлтым фоном!</p>
</body>
</html>
Поздравляю! Ты только что написал свои первые настоящие правила CSS и понял главную формулу:
селектор { свойство: значение; свойство: значение; }
Это основа всего, что ты будешь делать дальше: от изменения цвета текста до создания сложных анимаций и адаптивных сеток.
Открой свой редактор кода, создай HTML-файл, подключи к нему style.css и попробуй поменять цвета, размеры и отступы на своей странице. Чем больше экспериментируешь сейчас, тем легче будет дальше.
0 Комментарий(я)
Зарегистрируйтесь чтобы оставить комментарий