在日常项目开发过程中，页面逻辑代码通常要搭配页面样式才能将页面需求完全实现出来。
这小节我们来讲解uni-app项目的页面样式的基础知识，包括全局样式和局部样式，选择器的应用以及内联样式的应用。下面我们来一一讲解。
全局样式会作用在所有页面上面。有了全局样式，我们就不必在每个页面上写重复的样式代码了，在提高我们工作效率的同时，也方便我们后期对项目的优化和维护。开发uni-app项目时，我们会将全局样式定义在App.vue文件中。局部样式会作用在特定的页面上面，当全局样式与局部样式冲突时，局部样式会覆盖掉全局样式。我们通常将局部样式定义在pages目录下的.vue文件中。
下面来举个实际例子看看当全局样式与局部样式冲突时，页面是如何显示的。
编辑App.vue文件，添加全局样式，将页面背景颜色定义为绿色，按钮宽度设置为50%，全局样式将影响到所有页面。实例：
page{background-color:green;}button{width:50%;margin-top:20px;}这里定义的page标签，相当于普通项目中的body标签，会影响到所有的页面样式，通常我们会在这里面设置页面的背景颜色、字体样式、大小等。
接下来编辑pages/index/index.vue文件，添加局部样式，将页面背景颜色定义为红色，局部样式将影响到index页面。
我们实例中定义的局部样式与全局样式冲突的地方主要是background-color背景颜色属性，全局样式中定义的是green绿色，局部样式中定义的是red红色。实例：
page{background-color:red;}button{height:100px;}点击工具栏–运行–运行到内置浏览器，查看效果。局部样式红色背景覆盖了全局样式绿色背景。按钮没有冲突的样式，既显示了全局样式中定义的宽度，又显示了局部样式中定义的高度。
选择器就是html标签的某个特有属性，如idclass等，在css中可以根据这些特有属性来统一定义样式。
目前uni-app规定支持的选择器有.class、#id、element、element,element、::after、::before这6个，我们来实例演示一下：先在template标签中定义几个布局。实例：
3.2#id选择器使用#id定义样式，比如#column，就表示定义的是id为column标签的样式。实例：
3.3element选择器根据标签来定义样式，下面来定义所有button标签的样式实例：
3.4element,element选择器可以同时定义多个标签，标签之间用逗号隔开。实例：
3.5::after和::before选择器::before和::after的主要作用是在标签内容前后加上指定内容实例：
4.内联样式内联样式指的是把css代码直接写在HTML标签中，可以使页面随着标签情况的不同显示不同的样式。我们可以使用style、class属性来控制HTML标签的样式。实例：
动态样式建议写进style属性中，静态样式建议写进class属性中，这样可以提高渲染效果，尽可能的优化页面性能。
下面来实现一下股市涨跌动态样式的需求。实例：