Selectors и Базовое Оформление

С возвращением.

В предыдущем уроке ты узнал, что такое CSS и как подключить его к HTML.

Теперь мы изучаем selectors.

Selectors — это способ, которым CSS выбирает, что именно стилизовать.

Без selectors CSS просто стоит посреди комнаты и кричит:

“Сделай это синим!”

А браузер спрашивает:

“Что именно?”

Хороший вопрос, браузер.

Очень профессионально.

Что Ты Изучишь

В этом уроке ты узнаешь:

что такое CSS selectors;
как работают element selectors;
как работают class selectors;
как работают ID selectors;
как работают grouped selectors;
как работают descendant selectors;
как писать более чистый CSS;
как применять базовое оформление к настоящему HTML.

Что Такое Selector?

Selector говорит CSS, какие HTML-элементы нужно стилизовать.

Пример:

p {
  color: gray;
}

Здесь p — это selector.

Это означает:

Выбери все paragraph elements и сделай их текст серым.

CSS всегда должен знать, что именно стилизовать.

Selector — это “кто”.

Declarations — это “что”.

Пример:

h1 {
  color: blue;
  font-size: 48px;
}

Это означает:

Найди каждый h1, сделай его синим и большим.

Очень прямо.

Почти командным голосом.

Но в web development немного командного голоса иногда полезно.

Базовая Структура CSS-Правила

CSS-правило выглядит так:

selector {
  property: value;
}

Пример:

h2 {
  color: #111827;
}

Части такие:

h2 — selector;
color — property;
#111827 — value.

Selector выбирает элемент.

Property говорит, что изменить.

Value говорит, как это изменить.

CSS — это список инструкций.

Иногда элегантный.

Иногда драматичный.

Иногда в одном пропущенном символе от хаоса.

Создай Проект

Создай папку для этого урока:

mkdir css-lesson2
cd css-lesson2
touch index.html
touch style.css

Теперь у тебя есть:

css-lesson2/
  index.html
  style.css

Открой папку в своём editor.

Сначала напишем HTML.

Потом стилизуем его разными selectors.

Такой план.

И на этот раз план, возможно, даже переживёт встречу с браузером.

Напиши HTML

Открой index.html и добавь это:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Selectors</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header id="top">
    <h1>CSS Selectors</h1>
    <p class="intro">Selectors помогают CSS найти правильные HTML-элементы.</p>
  </header>

  <main>
    <section class="card">
      <h2>Element Selectors</h2>
      <p>Element selectors стилизуют все элементы одного типа.</p>
    </section>

    <section class="card featured">
      <h2>Class Selectors</h2>
      <p>Class selectors можно использовать много раз, и они очень полезны.</p>
    </section>

    <section class="card">
      <h2>ID Selectors</h2>
      <p>ID selectors выбирают один уникальный элемент на странице.</p>
    </section>

    <section class="practice-box">
      <h2>Зона Практики</h2>
      <p>Эта зона поможет нам тестировать разные selectors.</p>
      <a href="#top">Наверх</a>
    </section>
  </main>

  <footer>
    <p>Создано во время изучения CSS selectors.</p>
  </footer>
</body>
</html>

Обрати внимание на несколько важных вещей:

id="top";
class="intro";
class="card";
class="card featured";
class="practice-box".

Это hooks.

CSS может использовать их, чтобы стилизовать конкретные части страницы.

Hooks важны.

Без hooks CSS должен угадывать.

А CSS — не детектив.

Element Selectors

Element selectors выбирают HTML-элементы по имени тега.

Пример:

body {
  font-family: Arial, sans-serif;
}

Это стилизует весь body.

Другой пример:

p {
  font-size: 18px;
}

Это стилизует все paragraphs.

Добавь это в style.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
  margin: 0;
}

h1 {
  color: white;
  font-size: 48px;
}

