Angular-Komponentenstile
Lassen Sie uns nun unser Markup mit
CSS gestalten. Dafür wird uns die Datei
app.component.css nützlich sein, in der die
CSS-Stile für das Markup der Komponente geschrieben werden. Dabei
kümmert sich Angular selbst darum, dass die Stile
wie ein CSS-Modul funktionieren. Das bedeutet, dass
alle Selektoren nur für das
Markup der Komponente arbeiten und kein
Markup von außen erfassen.
Lassen Sie uns das in der Praxis ansehen. Angenommen, in unserer Komponente befindet sich das folgende Markup:
<div>
abcde
</div>
Lassen Sie uns dem div eine Farbe zuweisen:
div {
color: red;
}
Gleichzeitig können wir sicher sein, dass der Stil nur auf divs aus unserer Komponente angewendet wird, und auf keine anderen.
Erstellen Sie im Template-Datei ein beliebiges Markup. Schreiben Sie Stile für dieses Markup.
