打印

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

[复制链接]
838|0
手机看帖
扫描二维码
随时随地手机跟帖
跳转到指定楼层
楼主


引:

       我们继续学习,字体大小和颜色,上篇**说了如何进行文字的显示,这次说一下显示成什么样的文字。用到了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,指向我们建立的选择器。

       程序很简单,很好玩。


使用特权

评论回复

相关帖子

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

本版积分规则

认证:资深专家
简介:丰富的嵌入式软硬件开发管理经验; 丰富的项目管理经验并具备敏锐的市场嗅觉; 丰富的产品的供应链资源及工厂管控能力; 具备很强的产品落地经验(从产品企划到产品量产);

107

主题

2307

帖子

9

粉丝