h2 {
  color: #111827;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

Это element selectors:

body;
h1;
h2;
p.

Они влияют на каждый подходящий элемент на странице.

Полезно.

Мощно.

Но иногда слишком широко.

Как использовать валик для краски, чтобы исправить одну маленькую точку.

Class Selectors

Class selector выбирает элементы с конкретным class.

В HTML:

<p class="intro">Selectors помогают CSS найти правильные HTML-элементы.</p>

В CSS:

.intro {
  font-size: 20px;
}

Точка . означает class.

То есть .intro выбирает каждый элемент с:

class="intro"

Добавь это в style.css:

.intro {
  font-size: 20px;
  color: #dbeafe;
}

Теперь только paragraph с class intro стилизуется таким способом.

Classes можно использовать много раз.

Можно дать тот же class многим элементам.

Пример:

<section class="card">

И CSS:

.card {
  background-color: white;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 12px;
}

Добавь это:

.card {
  background-color: white;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 12px;
}

Теперь каждая section с class card получает тот же стиль.

Это одна из самых важных идей CSS.

Reusable styles.

Меньше повторения.

Меньше страдания.

Благородная цель.

Multiple Classes

Один элемент может иметь больше одного class.

Пример:

<section class="card featured">

Этот элемент имеет два classes:

card;
featured.

Он получает стили от обоих.

Добавь этот CSS:

.featured {
  border: 2px solid #2563eb;
  background-color: #eff6ff;
}

Теперь featured card получает дополнительное оформление.

Она всё ещё имеет обычные стили .card.

Но также получает стили .featured.

Это полезно, когда нужен базовый стиль плюс специальная версия.

Как обычная пицца.

А потом пицца с дополнительным сыром.

CSS понимает дополнительный сыр.

По крайней мере эмоционально.

ID Selectors

ID selector выбирает один уникальный элемент.

В HTML:

<header id="top">

В CSS:

#top {
  background-color: #111827;
}

Символ # означает ID.

Добавь это:

#top {
  background-color: #111827;
  padding: 40px;
  text-align: center;
}

ID должен быть уникальным на странице.

Это означает, что не нужно иметь много элементов с одинаковым ID.

Используй ID осторожно.

Для styling обычно лучше использовать classes.

ID полезны для:

уникальных зон страницы;
внутренних ссылок;
JavaScript позже;
специальных одноразовых элементов.

Думай об ID как о номере паспорта.

Class больше похож на футболку команды.

Многие люди могут носить одинаковую футболку.

Но только один человек должен иметь тот же номер паспорта.

Grouped Selectors

Иногда нужно применить один и тот же стиль к нескольким selectors.

Вместо этого:

h1 {
  font-family: Arial, sans-serif;
}

h2 {
  font-family: Arial, sans-serif;
}

Можно сгруппировать:

h1,
h2 {
  font-family: Arial, sans-serif;
}

Запятая означает:

Примени это правило к обоим selectors.

Пример:

h1,
h2 {
  margin-top: 0;
}

Добавь это:

h1,
h2 {
  margin-top: 0;
}

Grouped selectors помогают держать CSS короче и чище.

Чистый CSS легче читать.

Легче читать — легче исправлять.

Легче исправлять — меньше драматичных вздохов.

Descendant Selectors

Descendant selector выбирает элемент внутри другого элемента.

Пример:

footer p {
  color: #666;
}

Это означает:

Выбери каждый p внутри footer.

Он не выбирает все paragraphs.

Только paragraphs внутри footer.

Добавь это:

footer p {
  color: #666;
  text-align: center;
}

Другой пример:

.practice-box a {
  color: #2563eb;
  font-weight: bold;
}

Это выбирает links внутри .practice-box.

Добавь это:

.practice-box a {
  color: #2563eb;
  font-weight: bold;
}

Descendant selectors полезны, когда важен контекст.

Link в paragraph может выглядеть обычно.

Link в специальной box может выглядеть иначе.

CSS может это обработать.

У CSS есть мнения.

Много мнений.

Стилизуй Layout

Теперь добавь больше структуры странице:

main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

.practice-box {
  background-color: #fff7ed;
  padding: 24px;
  border-radius: 12px;
  border: 2px dashed #fb923c;
}

footer {
  padding: 20px;
}

Теперь страница должна выглядеть более организованно.

Ты используешь:

element selectors;
class selectors;
ID selectors;
grouped selectors;
descendant selectors.

Это серьёзный шаг.

CSS toolbox открывается.

Постарайся не ударить себя молотком.

Полный CSS

Твой style.css теперь должен выглядеть так:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
  margin: 0;
}

#top {
  background-color: #111827;
  padding: 40px;
  text-align: center;
}

