Урок 01

Введение в CSS, подключение, селекторы

Что такое CSS

CSS (Cascading Style Sheets) — язык описания внешнего вида HTML-документа.

Разделение ответственности:

  • HTML — структура и смысл.
  • CSS — оформление (цвет, размеры, отступы, шрифт, позиция).
  • JavaScript — поведение.

Что даёт:

  • Один стиль — для многих страниц.
  • Легко менять оформление.
  • Кэшируется браузером.
  • Доступность (можно адаптировать под разные устройства).

Как подключить

1. Внешний файл (рекомендуется):

<link rel="stylesheet" href="style.css">

Плюсы:

  • Кэшируется.
  • Один файл для всех страниц.
  • Разделение HTML и CSS.

2. Внутри HTML:

<style>
    body { font-family: sans-serif; }
</style>

Когда: критический CSS для первой отрисовки, страницы-однодневки.

3. Inline-стили:

<p style="color: red; font-size: 20px;">Текст</p>

Когда: почти никогда. Только динамика через JS.

Правило: внешний файл — стандарт. Inline — исключение.

Синтаксис правила

селектор {
    свойство: значение;
    другое-свойство: значение;
}

Пример:

p {
    color: #333;
    font-size: 16px;
    line-height: 1.5;
}

Что здесь:

  • p — селектор (кого стилизуем).
  • color — свойство.
  • #333 — значение.
  • ; — разделитель.
  • { } — блок правил.

Правило: последняя ; необязательна, но лучше всегда ставить.

Комментарии

/* Это комментарий */

/* Многострочный
   комментарий */

Правило: комментарии — для сложных мест. Не дублировать код словами.

Основные селекторы

По тегу:

p { color: red; }
h1 { font-size: 32px; }

По классу:

.btn { padding: 10px 20px; }
.btn-primary { background: blue; }

По ID:

#header { height: 60px; }

Универсальный:

* { box-sizing: border-box; }

По атрибуту:

[disabled] { opacity: 0.5; }
[type="email"] { border-color: blue; }
[href^="https://"] { color: green; }

Правило: классы — основа. ID — только если реально уникальный элемент.

Комбинаторы

Потомок (пробел):

.card a { color: blue; }   /* любая вложенная ссылка */

Прямой потомок (>):

.card > a { font-weight: bold; }   /* только прямые дети */

Соседний (+):

h2 + p { margin-top: 0; }   /* первый p сразу после h2 */

Все соседи (~):

h2 ~ p { color: gray; }   /* все p после h2 */

Что важно: комбинатор — не пробел, а часть селектора.

Псевдоклассы

Состояния:

a:hover { color: red; }
a:focus { outline: 2px solid; }
button:active { transform: scale(0.98); }
input:disabled { background: #eee; }
input:checked { accent-color: blue; }

Позиционные:

li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(2n) { background: #f5f5f5; }   /* чётные */
li:nth-child(3n+1) { color: red; }

Логические:

:not(.active) { opacity: 0.5; }
:is(h1, h2, h3) { color: #333; }
:where(h1, h2) { margin: 0; }
:has(img) { padding: 0; }   /* родитель с img внутри */

Псевдоэлементы

p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
li::before { content: "→ "; }
li::after { content: " ✓"; }
::selection { background: yellow; }
::placeholder { color: #999; }

Что важно: ::before и ::after требуют content.

Каскад и приоритет

При одинаковой специфичности:

  1. Последнее правило побеждает.
  2. Inline-стили побеждают всё, кроме !important.
  3. !important побеждает всё (но не использовать).

Правило: не полагаться на порядок. Использовать специфичность.

Пример

/* Сброс */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* База */
body {
    font-family: system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #1a1a1a;
    background: #fafafa;
}

/* Ссылки */
a {
    color: #c1442e;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Кнопки */
.btn {
    display: inline-block;
    padding: 10px 20px;
    background: #c1442e;
    color: #fff;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background: #a83926;
}

Как проверить

DevTools:

  • F12 → Elements.
  • Выбрать элемент.
  • Справа — Styles.
  • Показаны все применённые правила.
  • Зачёркнутое — перезаписанное.

Что искать:

  • Почему стиль не применился.
  • Кто перезаписал.
  • Какая специфичность.

Практика

1. Создайте style.css.

2. Подключите через <link>.

3. Напишите базовые стили:

  • body (font, color).
  • Заголовки.
  • Ссылки.
  • Кнопки.

4. Проверьте в DevTools:

  • Стили применились?
  • Кто перезаписал?

5. Поэкспериментируйте с селекторами:

  • p:hover.
  • li:nth-child(2n).
  • :not(.active).

Частые ошибки

1. Забыли подключить CSS:

<!-- нет <link> -->

Решение: подключить в <head>.

2. Неверный путь:

<link href="style.css">   <!-- а файл в css/style.css -->

Решение: проверить DevTools → Network.

3. Опечатка в свойстве:

colr: red;   /* colo(u)r */

Решение: DevTools → Elements покажет зачёркнутое.

4. ; пропущена:

p { color: red font-size: 20px; }

Решение: ; после каждого свойства.

5. Inline вместо внешнего:

<p style="color: red">Текст</p>

Решение: класс + CSS.

6. ID вместо классов:

#title { ... }   /* много id — плохо */

Решение: классы.

7. Специфичность по цепочке:

.header .nav .menu .item .link { ... }

Решение: BEM или короткие селекторы.

8. !important везде:

color: red !important;

Решение: понять каскад, а не подавлять.

Итог

  • CSS — внешний вид, отдельно от HTML.
  • Подключение: <link> — стандарт.
  • Селекторы: тег, класс, ID, атрибут.
  • Комбинаторы: , >, +, ~.
  • Псевдоклассы: :hover, :focus, :nth-child.
  • Псевдоэлементы: ::before, ::after, ::selection.
  • Каскад — порядок и специфичность.
  • DevTools — главный инструмент отладки.

Дальше — специфичность, каскад, наследование.