小程序之样式

//index.wxml

<view class="contain" >test import 样式</view>

//index.wxss

@import "../helloworld/helloworld.wxss";

.contain{

  border: 1px;

}

//helloworld.wxss

.contain{

  color: red;

}


样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。

class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔


全局样式与局部样式

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 视图层 框架的视图层由WXML(WeiXin Markup language)与WXSS(WeiXin Style...
    勇敢的_心_阅读 1,786评论 0 6
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,727评论 19 139
  • WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决...
    肉肉要次肉阅读 10,058评论 0 2
  • 今天考试终于结束了,说实话这次真的着难啦,以前每一次考试都没有把他当成一回事,可是这一次真的是哝的头疼。可能也是没...
    李嘉驰阅读 148评论 0 0
  • 人类的生活条件正在不断提高,购物的需求量也越来越高,于是一次性塑料袋被发明了出来。这样一来虽然是方便了不少...
    十一月的缘分阅读 103评论 0 0

友情链接更多精彩内容