第二章-CSS美化页面

本章目标

  • 字体样式（重点）
  • 文本样式（重点）
  • 伪类样式（重点、难点）
  • 背景样式（重点、难点）
  • 列表样式（重点）

一、字体样式

2.1字体样式

  • font-family：字体类型;
  • font-size: 字体大小；
  • font-style: 字体风格；
    • normal：默认
    • italic：斜体
      oblique：斜体

  • font-weight：字体的粗细；
    • 数字：100-900，从细到粗
    • normal：400
    • bold：700
    • lighter：200（不常用）
    • bolder：800（不常用）
  • font：字体风格 字体粗细 字体大小 字体类型；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p2{
            font-family: "宋体","微软雅黑";
            font-size: 32px;
            font-weight: bold;
            font-style: italic;
            /*font：字体风格 字体粗细 字体大小 字体类型； */
            /* font: italic bold 32px "宋体","微软雅黑"; */
        }
    </style>
</head>
<body>
    <p class="p1">这是一个p</p>
    <p class="p2">这是一个p</p>
</body>
</html>
代码演示效果:

01

二、文本样式

2.1字体颜色

  • color: 设置字体颜色；
    • 关键字：red=红色，blue=蓝色，orange=橙色，gold=金黄
    • 十六进制颜色：#FF0000=红色，#0000FF=蓝色
    • rgb颜色模式：rgb(0,0,0)=黑色,rgb(0,255,0)=绿色
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
           color: red;
        }
        .p2{
           color: #00FF00;
        }
        .p3{
           color: rgb(255, 192, 203);
        }
    </style>
</head>
<body>
    <p class="p1">这是一个p</p>
    <p class="p2">这是一个p</p>
    <p class="p3">这是一个p</p>
</body>
</html>
代码演示效果:

2.2文本的对齐方式

  • text-align：设置文本的对齐方式
    • left：左对齐
    • right：右对齐
    • center：居中对齐
    • justify：两端对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dv{
            width: 200px;
            height: 200px;
            /* text-align: left;
            text-align: right; */
            text-align: center;
            /* text-align: justify; */
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="dv">1111112222233311</div>
</body>
</html>
代码演示效果:

2.3图片垂直对齐方式

vertical-align：图片垂直对齐方式
top：顶对齐
middle：居中对齐
bottom：底对齐

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
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 235px;
            border: 1px solid red;
        }
        .img1{
            vertical-align: top;
        }
        .img2{
            vertical-align: middle;
        }
        .img3{
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <p>111111111<img class="img1" src="./img/01.PNG" alt=""></p>
    <p>222222222<img class="img2" src="./img/01.PNG" alt=""></p>
    <p>333333333<img class="img3" src="./img/01.PNG" alt=""></p>
</body>
</html>
代码演示效果:

2.4文本首行缩进

  • text-idnent: 文本首行缩进，
    • 像素：10px
    • em：1em等于一个汉字宽度
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
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dv{
            width: 210px;
            border: 1px solid red;
        }
        .p1 {
            text-indent: 1em;
        }

        .p2 {
            text-indent: 2em;
        }

        .p3 {
            text-indent: 50px;
        }
    </style>
</head>

<body>
<div class="dv">
    <p>一二三四五六七八九十</p>
    <p class="p1">一二三四五六七八九十</p>
    <p class="p2">一二三四五六七八九十</p>
    <p class="p3">一二三四五六七八九十</p>
</div>
</body>

</html>
代码演示效果:

2.5文本装饰

  • text-decoration：文本装饰
    • none：默认（无）
    • underline：下划线
    • line-through：中划线（删除线）
    • overline：上划线
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
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
        }
        .p1 {
            text-decoration: line-through;
        }

        .p2 {
            text-decoration: underline;
        }

        .p3 {
            text-decoration: overline;
        }
    </style>
</head>

<body>
<div class="dv">
    <p><a href="#">一二三四五六七八九十</a></p>
    <p class="p1">一二三四五六七八九十</p>
    <p class="p2">一二三四五六七八九十</p>
    <p class="p3">一二三四五六七八九十</p>
