angular 控件css_Angular9 组件样式

Angular 应用使用标准的 CSS 来设置样式。这意味着你可以把关于 CSS 的那些知识和技能直接用于 Angular 程序中，例如：样式表、选择器、规则以及媒体查询等。

另外，Angular 还能把组件样式捆绑在组件上，以实现比标准样式表更加模块化的设计。

使用组件样式

对你编写的每个 Angular 组件来说，除了定义 HTML 模板之外，还要定义用于模板的 CSS 样式、 指定任意的选择器、规则和媒体查询。

实现方式之一，是在组件的元数据中设置 styles 属性。 styles 属性可以接受一个包含 CSS 代码的字符串数组。 通常你只给它一个字符串就行了，如同下例：

Path："src/app/hero-app.component.ts" 。

@Component({

selector: 'app-root',

template: `

Tour of Heroes

`,

styles: ['h1 { font-weight: normal; }']

})

export class HeroAppComponent {

/* . . . */

}

范围化的样式

它们既不会被模板中嵌入的组件继承，也不会被通过内容投影(如 ng-content)嵌进来的组件继承。

在这个例子中，h1 的样式只对 HeroAppComponent 生效，既不会作用于内嵌的 HeroMainComponent，也不会作用于应用中其它任何地方的

标签。

这种范围限制就是所谓的样式模块化特性

可以使用对每个组件最有意义的 CSS 类名和选择器。

类名和选择器是局限于该组件的，它不会和应用中其它地方的类名和选择器冲突。

组件的样式不会因为别的地方修改了样式而被意外改变。

你可以让每个组件的 CSS 代码和它的 TypeScript、HTML 代码放在一起，这将促成清爽整洁的项目结构。

将来你可以修改或移除组件的 CSS 代码，而不用遍历整个应用来看它有没有在别处用到。

注：

在 @Component 的元数据中指定的样式只会对该组件的模板生效。

特殊的选择器

组件样式中有一些从影子(Shadow) DOM 样式范围领域引入的特殊选择器：

:host

使用 :host 伪类选择器，用来选择组件宿主元素中的元素(相对于组件模板内部的元素)。

Path："src/app/hero-details.component.css" 。

:host {

display: block;

border: 1px solid black;

}

:host 选择是是把宿主元素作为目标的唯一方式。除此之外，你将没办法指定它， 因为宿主不是组件自身模板的一部分，而是父组件模板的一部分。

要把宿主样式作为条件，就要像函数一样把其它选择器放在 :host 后面的括号中。

下一个例子再次把宿主元素作为目标，但是只有