微信小程序10（wxss-样式导入内联样式选择器全局样式与局部样式）

Posted 2021-08-28 晨沉宸辰

wxss-样式导入、内联样式、选择器、全局样式与局部样式

• 一、样式导入
• 二、内联样式
• • 1.讲解
  • 2.例子
• 三、选择器
• 四、全局样式与局部样式

一、样式导入

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

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

例子：
创建于pages同级的文件夹stylues，在该文件里创建box.wxss

.lg_box{
  width: 200px;
  height: 200px;
  background-color: aqua;
  font-size:50px;
  color:blue;
}

wxml文件

<view class="lg_box">
   index7
</view>

wxss文件

/*导入功能*/
@import  "../../stylues/box.wxss"

二、内联样式

1.讲解

框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style
  中，以免影响渲染速度。

<view style="color:{{color}};" />

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

<view class="normal_view" />

2.例子

wxss文件

.box{
  width: 50px;
  height: 50px; /*背景大小*/
  background-color: pink; /*背景颜色*/
 
  font-size:50px; /*字体大小*/
  color:blue; /*字体颜色*/
}

js文件

data: {
    mycolor:"red",
    myclass:"box"

  },

wxml文件

<view style="background-color:yellow;color:{{mycolor}}">
 style
</view>
<view class="{{myclass}}">
class
</view>

三、选择器

目前支持的选择器有：

四、全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
app.wxss\\

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}
view{ 
  font-size:100px;
}
  

全局变量重新定义了字体大小，那么只要局部变量没有定义，那么就按照全局的，若是定义了就按照局部的