一、CSS 引入方式

1. 内部样式表

内部样式表： 将样式写在 HTML 页面 hand 标签的 style 标签中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div {
				text-indent: 32px;
			}
		</style>
	</head>
	<body>
		<div>三生三世十里桃花，一心一意百行代码</div>
	</body>
</html>

注意：

1. <style> 标签理论上可以放在 HTML 标签的任何地方，但是一般都放在 hand 标签中
2. 代码结果清晰，但是并没有实现结构与样式完全分离

2. 行内样式表

行内样式表 ： 在元素标签内部的 style 属性中 设定 css 样式。

1

<div style="color: red;">三生三世十里桃花，一心一意百行代码</div>

3. 外部样式表

外部样式表 ： 把 样式单独写在 css 文件中，然后在 HTML 页面引入该文件

格式：

1

<link rel="stylesheet" href="css文件路径" />

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div>三生三世十里桃花，一心一意百行代码</div>
	</body>
</html>

二、emmet 语法

1. 快速生成 HTML 结构语法

• 生成标签

  • 输入标签名，按 tab 键即可。如：输入 div ，按 tab 键，就可以生成 <div></div>

    1 2 3

    p tab键 <p></p>

• 生成多个相同的标签 *

  • 输入标签名*生成的数量，按 tab 键即可，如：div*3，就可以快速生成 3 个 div

    1 2 3 4 5

    div*3 tab键 <div></div> <div></div> <div></div>

• 生成 父子标签 >

  • 输入 父标签 > 子标签 ，按 tab 键即可，如： ul>li*3，就可以生成一个 ul 标签 和 三个 li 标签

    1 2 3 4 5 6 7

    ul>li*3 tab键 <ul> <li></li> <li></li> <li></li> </ul>

• 生成 兄弟标签 +

  • 输入 父标签 + 子标签 ，按 tab 键即可，如：div+div，就可以生成两个同级的 div 标签

    1 2 3 4

    div+div tab键 <div></div> <div></div>

• 生成带 类名 或 id 名的标签 . 或 #

  • 输入 .类名 或 #id名 ，按 tab 键即可，如： .demo 或者 #two

    1 2 3

    .demo tab键 <div class="demo"></div>

• 生成有顺序的标签 $

  • 输入 .类名$*生成个数，按 tab 键即可，如： .demo$*3，就生成 3 个类名从 demo1 到 demo5 的 div

    1 2 3 4 5

    .demo$*3 tab键 <div class="demo1"></div> <div class="demo2"></div> <div class="demo3"></div>

• 生成标签自带内容 {}

  • 输入 div{输入的内容}，按 tab 键即可，如：div{我不是药神}*3

    1 2 3 4 5

    div{我不是药神}*3 tab键 <div>我不是药神</div> <div>我不是药神</div> <div>我不是药神</div>

2. 快速生成 css 样式语法

css 基本采用简写的形式即可

1
2
3

w200 tab键 div {
	width: 200px;
}

1
2
3

tac tab键 div {
	text-align: center;
}