微信小程序零基础入门--->wxss样式

用户5899361

发布于 2020-12-07 15:17:29

1.3K0

发布于 2020-12-07 15:17:29

文章被收录于专栏：学习java的小白

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

具体详情请查看官方文档：官方文档入口

wxml

<!--
1、样式不需要引入，小程序会自己引入
2、需要把页面中的某些元素单位由px换成rpx
-->
<view>
测试自适应大小
</view>

wxss

view{
  width:200rpx;
  height: 200rpx;
  font-size: 40rpx;
  background-color: blue;
 
}

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

wxml

<!--
1、样式不需要引入，小程序会自己引入
2、需要把页面中的某些元素单位由px换成rpx
-->
<view>
测试自适应大小
</view>

本页面的 wxss,引号中是相对路径

@import"../../style/comm.wxss";

公共部分的wxss

view{
  width:200rpx;
  height: 200rpx;
  font-size: 40rpx;
  background-color: blue;
 
}

注意：在小程序中不支持通配符*，这里和css中有差距

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容