当前位置: 首页 > article >正文

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

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

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

下面通过代码进行验证,打开微信开发者工具,找到 app.wxss 文件(由于我们集成了 Sass,可以将后缀名修改为 .scss,即 app.scss),我们选择对 text 组件进行样式重写:
在这里插入图片描述
可以发现使用到 text 组件的页面中的样式发生了变化,说明我们的样式修改生效了;

接下来进入到 cate 页面文件夹中,在 cate.scss 中定义局部样式用于覆盖全局样式,具体如下:
在这里插入图片描述
注意,在局部样式中定义的样式,只能作用于当前这一个页面;

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


http://www.kler.cn/a/461293.html

相关文章:

  • Wend看源码-Java-Executor异步执行器学习
  • epoll 水平ET跟边缘LT触发的区别是什么
  • 2025年第五届控制理论与应用国际会议 | Ei Scopus双检索
  • 【深度学习进阶】基于CNN的猫狗图片分类项目
  • NSGA-II(非支配排序遗传算法II)详解与实现
  • 【OpenCV】使用Python和OpenCV实现火焰检测
  • Spring Boot环境配置
  • 鸿蒙项目云捐助第二十九讲云捐助项目云数据库商品的批量增加功能实现
  • 蒙特卡洛方法试验的一般过程和经典例子
  • Qanything 2.0源码解析系列6 PDF解析逻辑
  • 计算机网络•自顶向下方法:IP编址
  • 【每日学点鸿蒙知识】监听输入框删除键、进入页面前网络请求、同层渲染、GridCol左对齐、自定义弹窗禁止手势
  • 语音合成芯片:让净水机更智能、更便捷
  • 练习题:29
  • naive ui 使用地址记录
  • 人工智能知识分享第二天-机器学习之KNN算法
  • 2024终章---愿昭昭如愿,愿岁岁安澜
  • 大模型的实践应用34-大模型LLama3的预训练的全流程介绍,包括:数据收集处理、模型架构与初始化,训练策略等
  • STM32G0B1 can Error_Handler 解决方法
  • tcpdump指南(1)
  • KMP 2024 年总结,Kotlin 崛起的一年
  • 【题解】—— LeetCode一周小结52
  • Node.js详细安装教程
  • CPT203 Software Engineering 软件工程 Pt.6 软件管理(中英双语)
  • LabVIEW冷却风机性能测试系统
  • LeetCode3045.统计前后缀下标对II