Angular4 开发实战:(3) 使用CSS美化组件

2018-06-19 11:25 更新
这章来介绍如何使用CSS美化组件。

基于组件,有两种方式来添加样式:
  • 使用样式模板
  • 使用样式字符串

(1) 使用样式模板

// card.component.ts   

styleUrls: ['./card.component.scss']   


// card.component.scss   

.card {   

  padding: 10px;   

  box-shadow: 0 0 3px rgba(0,0,0,.2);   

  margin: 10px 0;  

}

(2) 使用样式字符串

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

还有一种最简单粗暴的:

<app-card>   

  <h5 style="font-weight: normal">卡头</h5>  

</app-card>

注:虽然可以,但不推荐。

给宿主元素添加样式
先来解释一下何为宿主元素,比如上面我们的自定义组件app-card,这就是宿主元素

如果我们要给组件模板内部样式中为其添加样式,一般我们想到的是这样:

app-card {   

  display: block;   

  margin: 10px 0;   

  background: #eee;  

}

你会很郁闷的发现无效,咋办呢?Angular还是很友好的,我们可以这样:

:host {   

  display: block;   

  margin: 10px 0;   

  background: #eee;  

}

这样你会发现app-card有背景色啦。

:host就表示当前样式模板的宿主元素。 注意:默认情况下,自定义组件的display属性是空字符串的,也就是不占据空间。

如果只要当其有一定条件的时候才显示某个样式,比如只要当宿主元素具有active类时,才出现灰色背景,可以这样:

:host(.active) {   

  background: red;  

}


外部条件
当组件外部有一些条件时,组件内容的样式才变化。最明显的就是主题,比如当某个祖先元素具有CSS类`.theme-blue`时,字体才变为蓝色:

:host-context(.theme-blue) {   

  color: blue;  

}

注:它会在当前组件宿主元素的祖先节点中查找 CSS 类, 直到文档的根节点为止。 强制给子组件加样式 默认情况下,组件样式只会作用于组件自身的HTML上。 我们先再创建一个组件,名为card-header

// card-header.component.html   


<div class="card-header">   

  卡头  

</div>

然后在app.component.ts中添加:

<app-card>   

  <app-card-header></app-card-header>   

</app-card>


比如你在app/components/card/card.component.scss中添加:

.card-header {   

  font-size: 25px;  

}

上面的代码对子组件card-header里的内容是不起作用的,只有这样:

/deep/ .card-header {   

  font-size: 25px;  

}

/deep/就是用来强制一个样式对各级子组件的视图及其内容都生效。

这里我使用Sass预编译器,更多详情:Sass快速入门 下面还有三种内联方式,不过不建议多用:
(1) style标签

<style>  

  div {color: #333;}  

</style>

(2) link标签

<link rel="stylesheet" href="app.css">

(3) import

@import 'app.css';

如发现任何问题或有好的建议,欢迎在下方评论留言。



以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号