Коротко: CSS соединяют с HTML тремя способами — отдельным файлом, блоком стилей на странице и прямо в теге. Для настоящих проектов используют внешний файл; остальные — для быстрых правок.
Три способа подключения
<link rel="stylesheet" href="css/style.css">Ставят в <head>. Плюсы: кэшируется, переиспользуется на всех страницах, чистый HTML.
<style>
body { margin: 0; }
</style>Стили прямо в HTML. Удобно для быстрых правок и «критического» CSS.
<p style="color: red;">Текст</p>Инлайн-стили бьют каскад и плохо поддерживаются. Используйте в крайнем случае.
Сравнение
| Способ | Кэш | Переиспользование | Приоритет |
|---|---|---|---|
| Внешний файл | да | да | обычный |
| Блок style | нет | на странице | по порядку |
| Инлайн | — | нет | высокий |
Практика: три задачи
1. Подключить внешний файл
- Создайте файл, например
css/style.css. - В
<head>добавьте<link rel="stylesheet" href="css/style.css">. - Проверьте путь: DevTools → Network, у файла код должен быть 200, не 404.
- Напишите правило и обновите страницу.
2. Быстрая правка на странице
<style>
.promo { background: #f3f3f3; }
</style>3. Порядок и приоритет
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css"> <!-- ниже = сильнее -->Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Стили вообще не применились | неверный путь к файлу | проверить href, код 200 |
| Правило «перекрыто» | ниже подключён другой файл | поправить порядок/специфичность |
| Не видно изменений | кэш браузера | жёсткое обновление (Ctrl+F5) |
| Инлайн не убрать | инлайн бьёт классы | перенести стили в файл |
Проверьте себя
Вопросы и ответы
Это указание браузеру, что подключается таблица стилей. Без него файл не будет применён как CSS.
Да. Но для скорости лучше объединять их в один (на этапе сборки).
Инлайн-стиль специфичнее класса (кроме !important), поэтому его «перебить» сложнее.
Чтобы убрать различия браузеров по умолчанию и начать «с чистого листа». Его подключают первым.
Итоги
- Основной способ —
<link>на внешний файл. <style>— для правок на странице.- Инлайн — редко.
- Порядок и путь подключения — первые, что проверять.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.