Что такое CSS?
Веб-страницы получают стиль от CSS — языка, созданного специально для этого.
- Название является сокращением от Cascading Style Sheets.
- CSS описывает, как HTML-элементы выглядят на экране, на бумаге или в других медиа.
- Один набор правил может управлять оформлением сразу многих веб-страниц, что избавляет вас от большой работы.
- Внешние таблицы стилей хранятся в файлах CSS.
Демонстрация CSS — одна HTML-страница — множество стилей!
Если изменить только CSS, одна и та же страница может выглядеть совершенно по-другому. Здесь одна HTML-страница показана с четырьмя разными таблицами стилей.
Зачем использовать CSS?
Ваши веб-страницы получают стили от CSS: дизайн, оформление и то, как страница выглядит на разных устройствах и при разных размерах экрана.
Пример CSS
Body, заголовок и абзацы этой страницы стилизованы с помощью CSS.
Prompt
Простая веб-страница, стилизованная с помощью CSS в блоке
<style> в head.
Установите фон страницы светло-синим. Сделайте <h1> белым и по центру. Задайте абзацам шрифт verdana размером 20px. Включите заголовок и короткий абзац, чтобы стили были видны.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph. CSS sets the colors, fonts, and layout.</p>
</body>
</html>
CSS экономит много работы!
Правила CSS обычно находятся во внешнем файле .css.
Когда весь сайт использует одну внешнюю таблицу стилей, достаточно отредактировать только этот файл, чтобы изменить внешний вид каждой страницы.