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

Posted 晨沉宸辰

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序10(wxss-样式导入内联样式选择器全局样式与局部样式)相关的知识,希望对你有一定的参考价值。

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

一、样式导入

使用@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;
}
  

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

以上是关于微信小程序10(wxss-样式导入内联样式选择器全局样式与局部样式)的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序学习-样式

微信小程序9(wxss)

微信小程序-WXSS

小北微信小程序之小白教程系列之 -- 样式(WXSS)

微信小程序-WXSS

wxss解析