Использование CSS в HTML
Использование CSS в HTML
Язык стилей CSS не связан с HTML напрямую. Необходимо указать браузеру, откуда нужно загрузить и интерпретировать стили.
Способы подключения CSS
- Указать стили в качестве значения атрибута
style. Такую запись называют «инлайн» (inline), что означает запись правила в одну строку с использованием атрибутаstyle. - Использовать специальный тег
<style>, который указывают в секцииhead. Браузер обработает всё, что написано внутри этого тега как CSS код - Подключать отдельный файл со стилями. В этом случае создаётся файл с расширением
.css, в котором записываются CSS правила. Для подключения файла используется мета-тег<link>
Подключение CSS к HTML
Добавьте следующий код в раздел <head> вашего HTML-документа для подключения внешнего файла CSS:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Your Web Page</title>
</head>
<body>
<!-- Ваш контент здесь -->
</body>
</html>В данном примере, styles.css - это имя вашего файла CSS.
Основы стилизации
Добавьте следующие правила в ваш файл CSS:
/* styles.css */
body {
font-family: 'Arial', sans-serif;
background-color: #f2f2f2;
color: #333;
}
h1 {
color: #0066cc;
}
p {
line-height: 1.6;
}Эти правила устанавливают шрифт для всего документа, устанавливают фоновый цвет и цвет текста для <body>, изменяют цвет заголовка <h1> и задают межстрочный интервал для параграфов <p>.
Использование классов и идентификаторов
HTML:
<div class="container">
<p id="special-text">Этот текст особенный!</p>
</div>
CSS:
/* styles.css */
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
}
#special-text {
font-weight: bold;
color: #ff0000;
}В этом примере container - это класс, который стилизует контейнер, а special-text - это идентификатор, который применяется к особенному тексту.
Работа с псевдоэлементами
/* styles.css */
p::first-line {
font-weight: bold;
}
p::first-letter {
font-size: 150%;
color: #009900;
}Этот код стилизует первую строку параграфа и первую букву с использованием псевдоэлементов ::first-line и ::first-letter.
Заключение
Это основы применения CSS в HTML. Используйте эти примеры как отправную точку и продолжайте изучение более сложных концепций, таких как Flexbox и Grid, для создания более сложных и адаптивных макетов ваших веб-страниц
Будьте первым