微信小程序开发框架——WXSS（二）

    一、外联样式引入

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

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

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

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

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

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

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

    
    二、内联样式的引入

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

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

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

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