微信小程序 学习笔记 WXSS解析
一.WXSS解析
WXSS是一套样式语言,用于描述WXML的组件样式。
WXSS用来决定WXML的组件应该怎么显示。
为了适应广大的前端开发者,WXSS具有CSS大部分特性。同时为了更适合开发微信小程序,微信对CSS进行了扩充和修改。
与CSS项目扩展的特性有:
尺寸单位: rpx 、rem
样式导入:使用@import语句可以导入外联样式表
官方建议:开发微信小程序时设计师可以用ipone6作为视觉稿的标准。
二.选择器
选择器分为六种
image.png
. class:组件指定class ,WXSS设计对应的样式,只用class是前面带点“.”的。
<image class="head" src="../../images/tab_main_bi_select.png"> </image>
.head {
width: 50rpx;
height: 50rpx;
}
#id:组件指定的id,对应WXSS中的样式。
<button id='button_id'>点击按钮</button>
#button_id{
padding:10rpx;
}
element:值这个页面所有的对应控件的样式。
<button>点击按钮</button>
<button>点击按钮1</button>
//页面的所有button都有内间距
button{
padding:10rpx;
}
三.尺寸单位
rpx:规定屏幕宽度为750rpx
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
rem:规定屏幕宽度为20rem。
以上是WXSS针对于CSS扩展的两个尺寸单位,除此之外CSS所用的单位也都是可以使用,如px像素等。
四.WXCSS 样式
1.样式之高度、宽度
height
width
单位可以用px,rpx,rem或者百分比
.head {
width: 50rpx;
height: 50rpx;
}
2.样式之内间距
pading 、 pading-right、 pading-left、 pading-bottom 、pading-top
.time {
padding-right: 10rpx;
}
3.样式之外间距
margin 、 margin-right、 margin-left、 margin-bottom 、margin-top
4.样式之字体颜色
color
5.样式之背景
background
6.样式之字体
font-size
7.样式之布局
dipaly:flex;(悬浮样式)
flex-direction:row(横向排列,各个子块必须定义宽度或flex,高度默认为容器高度)
flex-direction:column(纵向排列,各个子块必须定义高度或flex,宽度默认为容器宽度)
flex:1 (类似于Android的weight=1)
五.WXSS的格式
WXSS的格式固定,
选择器{
属性:值;
}
六.WXSS的实例
.item {
border-bottom: 1rpx solid gray;
width: 100%;
padding: 10rpx;
display: flex;
flex-direction: row;
}
border-bottom:1个像素的实线蓝色边框 颜色可以用16进制 也可以RGB颜色,或者颜色的名称, 可以单独指边框 border-left border-right
display :flex 自适应
flex-direction:row 横向排列 column 纵向排列
flex:1 就是剩下的宽度都给它类似于Android中权重为1