Введение в CSS
CSS управляет внешним видом веб-страниц: цветами, шрифтами, макетами и многим другим. Узнайте, как стилизовать страницы с помощью CSS.
Каскадные таблицы стилей (CSS) — это язык, который управляет тем, как выглядит веб-страница. Пока HTML определяет содержимое и структуру страницы (заголовки, абзацы, списки, ссылки), CSS описывает её оформление — цвета, шрифты, отступы, размеры и макет. Они работают в паре: HTML — это скелет, CSS — его кожа.
CSS был создан консорциумом World Wide Web (W3C) и сегодня является открытым стандартом, поддерживаемым каждым современным браузером.
На этой странице рассказывается, что такое CSS, зачем он нужен, как записывается правило CSS и куда двигаться дальше.
Зачем нужен CSS
На заре веба стили смешивались напрямую с HTML с помощью атрибутов и презентационных тегов. Это делало страницы сложными в обслуживании: чтобы изменить один цвет, приходилось редактировать каждый элемент на каждой странице. CSS решает эту проблему, отделяя содержимое от представления. Разметка пишется один раз, а её внешний вид управляется отдельным набором правил.
Это разделение даёт три важных преимущества:
- Одно изменение — везде. Один внешний файл стилей может оформить все страницы сайта. Обновите один файл — и весь сайт изменится.
- Более чистый и лёгкий HTML. Разметка остаётся сосредоточенной на смысле, что упрощает чтение и улучшает доступность и SEO.
- Переиспользуемый, согласованный дизайн. Одни и те же правила автоматически применяются к каждому подходящему элементу, поэтому кнопки, заголовки и ссылки выглядят одинаково на всём сайте.
Как выглядит правило CSS
Правило CSS состоит из двух частей: селектора, который определяет, какие элементы нужно стилизовать, и блока объявлений (внутри { }), который перечисляет, что нужно изменить. Каждое объявление — это пара property: value;.
p {
color: blue;
font-size: 16px;
}В этом правиле:
p— селектор, он нацелен на каждый элемент<p>(абзац).colorиfont-size— свойства, то есть то, что стилизуется.blueи16px— значения, то есть то, во что устанавливается каждое свойство.- Точка с запятой
;завершает каждое объявление; фигурные скобки{ }группируют их.
Вот полная страница, которая использует CSS для оформления заголовка и абзаца:
<!DOCTYPE html>
<html>
<head>
<title>My first CSS page</title>
<style>
h1 {
color: #1c87c9;
text-align: center;
}
p {
color: #555;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Hello, CSS!</h1>
<p>This paragraph is styled with CSS.</p>
</body>
</html>Заголовок становится синим и выровненным по центру, а абзац — серым и крупнее — и всё это без изменения самого текста.
Где размещается CSS
CSS можно применять тремя способами, и вы познакомитесь со всеми ними в главе Как добавить CSS:
- Внешний — правила сохраняются в отдельном файле
.cssи подключаются к странице. Это стандартный подход для реальных сайтов, поскольку один файл стилизует множество страниц. - Внутренний — правила размещаются внутри элемента
<style>в<head>страницы (как в примере выше). - Встроенный — атрибут
styleна отдельном элементе, используемый для быстрых единичных правок.
Что дальше
Теперь, когда вы знаете, что такое CSS, продолжайте с основ:
- CSS Syntax — анатомия правила в деталях.
- Как добавить CSS — встроенные, внутренние и внешние стили.
- CSS Selectors — все способы нацеливаться на элементы.
- CSS Id and Class — нацеливание на конкретные элементы по имени.