Загрузка...

HTML CSS

Вы уже практиковали небольшие изменения вида с атрибутом style и значениями цвета. Реальные сайты редко держат все правила дизайна на каждом теге. CSS (Cascading Style Sheets) — язык, который описывает внешний вид и ощущение. Эта сессия сосредоточена на том, как HTML загружает CSS тремя распространёнными способами — ещё не на построении полной дизайн-системы. Когда вы знаете, куда класть правила и как браузер их находит, гораздо проще переходить к типографике, отступам и вёрстке, не смешивая структуру страницы с оформлением. Думайте об этой уроке как о «розетке» для CSS: энергия (правила) доходит только если соединение верное.

Что здесь делает CSS?

HTML структурирует содержимое. CSS описывает оформление: цвета, отступы, шрифты и идеи макета, которые вы углубите позже. HTML-страница может нести несколько CSS-объявлений на одном элементе, хранить небольшую таблицу стилей внутри документа или указывать на отдельный файл .css. Правильный выбор места держит демо быстрыми, а реальные проекты — удобными в сопровождении. Без осознанного выбора вы либо копируете один и тот же style="..." десятки раз, либо обнаруживаете, что страница «потеряла» вид из‑за неверного пути к файлу. Освоить загрузку сейчас — значит сэкономить часы путаницы, когда правил станет больше.

Прямой ответ

Используйте inline CSS с style="..." на одном элементе для быстрых тестов. Используйте внутренний блок <style>...</style>, обычно в <head>, для практики на одной странице. Используйте внешний файл .css, подключённый через <link rel="stylesheet" href="styles.css">, когда многие страницы должны делить один вид. Предпочитайте внешний CSS, как только важны повторное использование и чистый HTML. На уроках inline и внутренний CSS отлично подходят для демо; на сайте из многих страниц повторять одни и те же правила в каждом файле делает сопровождение медленным и непоследовательным. Цель этой сессии — уверенно подключать все три варианта, а не запоминать каталог свойств CSS.

Три способа кратко

📊 Три способа добавить CSS

Метод Где Лучше всего для
Inline атрибут style на теге Крошечные разовые тесты
Внутренний элемент style в head Демо на одной странице
Внешний файл .css + link Общий стиль сайта

Inline CSS (напоминание)

Inline CSS живёт на одном элементе. Он идеален для эксперимента на тридцать секунд и слаб для целого сайта, потому что каждый повторяющийся вид нужно копировать снова. Вы уже видели эту идею в сессиях о стилях и цветах: удобно увидеть эффект сразу, но трудно обновлять, когда тот же оттенок или размер появляется в десяти местах. Используйте inline как лабораторию, а не как архитектуру. Когда правило стабилизируется, перенесите его во внутренний блок или во внешний файл и оставьте HTML описывать содержимое, а не дизайн.

Напоминание об inline CSS

html
HTML Code 
<p style="color: teal;">Inline CSS на одном элементе</p>

Когда inline всё ещё помогает

  • Быстро проверить один цвет или размер
  • Объяснить идею property:value из прошлых сессий
  • Временные переопределения во время учёбы — затем перенесите правило в таблицу стилей
    Не стройте весь многостраничный бренд только на inline-атрибутах. Этот путь сложно обновлять: каждое изменение бренда требует искать разбросанные атрибуты. В команде inline также скрывает «настоящий» вид сайта, потому что то, что в .css, и то, что в HTML, могут расходиться без явного предупреждения.

Внутренний CSS в head

Внутренняя таблица стилей — это элемент <style>, который хранит правила CSS для текущего HTML-файла. Начинающие обычно помещают его в <head>, чтобы стиль объявлялся до содержимого body. Так браузер раньше находит правила, а документ остаётся читаемым: структура в body, оформление объявлено в head. Внутренний CSS удобен, когда вы тренируете несколько правил на одной странице, ещё не управляя отдельными файлами — но он всё ещё «заперт» в этом одном HTML.

Внутренний CSS в head

html
HTML Code 
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
p { color: navy; }
</style>
</head>
<body>
<p>This paragraph uses the style block.</p>
</body>
</html>

