Привет! Если HTML — это скелет и органы нашего сайта, то CSS — это кожа, одежда, макияж и вообще всё, что делает нас красивыми (или хотя бы приличными) в глазах посетителей.
Сегодня мы разберём самые базовые вещи, которые реально используют в 99% сайтов.
Как CSS подключается к HTML (3 основных способа)
- Внешний файл (самый правильный и популярный)
HTML
<head>
<link rel="stylesheet" href="style.css">
</head>- Внутренние стили внутри <head> (удобно для экспериментов)
HTML
<head>
<style>
h1 { color: navy; }
</style>
</head>- Прямо в теге (стиль-инлайн, почти всегда плохая практика)
HTML
<h1 style="color: red; font-size: 60px;">Плохо так делать</h1>Плохой практикой это считается потому, что в таком случае стиль применяется только к одному элементу, что ведет к повторению кода.
В 95% случаев в реальной жизни вы будете использовать первый вариант — отдельный файл style.css.
Что внутри CSS?
В примерах выше вы уже заметили определенную структуру css:
тег/класс/id {
свойство: значение;
}О тегах, классах и id можно прочитать в статье
в скобках может быть указано несколько свойств, которые применятся к элементу (или элементам).
Самые важные простые свойства, которые нужно знать сразу
/* Текст */
color: #333; /* цвет текста */
font-size: 18px; /* размер шрифта */
font-weight: bold; /* жирность: normal | bold | 700 */
font-family: Arial, sans-serif; /* шрифт (всегда указывайте запасной) */
text-align: center; /* выравнивание текста */
line-height: 1.5; /* межстрочный интервал (очень важен для читаемости!) */
/* Фон */
background-color: #f8f9fa;
background: #000 url('bg.jpg') no-repeat center/cover;
/* Отступы и размеры */
margin: 20px; /* внешние отступы */
padding: 15px; /* внутренние отступы */
width: 300px;
max-width: 100%; /* не даёт растягиваться шире родителя */
height: 200px;
/* Блоки и расположение */
display: block; /* занимает всю ширину */
display: inline; /* как слово в тексте */
display: inline-block; /* гибрид — и ширина, и можно стоять рядом */Цвета в CSS — быстрая шпаргалка
color: red; /* название цвета */
color: #ff0000; /* hex */
color: #f00; /* короткий hex */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.3); /* с прозрачностью */
color: hsl(0, 100%, 50%); /* hue-saturation-lightness */Единицы измерения в CSS — самые важные на старте
| Единица | Что это | Когда использовать | Пример |
|---|---|---|---|
| px | пиксели (фиксированный размер) | границы, тени, очень точные размеры | border: 2px solid red; |
| rem | относительно размера шрифта <html> | основной размер текста, отступы, ширина | font-size: 1.125rem; |
| em | относительно размера шрифта родителя | внутренние отступы внутри компонента | padding: 1.5em; |
| % | процент от родителя | ширина блоков, иногда высота | width: 80%; |
| vw / vh | % от ширины/высоты окна браузера | большие заголовки, фоновые секции | font-size: 8vw; |
Самый практичный выбор в 2026 году для новичка:
html {
font-size: 16px; /* базовый размер (можно не писать — он и так по умолчанию) */
}
body {
font-size: 1rem; /* = 16px */
}
h1 { font-size: 2.5rem; } /* = 40px */
h2 { font-size: 1.875rem; } /* = 30px */
p { font-size: 1rem; }
section {
padding: 2rem; /* всегда будет пропорционально шрифту */
margin-bottom: 2rem;
}Краткое правило для запоминания на первые месяцы:
- Всё, что касается текста и отступов → используй rem
- Тонкие рамки, тени, мелкие детали → можно px
- Ширина карточек/контейнеров → чаще % или max-width в rem/px
Остальные единицы (em, vw, vh, vmin, clamp()) пока просто знай, что они существуют — познакомимся с ними позже.
Давайте уже сделаем нормальную страничку
Создайте два файла рядом:
my-first-site/
├── index.html
└── style.cssindex.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Мой первый красивый сайт</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Привет, это мой сайт!</h1>
<p class="slogan">Учусь веб-разработке с нуля в 2026 году</p>
</header>
<main>
<section class="about">
<h2>Обо мне</h2>
<p>Пока что я умею только HTML и немного CSS.
Но каждый день учусь новому!/p>
</section>
<section class="goals">
<h2>Что хочу научиться в ближайшие месяцы</h2>
<ul>
<li>Flexbox и Grid на уровне бога</li>
<li>Адаптивная вёрстка под телефоны</li>
<li>Анимации при наведении</li>
<li>Работа с формами</li>
<li>Подключать JavaScript</li>
</ul>
</section>
</main>
<footer>
<p>© 2026 — Все права принадлежат будущему крутому разработчику</p>
</footer>
</body>
</html>style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, sans-serif;
background-color: #f5f5f7;
color: #1d1d1f;
line-height: 1.6;
}
/* Шапка */
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 4rem 1rem;
}
h1 {
font-size: 3.2rem;
margin-bottom: 0.5rem;
}
.slogan {
font-size: 1.3rem;
opacity: 0.9;
}
/* Основной контент */
main {
max-width: 800px;
margin: 3rem auto;
padding: 0 1.5rem;
}
section {
background: white;
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
h2 {
color: #4f46e5;
margin-bottom: 1rem;
}
ul {
list-style: none;
padding-left: 0;
}
li {
padding: 0.6rem 0;
position: relative;
padding-left: 1.8rem;
}
/* Подвал */
footer {
text-align: center;
padding: 2rem;
color: #6b7280;
font-size: 0.95rem;
border-top: 1px solid #e5e7eb;
}Когда вы обращаетесь к тегу, стили применяются ко всем элементам тега на странице. Если к классу — то ко всем элементам класса на странице. Если к id — к элементу с этим id.
Обратите внимание! Если вы редактируете стили элемента, а они не меняются — скорее всего, две причины: 1 — этот элемент не поддерживает применяемое свойство; 2 — стили переопределяются ниже по файлу.
Сохраните оба файла, откройте index.html в браузере — и вуаля! У вас уже есть довольно симпатичная, современная и читаемая страничка, на которой очень удобно будет дальше тренировать:
- flex и grid
- адаптивность (media queries)
- hover-эффекты
- формы
- анимации
- работу с картинками
Следующие несколько уроков будем именно на этой странице всё усложнять и улучшать. Так что не удаляйте её — она теперь ваш тренажёр на ближайшие 2–3 месяца
Удачи и до встречи в следующем уроке!
Добавить комментарий