主讲人：谭丽君2.4微信小程序WXSS微信小程序开发
2.4微信小程序wxss
全局样式app.wxss对当前小程序的所有页面样式生效。页面样式:文件名.wxss对当前页面样式生效。例如index.wxss12
选择器{样式属性名：属性值；样式属性名：属性值；...}
2.4.1WXSS的基本语法
WXSS是样式语言，用于描述WXML的组件样式.WXSS的语法格式选择器就是要设置样式的元素。
.yw{width:300rpx;height:100rpx;background:red;}示例：给class类名为yw的组件，设置样式:宽度300rpx、高度100rpx、背景色为红色。view?class=yw语文成绩/viewview数学成绩/viewview英语成绩/viewindex.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.字号设置font-size格式选择器{font-size:合法的尺寸单位;}rpx（responsivepixel）单位:可以根据屏幕宽度进行自适应。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:数值;height:数值;}8.背景颜色background-color格式选择器{background-color:颜色;}
2.4.4盒子模型盒子包括：外边距(margin)+边框(border)+内边距(padding)+元素内容。内容上外边距上内边距下内边距下外边距右内边距右外边距左内边距左外边距右边框线左边框线下边框线上边框线
2.4.4盒子模型1.边框
2.4.4盒子模型2.边框圆角border-radius
2.4.4盒子模型3.padding内边距
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.两根轴：容器默认存在主轴和交叉轴。它们是垂直关系。（1）容器属性
2.4.5弹性布局(2)项目属性
2.4.5弹性布局index.wxmlindex.jsindex.wxss运行效果
2.4.6制作“景区名片”样式“景区名片”页面框架大框viewclass=card大标题框viewclass=big-title图片image内容框viewclass=content小标题框viewclass=small-title段落框viewclass=dl
2.4.6制作“景区名片”样式“景区名片”页面框架嵌套步骤一，大框对应的WXSS样式代码如下图
2.4.6制作“景区名片”样式“景区名片”页面框架嵌套步骤二，加入大标题框、图片、内容框后对应的WXSS代码如下图
2.4.6制作“景区名片”样式“景区名片”页面框架嵌套步骤三，加入小标题框和段落框后，对应的WXSS代码如下图
2.4.7制作“比较成绩”样式“比较成绩”页面框架嵌套
2.4.7制作“比较成绩”样式“比较成绩”页面框架嵌套步骤一，对应的WXSS样式代码
2.4.7制作“比较成绩”样式“比较成绩”页面框架嵌