12.CSS基础语法 (VUE全栈开发学习笔记)

1.引入全局CSS定义

assets/css/base.css：

body {
  margin:6px;
  padding:6px;
  background:#E9E9E9;
}

App.vue：

<style>
@import "./assets/css/base.css";
</style>

2.CSS定义

2.1. 定义Html Tag CSS式样

body { /*Html Tag 名*/
  /*CSS 式样*/
}

2.2. 定义id对应 CSS式样

<div id="lanzy">
#lanzy {
  /*CSS 式样*/
}

2.3. 定义class对应 CSS式样

<div class="content">
.content {
  /*CSS 式样*/
}

2.4. CSS式样的继承

<div class="content active">
.content {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: left;
}
.content.active {*/
  background: #FAEFED;
}

3.文字属性

font-family: HiraginoSans-W3;
font-size: 12px;
color: #595959;
font-weight: 300;
text-align: left;

4.边框属性

border: 1px solid #EFF2FB;
background: white;
box-shadow: inset -1px 0 0 0 #E9E9E9;
margin: 0px;
padding: 0px;

5.区域大小

width: 160px;
height: 48px;

6.Z轴坐标（区域重叠时Z坐标大的在上面，默认为0）

z-index: 0;

7.鼠标形状

cursor: default;

可选式样：

pointer：手型
crosshair：十字型
text：平时鼠标移动到文本上的样式
wait：等待的效果
default：默认的那种效果
help：带问号的鼠标样式
e-resize：向右的箭头
ne-resize：向右上方的箭头
n-resize：向上的箭头
nw-resize：向左上方的箭头
w-resize：向左的箭关
sw-resize：向左下的箭头
s-resize：向下的箭头
se-resize：向右下方的箭头
auto：系统自动的效果