小白学习小程序 | 字体大小和颜色(3)

[复制链接]
227|0
手机看帖
扫描二维码
随时随地手机跟帖
单片小菜|  楼主 | 2022-4-22 14:46 | 显示全部楼层 |阅读模式
3960862624d54a7cee.png

引:

       我们继续学习,字体大小和颜色,上篇**说了如何进行文字的显示,这次说一下显示成什么样的文字。用到了WXSS,从WXSS说起。

6442862624d754191b.png

一、WXSS及基本的语法

    WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式。是由CSS修改扩充而来,具备了CSS大部分特性。

     WXSS决定了WXML中的组件应该怎么显示,包括:

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果


       WXSS代码的基本语法:

9506862624da802880.png

例如:

4153662624dbb5d8b7.png

其中rpx为尺寸单位,可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
      如在iPhone 6中,屏幕宽度为375px,共有750个物理像素,则

             750rpx=375px=750物理像素
                 1rpx=0.5px  =   1物理像素

二、实际操作

       我们打开上次公众号的项目文件:

6236062624dddeaff3.png

1. 在123.wxss中设置一个选择器

      选择器的名字我们可以任意定义,例如我们定义为ziti

2046062624df8d1103.png

2. 在123.wxml中进行选择器的使用,需要在text后面增加class="ziti"

2040262624e11acb3d.png

编译后,查看显示的效果

6790062624e3878a5a.png

我们继续将另外两种方式的字体也设置一下,分别设置两个选择器

3561662624e4eb5d93.png

在123.wxml中进行修改第二种和第三种

8295262624e610debb.png

编译之后,查看效果

7245362624e7612ab2.png

三、延伸设置

      当然我们可以进行额外一些炫酷的设置,例如,增加渐变、增加背景色、设置字体加粗,设置隶书等等。


      仍然先在123.wxss进行设置

4217762624ee75f352.png

    在123.wxml中不做更改,查看显示效果:

5317262624f0388994.png

       当然还有很多好玩的设置,需要我们不断查资料去丰富。

结:

       修改123.wxss,建立自己的选择器;
       修改123.wxml,添加class,指向我们建立的选择器。

       程序很简单,很好玩。

9216062624f2530cba.png

使用特权

评论回复

相关帖子

发新帖 我要提问
您需要登录后才可以回帖 登录 | 注册

本版积分规则