[支付宝小程序PHP全栈开发]二、前端样式的设计.acss样式详解

本部分的视频内容地址在http://edu.csdn.net/course/detail/5750

---

关于.acss文件

在视频中已经说过了，小程序的设计思想和原生app的设计思想颇为相似，基本的应用单元为页面。当然对于一个页面来说每一个元素的放置位置在哪儿以及显示成什么样子这个是由样式来决定的。我们知道在web开发中样式是在css文件中规定的，叫做层叠样式表 (Cascading Style Sheets)。其实在APP中样式的约束也是使用css，在支付宝小程序中也是使用css不过文件的后缀是.acss而且对css3进行了扩充而已。

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

那么在支付宝小程序中的.acss和微信小程序中的.wxcss没有什么两样。上边已经说了.acss其实包含了css3那么它还有一些新的特性是css3中不具备的，让我们一一看看

rpx

第一次看到这个东西也能猜到他是干什么用的。在css中我们知道规定大小一般使用像素(px)这个单位。比如显示生活中我们说房子128㎡那这儿的单位是平方米，在开发中需要更加精准的大小就是px像素。像素就非常精细了因为在我们显示屏幕中像素是最小的显示单元。这个道理如果不懂的话就找个LED屏幕仔细看，LED屏幕上一个一个的发光二极管可以想象为像素。

px为单位导致的问题

我们知道手机屏幕有大有小，就拿iPhone来说，iPhone 6 plus比iPhone 5要大。那么就说明plus的像素比5要多。对比：

iPhone 6 plus和iPhone5的尺寸对比

手机	宽度	高度
手机	宽度	高度
iPhone 6 plus	414px	736px
iPhone 5	320px	568px

加入有一个160px宽度的红色矩形在这两种手机中的位置如下：

那么rpx的特殊之处在哪儿呢？

rpx（responsive pixel）可以根据屏幕宽度进行自适应。如何自适应呢？看下边的分析：

不管一个屏幕有多宽我们可以对屏幕平均分配吧。既然iPhone 6 plus宽度为414px，iPhone 5的宽度为320px。如果创建一个宽度为160px的矩形那么在iPhone 5 中占有一半的宽度，但是在iPhone 6 plus中不足一半，在手机显示中不是很好看。那么我们不管屏幕多宽都给他分750份。那么在iPhone 6 plus中每一份就是414/750=0.552px 而对于iPhone 5的每一份就是320/750=0.42px。那现在我们规定大小和位置时不使用px而使用份数来表示如何呢？比如我们规定一个红色的矩形在iPhone 6 plus中占有375份(375x0.552=207px)，在iPhone 5中也是325份(375x0.42=157.5px)。
再来看看，都占有375份的情况下iPhone 6 plus中的宽度207px（约占有总宽度414px的50%），而iPhone 5中的宽度157.5px（约占有总宽度320的50%）。也就是在两个不同尺寸的屏幕上当以份数来规定是占有的比例是差不多的。而这个份数就是rpx

看下图：

样式导入

在模块化开发中我们有时候不得不在页面中使用其他的第三方库的样式，而第三方库的样式是保存在第三方包中的，我们不可能全部复制到我们的.acss文件中，那最好的办法就是导入了。在样式表中导入其他外联样式表。

@import "./button.acss";
.md-button {
  padding:15px;
}

当然仍旧支持内联样式和class属性制定样式类，如

<view class="my-awesome-view" />
<view class="my-awesome-view" style="color:red;" />

选择器

选择器和css3的保持一致。一般有class=”test”类选择器和id=”test”的id选择器。当然在支付宝小程序的样式中特殊的地方就是：
※ .a- 或者 .am-为前缀的选择器已经被系统占用所以不要使用；
※ 不能使用属性选择器，例如,以下写法不被支持：

//这种选择器不被支持
input[name="title"]{
    color: test;
}

全局样式与局部样式

在项目结构讲解时我们已经说过在项目根目录下有一个app.acss文件这个样式文件中定义的样式在任何一个页面中都可以直接使用。

页面容器的样式

我之前说过小程序开发的应用单元为页面。其实我们在.axml中写的页面并不包含页面容器，就相当于我们做一个页面但是body标签不用写那如果我们要改变整个页面的背景怎么办呢?其实有一个固定的选择器。例如：

可以通过 page 元素选择器来设置页面容器的样式，比如页面背景色:

page {
  background-color: red;
}

在你想改变页面容器的页面中定义该样式也可以，全局定义也可以，例如我想将test这个页面的页面容器背景设置为蓝色，就可以再pages目录下的test目录下找到test.acss在其中定义page的样式

下节是视图层讲解，如果有任何问题可以再下方给我留言或者发邮件到[email protected]我在收到邮件后会回复。