Введение в CSS
CSS — это язык для стилей.
С помощью стилей можно менять на сайте цвет фона, размер шрифта, добавить рамки к картинкам и так далее.
Напишем какой-нибудь простой стиль:
Задание:
Создайте новый пустой файл style.css. Туда мы будем писать стили.
Теперь надо подключить стили. Добавьте в самое начало файла index.html три строчки:
Эти строчки говорят, что страница должна использовать стили из "style.css".
В элементе
<head>
пишутся "настройки" страницы — какие стили использовать на странице, какая у нее должна быть иконка, и так далее.<head>
— это единственный элемент, который должен быть не внутри<body>
, а снаружи.Напишите в style.css:
Страница должна стать пронзительно голубого цвета.
Давайте сделаем цвет нормальным.
Задание:
Откройте гугл и введите "color picker". Появится штука для выбора цветов.
Выберите любой цвет.
Скопируйте строчку под "HEX" (которая начинается с
#
) и поменяйте в style.css словоblue
на эту строчку.Цвет страницы должен поменяться.
Синтаксис CSS — как именно пишутся стили
Внутри фигурных скобок в style.css пишутся свойства. Каждое свойство на новой строке, в конце — точка с запятой.
Когда свойство одно:
Когда свойств несколько:
Задание:
Свойство
background-color
меняет цвет фона.Свойство
color
меняет цвет самого текста.Добавьте строчку со свойством
color
(как на картинке выше) и поменяйте цвет текста на странице на какой-нибудь другой.
Возможные ошибки:
Если забыть точку с запятой в конце первой строки — вторая не заработает.
🚫 Неправильно:
✅ Правильно:
Задание:
Селектор (штука перед фигурными скобками) говорит, к каким элементам будет применяться правило. Если написать
body
, правило применится ко всей странице. Если написать, например,h1
— правило применится только к заголовкам.Поменяйте код в style.css, чтобы цвета поменялись не у всей страницы, а только у заголовков.
Возможные ошибки:
Не забудьте число —
h1
, а неh
. (Чтобы применить ко всем видам заголовков, надо будет писатьh1, h2, h3
.)Селекторы надо писать без угловых скобок.
🚫 Неправильно:
✅ Правильно:
Вся штука целиком — селектор + свойста — называется правилом.
В CSS-файле может быть много правил. Тогда они пишутся друг под другом.
Задание:
Свойство
text-align
меняет выравнивание текста:text-align: left;
— слева.text-align: right;
— справа.text-align: center;
— по центру.
Добавьте правило, чтобы все абзацы (элементы
<p>
) были выровнены по центру — как на картинке.
Возможные ошибки:
align
— трудное слово. Легко случайно набратьaling
вместоalign
.Дефис обязателен.
textalign
илиtext align
не заработает.Правила нельзя писать друг в друге. Сначала должна закрыться фигурная скобка
}
для прошлого правила, только потом — начинается новое правило.🚫 Неправильно:
✅ Правильно:
Задание:
Cвойство
font-size
меняет размер текста. Например,16px
— это обычный текст, а60px
— огромный текст. "px" значит "пикселей".Добавьте еще одну строчку в уже написанное правило для
h1
, чтобы текст в заголовках стал огромным.
Возможные ошибки:
Нельзя ставить пробел перед
px
. То есть,60 px
не заработает.Проверьте, что
font
написано правильно. Часто пишутfond
вместоfont
.