一、前言
前面我们讲到了小程序的组件,简直是花样多多,不过光有组件可不行,我们还得让组件更加的有魅力并且还能让组件处于不同的位置什么时候出现,这些都是需要我们通过样式来实现的。
二、全局样式
顾名思义,可以在全局中使用,要想声明在全局都可以使用的样式,那就要求我们必须在app.wxss中声明一些样式,如图:
图片
然后再在模板文件中引入该类名,如图:
图片
可以看到,此时就已经将全局样式应用到该文本组件中了。
三、页面样式
也就是我们经常提到的局部样式,它只作用于该文件夹中的模板文件,也就是该文件夹中的一个个组件中,如果用在其它地方的话,那是没有效果的。首先我们在该模板文件中写入样式,如图:
图片
然后我们再在全局样式文件中写一个一模一样的类名,如图:
图片
此时我们再来将该样式应用到文本组件中,如图:
图片
可以看到,此时的全局样式就失效了,当有局部样式的时候一切以局部样式为主。
四、导入样式
我们可以将样式写入一个文件,然后导入到局部样式文件中,如图:
图片
图片
接下来就可以使用了,如图:
图片
五、内联样式
还可以直接在组件中写样式,如下:
图片
图片
这里其实用到的就是我们之前在组件那篇文章中提到的数据绑定。
六、选择器
既然有样式肯定要有选择器,选择器能够帮助我们精准定位一些组件并给他们赋予更多精美的样式,如下:
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .class | .aa |
选择所有拥有 class="aa"的组件 |
| #id | #aa |
选择拥有 id="aa" 的组件 |
| element | view |
选择所有 view 组件 |
| element, element | view, text |
选择所有文档的 view 组件和所有的text 组件 |
| ::after | view::after |
在 view 组件后边插入内容 |
| ::before | view::before |
在 view 组件前边插入内容 |
七、总结
微信小程序中的样式使用方法也比较多,多写写就没什么问题,下篇文章我们将继续讲解关于微信小程序中的各种事件。更多精彩内容敬请关注公众号"简易编程网"。