这个系列的上一篇教程，教大家写了一个最简单的 Hello world 微信小程序。
但是，那只是一个裸页面，并不好看。今天接着往下讲，如何为这个页面添加样式，使它看上去更美观，教大家写出实际可以使用的页面。
所有示例的完整代码，都可以从 GitHub 的代码仓库[1]下载。
一、总体样式
微信小程序允许在顶层放置一个app.wxss文件，里面采用 CSS 语法设置页面样式。这个文件的设置，对所有页面都有效。
注意，小程序虽然使用 CSS 样式，但是样式文件的后缀名一律要写成.wxss。
打开上一篇教程的示例，在项目顶层新建一个app.wxss文件，内容如下。
page {background-color: pink;}text {font-size: 24pt;color: blue;}
上面代码将整个页面的背景色设为粉红，然后将
开发者工具导入代码之后，得到了下面的渲染结果。
可以看到，页面的背景色变成粉红，文本字体变大了，字体颜色变成了蓝色。
实际开发中，直接对class属性区分不同类型的文本，然后再对每种class设置样式。
打开pages/home/home.wxml文件，把页面代码改成下面这样。
hello world
上面代码中，我们为class属性，值为title。
然后，将顶层的app.wxss文件改掉，不再直接对class设置样式。
page {
background-color: pink;
}
.title {
font-size: 24pt;
color: blue;
}
上面代码中，样式设置在 class 上面（.title），这样就可以让不同的class呈现不同的样式。修改之后，页面的渲染结果并不会有变化。
这个示例的完整代码，可以到代码仓库[2]查看。
二、Flex 布局
各种页面元素的位置关系，称为布局（layout），小程序官方推荐使用 Flex 布局。不熟悉这种布局的同学，可以看看我写的《Flex 布局教程》[3]。
下面演示如何通过 Flex 布局，将上面示例的文本放置到页面中央。
首先，在pages/home目录里面，新建一个home.wxss文件，这个文件设置的样式，只对 home 页面生效。这是因为每个页面通常有不一样的布局，所以页面布局一般不写在全局的app.wxss里面。
然后，home.wxss文件写入下面的内容。
page {
height: 100%;
width: 750rpx;
display: flex;
justify-content: center;
align-items: center;
}
开发者工具导入项目代码，页面渲染结果如下。
下面解释一下上面这段 WXSS 代码，还是很简单的。
（1）height: 100%;：页面高度为整个屏幕高度。
（2）width: 750rpx;：页面宽度为整个屏幕宽度。
注意，这里单位是rpx，而不是px。rpx是小程序为适应不同宽度的手机屏幕，而发明的一种长度单位。不管什么手机屏幕，宽度一律为750rpx。它的好处是换算简单，如果一个元素的宽度是页面的一半，只要写成width: 375rpx;即可。
（3）display: flex;：整个页面（page）采用 Flex 布局。
（4）justify-content: center;：页面的一级子元素（这个示例是
（5）align-items: center;：页面的一级子元素（这个示例是
这个示例的完整代码，可以到代码仓库[4]查看。
三、WeUI
如果页面的所有样式都自己写，还是挺麻烦的，也没有这个必要。腾讯封装了一套 UI 框架 WeUI[5]，可以拿来用。
手机访问 weui.io[6]，可以看到这套 UI 框架的效果。
这一节就来看看，怎么使用这个框架的小程序版本 WeUI-WXSS[7]，为我们的页面加上官方的样式。
首先，进入它的 GitHub 仓库[8]，在dist/style目录下面，找到`weui.wxss`[9]这个文件，将源码[10]全部复制到你的app.wxss文件的头部。
然后，将page/home/home.wxml文件改成下面这样。
开发者工具导入项目代码，页面渲染结果如下。
可以看到，加入 WeUI 框架以后，只要为按钮添加不同的 class，就能自动出现框架提供的样式。你可以根据需要，为页面选择不同的按钮。
这个示例中，
