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;
}