HTML Стили

В HTML атрибут style предназначен для применения стилей к элементам, включая изменение цвета, шрифта, размера и других визуальных характеристик.

Пример:

Я красный

Я синий

Я большой


Атрибут style в HTML

Для задания стилей HTML-элемента применяется атрибут style.

Синтаксис атрибута style выглядит следующим образом:

<имятега style="свойство:значение;">

Здесь свойство представляет собой свойство CSS, а значение – его конкретное зачение CSS.

Более подробную информацию о CSS вы найдете позднее в этом руководстве.


Цвет фона

Свойство CSS background-color задает цвет фона для выбранного HTML-элемента.

Пример:
Установим цвет фон страницы в powderblue:

<body style="background-color:powderblue;">

<h1>Это заголовок</h1>
<p>Это абзац.</p>

</body>

Пример:
Применим разные цвета фона к различным элементам:

<body>

<h1 style="background-color:powderblue;">Это заголовок</h1>
<p style="background-color:tomato;">Это абзац.</p>

</body>

Цвет текста

Свойство CSS color определяет цвет текста для HTML-элемента.

Пример:

<h1 style="color:blue;">Это заголовок</h1>
<p style="color:red;">Это абзац.</p>

Шрифты

Свойство CSS font-family указывает шрифт, который будет использоваться для отображения HTML-элемента.

Пример:

<h1 style="font-family:verdana;">Это заголовок</h1>
<p style="font-family:courier;">Это абзац.</p>

Размер текста

Свойство CSS font-size задает размер текста для HTML-элемента.

Пример:

<h1 style="font-size:300%;">Это заголовок</h1>
<p style="font-size:160%;">Это абзац.</p>

Выравнивание текста

Свойство CSS text-align определяет горизонтальное выравнивание текста внутри HTML-элемента.

Пример:

<h1 style="text-align:center;">Заголовок по центру</h1>
<p style="text-align:center;">Абзац по центру.</p>

Основные моменты главы

  • Применяйте атрибут style для стилизации HTML-элементов.
  • Используйте background-color для задания цвета фона.
  • Используйте color для определения цвета текста.
  • Используйте font-family для выбора шрифта.
  • Используйте font-size для установки размера текста.
  • Используйте text-align для выравнивания текста.
To top