小程序样式 —— 20全局样式和局部样式

在进行网页开发时,我们经常创建 global.css、base.css 或者 reset.css 作为全局样式文件进行重置样式或者样式统一,然后在每个页面或者组件中写当前页面或者组件的局部样式,小程序中也存在全局样式和局部样式:

  • 全局样式:指在 app.wxss 中定义的样式规则,作用于每一个页面,例如:设置字号、背景色、宽高等全局样式;
  • 局部样式:指在 page.wxss 中定义的样式规则,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器(局部覆盖全局);

下面通过代码进行验证,打开微信开发者工具,找到 app.wxss 文件(由于我们集成了 Sass,可以将后缀名修改为 .scss,即 app.scss),我们选择对 text 组件进行样式重写:

可以发现使用到 text 组件的页面中的样式发生了变化,说明我们的样式修改生效了;

接下来进入到 cate 页面文件夹中,在 cate.scss 中定义局部样式用于覆盖全局样式,具体如下:

注意,在局部样式中定义的样式,只能作用于当前这一个页面;

参考视频:尚硅谷微信小程序开发

相关推荐
超级新零售11 小时前
服装订货会数字化:商品版本、订单状态与后续配发数据如何衔接?
大数据·小程序·企业微信
xiezhr15 小时前
我用workBuddy开发了自己的第一个小程序并成功上线了
ai·小程序·ai agent·workbuddy
sinat_267611911 天前
用 AI 开发微信小程序(八):一个极简收纳工具的开发复盘
微信小程序·小程序
李纲明1 天前
微信小程序真机预览白屏或 request 失败:先核 request 合法域名与 TLS,再查体验版与本地缓存
缓存·微信小程序·小程序·小程序开发·devdiy·真机预览·合法域名
klfdgl1 天前
线上商城小程序投入测算,有成熟开发经验服务商的长期收益对比
小程序
一木 之林2 天前
Dify学习笔记 03 · RAG检索增强生成:三代范式、评估与落地(第40-45、55-56集)
笔记·小程序·交互·dify
赵小哥要冲啦2 天前
社区邻里互助小程序从 0 到 1 复盘:需求拆解与信任机制设计
java·小程序·需求分析
河北清兮网络科技2 天前
石家庄做一套企业知识库系统多少钱?2026 报价明细
小程序·短剧app·广告联盟
Ai-_Man2 天前
Coze扣子还是不可以导出左侧所有对话,只能点进去单条内容导出,方法不对吗?
开发语言·人工智能·ai·小程序·1024程序员节
微订校园外卖平台3 天前
新手做校园外卖平台:小程序启动顺序与订单链路验收
小程序·外卖系统·本地生活·微订