Есть три способа «подружить» CSS с HTML. Разберём каждый на коротком примере и сразу скажем, где он уместен.
1. Inline‑стили: прямо в теге
Пишешь стили прямо в HTML‑элементе через атрибут style.
<h1 style="color: #2b5e8b; font-family: Arial, sans-serif;">Заголовок</h1> <p style="line-height: 1.6; color: #333;">Текст.</p> <button style="background-color: #4facf9; color: white; border: none; padding: 10px 20px; border-radius: 6px;">Кнопка</button>
Как это работает: браузер берёт эти стили и применяет только к этому элементу. Приоритет у них высокий: они легко перебивают обычные CSS‑правила.
Когда брать:
- быстро проверить вариант («а если сделать красным?»);
- точечно поправить один элемент, когда нет доступа к CSS‑файлам;
- вёрстка писем — там почти всегда используют inline‑стили.
Чего избегать: не строй на этом всю стилизацию. Если стилей много, HTML превращается в кашу, а править потом тяжело.
2. Блок <style>: внутри HTML
CSS пишешь внутри тега <style> в <head>.
<!DOCTYPE html> <html> <head> <title>Пример со style</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>
Как это работает: стили действуют на всю страницу, можно использовать псевдоклассы (:hover, :focus) и медиа‑запросы.
Когда брать:
- прототип или демо, чтобы всё было в одном файле;
- сниппет для показа кому‑то «как примерно будет»;
- страница, которая точно останется единственной и меняться не будет.
Чего избегать: если страниц много, дублировать такой блок на каждой — это лишняя работа и риск рассинхронизировать стили.
3. Внешний CSS‑файл: отдельный файл и <link>
Весь CSS выносишь в отдельный файл, например style.css, и подключаешь его через <link>.
style.css:
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; }
HTML:
<!DOCTYPE html> <html> <head> <title>Страница с внешним CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Заголовок</h1> <p>Текст.</p> <button>Кнопка</button> </body> </html>
Как это работает: браузер скачивает style.css и применяет его ко всем страницам, где подключён этот файл. Файл кэшируется: при переходе по страницам он не загружается заново.
Когда брать: почти всегда. Это стандартный способ для реальных сайтов.
Чего учитывать: путь в href должен быть правильным относительно расположения HTML‑файла. Если файл лежит в папке css, будет href="css/style.css".
Какой способ выбрать: короткая шпаргалка
- Нужен быстрый тест или точечная правка → inline‑стили (
style="..."). - Нужна одна страница/прототип, всё в одном файле → блок
<style>. - Это нормальный сайт, страниц больше одной → внешний CSS‑файл +
<link>.
Загрузка...