《PHP程序設(shè)計與微信小程序案例教程》 課件2.4微信小程序代碼WXSS

主講人：譚麗君2.4微信小程序WXSS微信小程序開發(fā)

2.4

微信小程序wxss

全局樣式app.wxss對當前小程序的所有頁面樣式生效。頁面樣式:文件名.wxss

對當前頁面樣式生效。例如index.wxss12

選擇器{

樣式屬性名：屬性值；

樣式屬性名：屬性值；...}

2.4.1WXSS的基本語法

WXSS是樣式語言，用于描述WXML的組件樣式.WXSS的語法格式選擇器就是要設(shè)置樣式的元素。.yw{width:300rpx;height:100rpx;background:red;}示例：給class類名為yw的組件，設(shè)置樣式:寬度300rpx、高度100rpx、背景色為紅色。<view

class="yw">語文成績</view><view>數(shù)學成績</view><view>英語成績</view>index.wxss文件index.wxml文件12

2.4.1WXSS的基本語法

2.4.2WXSS選擇器

1.標簽選擇器格式：標簽名{樣式屬性名：屬性值;}2.類選擇器格式：.類名{樣式屬性名：屬性值;}3.id選擇器格式：#id名{樣式屬性名：屬性值;}

2.4.2WXSS選擇器

4.并集選擇器格式：選擇器1，選擇器2，...選擇器n{樣式屬性名：屬性值;}5.后代選擇器格式：祖先后代{樣式屬性名：屬性值;}

2.4.3WXSS常用樣式

1.字號設(shè)置font-size格式選擇器{font-size:合法的尺寸單位;}rpx（responsivepixel）單位:可以根據(jù)屏幕寬度進行自適應。rpx單位是wxml提出的一個新尺寸單位。2.字體加粗font-weight格式選擇器{font-weight:字體粗度值;}

2.4.3WXSS常用樣式

3.文本顏色color格式選擇器{color:顏色值;}4．行高line-height格式選擇器{line-height:值;}

2.4.3WXSS常用樣式

5．首行縮進text-indent格式：選擇器{text-indent:尺寸單位;}6.水平對齊方式text-align格式：選擇器{text-align:left|right|center|justif}使用em作為首行縮進的尺寸單位，1em就表示一個漢字的長度。

2.4.3WXSS常用樣式

7.元素的大小格式選擇器{width:數(shù)值;height:數(shù)值;}8.背景顏色background-color格式選擇器{background-color:顏色;}

2.4.4盒子模型盒子包括：外邊距(margin)+邊框(border)+內(nèi)邊距(padding)+元素內(nèi)容。內(nèi)容上外邊距上內(nèi)邊距下內(nèi)邊距下外邊距右內(nèi)邊距右外邊距左內(nèi)邊距左外邊距右邊框線左邊框線下邊框線上邊框線

2.4.4盒子模型1.邊框

2.4.4盒子模型2.邊框圓角border-radius

2.4.4盒子模型3.padding內(nèi)邊距

2.4.4盒子模型4.margin外邊距

2.4.4盒子模型5.box-shadow邊框陰影選擇器{box-shadow:h-shadowv-shadowblurspreadcolor;}

2.4.5彈性布局flex（flexiblebox）彈性布局盒模型。1.容器：使用display:flex樣式的元素，稱為flex容器。2.項目：它的所有子元素自動成為容器成員，稱為flex項目。3.兩根軸：容器默認存在主軸和交叉軸。它們是垂直關(guān)系。（1）容器屬性

2.4.5彈性布局(2)項目屬性

2.4.5彈性布局index.wxmlindex.jsindex.wxss運行效果

2.4.6制作“景區(qū)名片”樣式“景區(qū)名片”頁面框架大框<viewclass="card">大標題框<viewclass="big-title">圖片<image>內(nèi)容框<viewclass="content">小標題框<viewclass="small-title">段落框<viewclass="dl">

2.4.6制作“景區(qū)名片”樣式“景區(qū)名片”頁面框架嵌套步驟一，大框?qū)腤XSS樣式代碼如下圖

2.4.6制作“景區(qū)名片”樣式“景區(qū)名片”頁面框架嵌套步驟二，加入大標題框、圖片、內(nèi)容框后對應的WXSS代碼如下圖

2.4.6制作“景區(qū)名片”樣式“景區(qū)名片”頁面框架嵌套步驟三，加入小標題框和段落框后，對應的WXSS代碼如下圖

2.4.7制作“比較成績