這次接著上一次的寫，上一篇文章說(shuō)的是 從0寫一個(gè)hello world。如果你還沒(méi)看，那你趕緊去看看《微信小程序教程入門篇-(1)：10分鐘從0開(kāi)始寫一個(gè)hello-world-極其詳細(xì)》，當(dāng)然了，如果你是個(gè)大牛，當(dāng)我沒(méi)說(shuō)。

本篇文章會(huì)設(shè)計(jì)到少量的html知識(shí)和大量的css知識(shí)，如果你不擅長(zhǎng)html沒(méi)關(guān)系，但是一定要懂css，不然看著就要蒙圈了。所以本文適合有一定css基礎(chǔ)的人，如果你實(shí)在不會(huì)css，也可以先看完這篇文章，并且按照我說(shuō)的一行一行代碼寫完，也是可以出來(lái)和我一樣的效果的。然后在去一行一行的研究css代碼的意思。一定要研究css的知識(shí)，理解每一句的意思，如果只是照葫蘆畫瓢，那不是一個(gè)開(kāi)發(fā)工程師應(yīng)該有的態(tài)度。我們要弄明白一切。如果是對(duì)小程序開(kāi)發(fā)流程有興趣的人當(dāng)然也可以看看，只有好處沒(méi)有壞處。

熊熊依然開(kāi)門見(jiàn)山，開(kāi)整。。。。

先來(lái)看看我們上次hello world的界面

圖1：

干巴巴的hello world實(shí)在是太難看了，看著不爽，我需要把hello world幾個(gè)字變成大紅色。

怎么弄，我教你啊：

1、小程序樣式的修改先講兩種方法：第一種是利用class屬性，第二種是利用id屬性。

先說(shuō)說(shuō)利用class屬性(熊熊喜歡class，所以先說(shuō)它)。先把index.wxml里面原來(lái)的代碼改成如下：

<text class="red">hello world</text>

那個(gè)“class”就是屬性名字，不可更改，必須是“class”,“class=”等號(hào)后邊，雙引號(hào)里面是class的值，也叫樣式名，這個(gè)隨便起，不過(guò)建議大家根據(jù)你想讓它變成的樣式來(lái)起名，比如你想讓他變成紅色，可以起名red，你想讓他加粗，起名可以是bold等。這個(gè)是個(gè)很好的開(kāi)發(fā)習(xí)慣，別隨意。class屬性是寫在標(biāo)簽內(nèi)部的，什么是標(biāo)簽？標(biāo)簽，在本例中就是text，標(biāo)簽都是由<>包起來(lái)的。屬性就寫在<>里面。詳細(xì)的請(qǐng)看：http://doc.pietian.com/?id=113

好了，index.wxml頁(yè)面的代碼就改完了，然并卵，顯示還是黑色，沒(méi)有變紅色啊

圖2：

這個(gè)，當(dāng)然的啦！我們上面只是定義了class的值也就是樣式名，還沒(méi)有給這個(gè)值指定要改變的內(nèi)容呢。那接下來(lái)就開(kāi)始給這個(gè)值定義樣式的具體內(nèi)容，樣式的內(nèi)容在index.wxss編寫。打開(kāi)index.wxss，在頁(yè)面下寫下如下代碼：

.red{

color:red;

}

解釋下這段代碼，我們?cè)趇ndex.wxml編寫了class的值為red，在index.wxss中編寫了red的樣式內(nèi)容，小程序規(guī)定，如果是class，那么在index.wxss中編寫樣式的內(nèi)容時(shí)，樣式名（class的值）前面就必須帶有“.”,不要問(wèn)為什么，這是小程序的龜腚，龜腚，龜腚?。?！所以這里需要寫“.red”,小程序還龜腚，所有的具體樣式的代碼必須寫在“{}”里面，每一行樣式寫完以后必須用“;”結(jié)尾。這些都是龜腚！記住就行！“color:red”的意思“顏色:紅色”，能明白么，不明白的下面評(píng)論留言吧??！如果你覺(jué)得只是變紅色不過(guò)癮，還想要字體變大，變粗，居中等其他的更加多的一些配置項(xiàng)，那你可以看看這里：http://www.w3school.com.cn/cssref/index.asp，這里是css的一些配置項(xiàng)，講的很詳細(xì)（小程序還是支持95%的css屬性的）。

