關(guān)于.acss文件

在視頻中已經(jīng)說過了却嗡，小程序的設(shè)計思想和原生app的設(shè)計思想頗為相似在验，基本的應(yīng)用單元為頁面臀规。當(dāng)然對于一個頁面來說每一個元素的放置位置在哪兒以及顯示成什么樣子這個是由樣式來決定的缭贡。我們知道在web開發(fā)中樣式是在css文件中規(guī)定的者春，叫做層疊樣式表 (Cascading Style Sheets)破衔。其實在APP中樣式的約束也是使用css，在支付寶小程序中也是使用css不過文件的后綴是.acss而且對css3進(jìn)行了擴(kuò)充而已钱烟。

CSS3是CSS技術(shù)的升級版本晰筛，CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個模塊實在是太龐大而且比較復(fù)雜拴袭，所以读第，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來拥刻。這些模塊包括： 盒子模型怜瞒、列表模塊、超鏈接方式 般哼、語言模塊 吴汪、背景和邊框 、文字特效 蒸眠、多欄布局等漾橙。

那么在支付寶小程序中的.acss和微信小程序中的.wxcss沒有什么兩樣。上邊已經(jīng)說了.acss其實包含了css3那么它還有一些新的特性是css3中不具備的黔宛，讓我們一一看看

rpx

第一次看到這個東西也能猜到他是干什么用的近刘。在css中我們知道規(guī)定大小一般使用像素(px)這個單位擒贸。比如顯示生活中我們說房子128㎡那這兒的單位是平方米，在開發(fā)中需要更加精準(zhǔn)的大小就是px像素觉渴。像素就非常精細(xì)了因為在我們顯示屏幕中像素是最小的顯示單元介劫。這個道理如果不懂的話就找個LED屏幕仔細(xì)看，LED屏幕上一個一個的發(fā)光二極管可以想象為像素案淋。

px為單位導(dǎo)致的問題

我們知道手機(jī)屏幕有大有小座韵，就拿iPhone來說，iPhone 6 plus比iPhone 5要大踢京。那么就說明plus的像素比5要多誉碴。對比：
iPhone 6 plus和iPhone5的尺寸對比

加入有一個160px寬度的紅色矩形在這兩種手機(jī)中的位置如下：

*那么rpx的特殊之處在哪兒呢？

rpx（responsive pixel）可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)瓣距。如何自適應(yīng)呢黔帕？看下邊的分析：
不管一個屏幕有多寬我們可以對屏幕平均分配吧。既然iPhone 6 plus寬度為414px蹈丸，iPhone 5的寬度為320px成黄。如果創(chuàng)建一個寬度為160px的矩形那么在iPhone 5 中占有一半的寬度，但是在iPhone 6 plus中不足一半逻杖，在手機(jī)顯示中不是很好看奋岁。那么我們不管屏幕多寬都給他分750份。那么在iPhone 6 plus中每一份就是414/750=0.552px 而對于iPhone 5的每一份就是320/750=0.42px荸百。那現(xiàn)在我們規(guī)定大小和位置時不使用px而使用份數(shù)來表示如何呢闻伶？比如我們規(guī)定一個紅色的矩形在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%）更鲁。也就是在兩個不同尺寸的屏幕上當(dāng)以份數(shù)來規(guī)定是占有的比例是差不多的霎箍。而這個份數(shù)就是rpx*

看下圖：

g

樣式導(dǎo)入
在模塊化開發(fā)中我們有時候不得不在頁面中使用其他的第三方庫的樣式，而第三方庫的樣式是保存在第三方包中的澡为，我們不可能全部復(fù)制到我們的.acss文件中漂坏，那最好的辦法就是導(dǎo)入了。在樣式表中導(dǎo)入其他外聯(lián)樣式表媒至。

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

當(dāng)然仍舊支持內(nèi)聯(lián)樣式和class屬性制定樣式類顶别，如

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

選擇器

選擇器和css3的保持一致。一般有class=”test”類選擇器和id=”test”的id選擇器拒啰。當(dāng)然在支付寶小程序的樣式中特殊的地方就是： ※ .a- 或者 .am-為前綴的選擇器已經(jīng)被系統(tǒng)占用所以不要使用驯绎； ※ 不能使用屬性選擇器，例如,以下寫法不被支持：

//這種選擇器不被支持
input[name="title"]{
    color: test;
}

全局樣式與局部樣式

在項目結(jié)構(gòu)講解時我們已經(jīng)說過在項目根目錄下有一個app.acss文件這個樣式文件中定義的樣式在任何一個頁面中都可以直接使用谋旦。

頁面容器的樣式

我之前說過小程序開發(fā)的應(yīng)用單元為頁面剩失。其實我們在.axml中寫的頁面并不包含頁面容器屈尼，就相當(dāng)于我們做一個頁面但是body標(biāo)簽不用寫那如果我們要改變整個頁面的背景怎么辦呢?其實有一個固定的選擇器。例如：可以通過 page 元素選擇器來設(shè)置頁面容器的樣式拴孤，比如頁面背景色:

page {
  background-color: red;
}

在你想改變頁面容器的頁面中定義該樣式也可以脾歧，全局定義也可以，例如我想將test這個頁面的頁面容器背景設(shè)置為藍(lán)色演熟，就可以再pages目錄下的test目錄下找到test.acss在其中定義page的樣式