WXSS模板样式-全局样式和局部样式

简介: **WXSS**是微信小程序的样式表语言,类似于CSS,但做了扩展和修改。它引入了**rpx**作为尺寸单位,用于屏幕适配,1rpx在不同设备上的宽度不同,确保了自适应效果。此外,WXSS支持**@import**语法导入外部样式表,便于代码复用。全局样式定义在`app.wxss`中,作用于每个页面,而局部样式在页面的`.wxss`文件中,优先级高于全局样式,当两者冲突且权重相等时,局部样式会覆盖全局样式。

一、WXSS


1.WXSS


WXSS(WeiXin Style Sheets)是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的CSS


2.WXSS和CSS的关系


WXSS具有CSS大部分特性,同时,WXSS还对CSS进行了扩充以及修改,以适应微信小程序的开发。与CSS相比,WXSS扩展的特性有:


(1)rpx尺寸单位


(2)@import样式导入


二、rpx


1.rpx


rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位


2.rpx的实现原理


鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕,在宽度上等分为750份(即:当前屏幕的总宽度是750rpx)


在较小的设备上,1rpx所代表的宽度较小;在较大的设备上,1rpx所代表的宽度较大


小程序在不同设=设备上运行的时候,会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配


3.rpx和px之间的单位换算



官方建议:在开发小程序时,可以使用iPhone6视觉稿的标准


二、样式导入


1.样式导入


使用WXSS提供的@import 语法,可以导入外联的样式表


2.@import 的语法格式


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


例如:


新建一个common文件夹,然后再新建一个common.wxss文件



然后将common.wxss导入到index.wxss



在index.js文件中:


// index.js
Page({
  //页面的初始数据
  data: {
    arr1:[1,2,3,4,5],
    userList:[
      {id:1,name:'Candy'},
      {id:2,name:'Lucy'},
      {id:3,name:'Rocky'}
    ]
  }
})


在index.wxml文件中:


<!--index.wxml-->
<view wx:for="{{userList}}" wx:key="id" class="username">{{item.name}}</view>


调试结果为:




我们可以看到页面中显示的数据以及被渲染成红色,说明common.wxss导入成功


三、全局样式


1.全局样式


定义在app.wxss中的样式为全局样式,作用于每一个页面


/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
 
view{
  padding: 10rpx;
  margin: 10rpx;
  background-color: lightskyblue;
}


我们在pages中新建一个test文件夹


{
  "pages": [
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}


在test.wxml中:


<!--pages/test/test.wxml-->
<view>123</view>
<view>123</view>


调试后可以看到:



此时将index页面调至前面保存后我们可以看到背景色也变成了蓝色




说明在app.wxss中的样式作用于每一个页面


但是如果个别页面需要特殊化,此时就需要用到局部样式


2.局部样式


在页面的.wxss文件中定义的样式为局部样式,只作用于当前页面


例如:在test.wxss中:


/* pages/test/test.wxss */
view{
  color: white;
}


调试后可以看到文本颜色变成了白色:



注意:(1)当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式

         

         (2)当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式

当我们把鼠标放在view上:



我们发现其权重为(0,0,1)


当我们把鼠标放在view:nth-child上:



我们发现其权重为(0,1,1),大于(0,0,1)


此时第一个文本的背景颜色变成了粉色:



所以当局部样式的权重大于或等于全局样式的权重时,会覆盖全局的样式

目录
相关文章
|
8月前
|
前端开发
|
4天前
|
缓存 前端开发
动态样式去哪儿了?
动态样式去哪儿了?
|
1月前
|
小程序
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
|
1月前
|
JavaScript 前端开发 API
【每周一个小技巧】如何自定义客服、生活号组件的样式
【每周一个小技巧】如何自定义客服、生活号组件的样式
39 8
|
8月前
|
前端开发
|
10月前
|
JavaScript
vue全局修改滚动条样式
vue全局修改滚动条样式
207 1
|
小程序
【微信小程序】全局样式、局部样式、全局配置
【微信小程序】全局样式、局部样式、全局配置
508 0
|
小程序 前端开发
【小程序】wxss与rpx单位以及全局样式和局部样式
【小程序】wxss与rpx单位以及全局样式和局部样式
222 0
【小程序】wxss与rpx单位以及全局样式和局部样式
|
前端开发
CSS之变量(五)标签导航
CSS之变量(五)标签导航
CSS之变量(五)标签导航