現(xiàn)在再看看是不是已經(jīng)有了顏色，艾瑪呀，這么簡(jiǎn)單的知識(shí)居然寫了這么多字。。。。也是操心操碎了呢?。?/p>

圖3：

接著說(shuō)說(shuō)id屬性，先看看index.wxml改完以后的源碼：

<text id="red">hello world</text>

看到?jīng)]，就只把class改成id就行了，id屬性的值還是可以隨便取的，但是請(qǐng)不要這樣做，取名字也要出于邏輯，這是個(gè)好習(xí)慣。好了，跟class一樣，只改wxml頁(yè)面是沒(méi)有用的，我們也要修改index.wxss頁(yè)面。上面說(shuō)了，再修改index.wxss頁(yè)面時(shí)，如果時(shí)class指定的樣式名，前面用“.”，那如果是id指定的樣式名呢，就肯定不能用“.”了，微信小程序龜腚，我們要用“#”。嗯哼，就是醬紫了，其他的規(guī)則的一樣，直接看代碼吧：

#red{

color:red;

}

圖4：

還是紅色，有木有?。。?！

其實(shí)除了class和id以外還有一個(gè)也可以編輯標(biāo)簽的樣式，那就是利用標(biāo)簽本身，本案例的標(biāo)簽是text，我們可以不指定class和id也可以修改hello world為紅色，怎么做呢？看下面嘍

去掉class和id，回歸最原始的內(nèi)容，index.wxml代碼如下：

<text>hello world</text>

index.wxss的代碼如下：

text{

color:red;

}

如果修改text的樣式，在index.wxss頁(yè)面中只寫標(biāo)簽名字就行，不要加任何的前綴。“.”“#”統(tǒng)統(tǒng)的不要，不要的?。。∵@樣寫的話，頁(yè)面中所有的該標(biāo)簽的樣式都會(huì)改變。啥也不說(shuō)了，看圖：

圖5：

圖6：

這是三個(gè)常用的樣式設(shè)置的方法，那么你現(xiàn)在是不是產(chǎn)生了一個(gè)大的疑問(wèn)，如果我三個(gè)都設(shè)置了，那么標(biāo)簽會(huì)按照哪個(gè)顯示呢，好的，那就讓我們看看：index.wxml代碼如下：

<text class="green" id="red"><hello world/text>

我設(shè)置了hello world的class的值為green，id的值為red。

index.wxss的代碼如下：

text{

color:blue;

}

.green{

color:green;

}

#red{

color:red

}

如果按照標(biāo)簽本身設(shè)置的樣式顯示，那么hello world就應(yīng)該是藍(lán)色，如果按照class設(shè)置的樣式顯示，那么hello world就應(yīng)該是綠色，如果按照id設(shè)置的樣式顯示那么hello world就應(yīng)該是紅色。啥也不說(shuō)了，實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)，看結(jié)果：

圖7：

還是紅色的，說(shuō)明按照id設(shè)置的樣式顯示的。也就是說(shuō)三個(gè)都存在的時(shí)候，id設(shè)置的樣式優(yōu)先級(jí)最高。如果我把id去掉，也就是說(shuō)index.wxml的代碼變成了如下：

<text class="green">hello world</text>

index.wxss代碼不變，我們?cè)賮?lái)看看顯示什么顏色：

圖8：

顯示的是綠色的，也就是說(shuō)沒(méi)有id的情況下，會(huì)按照class設(shè)置的樣式顯示。這也就得出了一個(gè)結(jié)論：