h1 {
  color: white;
  font-size: 48px;
}

h2 {
  color: #111827;
}

h1,
h2 {
  margin-top: 0;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

.intro {
  font-size: 20px;
  color: #dbeafe;
}

main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

.card {
  background-color: white;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 12px;
}

.featured {
  border: 2px solid #2563eb;
  background-color: #eff6ff;
}

.practice-box {
  background-color: #fff7ed;
  padding: 24px;
  border-radius: 12px;
  border: 2px dashed #fb923c;
}

.practice-box a {
  color: #2563eb;
  font-weight: bold;
}

footer {
  padding: 20px;
}

footer p {
  color: #666;
  text-align: center;
}

Сохрани.

Обнови браузер.

Посмотри.

Если ничего не изменилось, проверь:

название файла;
link к CSS;
spelling;
точки с запятой;
фигурные скобки;
сохранил ли ты файл.

Bug “я забыл сохранить” — легендарный.

Он победил многих смелых developers.

Class или ID?

Используй classes большую часть времени.

Используй ID только тогда, когда что-то действительно уникальное.

Хорошее использование class:

<section class="card">

Потому что cards может быть много.

Хорошее использование ID:

<header id="top">

Потому что top area только одна.

Плохая идея:

<section id="card">
<section id="card">
<section id="card">

Не делай так.

IDs не должны повторяться.

Браузер может всё равно показать страницу.

Но код становится подозрительным.

Как три человека с одним паспортом в аэропорту.

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

Забыть точку для classes

Неправильно:

card {
  background-color: white;
}

Правильно:

.card {
  background-color: white;
}

Без точки CSS ищет HTML-элемент <card>.

И если ты его не создавал, ничего не произойдёт.

CSS строгий.

Он не угадывает твои мечты.

Забыть решётку для IDs

Неправильно:

top {
  background-color: black;
}

Правильно:

#top {
  background-color: black;
}

# говорит CSS, что это ID.

Без # нет ID selector.

Маленький символ.

Большая разница.

Делать selectors слишком широкими

Это влияет на все paragraphs:

p {
  color: red;
}

Иногда это нормально.

Иногда тебе нужна только одна зона:

.card p {
  color: #444;
}

Будь конкретным, когда нужно.

Не стилизуй всю деревню, если хотел покрасить только одну дверь.

Практика

Создай собственную страницу с:

одним header;
одним intro paragraph;
тремя cards;
одной featured card;
одной practice box;
одним footer.

Используй:

element selectors;
class selectors;
один ID selector;
один grouped selector;
один descendant selector.

Попробуй стилизовать:

background colors;
text colors;
spacing;
borders;
border radius;
link color.

Держи CSS организованным.

Не кидай styles повсюду, как конфетти после свадьбы.

Конфетти весёлое.

Debugging конфетти — нет.

Мини-Задание

Создай три cards:

Basic Plan;
Standard Plan;
Premium Plan.

Дай всем cards class card.

Дай Premium Plan дополнительный class featured.

Пример:

<section class="card featured">
  <h2>Premium Plan</h2>
  <p>This plan has extra features.</p>
</section>

Потом стилизуй:

все cards с одинаковым padding и background;
featured card с border;
headings с общим стилем;
только links внутри cards специальным цветом.

Именно так работают настоящие сайты.

Reusable styles.

Special variations.

Меньше хаоса.

Больше контроля.

Итог

Сегодня ты узнал, что:

selectors говорят CSS, что стилизовать;
element selectors выбирают HTML tags;
class selectors используют точку, например .card;
ID selectors используют решётку, например #top;
classes можно использовать много раз;
IDs должны быть уникальными;
grouped selectors делят styles между несколькими selectors;
descendant selectors выбирают elements внутри других elements;
чистые selectors делают CSS легче для поддержки.

Selectors — это фундамент CSS.

Если ты понимаешь selectors, ты можешь контролировать страницу.

Если не понимаешь selectors, CSS становится загадочным супом.

А мы уже договорились:

Суп должен быть в миске.

Не в твоём stylesheet.

Следующий Урок

В следующем уроке мы подробнее будем стилизовать текст, fonts и colors.

Потому что читаемый текст важен.

Сайт с нечитаемым текстом — это просто puzzle с hosting.