《微信小程序开发实战》学习笔记Chapter03 wxss样式

Chapter03 wxss页面样式

wxss（weixin style sheets）是一套样式语言，用于描述wxml的组件样式。

1. 尺寸单位

rpx(responsive pixel)：根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

//第一步，在页面文件中定义一个box
<!--pages/index2/index2.wxml-->
<view class="box1">
    box1
</view>
​
//第二步，在样式文件中设置box的样式
/* pages/index2/index2.wxss */
.box1{
    width:750rpx;
    height:200rpx;
    font-size: 150rpx;
    background-color: bisque;
}

效果图如下：

2. 样式导入

将box.wxss的样式引入index2中。

//第一步，新增一个样式文件夹styles，新建box.wxss文件，并定义样式。
.lg_box{
    width: 200px;
    height: 200px;
    background-color: aqua;
    font-size: 60px;
    color: aliceblue;
}
​
//第二步，回到index2的.wxml文件中，新建一个view定义样式lg_box。
<view class="lg_box">
    box2    
</view>
​
//第三步，在index2的.wxss文件中，引入样式。
@import "../../stylues/box.wxss";
​
/*注意：.wxss样式文件中的注释，只能使用多行注释*/   

效果图如下：

3. 内联样式

支持style、class属性来控制组件的样式。

// pages/index3/index3.js
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    mycolor:"blue",
    myclass:"box"
  },
​
/* pages/index3/index3.wxss */
.box{
    width: 50px;
    height:auto;
    background-color: blueviolet;
}
​
<!--pages/index3/index3.wxml-->
<view style="background-color: yellow;color:{{mycolor}}">
    style
</view>
​
<view class="{{myclass}}">
    class
</view>

效果图如下：

4. 选择器

选择器是用来选择页面元素给其添加样式。

选择器	示例	说明
.class	.container	选择所有class="container"的组件
#id	#id	选择id="#id"的组件
element	view	选择所有view组件
element, element	view, text	选择所有view组件和所有text组件
::after	view::after	在view组件内的后面插入内容
::before	view::before	在view组件内的前面插入内容

补充：

在CSS中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。 选择器的定义格式： 选择器名称{ 属性1名称：属性1值； 属性2名称：属性2值； … }

5. 全局样式与局部样式

全局样式：定义在app.wxss中的样式，作用于每一个页面。

/**app.wxss**/
/***定义所有view的字体样式***/
view{
  font-style: italic;
}

效果如下图：

局部样式：定义在page的.wxss中的样式，只作用于对应的页面，并覆盖app.wxss中相同的选择器。