Зачем нужен CSS
До сих пор мы писали только HTML. Создавали структуру, добавляли заголовки, параграфы, картинки. Браузер показывал всё это с базовыми стилями по умолчанию. Чёрный текст на белом фоне, синие ссылки, стандартные размеры. Работает, но выглядит как черновик.
Посмотрите на дизайн сайта ADC. Видите зелёные акценты? Крупные заголовки определённым шрифтом? Серую плашку с цитатой? Всё это сделано с помощью CSS. Cascading Style Sheets, каскадные таблицы стилей.
Представьте дом. HTML это план дома. Где стены, где окна, где двери. CSS это дизайн интерьера. Какого цвета стены, какая мебель, как расставлено всё в пространстве. Без HTML нет структуры. Без CSS нет красоты.
CSS говорит браузеру, как показывать элементы. Какой цвет, какой размер, где расположить, какой шрифт. HTML описывает содержимое, CSS описывает внешний вид. Это называется разделение содержимого и оформления.
Способ 1: Встроенные стили (не используйте)
Есть три способа подключить CSS к HTML. Первый способ встроенные стили, inline. Пишете стили прямо в теге:
<h1 style="color: green;">ADC Community</h1>Атрибут style содержит CSS-правила. color: green делает текст зелёным. Но это плохой способ. Если нужно изменить цвет на всех заголовках, придётся править каждый тег вручную. Как в старые времена веба. Не используйте этот способ.
Способ 2: Внутренние стили
Второй способ внутренние стили, internal. Пишете CSS внутри HTML-файла, в теге <style> в секции <head>:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>ADC Community</title>
<style>
h1 {
color: green;
font-size: 48px;
}
</style>
</head>
<body>
<h1>ADC Community</h1>
</body>
</html>Теперь все <h1> на странице станут зелёными размером 48 пикселей. Изменили правило в одном месте, эффект применился везде. Это лучше, но всё ещё не идеально.
Способ 3: Внешние стили (правильный)
Третий способ внешние стили, external. Создаёте отдельный файл с расширением .css и подключаете его к HTML. Это правильный способ.
Создайте новый файл в VS Code. Назовите его style.css. Напишите простое CSS-правило:
h1 {
color: green;
font-size: 48px;
}Сохраните файл. Теперь в index.html подключим наш CSS:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>ADC Community</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>ADC Community</h1>
</body>
</html>Тег <link> подключает внешний CSS-файл. Атрибут rel="stylesheet" говорит: «Это таблица стилей». Атрибут href="style.css" указывает путь к файлу.
Сохраните и откройте index.html в браузере. Видите? Заголовок стал зелёным. Браузер прочитал HTML, увидел ссылку на CSS-файл, загрузил его и применил правила. Всё автоматически.
Синтаксис CSS
Теперь посмотрите на правила написания CSS. Каждое правило состоит из селектора и блока объявлений:
селектор {
свойство: значение;
}Селектор выбирает элемент. h1 выбирает все заголовки первого уровня. Фигурные скобки открывают блок. Внутри блока свойства и значения. color: green говорит: «Цвет текста зелёный». Точка с запятой завершает объявление.
Важно: CSS чувствителен к синтаксису. Забыли точку с запятой, правило не сработает. Написали свойство с ошибкой, браузер проигнорирует. Не закрыли фигурную скобку, всё сломается.
Правильное форматирование
Когда пишете CSS, используйте осмысленные отступы. Это помогает читать код:
/* Плохо */
h1 {color:green;font-size:48px;}
/* Хорошо */
h1 {
color: green;
font-size: 48px;
}Каждое свойство на новой строке, с отступом. Открывающая скобка на той же строке, что селектор. Закрывающая скобка на отдельной строке. Это стандарт.
Комментарии в CSS
Комментарии в CSS пишутся между /* и */. Они не влияют на код, но помогают вам и другим разработчикам понять, что происходит:
/* Это комментарий в CSS */
/* Комментарии помогают понять, что делает код */
h1 {
color: green; /* Зелёный цвет бренда */
font-size: 48px; /* Размер шрифта 48 пикселей */
}Каскад в CSS
Теперь важное правило. CSS работает каскадом. Если несколько правил применяются к одному элементу, побеждает последнее по порядку:
p {
color: black;
}
p {
color: green;
}Все параграфы станут зелёными, потому что второе правило идёт позже и перезаписывает первое.
Разделение ответственности
Запомните главное. CSS подключается через <link> в секции <head>. Правила пишутся в формате селектор { свойство: значение; }. Комментарии между /* и */. Отступы делают код читаемым. Каждое правило на новой строке.
Всегда держите CSS в отдельном файле. Не пишите стили внутри HTML. Это называется разделение ответственности. HTML отвечает за структуру, CSS за внешний вид. Каждый файл делает своё дело. Когда захотите изменить дизайн всего сайта, поменяете один файл CSS, и все страницы обновятся.
CSS Reset
Чтобы у нас во всех браузерах отображались одни и те же стили, нам необходимо убрать все стандартные правила. Для этого скачайте файл reset.css и поместите его в папку stylesheets в проекте. И подключите его в <head> перед вашим основным файлом стилей.
<link rel="stylesheet" href="stylesheet/reset.css">Заключение
Теперь вы знаете, как подключать CSS к HTML и как писать базовые правила. В следующих уроках мы изучим селекторы, цвета, шрифты и научимся стилизовать наш сайт ADC.
Какой способ подключения CSS является правильным?
Как пишутся комментарии в CSS?
Что произойдёт, если два правила задают разные цвета для одного элемента?
Файл reset.css на GitHub