⼩程序教程之WXSS
系列⽂章：
WXSS
WXSS(WeiXin Style Sheets)是MINA设计的⼀套样式语⾔，⽤于描述WXML的组件样式。
WXSS⽤来决定WXML的组件应该怎么显⽰。
为了适应⼴⼤的前端开发者，我们的WXSS具有CSS⼤部分特性。同时为了更适合开发⼩程序，我们对CSS进⾏了扩充以及修改。
与css相⽐我们扩展的特性有：
尺⼨单位样式导⼊
尺⼨单位
rpx（responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34px
iPhone61rpx = 0.5px1px = 2rpx
iPhone6s1rpx = 0.552px1px = 1.81rpx
rem（root em）: 规定屏幕宽度为20rem；1rem = (750/20)rpx 。
建议：开发⼩程序时设计师可以⽤iPhone6作为视觉稿的标准。
写文章的小程序
样式导⼊
使⽤@import语句可以导⼊外联样式表，@import后跟需要导⼊的外联样式表的相对路径，⽤；表⽰语句结束。
⽰例代码：
/** common.wxss **/
.small-p{
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p:{
padding:15px;
}
内联样式
MINA组件上⽀持使⽤style、class属性来控制组件的样式。
style：静态的样式统⼀写到class中。style接收动态的样式，在运⾏时会进⾏解析，所以不要将静态的样式写进style中，以免影响渲染速度。
<view />
class：⽤于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间⽤空格分隔。
<view class="normal_view" />
选择器
⽬前⽀持的选择器有：
选择器样例样例描述
.class.intro选择所有拥有class="intro"的组件#id#firstname选择拥有id="firstname"的组件element view选择所有view组件
element, element view checkbox选择所有⽂档的view组件和所有的checkbox组
件
::after view::after在view组件后边插⼊内容
::before view::before在view组件前边插⼊内容
全局样式与局部样式
定义在app.wxss中的样式为全局样式，作⽤于每⼀个页⾯。在page的wxss⽂件中定义的样式为局部样式，只作⽤在对应的页⾯，并会覆盖app.wxss中相同的选择器。
感谢阅读，希望能帮助到⼤家，谢谢⼤家对本站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。