Angular Academy · Урок

Стили в области компонента

Ограничивайте стили областью одного компонента.

«Стили в области компонента» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Стили принадлежат компонентам

Angular позволяет каждому компоненту иметь собственный CSS. По умолчанию эти стили ограничены областью действия, то есть влияют только на шаблон данного компонента, а не на остальную часть страницы.

Массив встроенных стилей

Можно определить стили непосредственно в декораторе @Component, используя массив styles.

@Component({
  selector: "app-card",
  template: "<div class='card'>Hello</div>",
  styles: [".card { padding: 16px; border: 1px solid #ccc; }"]
})
export class CardComponent {}

Внешние styleUrls

Чаще используются одна или несколько внешних таблиц стилей, указанных через styleUrls.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrls: ["./card.component.css"]
})
export class CardComponent {}

Сокращённая запись styleUrl

Для одной таблицы стилей современный Angular поддерживает свойство в единственном числе — styleUrl.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrl: "./card.component.css"
})
export class CardComponent {}

Ограничение области действия на практике

Правило .card в одном компоненте не повлияет на другой компонент, который также использует класс card. Каждый компонент изолирован.

/* card.component.css */
.card { color: navy; }
/* this navy color stays inside CardComponent only */

Как работает ограничение области действия

Angular добавляет уникальные атрибуты к элементам компонента и переписывает его селекторы CSS так, чтобы они соответствовали этим атрибутам. Поэтому стили применяются только внутри данного компонента.

<!-- generated markup -->
<div class="card" _ngcontent-abc>Hello</div>

/* generated css */
.card[_ngcontent-abc] { color: navy; }

Внешние стили не проникают внутрь

Подобно тому как Ваши стили остаются внутри, большинство внешних стилей также не переопределяет правила компонента непреднамеренно, благодаря чему компоненты остаются автономными.

Глобальные стили

Для стилей всего приложения используйте глобальный файл styles.css, указанный в angular.json. На эти стили ограничение области действия не распространяется.

/* src/styles.css - global */
body { font-family: system-ui; }

Несколько таблиц стилей

Компонент может загружать несколько таблиц стилей, перечислив их в массиве.

@Component({
  selector: "app-page",
  styleUrls: ["./base.css", "./layout.css"]
})
export class PageComponent {}

Использование привязок классов

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

<div class="card" [class.featured]="isFeatured"></div>

/* card.component.css */
.featured { border-color: gold; }

Преимущества ограничения области действия

Стили с ограниченной областью действия предотвращают конфликты имён в большом приложении, позволяют командам работать независимо, а также делают компоненты переносимыми и понятными.

Быстрая проверка

Проверьте, насколько хорошо Вы поняли стили, ограниченные областью действия компонента.

Итоги

Компоненты подключают CSS с помощью styles, styleUrls или styleUrl. По умолчанию эти правила ограничены областью действия компонента, что предотвращает конфликты. Для правил, применяемых ко всему приложению, используйте глобальную таблицу стилей.

Часто задаваемые вопросы

Урок «Стили в области компонента» бесплатный?

Да — полный текст урока «Стили в области компонента» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Стили в области компонента»?

Ограничивайте стили областью одного компонента. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Стили в области компонента»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy