CSS基础语法及应用

一、前言

在前面有关HTML5的语法中我们有说过，CSS主要用来对网页元素的外观和位置等页面样式进行设置（H5语法连接：HTML5基本语法大全），是前端开发中的重要一环。

而CSS在我们的开发中主要有3种引入方式，分别是内嵌式、外联式和行内式。

内嵌式：CSS写在style标签中。而style标签可以写在任意位置，但是我们习惯将style标签写在head标签下。以下是内嵌式程序示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      color: red;
    }
  </style>
</head>
<body>
  <div>
    hello world！
  </div>
</body>
</html>

外联式：CSS写在一个单独的 .CSS 文件中，但是我们需要通过link标签在网页引入。以下是外联式程序示例，第一段程序是HTML文件程序，第二段程序是被HTML文件引用的include.css程序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="include.css">
</head>
<body>
  <div>
    hello world！
  </div>
</body>
</html>
1
2
3
div{
    color: red;
}

行内式：CSS写在标签的style属性中，通常配合js使用。以下是行内式程序示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div style="color: red;">
    hello world！
  </div>
</body>
</html>

通过以上了解，我们可以初步认识CSS的作用以及它的引用方式和应用场景。内嵌式的开发方式多用于小案例的演示；外联式的开发方式多用来项目开发；行内式的使用多用来配合js。本文作演示的程序都是小案例，所以基本上都采用内嵌式的方式进行示例。

二、CSS基本语法

1.选择器

作用：选择想要添加样式的HTML标签。例如：我们在开发网页时，想将div标签中的文字内容设置为红色，那我们就需要先通过选择器选中div标签，才能再通过color将其设置为红色。

选择器分为四大类：标签选择器、类选择器、id选择器、通配符选择器。

1.1 标签选择器

结构：标签名 { css属性名 : 属性值 ; }

作用：通过标签名找到页面中所有这类标签，设置样式。需要注意的是，标签选择器可以找到不论经过多少次嵌套的标签，而且它选中的是这一类标签，并不是单独某一个，例如：文件里写了多个div标签，那通过div标签选择器设置红色文字，那所有div标签里的文字都将变为红色。以下是标签选择器程序使用示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      color: red;
    }
  </style>
</head>
<body>
  <div>
    hello world！
  </div>
</body>
</html>

1.2 类选择器

结构：.类名 { css属性名 : 属性值 ; }

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式。所有标签上都有class属性，class属性的属性值称为类名。类名由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头。而且，一个标签可以同时有多个类名，类名之间以空格隔开。类名也可以重复，一个类选择器可以同时选中多个标签。以下是类选择器使用示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .color{
      color: red;
    }
    .size{
      font-size: 66px;
    }
  </style>
</head>
<body>
  <p class="color size">hello world!</p>
</body>

1.3 id选择器

结构：#id属性值 { css属性名 : 属性值 ; }

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式。同class属性，所有标签上也都有id属性，但是id属性类似于身份证，在一个页面中是唯一的，不可重复。一个标签上只能有个id属性值，而一个id选择器也只能选中一个标签。以下是id选择器使用案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #colour{
      color: blue;
    }
  </style>
</head>
<body>
  <p id="colour">hello world！</p>
</body>

1.4 通配符选择器

结构：*{ css属性名 : 属性值 ; }

作用：找到页面中所有的标签，设置样式。通配符选择器在开发中很少使用，一般常用来去除标签默认的margin（外边距）和padding（内边距）。以下是使用案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div>
    hello world！
  </div>
</body>
</html>

1.5 选择器后代

结构：选择器1 选择器2 {css}

作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素。

如结构，具体含义是在选择器1所找到标签的后代（标签1里包含的所有嵌套标签，一级嵌套、二级嵌套等等）中，找到满足选择器2的标签，设置样式。注意后代包括不只子代，还有孙代、重孙代等等。另外使用后代选择器，选择器1和选择器2之间需要通过空格隔开。以下为案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div span{
      color: red;
    }
  </style>
