D-Lab — визуальное оформление HTML

Лекция · экран 1 из 3

Атрибут style изменяет внешний вид элемента

Тег определяет, что это за элемент. Атрибут style сообщает браузеру, как этот элемент должен выглядеть.

<p style="color: purple; text-align: center">Привет!</p>

<p
имя тега

style="…"
атрибут оформления

color: purple;
свойство и значение

>Привет!</p>
содержимое и конец

Форма HTML-атрибута

style="color: purple"

style записывается внутри открывающего тега. Всё оформление помещается внутрь кавычек.

Форма правила оформления

свойство: значение;

Двоеточие отделяет свойство от значения. Точка с запятой отделяет одно правило от следующего.

Важно различать уровни. style — HTML-атрибут, а color, background-color и text-align — свойства оформления внутри него.

Лекция · экран 2 из 3

Свойства, результат которых сразу виден

color: purple

Цвет текста. Можно использовать английское название цвета или код, например #123d32.

background-color: gold

Цвет фона элемента. У body это фон всей страницы.

text-align: center

Выравнивание текста. Другие значения: left и right.

font-size: 32px

Размер текста. Число задаёт размер, px обозначает пиксели.

font-family: Arial

Шрифт. Браузер использует указанный шрифт, если он есть на компьютере.

border: 2px solid purple

Рамка. Здесь указаны толщина, вид линии и её цвет.

border-radius: 12px

Скругление углов. Чем больше число, тем заметнее округление.

padding: 16px

Внутренний отступ. Создаёт свободное место между содержимым и рамкой.

Один элемент — несколько видимых изменений

Этот блок оформлен одним атрибутом style.

<p style="color: #54256a; background-color: #fff3cf;
          text-align: center; font-size: 20px;
          border: 2px solid #ffb000;
          border-radius: 12px; padding: 14px">
  Этот блок оформлен одним атрибутом style.
</p>

Лекция · экран 3 из 3

Один style работает по-разному на разных элементах

Элемент	Пример атрибута style	Что изменится
`<body>`	`style="background-color: #edf2ee; color: #14201c; text-align: center"`	Фон всей страницы, основной цвет текста и общее выравнивание.
`<h1>`	`style="color: purple; font-size: 36px"`	Цвет и размер главного заголовка.
`<p>`	`style="background-color: white; padding: 16px; border-radius: 12px"`	Абзац превращается в светлую карточку.
`<p>`	`style="text-align: left; border: 2px solid orange"`	Текст выравнивается влево, вокруг появляется рамка.
`<button>`	`style="background-color: #123d32; color: white; padding: 10px 18px"`	Меняются фон, текст и размер кнопки.
`<button>`	`style="border: none; border-radius: 10px"`	Убирается стандартная рамка и скругляются углы.

Другие полезные HTML-атрибуты:
lang="ru" задаёт язык, charset="UTF-8" — кодировку, id — уникальное имя, class — имя группы, title — подсказку.

Не используем устаревшие записи вроде align="center" и bgcolor="yellow". Современная форма: style="text-align: center; background-color: yellow".

Тренажёр · уровень 1 из 3

Соедините правило оформления и результат

Выберите свойство слева, затем видимое изменение справа. Все эти свойства записываются внутри style="…".

Создайте восемь пар.

Тренажёр · уровень 2 из 3

Добавьте элементам готовое оформление

Перетащите карточку в пропуск или выберите карточку, а затем пропуск. Щелчок по заполненному пропуску возвращает карточку.

<html >
<meta >
<body >
<h1 >Оформление</h1>
<p >Карточка</p>
<p >Абзац с рамкой</p>
<button  >Старт</button>
<p >Наведите на этот текст</p>
</body>
</html>

Заполните девять пропусков.

Тренажёр · уровень 3 из 3

Допишите свойства оформления самостоятельно

Все поля находятся внутри атрибута style. Введите названия свойств; дефисы и регистр должны быть правильными.

<body style=": #edf2ee; : center">
<h1 style=": purple; : 36px">Привет</h1>
<p style=": Arial; : 2px solid orange">Текст</p>
<button style=": 10px; : 10px">Старт</button>

Заполните восемь полей.

Самостоятельная работа · 10–15 минут

Превратите свою страницу в яркую карточку

Чтобы сохранить исходную работу, откройте свой index.html и сразу сохраните копию под именем attributes.html.

1Сохраните отдельную копию

В Notepad++ выберите «Файл → Сохранить как» и задайте имя attributes.html. Убедитесь, что файл находится в той же папке проекта.

Копия создана

2Проверьте язык и кодировку

<html lang="ru">
<meta charset="UTF-8">

Первый атрибут задаёт язык, второй — кодировку.

lang и charset записаны

3Оформите всю страницу

Добавьте атрибут в открывающий тег body:

<body style="font-family: Arial;
             color: #14201c;
             text-align: center;
             background-color: #edf2ee;
             padding: 30px">

Изменились фон, шрифт и выравнивание

4Сделайте заголовок заметнее

<h1 style="color: #54256a; font-size: 36px">
  Оформление работает!
</h1>

Замените цвет или размер и сразу сравните результат.

Заголовок оформлен

5Превратите первый абзац в карточку

<p style="background-color: white;
          padding: 16px;
          border: 2px solid #ffb000;
          border-radius: 12px">
  Это мой первый оформленный блок.
</p>

Светлая карточка появилась

6Оформите второй абзац иначе

<p style="color: #123d32;
          text-align: left;
          background-color: #fff6dc;
          padding: 14px;
          border-left: 5px solid #ffb000">
  Одинаковые теги могут выглядеть по-разному.
</p>

Второй абзац отличается от первого

7Оформите кнопку без JavaScript

<button type="button" title="Яркая кнопка"
        style="background-color: #123d32;
               color: white;
               padding: 10px 18px;
               border: none;
               border-radius: 10px;
               font-size: 16px">
  Готово!
</button>

Кнопка пока не выполняет команду, но уже получила собственное оформление.

Кнопка оформлена

8Создайте свой вариант

Измените не меньше трёх значений: цвет фона страницы, цвет заголовка, выравнивание, толщину рамки, скругление или внутренний отступ. После каждого изменения нажимайте Ctrl+S и F5.

Создан собственный вариант оформления

Выполнено шагов: 0 из 8.

Итог · 2 минуты

Теперь страница выглядит по-вашему

Тег определяет элемент, а style — его внешний вид. Внутри style="…" записываются пары свойство: значение;.

Проверьте себя: объясните соседу, чем color отличается от background-color, а padding — от border.

0/3

уровня тренажёра

0/8

шагов практики

8

свойств оформления

Основной набор

color, background-color, text-align, font-size, font-family, border, border-radius, padding.