Написать HTML — это структура. CSS — это то, что делает страницу красивой. Но прежде чем CSS заработает, браузер должен о нём узнать. Есть три способа подключить стили.
Способ 1: инлайновые стили (атрибут style)
Стили пишутся прямо в теге через атрибут style.
<h1 style="color: #2563eb; font-size: 2rem;">Мой DevBlog</h1>
<p style="color: #6b7280; margin-top: 8px;">Заметки Python-разработчика</p>
Плюсы: мгновенно работает, не нужны доп. файлы.
Минусы: дублирование на каждом теге, нельзя переиспользовать, сложно поддерживать. При 50 статьях в блоге — кошмар.
Когда использовать: почти никогда. Только для быстрого теста или динамических стилей из JavaScript.
Способ 2: тег <style> внутри HTML
Стили пишутся внутри тега <style> в секции <head>.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>DevBlog</title>
<style>
body {
font-family: sans-serif;
max-width: 800px;
margin: 0 auto;
}
h1 {
color: #2563eb;
}
p {
color: #6b7280;
}
</style>
</head>
<body>
<h1>Мой DevBlog</h1>
<p>Заметки Python-разработчика</p>
</body>
</html>
Плюсы: стили собраны в одном месте, нет дублирования.
Минусы: стили привязаны к одному HTML-файлу. Если страниц несколько — нужно копировать <style> в каждую.
Когда использовать: одностраничные демо, письма (HTML email).
Способ 3: внешний файл (тег <link>) — рекомендуемый
Стили выносятся в отдельный .css файл и подключаются через <link>.
Структура проекта:
devblog/
├── index.html
├── article.html
└── static/
└── style.css
static/style.css:
body {
font-family: sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 0 16px;
}
h1 {
color: #2563eb;
}
p {
color: #374151;
line-height: 1.6;
}
index.html и article.html — подключают один и тот же файл:
<head>
<meta charset="UTF-8">
<title>DevBlog — Главная</title>
<link rel="stylesheet" href="static/style.css">
</head>
Плюсы:
- Один файл стилей для всех страниц
- Браузер кэширует CSS — страницы загружаются быстрее
- Разделение HTML (структура) и CSS (внешний вид)
Минусы: нет. Это правильный подход.
Куда ставить <link>
Всегда в <head>, до закрывающего </head>. Если поставить в <body> — браузер сначала отрисует страницу без стилей, а потом резко применит CSS (мигание).
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevBlog</title>
<!-- CSS подключается здесь -->
<link rel="stylesheet" href="static/style.css">
</head>
<body>
<!-- контент здесь -->
</body>
</html>
Несколько CSS-файлов
Можно подключать несколько файлов — браузер применит их по порядку:
<link rel="stylesheet" href="static/reset.css">
<link rel="stylesheet" href="static/style.css">
<link rel="stylesheet" href="static/article.css">
Для DevBlog на старте достаточно одного style.css.
Итог
| Способ | Где пишется | Для чего |
|---|---|---|
style="" |
Прямо в теге | Быстрый тест |
<style> |
В <head> |
Одна страница |
<link> |
В <head> |
Любой реальный проект |
В DevBlog мы будем использовать внешний файл static/style.css, подключённый через <link>.
💬 Комментарии (0)
Комментариев пока нет
Станьте первым, кто поделится мнением об этой статье!