</div>
</body>

</html>
代码演示效果:

2.6文本行高

line-height：文本行高

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
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            border: 1px solid red;
        }

        .p1 {
            height: 30px;
            line-height: 10px;
        }

        .p2 {
            height: 30px;
            /* 当行高和高度一致 文字内容垂直居中 */
            line-height: 30px;
        }

        .p3 {
            height: 30px;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <p class="p1">这是一个p1</p>
    <p class="p2">这是一个p2</p>
    <p class="p3">这是一个p3</p>
</body>

</html>
代码演示效果:

小技巧：当盒子高度和行高高度一致时 文字会垂直居中显示

2.7文本阴影

  • text-shadow：文本阴影
    • text-shadow：阴影水平方向 阴影垂直方向 阴影模糊清晰度 阴影颜色
    • 举例：text-shadow: 50px 10px 2px green;
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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            /*text-shadow：水平位移 垂直位移 模糊距离 阴影颜色*/
            text-shadow: 10px 10px 2px orange; 
        }
    </style>
</head>
<body>
   <h1>这是一个一级标题</h1>
</body>
</html>
代码演示效果:

三、伪类样式

3.1、伪类样式属性

  • a:link：访问链接之前
  • a:visited 访问链接后
  • a:hover：鼠标悬浮在超链接
  • a:active：鼠标长按在超链接
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
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link{
            color: pink;
        }
        a:visited{
            color: orange;
        }
        a:hover{
            color: red;
        }
        a:active{
            color: green;
        }
    </style>
</head>
<body>
    <p><a href="#baidu">百度一下</a></p>
    <p><a href="#taobao">淘宝</a></p>
    <p><a href="#hao123">hao123</a></p>
    <p><a href="#jd">京东</a></p>
</body>
</html>
代码演示效果:

3.2、伪类样式书写顺序

a:link->a:visited->a:hover->a:active：必须按照这样顺序书写，否则导致设置部分样式无法应用

四、背景样式

4.1背景样式属性

  • background-color：背景颜色
    • red：红色
    • #FFFFFF：白色
    • rgb(0255,0255,0~255)：rgb(0,0,0)黑色
  • background-image：背景图像
    • url：填写图像路径
    • linear-gradient：线性渐变
    • radial-gradient：径向渐变
      • ellipse (默认): 指定椭圆形的径向渐变。
      • circle ：指定圆形的径向渐变
  • background-repeat：背景图像平铺
    • repeat：水平垂直平铺
    • repeat-x：水平平铺
    • repeat-y：垂直平铺
    • no-repeat：不平铺
  • backgroud-position：背景图像定位
    • 像素：10px
    • 百分比: 50%
  • 关键字：left(左）center（中） right（右）
    top（上） center（中） bottom（下)
  • background-size：背景图像大小
    • 像素：10px
    • 百分比: 50%
      contain：图片放大至满足背景区域的最小边即止
    • conver：图片放大至能满足最大变时为止
  • background-attachment：背景图像位置滚动
    • fiexd：固定背景
    • scroll：跟随滚动条滚动
  • 语法：background：背景颜色 背景图像 背景定位 背景滚动 背景平铺
  • 举例：background: #ccc url(“图像路径”) center center no-repeat;