</head>
<body>
  <div><span>hello world!</span></div>
</body>
</html>

1.6 选择器子代

结构：选择器1>选择器2{css}

作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素。

如结构，在选择器1所找到标签的子代中，找到满足选择器2的标签，设置样式。需要注意的是，这里的子代是仅指儿子一代，，也就是一级嵌套标签，不包括后面的孙代，重孙代。另外选择器之间通过 > 隔开。以下为案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div>span{
      color: red;
    }
  </style>
</head>
<body>
  <div>
    <span>hello world!</span>
    <p>hello world</p>
  </div>
</body>
</html>

1.7 选择器并集

结构：选择器1 , 选择器2{css}

作用：同时选择多组标签，设置相同的样式

如结构，找到选择器1和选择器2选中的标签，设置样式。这里也有需要注意的地方，首先第一点并集选择器中的每组选择器之间通过 “ , ” 分隔。其次，并集选择器中的每组选择器可以是基础选择器或者复合选择器。另外，并集选择器中的每组选择器通常一行写一个，从而提高代码的可读性。

案例演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div,span{
      color: red;
    }
  </style>
</head>
<body>
  <div>hello world</div>
  <span>hello world</span>
</body>
</html>

1.8 选择器交集

结构：选择器1选择器2{css}

作用：选中页面中同时满足多个选择器的标签。

如结构：找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。这里需要注意两点。第一点，交集选择器中的选择器之间是紧挨着的，没有东西分隔。第二点，交集选择器中如果有标签选择器，标签选择器必须写在最前面。以下是案例演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.a{
      color: red;
    }
  </style>
</head>
<body>
  <div class="a">hello world</div>
  <div class="b">hello world</div>
  <span class="a">hello world</span>
</body>
</html>

1.9 选择器伪类

结构：选择器 : hover{css}

作用：选中鼠标悬停在标签上的状态，设置样式。

这里要注意的是，伪类选择器选中的是元素的某种状态。通过对结构中的css进行设置，可以实现当鼠标悬停在某个结构标签上时，更改标签样式。

案例演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.a:hover{
      color: red;
    }
  </style>
</head>
<body>
  <div class="a">hello world</div>
  <div class="b">hello world</div>
  <span class="a">hello world</span>
</body>
</html>

2.文字

在文章中，我们常常排版布局时，会对文字大小，字体等方面进行样式设置，在网页中也一样，我们在开发时为了美观，也会对文字进行样式设置，这部分主要对文字的样式属性进行一个总结。

2.1 字体大小

属性名：font-size

取值：数字+px

注意：谷歌浏览器默认文字大小是16px，这里的px是单位，我们在开发时一定要写px，不然属性设置会无效。以下是字体大小程序设置示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      font-size: 32px;
    }
  </style>
</head>
<body>
  <div>
    hello world！
  </div>
</body>
</html>

2.2 字体粗细

属性名：font-weight

取值：字体粗细有两种取值方式。

第一种：关键字

正常 normal
加粗 bold

第二种：纯数字，100~900的整百数

正常 400
加粗 700

需注意的是，不是所有字体都提供了九种粗细，因此部分取值页面中无变化。而在实际开发中，以正常、加粗两种取值使用最多。以下是程序使用案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      font-weight: bold;
    }
    p{
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div>
    hello world！
  </div>
  <p>
    hello world！
  </p>
</body>
</html>

2.3 字体样式（是否倾斜）

属性名：font-style

取值：正常（默认值）：normal 倾斜：italic

字体倾斜样式均是向左倾斜，与word文档里的倾斜方式一样，以下是使用案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      font-style: italic;
    }
  </style>
</head>
<body>
  <div>
    hello world！
  </div>
</body>
</html>

2.4 字体

属性名：font-family

取值：具体字体1,具体字体2,……,字体系列

