小程序/网页页面的样式书写以及样式选择器的区分

页面样式方式

1. 内联样式

   在WXML文件当中可使用style直接设置组件的样式

   （1）Style：用于接收动态的样式，在运行时会进行解析，静态的样式统一写到class中，要尽量避免将静态的样式写进style 中，以免影响渲染速度，style 属性示例代码如下：

   <view style="color:red;" /> //静态的样式写进style, 尽量避免使用
   <view style="color:{{color}}" />//动态获取
   

   （2）class：用于指定样式规则，其属性值是样式规则中类选择器名（样式类名）的集合，样式类名不需要带上“.”，样式类名之间用空格分隔。

   <view class="normal_view" />
   

2. 外部样式

   外部样式具有两类：自动引入和样式导入

   （1）自动引入

   在小程序目录结构中，page文件夹中的wxss为局部样式，只作用于对应的页面当中。

   app.wxss文件中的样式为全局样式，会作用于所有页面当中具有相同选择器的组件，

   当局部样式出现与全局样式同名的选择器时，局部样式会覆盖掉全局变量中的选择器

   （2）样式导入

   使用@import语句可以将其他路径中的WXSS文件引入到当前文件中使用，@import后面需要注明外联样式表的相对路径，用’;'符号表示语句结束

选择器的区分

1. 标签选择器：

   直接标签名，同类标签都会应用该样式

   给标签设置样式，会自动指向该标签，

   语法：标签选择器名{属性：属性值；}。

2. 类别选择器：

   给一类标签设置样式。

   语法：.类选择器名{属性：属性值；}

   选择器的名称是用户自定义的，名称可以醒目具有意义，页面中一旦设置了类别选择器，页面中该标签都具有相同的样式

3. id选择器：

   给特定的标签设置样式，

   语法：#选择器名{属性：属性值；}

   选择器的名称可以醒目具有意义