微信小程序从入门到学会第四天-------小程序的样式

一、前言

前面我们讲到了小程序的组件,简直是花样多多,不过光有组件可不行,我们还得让组件更加的有魅力并且还能让组件处于不同的位置什么时候出现,这些都是需要我们通过样式来实现的。

二、全局样式

顾名思义,可以在全局中使用,要想声明在全局都可以使用的样式,那就要求我们必须在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 组件前边插入内容

七、总结

微信小程序中的样式使用方法也比较多,多写写就没什么问题,下篇文章我们将继续讲解关于微信小程序中的各种事件。更多精彩内容敬请关注公众号"简易编程网"。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容