1. 前言
很多项目 bug 需要花费较长的时间来解决，很大原因是因为初学者对页面样式了解的不够透彻引起的。这样当项目出现样式问题的时候就会比较茫然，大大增加了项目调试的时间。开发项目之前，先了解一下页面样式的基础知识，后面进行项目开发就会顺利很多。
2. 全局样式与局部样式
全局样式会作用在所有页面上面。有了全局样式，我们就不必在每个页面上写重复的样式代码了，在提高我们工作效率的同时，也方便我们后期对项目的优化和维护。开发 uni-app 项目时，我们会将全局样式定义在 App.vue 文件中。
局部样式会作用在特定的页面上面，当全局样式与局部样式冲突时，局部样式会覆盖掉全局样式。我们通常将局部样式定义在 pages 目录下的 .vue 文件中。
2.1. 全局样式与局部样式冲突
page {
background-color: green;
}
button {
width:;
margin-top: px;
}
我们实例中定义的局部样式与全局样式冲突的地方主要是 background-color 背景颜色属性，全局样式中定义的是 green 绿色，局部样式中定义的是 red 红色。
实例：
page {
background-color: red;
}
button {
height:px;
}
3. 选择器是应用
目前 uni-app 规定支持的选择器有 .class、#id、element、element, element、::after、::before 这6个，我们来实例演示一下：
先在 template 标签中定义几个布局。
实例：
<button class="list1" id="column">list1</button>
<button class="list1">list2</button>
<button class="list2">list3</button>
<view class="list2">list4</button>
3.1 .class 选择器
使用 .class 定义样式，比如 .list1，就表示定义的是所有 class 为 list1 标签的样式。
实例：
<style>
.list1 {
width: ;
}
</style>
3.2 #id 选择器
使用 #id 定义样式，比如 #column，就表示定义的是 id 为 column 标签的样式。
实例：
<style>
#column {
width: ;
}
</style>
3.3 element 选择器
<style>
button {
width: ;
}
</style>
3.4 element, element 选择器
<style>
button,view {
width: ;
}
</style>
3.5 ::after 和 ::before 选择器
<style>
button::before{
content: 'Hello';
}
button::after{
content: 'Imooc';
}
</style>
4. 内联样式
<view class="list" style="text-align:center;">内联样式</view>
下面来实现一下股市涨跌动态样式的需求。
实例：
<template>
<view :style="{color:color}">涨跌幅：{{data}}%</view>
</template>
<script>
export default {
data() {
return {
color:"",
data:
};
},
onLoad() {
//当 data < 0 显示绿色，否则显示红色
if(this.data < ){
this.color = "green"
}else{
this.color = "red"
}
}
}
</script>