4.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
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .dv1 {
            background-color: #FFcc00;
        }
        .dv2{
            background-color: rgb(255,0, 0);
        }
        .dv3{
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="dv1"></div>
    <div class="dv2"></div>
    <div class="dv3"></div>
</body>

</html>
代码演示效果:

4.3背景图像

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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dv{
            width: 300px;
            height: 300px;
            /* 背景图像 */
            background-image: url("img/01.PNG");
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="dv"></div>
</body>
</html>
代码演示效果:

4.4背景图像平铺

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dv{
            width: 300px;
            height: 300px;
            /* 背景图像 */
            background-image: url("img/01.PNG");
            /* 背景图像平铺 */
            /* background-repeat: repeat; */
            background-repeat: no-repeat;
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat-y; */
        }
    </style>
</head>
<body>
    <div class="dv"></div>
</body>
</html>
代码演示效果:

4.5背景图像定位

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
27
28
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dv {
            width: 300px;
            height: 300px;
            /* 背景图像 */
            background-image: url("img/01.PNG");
            /* 背景图像平铺 */
            background-repeat: no-repeat;
            /* 背景图像定位*/
            background-position: center center;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="dv"></div>
</body>

</html>
代码演示效果:

4.6背景图像大小

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
27
28
29
30
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dv {
            width: 300px;
            height: 300px;
            /* 背景图像 */
            background-image: url("img/01.PNG");
            /* 背景图像平铺 */
            background-repeat: no-repeat;
            /* 背景图像定位*/
            background-position: center center;
            /* 背景图像大小 */
            background-size: cover;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="dv"></div>
</body>

</html>
代码演示效果:

4.7背景图像滚动

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dv1 {
            height: 3000px;
            /* 背景图像 */
            background-image: url("img/01.PNG");
            /* 背景图像平铺 */
            background-repeat: no-repeat;
            /* 背景滚动 */
            background-attachment: fixed;
            border: 1px solid red;
        }

    </style>
</head>

<body>
    <div class="dv1">
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
        <p>11111111111111111111111111111</p>
    </div>
</body>

</html>
代码演示效果:

4.8背景样式属性简写方式

语法：background：背景颜色 背景图像 背景定位 背景滚动 背景平铺
举例：background: #ccc url(“图像路径”) center center no-repeat;

4.9背景图像-渐变

4.9.1线性渐变

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
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dv1{
            width: 300px;
            height: 100px;
            background-image: linear-gradient(red,blue);
        }
        .dv2{
            width: 300px;
            height: 100px;
            background-image: linear-gradient(to right, red,blue);
        }
        .dv3{
            width: 300px;
            height: 100px;
            background-image: linear-gradient(to right bottom, red,blue);
        }
    </style>
</head>
<body>
    <div class="dv1"></div>
    <br/>
    <div class="dv2"></div>
    <br/>
    <div class="dv3"></div>
</body>
</html>
代码演示效果:

4.9.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
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dv1{
            width: 200px;
            height: 150px;
            background-image:radial-gradient(red,blue);
        }
        .dv2{
            width: 200px;
            height: 150px;
            background-image:radial-gradient(red 20%,blue );
        }
        .dv3{
            width: 200px;
            height: 150px;
            background-image:radial-gradient(circle at 30% 30% ,red,blue);
        }
    </style>
</head>
<body>
    <div class="dv1"></div>
    <br/>
    <div class="dv2"></div>
    <br/>
    <div class="dv3"></div>
</body>
</html>
代码演示效果:

五、列表样式

5.1list-style: 列表样式

none：消除项目编号

​ square：方块
​ circle：空心圆
​ disc：实心圆
​ decimal：数字
​ none：消除项目编号
​ square：方块
​ circle：空心圆
​ disc：实心圆
​ decimal：数字
​ lower-alpha：小写字母
​ upper-alpha：大写字母
​ lower-roman：大写罗马数字
​ upper-roman：小写罗马数字

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
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .li1{
            list-style: circle;
        }
        .li2{
            list-style: square;
        }
        .li3{
            list-style: decimal;
        }
        .li4{
            list-style: upper-alpha;
        }
    </style>
</head>

<body>
    <ul>
        <li class="li1">水果1</li>
        <li class="li2">水果2</li>
        <li class="li3">水果3</li>
        <li class="li4">水果3</li>
    </ul>
</body>

</html>
代码演示效果:

课后作业

练习1：制作百度音乐标签页面

练习2：制作开心庄园页面

练习3：制作广创科技教育新闻信息展示页面

练习4：制作树形列表

练习5：模拟试卷

练习6：易趣商品列表

练习7：制作家用电器商品分类页面

练习8：制作畅销书排行榜

练习9：制作席幕容的诗

练习10：制作淘宝女装分类页面

练习11：制作京东页面