Атрибут HTML Style
Атрибут style добавляет стили элементу, такие как цвет, шрифт и размер. Вы задаёте его в открывающем теге элемента, указывая CSS-свойство и CSS-значение (см. синтаксис ниже). О CSS вы узнаете больше позже в этом руководстве.
Пример
Абзацы, оформленные цветом и размером с помощью атрибута style.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intro Styles</title>
</head>
<body>
<p style="color:red;">Я Красный</p>
<p style="color:blue;">Я Синий</p>
<p style="font-size:50px;">Я Большой</p>
</body>
</html>
Синтаксис style
Форма атрибута style.
<tagname style="property:value;">
Цвет фона
CSS-свойство background-color задаёт цвет фона элемента. Установите его на <body>, чтобы окрасить всю страницу, или на отдельный элемент, чтобы окрасить только его.
Вся страница
Установка фона страницы в powderblue.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bg Page</title>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это абзац.</p>
</body>
</html>
Отдельные элементы
Разные цвета фона у заголовка и абзаца.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bg Elements</title>
</head>
<body>
<h1 style="background-color:powderblue;">Это заголовок</h1>
<p style="background-color:tomato;">Это абзац.</p>
</body>
</html>
Цвет текста
CSS-свойство color задаёт цвет текста элемента.
Пример
Синий заголовок и красный абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Color</title>
</head>
<body>
<h1 style="color:blue;">Это заголовок</h1>
<p style="color:red;">Это абзац.</p>
</body>
</html>
Шрифты
CSS-свойство font-family задаёт шрифт, используемый для элемента.
Пример
Заголовок шрифтом verdana и абзац шрифтом courier.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fonts</title>
</head>
<body>
<h1 style="font-family:verdana;">Это заголовок</h1>
<p style="font-family:courier;">Это абзац.</p>
</body>
</html>
Размер текста
CSS-свойство font-size задаёт размер текста элемента.
Пример
Крупный заголовок и слегка увеличенный абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Size</title>
</head>
<body>
<h1 style="font-size:300%;">Это заголовок</h1>
<p style="font-size:160%;">Это абзац.</p>
</body>
</html>
Выравнивание текста
CSS-свойство text-align задаёт горизонтальное выравнивание текста элемента.
Пример
Заголовок и абзац по центру.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Align</title>
</head>
<body>
<h1 style="text-align:center;">Заголовок по центру</h1>
<p style="text-align:center;">Абзац по центру.</p>
</body>
</html>
Итоги главы
Подведём итог: используйте атрибут style, чтобы оформить элементы, background-color для цвета фона, color для цвета текста, font-family для шрифтов, font-size для размера текста и text-align для выравнивания текста.