位置:电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序样式基础
框模型
定位
选择器
当前阅读教程:微信小程序设计教程 > 小程序中样式的几种写法
阅读(22555525)      收藏       赞(5685)      分享
上一篇: Web中样式的几种写法 下一篇: 背景颜色

小程序中样式的几种写法

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

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所示

image.png

上一篇: Web中样式的几种写法 下一篇: 背景颜色
毕业设计网             广告联系QQ:45157718(微信同号)