Стили компонента Angular

Давайте теперь стилизуем нашу верстку через CSS. Для этого нам пригодится файл app.component.css, в котором пишутся CSS стили для верстки компонента. При этом Angular сам забоится о том, чтобы стили работали как CSS модуль. Это значит, что все селекторы будут работать только для верстки компонента и не будут захватывать верстку снаружи.

Давайте посмотрим на практике. Пусть в нашем компоненте следующая верстка:

app/app.component.html<div>
  abcde
</div>

Давайте зададим цвет диву:

app/app.component.cssdiv {
  color: red;
}

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

Задание 1

Сделайте в файле с темплейтом некоторую верстку. Напишите стили для этой верстки.