CSS 引入和emmet 语法

一、CSS 引入方式

样式表优点缺点使用方法控制范围
外部样式表结构与样式完全分离需要引入头部 link 标签引入多个页面
内部样式表结构与样式部分分离没有彻底分离头部 style 标签中一个页面
行内样式表书写方便，权重高结构样式混乱标签中一个标签

1. 内部样式表

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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
2
3
<div style="color: red;">
			三生三世十里桃花，一心一意百行代码			
		</div>

3. 外部样式表

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

格式：

1
<link rel="stylesheet" href="css文件路径">
属性作用
rel定义当前文档与链接文档之间的关系，stylesheet 表示被链接的文档是一个样式表文件
href定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径
1
2
3
4
5
6
7
8
9
10
11
12
13
<!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
4
5
w200		tab键

div {
	width: 200px;
}
1
2
3
4
5
tac		tab键

div {
	text-align: center;
}