页面样式方式
-
内联样式
在WXML文件当中可使用style直接设置组件的样式
(1)Style:用于接收动态的样式,在运行时会进行解析,静态的样式统一写到class中,要尽量避免将静态的样式写进style 中,以免影响渲染速度,style 属性示例代码如下:
<view style="color:red;" /> //静态的样式写进style, 尽量避免使用 <view style="color:{{color}}" />//动态获取
(2)class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上“.”,样式类名之间用空格分隔。
<view class="normal_view" />
-
外部样式
外部样式具有两类:自动引入和样式导入
(1)自动引入
在小程序目录结构中,page文件夹中的wxss为局部样式,只作用于对应的页面当中。
app.wxss文件中的样式为全局样式,会作用于所有页面当中具有相同选择器的组件,
当局部样式出现与全局样式同名的选择器时,局部样式会覆盖掉全局变量中的选择器
(2)样式导入
使用@import语句可以将其他路径中的WXSS文件引入到当前文件中使用,@import后面需要注明外联样式表的相对路径,用’;'符号表示语句结束
选择器的区分
-
标签选择器:
直接标签名,同类标签都会应用该样式
给标签设置样式,会自动指向该标签,
语法:标签选择器名{属性:属性值;}。
-
类别选择器:
给一类标签设置样式。
语法:.类选择器名{属性:属性值;}
选择器的名称是用户自定义的,名称可以醒目具有意义,页面中一旦设置了类别选择器,页面中该标签都具有相同的样式
-
id选择器:
给特定的标签设置样式,
语法:#选择器名{属性:属性值;}
选择器的名称可以醒目具有意义