Читаем внутренний пример

  • Элемент style содержит CSS, а не HTML-теги структуры страницы
  • p { color: navy; } значит «все элементы p получают тёмно-синий текст» в этом документе
  • Одно правило может стилизовать много абзацев без повторения style="..." на каждом теге
  • Внутренний CSS всё ещё заперт в этом одном HTML-файле — другие страницы его не видят, пока вы не скопируете блок
    Заметьте также разницу между атрибутом style (inline на теге) и элементом <style> (блок правил). Имена похожи; роль разная. Смешивать их без намерения — значит делать код запутанным для начинающих.

Внешний CSS с link

Внешний CSS хранит правила в файле вроде styles.css. HTML подключается к этому файлу через элемент link. Это обычный шаблон для общего стиля сайта. Один файл может обслуживать главную, контакты и блог — измените цвет заголовка один раз, и все связанные страницы последуют. Чтобы это работало, rel и href должны быть верными; HTML сам не «угадает», где лежит таблица стилей.

Ссылка на внешнюю таблицу стилей

html
HTML Code 
<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>

Что должно быть верно, чтобы внешний CSS работал

  • У link нужен rel="stylesheet", чтобы браузер понял отношение
  • href должен указывать на реальный CSS-файл с верным путём (см. сессию о путях к файлам)
  • Внутри styles.css вы пишете правила вроде p { color: navy; } и h1 { color: darkgreen; }
  • Если путь неверный, HTML всё равно открывается — но выглядит без стилей
    Положите CSS-файл рядом с HTML для первой практики, затем пробуйте подпапку только когда пути уже уверенные. Типичная ошибка — создать styles.css в нужной папке, а в href написать чуть другое имя: регистр, пропущенный дефис или неверная папка. Кажется, что «CSS сломан», но проблема в подключении, а не в синтаксисе правила.

Выбор метода

Спросите, как далеко должны «путешествовать» стили:

  • Один быстрый эксперимент на одном элементе → inline
  • Одна учебная страница, несколько правил → внутренний <style> в head
  • Много страниц, один общий вид → внешний .css + link
    Когда позже вы перейдёте к полному курсу CSS, внешние таблицы стилей станут по умолчанию для реальных проектов. Эта HTML-сессия гарантирует, что вы умеете подключать их правильно. Не нужно «выбрать метод навсегда»: можно начать с внутреннего CSS в демо и перенести те же правила во внешний файл, когда страница станет сайтом. Грамматика правил (p { color: navy; }) остаётся; меняется только место хранения и способ загрузки HTML.

Практика в редакторе

  1. Создайте page.html с заголовком и двумя абзацами.
  2. Создайте styles.css с одним правилом для цвета h1 и другим для стиля p.
  3. В head HTML добавьте <link rel="stylesheet" href="styles.css">.
  4. Откройте страницу. Если стилей нет, проверьте путь и rel.
  5. Временно переименуйте или переместите styles.css, обновите страницу, увидьте сбой, затем исправьте href.
  6. По желанию: перенесите одно правило во внутренний блок <style> и сравните.
    Намеренно ломать ссылку учит ошибкам пути быстрее, чем только читать о них. Также убедитесь, что обновляете тот же page.html, который открыли в браузере — править один файл и обновлять другой — классическая ошибка, из‑за которой страница выглядит «без стилей», даже если CSS на диске верный.

Ошибки, из‑за которых страницы остаются без стилей

  • Забыть rel="stylesheet" у link
  • Положить styles.css в другую папку, но связать так, будто он рядом с HTML
  • Заполнить каждый тег inline style вместо одной общей таблицы стилей
  • Свалить огромный блок <style> в конец body по привычке, когда для начинающих яснее head
  • Править CSS-файл, но обновлять другой HTML, не тот, к которому вы сделали link
    У каждой из этих ошибок один визуальный симптом: страница открывается, текст есть, ожидаемого вида нет. Прежде чем переписывать правила, проверьте подключение — часто правило верное, а загрузка сломалась.

Итог

  • CSS оформляет HTML; HTML может загружать CSS inline, внутренне или внешне
  • Inline style годится для крошечных тестов, не для целых сайтов
  • Внутренний <style> в head подходит для практики в одном файле
  • Внешний .css плюс link rel="stylesheet" — обычный общий подход
  • Верные пути к файлам важны так же, как сами правила CSS
  • Предпочитайте метод, который соответствует широте повторного использования стилей

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Html Урок