微信小程序----wxss設置樣式

1、wxml

界面結構wxmL比較容易理解，主要是由八大類基礎組件構成：

1、視圖容器(View Container)：		2、基礎內容(Basic Content)
組件名	說明	組件名	說明
view	視圖容器	icon	圖標
scroll-view	可滾動視圖容器	text	文字
swiper	可滑動的視圖容器	progress	進度條
3、表單組件(Form)		4、操做反饋組件(Interaction)
組件名	說明	組件名	說明
button	按鈕	action-sheet	上拉菜單
form	表單	modal	模態彈窗
input	輸入框	progress	進度條
checkbox	多項選擇器	toast	短通知
radio	單項選擇器	5、導航(Navigation)
picker	列表選擇器	組件名	說明
slider	滑動選擇器	navigator	應用內跳轉
switch	開關選擇器
label	標籤
6、多媒體(Media)		7、地圖(Map)
組件名	說明	組件名	說明
audio	音頻	map	地圖
image	圖片
video	視頻
8、畫布(Canvas)
組件名	說明
canvas	畫布

 

 

關於屬性和具體用法可參考如下參考文獻連接：

http://www.w3cschool.cn/weixinapp/itz51q8o.html

https://mp.weixin.qq.com/debug/wxadoc/dev/component/

2、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樣式屬性
1、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

 

 

2、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 屬性的值

 

 

3、wxss float(浮動)
屬性	說明
left	元素向左浮動
right	元素向右浮動
none默認值	元素不浮動，並會顯示在其在文本中出現的位置。
inherit	規定應該從父元素繼承 float 屬性的值。

 

 

 

4、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 指定背景圖像應該從父元素繼承

 

 

5、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 上右下左邊框顏色

 

 

 

6、wxss 輪廓（outline）
屬性	說明	語法(屬性值)
outline	在一個聲明中設置全部的外邊框屬性	outline: outline-color, outline-style, outline-width
outline-color	設置外邊框的顏色
outline-style	設置外邊框的樣式。	屬性值：solid,dashed,dotted,double等
outline-width	設置外邊框的寬度	屬性值：thin medium thick length

 

 

 

7、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	設置字間距

 

 

 

8、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	指定文本的字體系列

 

 

 

9、wxss margin(外邊距)（margin）
屬性	說明	語法(屬性值)
margin	在一個聲明中設置全部外邊距屬性。	margin:10px 5px 15px 20px;(上邊距，右邊距，下邊距，左邊距)
margin-top	設置元素的上外邊距。
margin-right	設置元素的右外邊距。
margin-bottom	設置元素的下外邊距。
margin-left	設置元素的左外邊距

 

 

 

10、wxss padding(填充)（padding）
屬性	說明	語法(屬性值)
padding	使用縮寫屬性設置在一個聲明中的全部填充屬性	padding:10px 5px 15px 20px;(上填充，右填充，下填充，左填充)
padding-top	設置元素的頂部填充。
padding-right	設置元素的右部填充
padding-bottom	設置元素的底部填充
padding-left	設置元素的左部填充

 

 

 

 

11、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組件前邊插入內容

 

 但願能夠幫到你！