小程序中样式的几种写法

微信小程序中如何插入样式表。当读到一个样式表时，小程序会根据样式来格式化显示页面。插入样式表的方法有三种：

第1种：默认微信小程序每个程序对应有个.wxss文件，样式直接写在该文件即可。

       第2种：直接在WXML组件里面写样式（类似Web中的内联样式写法）。

       第3种：样式写在外部.wxss文件中，在默认小程序对应的.wxss文件中引用。

       我们这里在根目录下的style文件下定义了一个自定义样式文件mycss.wxss，.wxss文件代码示例

小白教程网www.2d5.net

.mytext03{
  color: green;
}

       .wxml文件代码示例

小白教程网www.2d5.net

<view>
  <text>文本内容1</text>  <!--第1种样式定义：小程序默认样式写法-->
  <text style='color:blue;'>文本内容2</text><!--第2种样式定义：样式写在组件里-->
  <text>文本内容3</text><!--第3种样式定义：外部定义样式，然后引用-->
</view>

.wxss文件代码示例

小白教程网www.2d5.net

@import '/style/mycss.wxss'; /* 第3种样式定义：外部定义样式，然后引用 */
.mytext01{ 
  color: red; /* 第1种样式定义：小程序默认样式写法*/
}

效果如图3-5所示。