具体字体：微软雅黑、黑体、楷体……

字体系列：sans-serif、serif、monospace……

渲染规则：左右往右按顺序查找，如果电脑中未安装左边字体，则显示下一个字体，如果都不支持，一般在程序开发中会写一个字体系列，此时会显示电脑支持的，在字体系列里的字体。

需要注意的是，字体名称中存在多个单词时，推荐使用引号包裹，但最后一项字体系列不需要引号包裹。另外还需要注意的是，Windows系统默认字体为微软雅黑，macOS系统默认字体为苹方。以下是程序示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 如果用户电脑没有安装微软雅黑，则按黑体显示文字 */
    /* 如果用户电脑也没有安装黑体，就按任意一种非衬线字体系列显示 */
    div{
      font-family: 微软雅黑,黑体,sans-serif;
    }
  </style>
</head>
<body>
  <div>
    hello world！
  </div>
</body>
</html>

在这里，为了方便以后对网页的开发，我们对字体也进行一个拓展了解，常用的字体大致分为三大系列，分别是无衬线字体、衬线字体、等宽字体，我们对其稍微进行一个深入的分类使用说明：

字体系列 特点 应用场景 常见的该系列字体
无衬线字体（sans-serif） 文字笔画粗细均匀，并且首位无装饰 网页中大多采用无衬线字体 黑体
衬线字体（serif） 文字笔画粗细不均，并且首位有笔锋装饰 报刊书籍中应用广泛 宋体
等宽字体（monospace） 每个字母或文字的宽度相等 一般用于程序代码编写 Consolas

2.5 font的复合属性

属性名：font（复合属性）

取值：font：style weight size family（顺序不可改变）

注：前两个值可以省略，如果省略了相当于设置了默认值。另外，如果要同时设置单独和连写形式，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面。以下是程序示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      font: normal 700 32px 宋体;
    }
  </style>
</head>
<body>
  <div>
    hello world！
  </div>
</body>
</html>

3.文本

3.1 文本缩进

属性名：text-indent

取值：第一种：数字+px 第二种：数字+em（1em=当前标签的font-size的大小）

我们在程序里常常使用em做首行缩进，这样不论字体大小怎么变化，可以保证首行都是缩进两个字符长度。如果使用数字+px的方式进行缩进，如果font-size大小发生变化，则首行缩进就不再是两个字符。以下为案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      text-indent: 2em;
    }
  </style>
</head>
<body>
  <div>
    hello world！
  </div>
</body>
</html>

3.2 文本水平对齐

属性名：text-align

取值：

属性值 效果
left 左对齐
center 居中对齐
right 右对齐

