vue（五）CSS样式添加

Vue 具有三种样式化应用程序的方法：

• 外部 CSS 文件。

• 单文件组件（.vue 文件）中的全局样式。

• 单文件组件中组件范围的样式。

外部CSS

导入外部CSS文件

import "./assets/reset.css";

单组件全局样式

<style>
  /* 全局样式 */
  .btn {
    padding: 0.8rem 1rem 0.7rem;
    border: 0.2rem solid #4d4d4d;
    cursor: pointer;
    text-transform: capitalize;
  }
</style>

单组件局部样式

scoped 属性为你所有的样式附加了一个独特的 HTML data 属性选择器，防止它们在全局范围内发生冲突。

<style scoped>
  /* … */
</style>