第5章Chapter5
页面样式5.1WXSS概述
CSS(CascadingStyleSheets)是一套样式语言，用于描述HTML组件的样式，决定HTML组件如何显示。微信小程序的WXSS(WeiXinStyleSheets)也是一套样式语言，用于描述小程序的组件样式，决定小程序组件如何显示。WXSS在很大程度上借鉴了CSS的语法。
WXSS保留了绝大部分CSS的特性，小程序官方并未给出专门文档。本章以CSS为主线展开，以介绍原理为主，不涉及过多细节，实践中可以通过查阅CSS手册掌握细节。同时，对WXSS与CSS的区别进行重点说明。
5.1.1定义样式〖*2〗1.角色在微信小程序中，WXML负责页面结构（类似HTML），WXSS负责页面样式和布局（类似CSS），而JavaScript负责页面交互及逻辑实现。WXSS在小程序中扮演的角色和CSS在前端开发中的角色类似。
2.语法
WXSS对大小写敏感，书写规则由两部分构成：选择器+声明，如图51所示。
图51WXSS的书写规则
选择器：要使某个样式应用于特定的页面元素，首先要找到该元素，负责达成这一任务的规则称为选择器，详见第5.2节。
声明：用于设定样式属性值，在英文大括号｛｝中的就是声明，属性和值之间用英文冒号：分隔。当有多条声明时，中间可以用英文分号;分隔。◆微信小程序入门第◆5章页面样式下面的示例中的p就是选择器，声明中设置了color和textalign两个属性值，如下所示：p{
color:red;
text-align:center;
}
3.注释
CSS注释以/*开始,以*/结束,示例如下:/文件头注释,适用于文件头部
author:Jason.Lee
des:页面基础样式
date:2017-5-1
/
/
多行注释,适用于某个模块
这是第二行
/
p{
text-align:center;/单行注释,适用于要点说明/
color:black;
font-family:arial;
}
5.1.2使用样式〖*2〗1.内联样式页面中可使用style直接设定组件的样式，示例如下。虽然语法支持，但开发中应尽量避免这种将静态样式写入style的操作，以免影响渲染速度。内联样式常用于设置动态样式，详见第5.5节。我是内容
2.外部样式
最为常用的做法是将样式独立定义在WXSS文件中，然后引入WXSS文件。下面的示例将外部样式定义在app.wxss文件中。
示例代码如下：/app.wxss/
page{
background-color:#fbf9fe;
height:100%;
}
在使用WXSS的样式时，有以下两种引用方式。
（1）自动引用
小程序定义了自己的工程结构及文件关联规则，符合要求的WXSS文件会自动引入。定义在app.wxss中的样式为全局样式，作用于每一个页面。在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并且会覆盖app.wxss中相同的选择器。
（2）import引用
使用import命令可以将一个WXSS文件引入到另一个WXSS文件中。@import后连接需要导入的外联样式表的相对路径，用;表示语句结束。
示例代码如下：/被使用者:common.wxss/
.small-p{
padding:5px;
}
/使用者:app.wxss/
@import"common.wxss";
.middle-p{
padding:15px;
}
3.嵌入样式
在Web网页开发中，CSS可以通过
……
