前端之vue的CSS样式

vue的CSS样式

  • vue项目的结构
  • Vue的三种样式化方法:
    • 外部CSS文件样式
    • 向单个文件组件添加全局样式
    • 单个组件内部的样式

相关名称:
CSS预处理器(如SCSS)或后处理器(如PostCSS)。

vue项目的结构

前端之vue的CSS样式_第1张图片

Vue的三种样式化方法:

  1. 外部CSS文件。
  2. 单个文件组件(.vue文件)中的全局样式。
  3. 单个文件组件中组件范围的样式。

外部CSS文件样式

前端之vue的CSS样式_第2张图片
vue项目中有一个与 components 同级的文件夹 asset,我在这里理解成“有用的东西”,存放资源文件,如,图片、css。

  1. 在 asset 文件夹内编写css文件
/*reset.css*/
/* RESETS */

/* 让所有的元素都使用 border-box ,并且包括 伪类 before, after 。 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
*:focus {
 /* 轮廓:位与border外,用于凸显元素 */
  outline: 3px dashed #228bec;
}
html {
 /* font-size / line-height font-family */
  font: 62.5% / 1.15 sans-serif;
}
h1,
h2 {
  margin-bottom: 0;
}
ul {
 /* 取消列表的默认样式 */
  list-style: none;
  padding: 0;
}
button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
}
button::-moz-focus-inner {
  border: 0;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  /* 1 */
  overflow: visible;
}
input[type="text"] {
  border-radius: 0;
}
body {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  font: 1.6rem/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #f5f5f5;
  color: #4d4d4d;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* 媒体查询 */
@media screen and (min-width: 620px) {
  body {
    font-size: 1.9rem;
    line-height: 1.31579;
  }
}
/*END RESETS*/
  1. 在src内的 main.js 内导入该css,这个情况下是全局生效的
import './assets/reset.css';

向单个文件组件添加全局样式

任意.vue文件中

你可能感兴趣的:(vue,vue,前端)