Что такое CSS
CSS (Cascading Style Sheets) — это язык стилей, который используется для оформления веб-страниц. Если HTML отвечает за структуру страницы, то CSS отвечает за её внешний вид.
С помощью CSS можно: - изменять цвет текста - изменять цвет фона - менять размер шрифта - задавать отступы - изменять расположение элементов
Почему CSS используется отдельно от HTML
Если оформлять страницу только с помощью HTML, код становится неудобным.
CSS позволяет: - отделить структуру (HTML) от оформления (CSS) - изменить дизайн всего сайта в одном файле - сделать код более аккуратным
Способы подключения CSS
CSS можно подключить тремя способами.
1 Внешний файл CSS (основной способ)
Создаётся файл:
style.css
Подключение происходит в разделе <head>:
<link rel="stylesheet" href="style.css">
Это самый правильный и распространённый способ.
2 Внутренний CSS
CSS можно разместить внутри HTML-файла.
<style>
p {
color: red;
}
</style>
Этот код размещается в разделе <head>.
3 Встроенный CSS
Стиль можно добавить прямо в тег.
<p style="color:red;">Текст</p>
Этот способ используется редко.
Структура CSS
CSS состоит из правил.
Структура правила:
селектор {
свойство: значение;
}
Пример:
p {
color: red;
}
Разбор:
- p — селектор (к каким элементам применяется стиль)
- color — свойство
- red — значение
Пример работы CSS
HTML:
<p>Привет</p>
CSS:
p {
color: blue;
}
Результат: текст станет синим.
Изменение цвета текста
Свойство:
color
Пример:
p {
color: red;
}
Изменение цвета фона
Свойство:
background-color
Пример:
body {
background-color: lightgray;
}
Изменение размера текста
Свойство:
font-size
Пример:
p {
font-size: 20px;
}
Изменение шрифта
Свойство:
font-family
Пример:
body {
font-family: Arial;
}
Пример HTML + CSS
HTML:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Мой сайт</h1>
<p>Это текст страницы.</p>
</body>
</html>
CSS (style.css):
body {
background-color: lightgray;
}
h1 {
color: blue;
}
p {
color: black;
font-size: 18px;
}