引:
我们继续学习,字体大小和颜色,上篇**说了如何进行文字的显示,这次说一下显示成什么样的文字。用到了WXSS,从WXSS说起。
一、WXSS及基本的语法
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式。是由CSS修改扩充而来,具备了CSS大部分特性。
WXSS决定了WXML中的组件应该怎么显示,包括:
WXSS代码的基本语法:
例如:
其中rpx为尺寸单位,可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。 如在iPhone 6中,屏幕宽度为375px,共有750个物理像素,则
750rpx=375px=750物理像素
1rpx=0.5px = 1物理像素
二、实际操作
我们打开上次公众号的项目文件:
1. 在123.wxss中设置一个选择器
选择器的名字我们可以任意定义,例如我们定义为ziti
2. 在123.wxml中进行选择器的使用,需要在text后面增加class="ziti"
编译后,查看显示的效果
我们继续将另外两种方式的字体也设置一下,分别设置两个选择器
在123.wxml中进行修改第二种和第三种
编译之后,查看效果
三、延伸设置
当然我们可以进行额外一些炫酷的设置,例如,增加渐变、增加背景色、设置字体加粗,设置隶书等等。
仍然先在123.wxss进行设置
在123.wxml中不做更改,查看显示效果:
当然还有很多好玩的设置,需要我们不断查资料去丰富。
结:
修改123.wxss,建立自己的选择器; 修改123.wxml,添加class,指向我们建立的选择器。
程序很简单,很好玩。
|