Стили HTML

Вы уже умеете строить структуру страницы и указывать на другие файлы с помощью путей. Следующий вопрос новичков — как изменить внешний вид содержимого: цвет текста, фон и размер. В ранней практике HTML это можно сделать атрибутом style. Это небольшая дверь в идеи CSS — полезная для демо и быстрых проверок в браузере, — тогда как полноценный дизайн сайта позже перейдёт в настоящий CSS на вашем пути обучения. Пока цель не «украсить весь портал», а уверенно читать и писать короткие пары property:value.

Что такое атрибут style?

Атрибут style позволяет прикрепить CSS‑объявления прямо к открывающему тегу одного HTML‑элемента. Браузер читает эти объявления и отрисовывает элемент соответственно. Вы не изобретаете второй язык с нуля: вы пишете короткие CSS‑правила в месте, которое HTML уже предоставляет. Поэтому встроенный стиль — хороший учебный инструмент: вы видите причину и следствие на одном теге. Профессиональные проекты редко держат весь дизайн внутри атрибутов — и это нормально; сначала освоите синтаксис, потом вынесете внешний вид в общее место.

Прямой ответ

Добавляйте внешний вид через style="property: value;" на элементе. Стартовые свойства включают color (цвет текста), background-color (область за содержимым) и font-size (размер текста). Весь список помещайте в кавычки — иначе парсер атрибутов HTML ломается. Несколько объявлений разделяйте точками с запятой. Для реальных многостраничных сайтов лучше файл CSS или блок <style>, чтобы не повторять один и тот же вид на каждом теге. В этом уроке сосредоточьтесь на чтении и написании ясных встроенных объявлений: сначала точность синтаксиса, потом масштабирование.

Свойство и значение, по одному

Каждое объявление состоит из свойства (что изменить) и значения (как должно выглядеть). Между ними стоит двоеточие. Новичкам стоит хорошо выучить несколько свойств, прежде чем запоминать огромный список.

Как читать пример

• color: blue меняет только цвет текста этого абзаца
• background-color: lightyellow окрашивает фон за текстом
• font-size: 24px задаёт размер; px — распространённая единица для новичков
• У каждого абзаца свой style="...", поэтому три эффекта остаются отдельными и хорошо видны
• Именованные цвета вроде blue удобны для практики; позже вы также увидите hex‑значения, например #336699
  Если в браузере ничего не изменилось, проверьте, что файл сохранён, страница обновлена, а кавычки охватывают всё значение style. Часто «ничего не видно» оказывается пропущенным сохранением или кривыми кавычками из текстового процессора.

Несколько объявлений в одном атрибуте

Можно объединять объявления внутри одного атрибута style. Держите список коротким, чтобы HTML оставался читаемым и чтобы вы сами через неделю понимали, что написали. Завершайте каждое объявление точкой с запятой — финальная тоже допустима и часто яснее при последующем редактировании. Порядок объявлений в одном атрибуте обычно читается слева направо; для демо важнее ясность, чем «идеальный» порядок свойств.

Почему важен этот шаблон

• Один элемент может нести цвет, фон и размер вместе
• Точки с запятой разделяют объявления, чтобы браузер разобрал каждую пару
• #f0f0f0 — hex‑цвет; для новичков он необязателен, но в реальном CSS обычен
• Видимое предложение внутри абзаца — обычный HTML‑текст; только атрибут style меняет внешний вид
  Не запихивайте десять дизайнерских решений в один атрибут в первый день. Сначала выучите синтаксис на двух‑трёх ясных свойствах.

Style на разных элементах

Атрибут style не ограничен тегом p. Заголовки, span и многие другие элементы используют его так же. Это помогает увидеть, что стиль следует за элементом, к которому вы его прикрепили, — а не является волшебным глобальным переключателем. Сравнивая заголовок и абзацы рядом, вы быстрее понимаете локальность: каждый тег несёт свой собственный набор объявлений.

На что обратить внимание

• Цвет h1 автоматически не переоформляет абзацы
• Второй абзац сочетает фон и размер шрифта
• Встроенный стиль локален: он влияет на этот элемент (и по обычным правилам CSS может затрагивать потомков — но пока оставляйте демо простыми)

Сейчас встроенный style, позже CSS

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

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

1. Создайте страницу с одним h1 и тремя короткими абзацами.
2. Дайте первому абзацу текстовый color.
3. Дайте второму background-color.
4. Дайте третьему комбинацию color и font-size.
5. По желанию раскрасьте h1 своим style.
6. Сохраните и обновите. Убедитесь, что каждый блок выглядит иначе — цвет, фон и размер должны читаться с первого взгляда.
7. Намеренно сломайте один пример (уберите кавычку или px), обновите, увидьте сбой, затем исправьте.
   Работа со сломанным style учит кавычкам и единицам быстрее, чем одно только копирование идеальных образцов. Зафиксируйте, что именно «сломалось» в браузере: часто это пустые кавычки, пропавший px или перепутанные color и background-color.

Ошибки, которые прячут ваши стили

• Забыть кавычки вокруг значения: style=color:red недопустимо при обычной записи HTML‑атрибутов
• Путать color (текст) с background-color (за текстом) и думать, что «цвет ничего не сделал»
• Пропускать единицы там, где размер их требует (font-size: 24 вместо 24px во многих случаях для новичков)
• Использовать текстовый процессор, который заменяет прямые кавычки на «умные» внутри атрибутов
• Запихивать дизайн всей страницы во встроенные стили вместо изучения общего CSS дальше
• Изменить файл, но забыть сохранить перед обновлением — браузер всё ещё показывает старую версию
• Копировать пример с лишним пробелом или опечаткой в имени свойства — браузер просто игнорирует неизвестное объявление

Итог

• Атрибут style добавляет CSS‑объявления к одному HTML‑элементу
• Пишите property: value; и держите весь список в кавычках
• Стартовые свойства: color, background-color, font-size
• Объединяйте несколько объявлений точками с запятой; держите демо короткими и читаемыми
• Встроенный стиль отличен для обучения и крошечных экспериментов, но не для поддержки дизайна всего сайта
• Общий CSS идёт следующим шагом на пути обучения, когда нужен один центр управления внешним видом
• Всегда проверяйте сохранением + обновлением и смотрите кавычки и единицы, когда стили «таинственно» не работают
• Сначала ясный синтаксис на одном элементе — потом повторяемый дизайн через CSS