關於.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的樣式