標(biāo)簽樣式的優(yōu)先級(jí)是 id(#) > class(.) > 標(biāo)簽

這個(gè)跟css的優(yōu)先級(jí)是一樣的。但是，微信小程序是沒(méi)有嵌入樣式的（什么是嵌入樣式？不懂就算了，微信小程序也用不著，html才有的）。

當(dāng)然了，微信小程序還支持其他三種選擇方法，本文是入門篇暫時(shí)先略過(guò)，剩下的等我出高級(jí)篇再說(shuō)嘍。不過(guò)你們也可以先看看：http://doc.pietian.com/?id=173，有興趣的自己鉆研下??！

2、好了，講了這么多基礎(chǔ)知識(shí)，現(xiàn)在說(shuō)點(diǎn)理論的。小程序的每個(gè)頁(yè)面的結(jié)構(gòu)布局和樣式（比如字體顏色，下劃線，字體大小，圖片大小等）分別由該頁(yè)面所屬的子文件夾的*.wxml和*.wxss控制。而且每個(gè)頁(yè)面只能訪問(wèn)自己的wxml和wxss文件，不能跨頁(yè)面訪問(wèn)。如果小程序內(nèi)的頁(yè)面需要用一些公共的樣式，那么這些公共的樣式代碼可以在app.wxss中編寫。

比如，我們把剛剛在index.wxss中的寫的代碼，全部拷貝到app.wxss中，把index.wxss清空，然后index.html不變

如圖9:

頁(yè)面顯示 hello world還是綠色，也就是說(shuō)index.wxml自動(dòng)加載了app.wxss的樣式。微信小程序運(yùn)行的時(shí)候，會(huì)首先獲取當(dāng)前頁(yè)面下的.wxss頁(yè)面內(nèi)容，再獲取app.wxss頁(yè)面的內(nèi)容，而且當(dāng)前頁(yè)面下的.wxss的樣式的優(yōu)先級(jí)比app.wxss的高。見(jiàn)：http://doc.pietian.com/?id=173最下面部分。

圖10：

比如，index.wxss定義了text標(biāo)簽的顏色為red，app.wxss定義了標(biāo)簽的顏色為藍(lán)色，那么頁(yè)面會(huì)首先使用index.wxss中的顏色設(shè)置。

index.wxss代碼：

text{

color:red;

}

app.wxss代碼：

text{

color:blue;

}

最終顯示：

圖11：

顯然優(yōu)先級(jí)要變成：

標(biāo)簽樣式的優(yōu)先級(jí)是：單獨(dú)頁(yè)面的id(#)樣式 >單獨(dú)頁(yè)面的class(.) 樣式>單獨(dú)頁(yè)面的標(biāo)簽樣式 > app.wxss中的標(biāo)簽樣式

好吧，看到這，不知道你們蒙不蒙，如果蒙就別看了，上面的知識(shí)足夠用了，如果不蒙的話繼續(xù)。

那單獨(dú)頁(yè)面的標(biāo)簽樣式，和app.wxss中的class樣式，哪個(gè)的優(yōu)先級(jí)高呢？尼瑪，怎么會(huì)有這么多問(wèn)題，不管了先解決了，做實(shí)驗(yàn)啦！

比如index.wxml中的代碼為：

<text class="green">hello world<text>

index.wxss的樣式為：

text{

color:red;

}

如果app.wxss不定義樣式，那么很明顯，hello world的顏色會(huì)是紅色。但是我們就是有困難要上，沒(méi)有困難創(chuàng)造困難也要上，這說(shuō)明什么呢？說(shuō)明熊熊我很作死，不管啦，接下來(lái)制造困難啦！

如果app.wxss中的代碼是這樣的：

.green{

color:green;

}

那么會(huì)怎么顯示呢，不賣關(guān)子，上圖12：

顯示是綠色的，這說(shuō)明app.wxss中的class的樣式比index.wxss的標(biāo)簽樣式的優(yōu)先級(jí)要高。好了，同理，那么app.wxss中的id的樣式比index.wxss中的class樣式的優(yōu)先級(jí)要高。那么我們最終再豐富下我們的結(jié)論嘍！

標(biāo)簽樣式的優(yōu)先級(jí)是：單獨(dú)頁(yè)面的id(#)樣式 >app.wxss中的id(#)樣式 >單獨(dú)頁(yè)面的class(.)樣式>app.wxss中的class(.)樣式 >單獨(dú)頁(yè)面的標(biāo)簽樣式 > app.wxss中的標(biāo)簽樣式

 

好啦，今天給hello world不少顏色了，先讓它歇歇，下次教程，饒了hello wolrd 帶大家高仿一個(gè)手機(jī)版的html頁(yè)面，就這樣了啦?。?！最后給大家個(gè)彩蛋：

*.wxml文件中可以編寫任何自定義的標(biāo)簽，而且都可以編譯，不會(huì)有任何問(wèn)題，也不知道這是微信開(kāi)發(fā)工具bug還是微信刻意為之，我發(fā)現(xiàn)以后覺(jué)得還挺驚喜的，不過(guò)我已經(jīng)把這個(gè)情況反饋給微信官方了。不過(guò)畢竟也不會(huì)影響程序運(yùn)行，就拿來(lái)玩玩也挺好，給你們看圖：