angular项目css写在哪

2023-03-25 16:01| 来源: 网络整理| 查看: 265

angular项目css写在哪

１、在原数据中编写

我们可以在 @component 装饰器中添加一个style数组型属性。

这个数组中的每一个字符串定义了一个CSS属性。

例如：

@Component({ selector: &＃039;app-root&＃039;, template: ` Tour of Heroes `, styles: [&＃039;h1 { font-weight: normal; }&＃039;] }) export class HeroAppComponent { /* . . . */ }

２、引入外部样式

通过把外部CSS文件添加到 @component 的 styleUrls 属性中来加载外部样式文件。

（相关课程推荐：Angular.js教程）

例如：

@Component({ selector: &＃039;app-root&＃039;, template: ` Tour of Heroes `, styleUrls: [&＃039;./hero-app.component.css&＃039;] }) export class HeroAppComponent { /* . . . */ }

注意：这些在组件中通过这种方式加载的样式文件，只对当前组件起作用，不会作用于其他的组件，同样也不会作用于投影进来的组件。

当我们使用angular/cli来创建组件时：

ng g component componentName;

cli 会自动创建一个空的样式文件，与创建的组件文件在一个文件夹中。

3、使用link标签来引入样式文件

我们甚至还可以在组件的模板中，通过link标签引入样式文件。

例如：

@Component({ selector: &＃039;app-hero-team&＃039;, template: ` Team {{member}} ` })

4、CSS @import 语法

还可以利用标准的CSS @import规则，来将其他CSS文件引入到CSS文件中。

5、外部及全局样式文件

当使用 angular-cli构建时，必须配置.angular-cli.json 文件，使应用能够包含我们想要的外部静态文件，包括CSS文件。

当然，在构建应用的时候，cli工具会自动创建一个 style 文件，我们可以在这个文件中，编写全局样式。

6、控制视

来源gaodai.ma#com搞#代!码网

图的封装模式

就像上边提到的，组件的样式默认只能对当前组件有效，而不能作用于其他组件，那如果我们想让某个组件的样式对别的组件也可以起作用，应该怎么办呢？

这时候，就可以通过改变组件元数据中的 encapsulation 来设置组件样式的封装方式。

● native，原生，样式不进不出，不能作用于当前组件之外，同时其它组件不能作用于当前组件，主要是指全局样式

● emulated，仿真（默认），样式不能出，全局样式能进来。

● none ，样式能进能出。

更多Angular相关技术文章，请访问gaodaima编程笔记进行学习！

以上就是angular项目css写在哪的详细内容，更多请关注gaodaima编程笔记其它相关文章！

【本文地址】

公司简介

联系我们