Есть несколько способов прикрепить стили CSS к HTML документу:
- Внутренний стиль
<!DOCTYPE html>
<html>
<head>
<title>Моя веб-страница</title>
<style>
body {
background-color: #f7f7f7;
font-family: Arial, sans-serif;
}
h1 {
color: #222;
text-align: center;
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Добро пожаловать на мою веб-страницу.</p>
</body>
</html>- Внешняя таблица стилей
<!DOCTYPE html>
<html>
<head>
<title>Моя веб-страница</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Привет, мир!</h1>
<p>Добро пожаловать на мою веб-страницу.</p>
</body>
</html>- Встроенный стиль при помощи атрибута style в HTML тэгах
<!DOCTYPE html>
<html>
<head>
<title>Моя веб-страница</title>
</head>
<body>
<h1 style="color: #222; text-align: center;">Привет, мир!</h1>
<p style="font-family: Arial, sans-serif;">Добро пожаловать на мою веб-страницу.</p>
</body>
</html>Первый и второй способы наиболее часто используются в веб-разработке. Внешние таблицы стилей часто используются, чтобы скрыть CSS-код от HTML. Это упрощает чтение разметки и позволяет легко переиспользовать стили в других страницах. Атрибут style использовать не рекомендуется, так как он усложняет чтение и поддержку кода.
