前言这节开始学习小程序的视图层，WXML和WXSS就像网页开发的HTML和CSS，一个负责页面结构，一个负责页面样式，即美化页面。
小能手这段时间在学习微信小程序开发，按照UI、API、云开发三个部分并结合示例系统性地学习，并实现了一个物联网小程序“花花草草守护仪”，详细可点此查看。
1WXML1.1使用view组件增加内容WXML负责页面结构，由各类组件组成。这里在home.wxml使用最常用的view组件，写了一个简单的静态页面。
viewviewviewWXML模板/viewview从事过网页编程的人知道，网页编程采用的是HTML+CSS+JS这样的组合，其中HTML是⽤来描述当前这个⻚⾯的结构，CSS⽤来描述⻚⾯的样⼦，JS通常是⽤来处理这个⻚⾯和⽤户的交互。/view/view/view1.2给WXML的组件增加选择器属性WXML中填充了非常多的view组件，而我们界面美化工作就需要对这些组件进行处理。前提就需要对这些组件增加“”，以方便样式文件能够选中相应条件的组件，从而做美化工作。
这里我们分别增加了id和class两个选择器，代码如下：
viewid="wxmlinfo"viewclass="content"viewclass="title"WXML模板/viewviewclass="desc"从事过网页编程的人知道，网页编程采用的是HTML+CSS+JS这样的组合，其中HTML是⽤来描述当前这个⻚⾯的结构，CSS⽤来描述⻚⾯的样⼦，JS通常是⽤来处理这个⻚⾯和⽤户的交互。/view/view/view2WXSS给wxml文件的组件加了选择器之后，接下来就可以在wxss文件中给指定的某个组件以及某类组件添加一些美化了，这里需要编辑home.wxss文件。
wxss美化的知识和css是一样的，所以可以看下w3shool的。
2.1字体属性与文本属性根据选择器的说明，我们可以使用.title选择所有拥有class=“title”的组件，使用#wxmlinfo选择所有id=“wxmlinfo”的组件，选择好之后相应的调整属性。
/pages/home/home.wxss/.title{font-size:20px;font-weight:600;text-align:center;}.item-title{font-size:18px;font-weight:500;color:#c60;}.desc,.item-desc{color:#333;}#wxmlinfo,#studyweapp{font-size:16px;font-family:-apple-system-font,HelveticaNeue,Helvetica,sans-serif;line-height:1.6;}修改后的实际效果是这样：
常用的CSS样式罗列如下：
字体属性描述font-family规定文本的字体系列。font-size规定文本的字体尺寸。font-weight规定字体的粗细。文本属性描述color设置文本的颜色。line-height设置行高。text-align规定文本的水平对齐方式。2.2盒模型盒模型，可以控制段落之间的距离、文字之间的距离，以及与边框之间的距离。盒⼦模型就像⼀个⻓⽅形的盒⼦，它有⻓度、⾼度、也有边框，以及内边距与外边距。我们通过实战来了解⼀下。
，就是这个⻓⽅形的边框与⻓⽅形⾥⾯的内容之间的距离，有上边距，右边距、下边距、左边距这个四个内边距，分别为padding-top，padding-right，paddingbottom，padding-left。注意是上、右、下、左，这样⼀个顺时针。
就是这个⻓⽅形的边框与⻓⽅形外⾯的内容之间的距离，同样也有上边距margin-top，右边距margin-right，下边距margin-bottom，左边距margin-left这个四个边距。同样也是上、右、下、左这个顺时针。
我们给几个组件增加了盒模型：
#wxmlinfo,#studyweapp{padding-top:20px;padding-right:15px;padding-bottom:20px;padding-left:15px;}.title,.item-title{margin-bottom:0.9em;}.item-title{border-left:3pxsolid#c60;padding-left:15px;}效果如下：
3小结本节尝试使用了WXML的view组件，同时增加了选择器；通过选择器给相应组件增加了字体文本属性和盒模型属性。
END
