微信小程序day01_06之wxss 样式文件的使用

迷南。 2022-03-15 15:08 302阅读 0赞

### 文章目录 ###

*   *   *  一. 样式导入
         *  二. 内联样式
         *  三. 选择器

本节代码地址 [https://gitee.com/jaythc/wxxcx\_learen/tree/master/day01/day01\_06/my-first-demo][https_gitee.com_jaythc_wxxcx_learen_tree_master_day01_day01_06_my-first-demo]

### 一. 样式导入 ###

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

例如新建立一个out.wxss, 其中的内容如下  
![20190303173931251.png][]

.txt-left { 
      margin-left: 500rpx;
    }

那么在index.wxss中,只需使用@import 即可导入, 如下所示

@import "out.wxss";

在index.wxml中, 使用class进行使用样式即可

<text class='txt-left'>{
       {mytext}}</text>

### 二. 内联样式 ###

style：静态的样式统一写到 class 中。style 接收动态的样式(通过数据动态绑定获取样式 )，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。  
例如在wxml中写如下的代码

<view class="container">
        <text class='txt-left' style="color:{ { color}};">{
       {mytext}}</text>
    </view>

其中color为动态绑定的, 在index.js中进行color的赋值

Page({ 
      // data为数据绑定
      data: { 
        mytext: '第一个demo',
        color: "red"
      }
    })

效果如下, 字体变为红色的了.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]

### 三. 选择器 ###

根据微信官方的文档,支持如下的选择器, 其中前两个比较常用. 分别为类选择器和id选择器.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
类选择器在上面的示例中,已经展现了, 用.class  
下面示例id 选择器  
在out.wxss 中, 使用`#txt-left` 来进行样式的定义

#txt-left { 
      margin-left: 200rpx;
    }

在index.wxml中的使用如下, 使用`id='txt-left'`, 来选择id为txt-left的内容  
`<text id='txt-left' style="color:{ {color}};">{ {mytext}}</text>`

*  关于全局样式与局部样式  
    定义在 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;
    } 
    #txt-left { 
      margin-left: 600rpx;
    }

在out.wxss中也定义了如下的样式

#txt-left { 
      margin-left: 600rpx;
    }

那么实际起作用的是out.wxss中定义的样式.

[https_gitee.com_jaythc_wxxcx_learen_tree_master_day01_day01_06_my-first-demo]: https://gitee.com/jaythc/wxxcx_learen/tree/master/day01/day01_06/my-first-demo
[20190303173931251.png]: /images/20220315/3b76775ed2c54326a7fc73474390976d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220315/ddfddcbe03e64731843b6cd537e69251.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220315/3317f20dec7c4c189495dbfdfa18ce3e.png