微信小程序开发框架——WXSS(二)

时间:2024-04-01 18:39:56


    一、外联样式引入

    1.WXSS除了支持响应式的像素、还支持外联样式的导入。外联样式通过@import标志符来引入的,外联样式好处、当我们不 同页面内具有相同样式的元素时可以把,

    相同样式的元素处理成外联样式文件,以减少文件资源的大小。

    2.如何用@import引入外联样式文件?

    在index.wxml外联,view标签下定义了class为container、在index.wxml文件对应的样式文件index.wxss文件内、通过@import引入外联的样式文件、@import后面跟着外联的样式文件的路径。

    在index.wxss文件内设定了container的颜色、它的文本颜色为红色,如图:

微信小程序开发框架——WXSS(二)

    在外联文件assets.wxss内设置了container元素的边框、边框是黑色的,样式文件的执行是有顺序的(从上到下、从左到右)来执行的,如图:

微信小程序开发框架——WXSS(二)

    ***在index.wxss文件内、如果将container的border设置为黄色,页面在渲染时候就会覆盖掉引入外联样式文件的黑色。***

    
    二、内联样式的引入

    wxss不仅支持外联样式引入、还支持内联样式,和CSS一样对是通过"style"属性来表示view标签的内联样式,在view标签"style"属性写入了500rpx宽度、30px高度、

    通过一个变量的绑定(绑定背景颜色)的值,如图:

微信小程序开发框架——WXSS(二)

    在index.js文件内、data对象设置了colorValue为红色的数据属性、在内联样式里面绑定这个变量,渲染出来的背景颜色为红色的,如图:

微信小程序开发框架——WXSS(二)

    我们一般是把静态属性写入class中,把动态属性写入style中!