Рассмотрим три способа задания стилей в HTML-документе. Для демонстрации потребуется HTML-документ (можно использовать свой или скопировать представленный ниже).
Способ 1: Стиль в атрибуте style
Простейший, но наименее предпочтительный способ — указание стилей непосредственно в атрибуте style HTML-элемента. Например, для заголовка первого уровня (H1):
<h1 style="color: red;">Мой заголовок</h1>Здесь style="color: red;" задаёт стиль. color: red; устанавливает цвет текста красным. Сохраните изменения и откройте файл в браузере. Заголовок отобразится красным.
Способ 2: Встроенные таблицы стилей
Встроенные таблицы стилей размещаются в секции <head> HTML-документа внутри тега <style> с атрибутом type="text/css":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Мой сайт</title>
<style type="text/css">
body {
background-color: #f0f0f0; /* Светло-серый фон */
}
h1 {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<h1>Мой заголовок</h1>
</body>
</html>Здесь задан стиль для элемента <body> (фон) и <h1> (цвет текста). Фигурные скобки {} используются для объявления стилей, точки с запятой ; — для разделения свойств. Цвета задаются именами (например, red) или шестнадцатеричными кодами (например, #f0f0f0). Шестнадцатеричные коды позволяют задать более широкий спектр цветов. Рекомендуется всегда ставить точку с запятой после каждого свойства стиля.
Способ 3: Внешний CSS-файл
Наиболее эффективный способ — использование внешнего CSS-файла. Создайте файл (например, style.css) с расширением .css:
body {
background-color: #f0f0f0;
}
h1 {
color: red;
}
h3 {
color: blue;
}Подключите его к HTML-документу с помощью тега <link> в секции <head>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Мой сайт</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Мой заголовок</h1>
<h3>Мой подзаголовок</h3>
</body>
</html>href="style.css" указывает путь к файлу стилей (в данном примере — в той же директории, что и HTML-файл). После обновления страницы стили будут применены.
Рассмотрены три способа подключения стилей к HTML-документу: в атрибуте style, встроенные таблицы стилей и внешние CSS-файлы. Рекомендуется использовать внешний CSS-файл для лучшей организации и повторного использования стилей.