这部分需要注意一点，如果需要让文本水平居中，text-align属性要给到文本所在标签（文本的父元素）设置。例如，对文本、span标签，h标签，input标签、img标签等进行元素居中时，需要在父元素进行设置。而对h标签等标签，则可以进行直接设置。对于text-align的放置牵扯到显示模式等多方因素，可以根据实际项目需求考虑清楚再放置。以下是使用案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1{
      text-align: center;
    }
    div{
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Hello</h1>
  <div>
    <span>hello world!</span>
  </div>
</body>
</html>

3.3 文本修饰

属性名：text-decoration

取值：

属性值 效果
underline 下划线（常用）
line-through 删除线（不常用）
overline 上划线（几乎不用）
none 无装饰线（常用）

开发中，常常会使用 text-decoration : none ; 来清楚a标签默认的下划线。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a{
      text-decoration: none;
    }
  </style>
</head>
<body>
  <a href="#">超链接</a>
</body>
</html>

4.行高

属性名：line-height

取值：两种。第一种：数字+px 第二种：倍数（当前标签font-size的倍数）

作用：控制一行的上下行间距。

一般两种应用场景：

​ 第一种：让单行文本垂直居中可以设置 line-height : 文字父元素高度。

​ 第二种：网页精准布局时，会设置 line-height : 1 可以取消上下间距。

在前面我们有提过font复合属性，在这里，行高也可以和font连写，但要注意覆盖问题。

连写格式为：font : style weight size/line-height family ; （注意格式顺序不可变）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .a{
      line-height: 50px;
    }
    .b{
      font: italic 700 36px/2 family;
    }
  </style>
</head>
<body>
  <div class="a">hello world!</div>
  <div class="b">hello world!</div>
</body>
</html>

5.颜色取值

在前端设计中，有很多地方需要对颜色进行一个选取，但颜色的选取主要由设计师进行设计选取，而程序员只需要根据设计师的设计直接在程序里设置即可，所以我们在此处说一下颜色的几种写法，具体参考下表。

颜色表示方式 表示含义 属性值（举例）
关键词 预定义的颜色名 red、green
rgb表示法 红绿蓝三原色。每项取值范围：0~255 rgb（0,0,0）
rgba表示法 红绿蓝三原色+a表示透明度，取值范围0~1 rgba（255,255,255,0.5）
十六进制表示法 #开头，将数字转换成十六进制表示 #000000、#ff0000 简写：#000、#f00

6.标签居中

结构：margin : 0 auto ;

在项目中，我们还会遇到给div、p、h等做大盒子（盒子可以理解为作为外层标签）的标签设置水平居中的情况，如果我们在这里使用 text-align : center ; 只会让这些标签里的内容水平居中，并不能做到让标签本身的范围居中，这时，我们就用到了 margin : 0 auto; ，只需要给当前标签本身设置即可实现标签居中。

还需注意，这种方法一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度。以下是程序示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: red;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div>hello world!</div>
</body>
</html>

7.背景

7.1 背景颜色

属性名：background-color

属性值：颜色取值（参考前面5.颜色取值部分）

背景色默认值是透明的，但我们在项目中，会采用赋值背景颜色的方式，来查看盒子的大小和位置，所以我们需要学会在布局时，通过设置背景颜色来查看布局。以下为程序案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.a{
      height: 200px;
      width: 300px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="a">hello world</div>
  <span class="a">hello world</span>
</body>
</html>

7.2 背景图片

属性名：background-image

属性值：background-image : url ( ‘ 图片路径 ‘ ) ;

这里有一点需要注意，如果背景图片的尺寸小于盒子尺寸，则会采用水平平铺和垂直平铺的方式将盒子铺满，就像铺地砖一样，采用多个同样的地砖将地面铺满。如果盒子尺寸小于图片尺寸，那只会显示盒子尺寸大小的部分图片，并不能完整显示。以下为程序案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.a{
      height: 200px;
      width: 300px;
      background-image: url('./helloworld.png');
    }
  </style>
</head>
<body>
  <div class="a">hello world</div>
  <span class="a">hello world</span>
</body>
</html>

7.3 背景平铺

属性名：background-repeat

属性值：

取值 效果
repeat （默认值）水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿着水平方向（x轴）平铺
repeat-y 沿着垂直方向（y轴）平铺

在7.2，我们了解了背景图片在盒子里的平铺排列以后，这部分我们使用background-repeat来取消这种平铺方式。具体使用方式可参考上表。以下为程序案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.a{
      height: 200px;
      width: 300px;
      background-image: url('./helloworld.png');
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div class="a">hello world</div>
  <span class="a">hello world</span>
</body>
</html>

7.4 背景位置

属性名：background-position

属性值：background-position : 水平方向位置 垂直方向位置 ;

这里的属性值水平方向位置和垂直方向位置有两种取值方式：

​ 第一种：采用方位名词：水平方向：left / center / right 垂直方向：top / center / bottom

​ 第二种：采用 数字+px：坐标系就是以左上角为原点（0,0），x轴水平向右，y轴垂直向下。

方位名词和坐标取值可以混着使用，但需要记住第一个取值表示水平，第二个取值表示垂直。以下为程序案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.a{
      height: 200px;
      width: 300px;
      background-image: url('./helloworld.png');
      background-repeat: no-repeat;
      background-position: left bottom;
    }
  </style>
</head>
<body>
  <div class="a">hello world</div>
  <span class="a">hello world</span>
</body>
</html>

7.5 背景相关属性

属性名：background

属性值：background : color image repeat position （顺序可变）

这一栏是background的复合属性写法，同font复合属性，但不同的是，background复合属性顺序可以随便颠倒，但是font不行。但是有一点需要注意，如果采用数值确定背景图片的位置，那数值就不能颠倒，系统会默认前一个数值是x轴方向，后一个数值是y轴方向的。以下为程序案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.a{
      height: 200px;
      width: 300px;
      background: red url(./1.png) no-repeat right center;
    }
  </style>
</head>
<body>
  <div class="a">hello world</div>
  <span class="a">hello world</span>
</body>
</html>

8.显示模式

8.1 块级标签

显示特点：

​ 1.独占一行（一行只能显示一个）。

​ 2.宽度默认是父元素的宽度，高度默认由内容撑开。

​ 3.可以设置宽高

代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、……

8.2 行内标签

显示特点：

​ 1.一行可以显示多个。

​ 2.宽度和高度默认由内容撑开。

​ 3.不可以设置宽高

代表标签：a、span、b、u、i、s、strong、……

8.3 行内块

显示特点：

​ 1.一行可以显示多个。

​ 2.可以设置宽高

代表标签：input、textarea、button、select、……

8.4 显示模式之间的转换

语法：

属性 效果 使用频率
display: block 转换成块级元素 较多
display: inline-block 转换成行内块元素 较多
display: inline 转换成行内元素 极少

在8.1~8.3，我们介绍了三种显示模式，分别是块、行内、行内块。这三种显示模式代表着不同标签的布局方式，但为了让标签布局符合我们设计的要求，显得更加美观，有时候我们需要更改某些标签的尺寸等，但对于某些标签来说，它本身就带有一部分效果，那我们再去更改时，会发现不允许我们更改，这时候我们需要更改它的显示模式，再去进行设置。

举个简单的例子，我们想一行显示多个块级标签，这就需要我们将块元素改成行内块元素才行。以下为案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span{
      width: 200px;
      height: 300px;
      background-color: red;;
      display: block;
    }
  </style>
</head>
<body>
  <span class="a">hello world</span>
</body>
</html>

9.标签嵌套

在了解完显示模式以后，我们讲两个关于标签嵌套规范的问题。

第一个：块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等……

​ 但是：p标签中不要嵌套div、p、h等块级元素。

第二个：a标签内部可以嵌套任意元素

​ 但是：a标签不能嵌套a标签。

10.CSS特性

10.1 继承性

特性：子元素有默认继承父元素样式的特点

可以继承的常见属性（文字控制属性都可以继承）

​ 1.color

​ 2.font-size、font-weight、font-size、font-family

​ 3.text-indent、text-align

​ 4.line-height

​ 5.……

注意：继承会存在失效的特殊情况。

如果元素有浏览器默认样式，此时继承性依然存在，但部分默认样式仍然会保留原样。

如a标签的color会继承失效 h系列标签的font-size会继承失效。

以下为继承性案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      color: red;
    }
  </style>
</head>
<body>
  <div>
    hello world
    <p>hello</p>
  </div>
</body>
</html>

10.2 层叠性

特性：

1.给同一个标签设置不同的样式，此时样式会层叠叠加，然后共同作用在标签上。

2.给同一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效。

注意，当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。

以下是层叠性案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 同一标签不同样式 */
    .hello{
      color: red;
    }
    .hello{
      background-color: green;
    }
    /* 同一标签相同样式 */
    .world{
      color: red;
      color: blue;
    }
  </style>
</head>
<body>
  <div class="hello">hello</div>
  <div class="world">world</div>
</body>
</html>