一、内联样式
<template><div style="color:'red'">红色</div>
</template>
二、在style标签中编写
1、创建learn-style.css文件
.red { color: red; }3、在文件中引入
<template><div class="red">红色</div>
</template>
<script>
import './learn-style.css';
</script>三、样式污染问题
1、产生原因
Vue最终编译打包后都在一个html页面中，如果在两个组件中取一样类名分别引用在自身，那么后者会覆盖前者。默认情况下，只要导入了组件，不管组件有没有显示在页面中，组件的样式就会生效。也就是说并没有自己的局部作用域
2、解决思路
1、手动处理 （起不同的类名，但是项目一大就会导致类名很乱，不利于团队协作）
2、CSS IN JS ： 以js的方式来处理css（推荐）
3、CSS IN JS
CSS IN JS是使用 JavaScript 编写 CSS 的统称，用来解决 CSS 样式冲突、覆盖等问题。
CSS IN JS 的具体实现有 50 多种，比如：React常用（CSS Modules、styled-components）、 Vue常用（<style scoped> 、css modules）等。
推荐使用：<style scoped> （脚手架自动集成，并且非常简单😄）
四、Scoped CSS
1、基本及使用
在style标签上使用scoped，当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。
<template><div class="ex">hi</div>
</template>
<style scoped>
.ex {color: red;
}
</style>2、原理解析
- 每个 Vue 文件都将对应一个唯一的 id，该 id 根据文件路径名和内容 hash 生成，通过组合形成scopeId。
- 编译 template 标签时，会为每个标签添加了当前组件的scopeId
：
<div class="demo">test</div>
// 会被编译成:
<div class="demo" data-v-12e4e11e>test</div>- 编译 style 标签时，会根据当前组件的 scopeId 通过属性选择器和组合选择器输出样式，如:
.demo{color: red;}
// 会被编译成:
.demo[data-v-12e4e11e]{color: red;}- 这样就相当为我们配置的样式加上了一个唯一表示
3、对原理更加深入了解（有能力的同学选择背诵）
vue-loader 通过生成哈希 ID，根据 type 的不同调用不同的 loader 将，哈希 ID分别注入到 DOM 和属性选择器中。实现 CSS 局部作用域的效果。CSS Scoped 可以算作为 Vue 定制的一个处理原生 CSS 作用域的解决方案
4、混用本地和全局样式
可以直接创建一个全局的css文件，在入口文件处引入，或者在单个组件内使用不加scoped的style
<style>
/* 全局样式 */
</style><style scoped>
/* 本地样式 */
</style>5、样式穿透（暂时跳过结合项目讲）
如果你的引入了第三方库，如果你想修改第三方库的样式，直接通过dom查找，修改样式是没有效果的。那么可以使用以下属性>>>，/deep/
<style lang="scss" scoped>
.box-card {/deep/.el-card__body {padding: 10px;}
}
</style>
<style lang="scss" scoped>
.box-card {>>> .el-card__body {padding: 10px;}
}
</style>6、注意
1、通过 v-html 创建的 DOM 内容不受 scoped 样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式
2、Scoped 样式不能代替 class。考虑到浏览器渲染各种 CSS 选择器的方式，当 p { color: red } 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example { color: red }，性能影响就会消除
