文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

【微信小程序开发】字体样式设置

2023-09-05 12:48

关注

目录

一.前言

二.案例实现

1.编写index.wxml代码

2.编写app.wxss文件代码代码

3.编写index.wxss文件代码

三.代码编译


本篇文章将介绍在设计微信小程序时,利用style和class两种方式来设置字体样式的方法。

我们的目标是做出以下效果。

在实现上图效果之前,首先要掌握一些基本知识。

view组件支持使用style、class属性来设置组件的样式。class引用的样式类可以在index.wxss以及app.wxss中定义。在前者中定义的样式,一般只能在该页面内使用;而在后者当中定义的样式是全局样式,可在项目的任何页面中使用。

1.编写index.wxml代码

代码中使用了view组件的style和class属性来设置字体样式。

其中,style是直接在标签内部进行设置,而class需要在wxss文件中定义样式类,然后在wxml中引用。(可以理解为这里编写了一个函数,而函数的具体定义需要到另一个文件当中编写)

.box和.title分别是用来设置边框和样式的,在app.wxss中定义,是全局样式,可以在项目内任何wxml文件中使用。

font-style和font-size是用来设置字体样式属性的。常用字体样式属性还有:

属性含义属性值举例
font-family字体类型serif,cursive,隶书,宋体...
font-size字体大小6px/rpx/cm,large,small...
font-style字体倾斜italic,normal,oblique...
font-weight字体粗细bold,bolder,lighteer...

以下是index.wxml文件

  字体样式设置      利用style设置字体样式    字体:隶书,30像素    ============================      利用class设置字体样式:     字体:Cursive、25像素、倾斜、加粗  

2.编写app.wxss文件代码代码

在app.wxss中,我们将定义.box和.title两种全局样式

.box{  margin:20rpx;                   padding: 20rpx;                 border: 1px solid silver;   }.title{  font-size: 25px;                text-align: center;             margin-bottom: 15px;            color: red;                 }

3.编写index.wxss文件代码

我们将在该文件中定义.fontStyle样式类,该样式类只能在index.wxml中被使用。

.fontStyle{  font-family: Cursive;     font-size: 25px;          font-style: italic;       font-weight: bold;      }

编写完以上所有代码后,点击“编译”或者按下快捷键ctrl+s,即可看到模拟期中的运行效果

 结尾ps:

在使用style和class属性来设置组件样式的时候,要具体情况具体分析。静态的样式一般写到class中,动态的样式一般写到style中。这样做的目的是提高不同情况下代码的编辑性以及提高渲染速度。

来源地址:https://blog.csdn.net/fbzhl/article/details/128167534

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