Что такое CSS и как его подключить
Три способа подключения и почему выбирают внешний файл, из чего состоит правило, и как смотреть стили в инструментах браузера.
Что ты научишься делать
- Подключишь внешний файл стилей к своей странице
- Разберёшь правило CSS на селектор, свойство и значение
- Научишься смотреть и править стили прямо в браузере через DevTools
#Разделение работы
HTML отвечает на вопрос «что это». CSS (Cascading Style Sheets, «каскадные таблицы стилей») отвечает на вопрос «как это выглядит».
Разделение не формальность. Разметку пишут один раз, а внешний вид меняют десятки раз. Когда оформление лежит отдельно, поменять цвет всех кнопок сайта — это одна строка, а не сто правок в разметке.
#Правило CSS: из чего оно состоит
h1 { color: #6544e0; font-size: 32px;}/*h1 — селектор: кого красимcolor — свойство: что меняем#6544e0 — значение: на что меняем{ } — блок объявлений; — конец объявления, ставится после каждого*/Внутри блока может быть сколько угодно объявлений. Каждое заканчивается точкой с запятой. Последнюю формально можно опустить, но не стоит: добавишь строку — забудешь поставить, и правило сломается.
Комментарий в CSS один: /* … */. Двойного слэша, как в JavaScript, тут нет.
#Три способа подключить стили
#1. Инлайн: атрибут style
<h1 style="color: #6544e0; font-size: 32px">Кофейня «Полка»</h1>Стиль прибит к одному элементу. Чтобы покрасить второй заголовок, нужно скопировать всё заново. Перекрыть такой стиль чем-то другим почти невозможно. Годится разве что для быстрой проверки.
#2. Тег style в head
<head> <style> h1 { color: #6544e0; } </style></head>Уже лучше: правило действует на все заголовки страницы. Но стили живут в этом файле и только в нём — на второй странице придётся копировать.
#3. Внешний файл — так и надо
<head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Кофейня «Полка»</title></head>h1 { color: #6544e0; font-size: 32px;}Один файл на весь сайт. Правишь его — меняются все страницы сразу. Плюс браузер скачает его один раз и дальше возьмёт из кэша: сайт станет быстрее.
rel="stylesheet" обязателен: он говорит, что это именно стили, а не что-то другое.
| Способ | Когда уместен |
|---|---|
Атрибут style | Быстрая проверка. В настоящем коде — почти никогда |
Тег <style> | Одностраничный документ, письмо, демо |
| Внешний файл | Всегда, когда страниц больше одной. То есть почти всегда |
#Попробуй сам
Во вкладке CSS справа — настоящий файл стилей. Поменяй цвет, размер, добавь своё правило. Результат обновится сразу.
#DevTools: рентген страницы
Инструменты разработчика встроены в каждый браузер. Открываются клавишей F12 или сочетанием Ctrl+Shift+I (на Mac — ⌘+⌥+I). Ещё проще: правый клик по элементу → «Просмотреть код».
Это главный инструмент верстальщика. Не «для продвинутых» — открывай его с первого дня.
Выбери элемент
Кликни правой кнопкой по любому тексту на странице и выбери «Просмотреть код». Слева подсветится его разметка.
Посмотри стили справа
Во вкладке Styles видно все правила, которые действуют на элемент, — и из твоего файла, и встроенные в браузер.
Найди зачёркнутое
Перечёркнутое свойство означает: это правило проиграло другому. Рядом написано, какому именно. Так находят ответ на вопрос «почему стиль не работает».
Правь прямо там
Кликни по значению и введи другое — страница изменится мгновенно. Это черновик: обновишь страницу — всё вернётся. Зато подбирать значения так гораздо быстрее.
Посмотри на коробку
Ниже во вкладке Computed есть цветная схема с отступами и рамками. Что это такое, разберём в шестнадцатом уроке — а пока просто знай, что она там есть.
#Пара свойств для начала
| Свойство | Что делает | Пример |
|---|---|---|
color | Цвет текста | color: #6544e0; |
background | Фон элемента | background: #f4f4f8; |
font-size | Размер шрифта | font-size: 18px; |
line-height | Высота строки | line-height: 1.6; |
text-align | Выравнивание текста | text-align: center; |
padding | Внутренний отступ | padding: 16px; |
Где спотыкаются почти все
Забыта точка с запятой
Почему Браузер не понимает, где кончилось одно объявление, и выбрасывает и его, и следующее. Ошибки нигде не видно — просто два свойства молча не работают.
Как надо Ставь ; после каждого объявления, включая последнее.
Неправильный путь в link
Почему Файл не найден, стили не подключились, страница выглядит голой. Браузер об этом не скажет ни слова на самой странице.
Как надо Открой DevTools, вкладку Network: красная строка с style.css означает, что путь неверный.
В CSS используются комментарии из JavaScript
Почему Строка // комментарий в CSS не комментарий, а мусор. Он ломает соседнее правило.
Как надо В CSS комментарий только один: /* … */.
Стили пишутся в атрибуте style «пока так, потом перенесу»
Почему Такие стили почти невозможно перекрыть, и переносить их потом придётся вручную из десятков мест.
Как надо Сразу заводи style.css. Это занимает тридцать секунд и экономит часы.
- CSS Cascading Style Sheets
- Язык описания внешнего вида документа.
- Правило rule
- Селектор и блок объявлений в фигурных скобках.
- Свойство property
- То, что меняем:
color,font-size. - Значение value
- На что меняем:
#6544e0,18px. - Объявление declaration
- Пара «свойство: значение».
- Инструменты разработчика DevTools
- Встроенная в браузер панель для просмотра и правки разметки и стилей.
Проверь себя
Один файл на весь сайт: правки применяются везде сразу, и браузер кэширует его между страницами.
Селектор стоит перед фигурной скобкой и отвечает на вопрос «кого красим».
Двойной слэш — из JavaScript, угловые скобки — из HTML. В CSS работает только <code>/* … */</code>.
Зачёркнутое свойство перекрыто другим правилом. Рядом браузер показывает, каким именно, — так и находят причину «стиль не работает».
При одинаковом весе побеждает то правило, что идёт позже. Поэтому свои стили подключают после чужих.
Задание
Раскрасить рецепт
Перед тобой рецепт из третьего урока, пока без стилей. Оформи его: заголовку h1 задай цвет и размер, абзацам — межстрочный интервал не меньше 1.5, а элементу с классом note — фон и внутренние отступы не меньше 12 пикселей.
Пиши только во вкладке CSS — разметку трогать не нужно.
Подсказка 1
Правило пишется так: h1 { color: #6544e0; font-size: 32px; }
Подсказка 2
line-height удобно задавать числом без единиц: p { line-height: 1.6; } — это 1.6 от размера шрифта.
Подсказка 3
Фон задаётся свойством background, отступы — padding: .note { background: #f4f4f8; padding: 16px; }
Показать решение
<h1>Сырники</h1><p>Готовятся за 20 минут, тесто не липнет к рукам.</p><h2>Ингредиенты</h2><ul> <li>Творог — 400 г</li> <li>Яйцо — 1 шт.</li> <li>Мука — 3 ст. ложки</li></ul><p class="note">Не передержи на сковороде — внутри должно остаться нежно.</p>h1 { color: #7a3b12; font-size: 32px;}p { line-height: 1.6;}.note { padding: 16px; background: #fdf3e7; border-radius: 10px;}