Angular компонентінің стильдері

Енді версткамызға CSS арқылы стиль беруге көшейік. Бұл үшін бізге app.component.css файлы қажет болады, онда компонент версткасы үшін CSS стильдері жазылады. Сонымен бірге Angular стильдердің CSS модулі ретінде жұмыс істеуін өз есебіне алады. Бұл барлық селекторлардың тек компонент версткасы үшін ғана жұмыс істейтінін білдіреді және сыртқы верстканы қамтымайды.

Практикада қарастырайық. Біздің компонентімізде мынадай верстка болсын:

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

Дивке түс берейік:

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

Сонымен бірге біз стильдің тек біздің компонентіміздің дивтарына ғана қолданылатынына сенімді бола аламыз, және басқаларына емес.

Задание 1

Темплейт файлында белгілі бір верстка жасаңыз. Осы верстка үшін стильдер жазыңыз.