样式导入

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

示例

小白教程网www.2d5.net

<style>

    @import "../../common/uni.css";

    .uni-card {

        box-shadow: none;

    }

</style>

内联样式

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

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

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

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

<view />

选择器

目前支持的选择器有：

注意：

l  在 uni-app 中不能使用 * 选择器。

l  page 相当于 body 节点，例如：

<!-- 设置页面背景颜色 -->

page {

  background-color:#ccc;

}

全局样式与局部样式

定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

注意：

l  App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。

l  nvue页面暂不支持全局样式