Существует три способа вставить CSS-стили в HTML-документ: описать стили внутри тега <head> с помощью тега <style>, сохранить стили в отдельный файл с расширением .css и подключить его к странице с помощью тега <link>, а также использовать атрибут style для определения стилей для конкретного элемента внутри HTML-кода.
- Внутри тега
<head>
Чтобы вставить CSS-стили внутри тега <head>, нужно использовать тег <style>. Разместите его между тегами <head> и </head> в HTML-документе и введите CSS-код. Например:
<!DOCTYPE html>
<html>
<head>
<title>Моя страница</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
font-size: 36px;
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя страница.</p>
</body>
</html>В этом примере стили размещены внутри тега <style> между <head> и </head>. Они применяются к тегам <body> и <h1> — устанавливается цвет фона и шрифт для <body>, а заголовок первого уровня <h1> имеет размер шрифта 36px.
- Отдельный файл CSS
Чтобы создать CSS-файл, сохраните код в файле с расширением .css. Например, назовем его style.css. Разместите файл в той же папке, где находится HTML-файл. Затем введите следующий код в теге <head> HTML-документа:
<!DOCTYPE html>
<html>
<head>
<title>Моя страница</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя страница.</p>
</body>
</html>В этом примере мы создали файл style.css, который содержит те же самые стили, что и в предыдущем примере. Затем мы использовали тег <link> для подключения файла стилей к HTML-документу. Атрибут rel указывает на тип ресурса, а href определяет путь к файлу со стилями.
- Атрибут
style
Чтобы определить стили непосредственно для конкретного элемента, можно использовать атрибут style. Например:
<!DOCTYPE html>
<html>
<head>
<title>Моя страница</title>
</head>
<body>
<h1 style="font-size: 36px;">Привет, мир!</h1>
<p style="color: blue;">Это моя страница.</p>
</body>
</html>В этом примере мы определяем стили для заголовка первого уровня <h1> и абзаца <p> через атрибут style — задаем размер шрифта для <h1> и цвет текста для <p>.
