微信小程序wxss設置樣式
阿新 • • 發佈：2018-01-21
lex 彈性 iphone5 through 媒體 粗體 路徑 canvas 相對路徑
對於以前搞客戶端開發的來說，有著客戶端的邏輯，就是不知道怎麽設置樣式，把對應的控件顯示出來
一、wxml
界面結構wxmL比較容易理解，主要是由八大類基礎組件構成：
| 一、視圖容器(View Container)： | 二、基礎內容(Basic Content) | ||
| 組件名 | 說明 | 組件名 | 說明 |
| view | 視圖容器 | icon | 圖標 |
| scroll-view | 可滾動視圖容器 | text | 文字 |
| swiper | 可滑動的視圖容器 | progress | 進度條 |
| 三、表單組件(Form) | 四、操作反饋組件(Interaction) | ||
| 組件名 | 說明 | 組件名 | 說明 |
| button | 按鈕 | action-sheet | 上拉菜單 |
| form | 表單 | modal | 模態彈窗 |
| input | 輸入框 | progress | 進度條 |
| checkbox | 多項選擇器 | toast | 短通知 |
| radio | 單項選擇器 | 五、導航(Navigation) | |
| picker | 列表選擇器 | 組件名 | 說明 |
| slider | 滑動選擇器 | navigator | 應用內跳轉 |
| switch | 開關選擇器 | ||
| label | 標簽 | ||
| 六、多媒體(Media) | 七、地圖(Map) | ||
| 組件名 | 說明 | 組件名 | 說明 |
| audio | 音頻 | map | 地圖 |
| image | 圖片 | ||
| video | 視頻 | ||
| 八、畫布(Canvas) | |||
| 組件名 | 說明 | ||
| canvas | 畫布 | ||
二、wxss
wxml理解起來容易，但光搭好了框架，並不能達到我們想要的界面效果，這就需要用到wxss樣式了。
wxss樣式決定了組件應該如何顯示，並在css的基礎上做了一些功能擴展，主要包括：
1.尺寸單位
rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。一般以iphone6屏幕做為視覺設計標準。
rpx 與 px單位換算如下：
| 設備 | rpx換算px (屏幕寬度/750) | px換算rpx (750/屏幕寬度) |
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx |
2.樣式導入
可以使用@import語句來導入外聯樣式表，其後面跟需要導入外聯樣式表的相對路徑，並以分號結束。
例如：
/** other.wxss **/
.appText{
margin:10px;
}
/** app.wxss **/
@import "other.wxss";
.content_text:{
margin:15px;
}
app.wxss是全局樣式，作用於每一個頁面，而page下的每一個的wxss文件只作用於當前頁面，並對全局樣式中的相同屬性會覆蓋。
對於微信小程序wxss樣式的使用來說，其實大部分都和css樣式一致，下面簡單的進行介紹一下：
| wxss樣式屬性 | ||
| 一、wxss display(顯示) | ||
| 屬性 | 說明 | |
| flex | 多欄多列布局 | flex-direction:row/column |
| inline-block | 行內塊元素 | |
| inline | 此元素會被顯示為內聯元素，元素前後沒有換行符 | |
| inline-table | 作為內聯表格來顯示（類似 <table>），表格前後沒有換行符 | |
| inline-flex | 將對象作為內聯塊級彈性伸縮盒顯示 | |
| none | 此元素不會被顯示 | |
| block | 此元素將顯示為塊級元素，此元素前後會帶有換行符 | |
| list-item | 此元素會作為列表顯示 | |
| table | 會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符 | |
| table-caption | 作為一個表格標題顯示（類似 <caption>） | |
| table-cell | 作為一個表格單元格顯示（類似 <td> 和 <th>） | |
| table-column | 作為一個單元格列顯示（類似 <col>） | |
| table-column-group | 作為一個或多個列的分組來顯示（類似 <colgroup>） | |
| table-row | 作為一個表格行顯示（類似 <tr>） | |
| table-row-group | 作為一個或多個行的分組來顯示（類似 <tbody>） | |
| table-header-group | 作為一個或多個行的分組來顯示（類似 <thead>） | |
| table-footer-group | 作為一個或多個行的分組來顯示（類似 <tfoot>） | |
| inherit | 從父元素繼承 display 屬性的值 | |
| flex:多欄多列布局 http://www.360doc.com/content/14/0811/01/2633_400926000.shtml | ||
| 二、wxss position(定位) | ||
| 屬性 | 說明 | |
| absolute | 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 | |
| relative | 生成相對定位的元素，相對於其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。 |
|
| fixed | 生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 | |
| static | 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） | |
| inherit | 規定應該從父元素繼承 position 屬性的值 | |
| 三、wxss float(浮動) | ||
| 屬性 | 說明 | |
| left | 元素向左浮動 | |
| right | 元素向右浮動 | |
| none默認值 | 元素不浮動，並會顯示在其在文本中出現的位置。 | |
| inherit | 規定應該從父元素繼承 float 屬性的值。 | |
| 四、wxss background(背景) | ||
| 屬性 | 說明 | 語法(屬性值) |
| background | 簡寫屬性，作用是將背景屬性設置在一個聲明中 | background: color position size repeat origin clip attachment image; |
| background-color | 指定要使用的背景顏色 | |
| background-position | 指定背景圖像的位置 | background-position:center |
| background-size | 指定背景圖片的大小 | background-size:80px 60px;寬度 高度 |
| background-repeat | 指定如何重復背景圖像 | repeat,repeat-x,repeat-y,no-repeat,inherit |
| background-origin | 指定背景圖像的定位區域 | padding-box 背景圖像填充框的相對位置 border-box 背景圖像邊界框的相對位置 content-box 背景圖像的相對位置的內容框 |
| background-clip | 指定背景圖像的繪畫區域 | 屬性值，同上 |
| background-attachment | 設置背景圖像是否固定或者隨著頁面的其余部分滾動。 | scroll 背景圖片隨頁面的其余部分滾動。這是默認 fixed 背景圖像是固定的 inherit 指定background-attachment的設置應該從父元素繼承 local 背景圖片隨滾動元素滾動 |
| background-image | 指定要使用的一個或多個背景圖像 | url(‘URL‘) 圖像的URL none 無圖像背景會顯示。這是默認 inherit 指定背景圖像應該從父元素繼承 |
| 五、wxss border(邊框) | ||
| 屬性 | 說明 | 語法(屬性值) |
| border | 簡寫屬性，用於把針對四個邊的屬性設置在一個聲明 | border:5px solid red; |
| border-width | 用於為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度 | border-top-width 上右下左邊框厚度 屬性值：thin medium thick length |
| border-style | 設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。 | border-top-width 上右下左邊框樣式 屬性值：solid,dashed,dotted,double等 |
| border-color | 元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色 | border-top-width 上右下左邊框顏色 |
| 六、wxss 輪廓（outline） | ||
| 屬性 | 說明 | 語法(屬性值) |
| outline | 在一個聲明中設置所有的外邊框屬性 | outline: outline-color, outline-style, outline-width |
| outline-color | 設置外邊框的顏色 | |
| outline-style | 設置外邊框的樣式。 | 屬性值：solid,dashed,dotted,double等 |
| outline-width | 設置外邊框的寬度 | 屬性值：thin medium thick length |
| 七、wxss 文本屬性（text） | ||
| 屬性 | 說明 | 語法(屬性值) |
| color | 設置文本顏色 | |
| direction | 設置文本方向。 | ltr:文本方向從左到右;rtl:文本方向從右到左 |
| letter-spacing | 設置字符間距 | |
| line-height | 設置行高 | |
| text-align | 對齊元素中的文本 | left：把文本排列到左邊。默認值，由瀏覽器決定。 right：把文本排列到右邊。 center：把文本排列到中間。 justify：實現兩端對齊文本效果。 inherit: 規定應該從父元素繼承 text-align 屬性的值。 |
| text-decoration | 向文本添加修飾 | underline 定義文本下的一條線。 overline 定義文本上的一條線。 line-through 定義穿過文本下的一條線。 blink 定義閃爍的文本。 |
| text-indent | 縮進元素中文本的首行 | |
| text-shadow | 設置文本陰影 | text-shadow: h-shadow v-shadow blur color; h-shadow:水平陰影的位置,允許負值; v-shadow:垂直陰影的位置,允許負值; blur:模糊的距離; color:陰影的顏色 |
| text-transform | 控制元素中的字母 | capitalize 文本中的每個單詞以大寫字母開頭。 uppercase 定義僅有大寫字母。 lowercase 定義無大寫字母，僅有小寫字母。 |
| unicode-bidi | 設置或返回文本是否被重寫 | |
| vertical-align | 設置元素的垂直對齊 | |
| white-space | 設置元素中空白的處理方式 | |
| word-spacing | 設置字間距 | |
| 八、wxss 字體屬性（font） | ||
| 屬性 | 說明 | 語法(屬性值) |
| font | 在一個聲明中設置所有字體屬性 | font:font-style font-variant font-weight font-size/line-height font-family(按順序) |
| font-style | 指定文本的字體樣式 | normal 默認值。瀏覽器顯示一個標準的字體樣式。 italic 瀏覽器會顯示一個斜體的字體樣式。 oblique 瀏覽器會顯示一個傾斜的字體樣式。 inherit 規定應該從父元素繼承字體樣式。 |
| font-variant | 以小型大寫字體或者正常字體顯示文本 | normal 默認值。瀏覽器會顯示一個標準的字體。 small-caps 瀏覽器會顯示小型大寫字母的字體。 inherit 規定應該從父元素繼承 font-variant 屬性的值。 |
| font-weight | 指定字體的粗細 | normal 默認值。定義標準的字符。 bold 定義粗體字符。 bolder 定義更粗的字符。 lighter 定義更細的字符。 inherit 規定應該從父元素繼承字體的粗細。 |
| font-size | 指定文本的字體大小 | smaller 把 font-size 設置為比父元素更小的尺寸。 larger 把 font-size 設置為比父元素更大的尺寸。 length 把 font-size 設置為一個固定的值。 % 把 font-size 設置為基於父元素的一個百分比值。 |
| font-family | 指定文本的字體系列 | |
| 九、wxss margin(外邊距)（margin） | ||
| 屬性 | 說明 | 語法(屬性值) |
| margin | 在一個聲明中設置所有外邊距屬性。 | margin:10px 5px 15px 20px;(上邊距，右邊距，下邊距，左邊距) |
| margin-top | 設置元素的上外邊距。 | |
| margin-right | 設置元素的右外邊距。 | |
| margin-bottom | 設置元素的下外邊距。 | |
| margin-left | 設置元素的左外邊距 | |
| 十、wxss padding(填充)（padding） | ||
| 屬性 | 說明 | 語法(屬性值) |
| padding | 使用縮寫屬性設置在一個聲明中的所有填充屬性 | padding:10px 5px 15px 20px;(上填充，右填充，下填充，左填充) |
| padding-top | 設置元素的頂部填充。 | |
| padding-right | 設置元素的右部填充 | |
| padding-bottom | 設置元素的底部填充 | |
| padding-left | 設置元素的左部填充 | |
| 十一、wxss 選擇器 | ||
| 選擇器 | 樣例 | 樣例描述 |
| .class(類選擇器) | .intro | 選擇所有擁有class="intro"的組件 |
| #id(id選擇器) | #firstname | 選擇擁有id="firstname"的組件 |
| element | view | 選擇所有view組件 |
| element, element | view checkbox | 選擇所有文檔的view組件和所有的checkbox組件 |
| ::after | view::after | 在view組件後邊插入內容 |
| ::before | view::before | 在view組件前邊插入內容 |
參考自：https://www.cnblogs.com/yang-shuai/p/6899430.html
微信小程序wxss設置樣式