51Для добавления CSS стилей к HTML странице можно использовать несколько способов:
- Встроенный (inline) стиль — используется для добавления стилей непосредственно в HTML-код элемента с помощью атрибута
style. Например:
<h1 style="color: blue;">Заголовок</h1>- Внутренние стили (internal style) — используются для добавления стилей к определенному HTML-документу с помощью тега
<style>внутри секции<head>:
<!DOCTYPE html>
<html>
<head>
<title>Моя страница</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
</body>
</html>- Внешние стили (external style) — используются, чтобы создать отдельный файл CSS, содержащий все стили для HTML-документа, и потом подключить его в HTML-коде с помощью тега
<link>внутри<head>:
<!DOCTYPE html>
<html>
<head>
<title>Моя страница</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Заголовок</h1>
</body>
</html>Здесь файл styles.css содержит все стили, например:
h1 {
color: blue;
}Этот файл должен быть сохранен в отдельном файле с расширением .css и подключен к HTML-документу с помощью тега <link> в секции <head>.
Чтобы определить стили для конкретных элементов, используйте имя тега, класс или идентификатор вместе со свойствами CSS. Например:
h1 {
color: blue;
font-size: 24px;
}
.my-element {
background-color: #eee;
border: 1px solid black;
padding: 10px;
}
#my-special-element {
font-weight: bold;
}В данном примере мы задаем стили для заголовка h1, для элементов с классом ‘my-element’ и для элемента с идентификатором ‘my-special-element’.
