一、前言
前面我們講到了小程序的組件聪蘸，簡(jiǎn)直是花樣多多辛润，不過(guò)光有組件可不行，我們還得讓組件更加的有魅力并且還能讓組件處于不同的位置什么時(shí)候出現(xiàn)崎场，這些都是需要我們通過(guò)樣式來(lái)實(shí)現(xiàn)的佩耳。
二、全局樣式
顧名思義谭跨，可以在全局中使用干厚，要想聲明在全局都可以使用的樣式，那就要求我們必須在app.wxss中聲明一些樣式饺蚊，如圖：
然后再在模板文件中引入該類名萍诱，如圖：
可以看到，此時(shí)就已經(jīng)將全局樣式應(yīng)用到該文本組件中了污呼。
三、頁(yè)面樣式
也就是我們經(jīng)常提到的局部樣式包竹，它只作用于該文件夾中的模板文件燕酷，也就是該文件夾中的一個(gè)個(gè)組件中，如果用在其它地方的話周瞎，那是沒(méi)有效果的苗缩。首先我們?cè)谠撃０逦募袑懭霕邮剑鐖D：
然后我們?cè)僭谌謽邮轿募袑懸粋€(gè)一模一樣的類名声诸，如圖：
此時(shí)我們?cè)賮?lái)將該樣式應(yīng)用到文本組件中酱讶，如圖：
可以看到，此時(shí)的全局樣式就失效了彼乌，當(dāng)有局部樣式的時(shí)候一切以局部樣式為主泻肯。
四、導(dǎo)入樣式
我們可以將樣式寫入一個(gè)文件慰照，然后導(dǎo)入到局部樣式文件中灶挟，如圖：
接下來(lái)就可以使用了，如圖：
五毒租、內(nèi)聯(lián)樣式
還可以直接在組件中寫樣式稚铣，如下：
這里其實(shí)用到的就是我們之前在組件那篇文章中提到的數(shù)據(jù)綁定。
六、選擇器
既然有樣式肯定要有選擇器惕医，選擇器能夠幫助我們精準(zhǔn)定位一些組件并給他們賦予更多精美的樣式耕漱，如下：
| 選擇器 | 樣例 | 樣例描述 |
|---|---|---|
| .class | .aa |
選擇所有擁有 class="aa"的組件 |
| #id | #aa |
選擇擁有 id="aa" 的組件 |
| element | view |
選擇所有 view 組件 |
| element, element | view, text |
選擇所有文檔的 view 組件和所有的text 組件 |
| ::after | view::after |
在 view 組件后邊插入內(nèi)容 |
| ::before | view::before |
在 view 組件前邊插入內(nèi)容 |
七、總結(jié)
微信小程序中的樣式使用方法也比較多抬伺，多寫寫就沒(méi)什么問(wèn)題孤个，下篇文章我們將繼續(xù)講解關(guān)于微信小程序中的各種事件。更多精彩內(nèi)容敬請(qǐng)關(guān)注公眾號(hào)"簡(jiǎn)易編程網(wǎng)"沛简。
