【5.0】前端基础之CSS进阶#

【一】分组与嵌套#

【1】分组#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
  <style>
7
    div {
8
      color: red;
9
    }
10

11
    p {
12
      color red;
13
    }
14

15
    span {
16
      color: red;
17
    }
18
  </style>
19

20
</head>
21
<body>
22
<div>这是div标签</div>
23
<p>这是p标签</p>
24
<span>这是span标签</span>
25
</body>
26
</html>

上述方法，重复代码造成了代码的冗余

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
  <style>
7
    /* 逗号表示并列关系 */
8
    div,span,p {
9
      color: red;
10
    }
11
  </style>
12

13
</head>
14
<body>
15
<div>这是div标签</div>
16
<p>这是p标签</p>
17
<span>这是span标签</span>
18
</body>
19
</html>

【2】嵌套#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
  <style>
7
    /* 嵌套 */
8
    #div, .c1,span {
9
      color: red;
10
    }
11
  </style>
12

13
</head>
14
<body>
15
<div class="c1">这是div标签</div>
16
<p class="c1">这是p标签</p>
17
<span class="c1">这是span标签</span>
18
</body>
19
</html>

【二】伪类选择器#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        a:link {
8
            color: red; /* 常态 */
9
        }
10

11
        a:hover {
12
            color: green; /* 鼠标悬浮态 */
13
        }
14

15
        a:active {
16
            color: blue; /* 鼠标点击不松开 激活态 */
17
        }
18

19
        a:visited {
20
            color: burlywood; /* 访问之后的状态 */
21
        }
22

23
        input:focus {
24
            background-color: red; /* input输入框获取焦点(input被选中) */
25
        }
26

27
    </style>
28
</head>
29
<body>
30
<a href="https://www.xiaohuar.com/"> 当前网址是否存在 </a>
31
<input type="text">
32
</body>
33
</html>

【三】伪元素选择器#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        p:first-letter { /* 第一个文字加效果 */
8
            font-size: 48px;
9
            color: red;
10
        }
11

12
        p:before { /* 在文本开头添加内容并且带有装饰，无法被选中! */
13
            content: "这是一句话";
14
            color: burlywood;
15
        }
16

17
        p:after {/* 在文本结尾添加内容并且带有装饰，无法被选中! */
18
            content: "?";
19
            color: blue;
20
        }
21

22

23
    </style>
24
</head>
25
<body>
26
<p>
27
    这是一个p标签
28
</p>
29
</body>
30
</html>

befor 和 after 通常都是用来清除浮动带来的影响
- 即父标签塌陷的问题

【四】选择器优先级#

id选择器
类选择器
标签选择器
行内选择器

1.选择器相同书写顺序不同
就近原则：谁离得近，就使用谁的样式
2.选择器不同 …
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高，优先级越高

【五】CSS属性相关#

【1】长度和宽度#

/* 块级标签无法设置长度和宽度，就算写了也不会生效 */

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
  <style>
7
    p {
8
      background-color: red;
9
      height: 200px;
10
      width: 100px;
11
    }
12

13
    /* 块级标签无法设置长度和宽度，就算写了也不会生效 */
14
    span {
15
      background-color: blue;
16
      width: 100px;
17
      height: 200px;
18
    }
19
  </style>
20

21
</head>
22
<body>
23

24
<p>这是一个P标签</p>
25
<span>这是一个SPAN标签</span>
26
</body>
27
</html>

【2】字体属性#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        p {
8
            font-family: "JetBrains Mono ExtraLight"; /* 可以跟多个，第一个不生效会依次判断 */
9
            font-size: 24px; /* 字体大小 */
10
            font-weight: inherit; /* 子重 (inherit : 继承父元素的粗细值) */
11
            /*color: blue; !* 字体颜色，颜色英文 *!*/
12
            /*color: #dddddd; !* 字体颜色，颜色编号 *!*/
13
            /*color: rgb(122, 69, 36); !* 字体颜色，rgb(0~255) *!*/
14
            color: rgb(122, 69, 36, 0.8); /* 第四个参数是透明度(0~1) */
15

16
            /* 当你想用一些颜色的时候，可以使用相关的工具
17
                1.pycharm自带取色器
18
                2.微信/QQ截图，取色器
19
            */
20

21
        }
22
    </style>
23
</head>
24
<body>
25
<p>这是一个P标签</p>
26
</body>
27
</html>

【3】文字属性#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
  <style>
7
    p {
8
      /*text-align: center; !* 文字居中 *!*/
9
      /*text-align: left; !* 左居中 *!*/
10
      text-align: justify; /* 两端对齐 */
11

12
      /*text-decoration: underline; !* 下划线 *!*/
13
      text-decoration: line-through; /* 删除线 */
14
      /*text-decoration: overline; !* 删除线 *!*/
15
      /* 在html中，很多标签的样式效果是一样的 */
16

17
      font-size:16px; /* 先知道文字的具体长度 */
18
      text-indent: 32px; /* 缩进32px */
19
    }
20

21
    a {
22
      text-decoration: none; /* 取出a标签自带的下划线 */
23
    }
24
  </style>
25
</head>
26
<body>
27
<p>我是一个P标签</p>
28
<a href=""></a>
29
</body>
30
</html>

【4】背景属性#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6

7
    <style>
8
        div {
9
            /*height: 400px;*/
10
            /*width: 400px;*/
11
            /*background-color: red;*/
12
            /* 设置背景图片 */
13
            /*background-image: url("url链接"); !* 默认全部铺满 *!*/
14
            /*background-repeat: no-repeat; !* 不铺满 *!*/
15
            /* 其实浏览器不是一个平幔，而是一个三维立体结构
16
             Z 轴指向用户 ， Z 越大，离用户越近
17
             */
18

19
            /*background-position:center center; !* 图片居中(第一个参数控制左边的距离，第二个参数是上距离) *!*/
20

21
            /* 简写 */
22
            /* 只需要填上想要加的参数即可，位置没有关系，参数对应就可以 */
23
            background: red url("url") no-repeat center center;
24

25

26
        }
27
    </style>
28
</head>
29
<body>
30
<div>
31

32
</div>
33
</body>
34
</html>

【5】边框#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        p {
8
            background-color: red;
9
            border-width: 20px;
10
            border-style: solid;
11
            border-color: green;
12

13

14
        }
15

16
        div {
17
            /*border-left-width: 5px;*/
18
            /*border-left-color: green;*/
19
            /*border-left-style: solid;*/
20

21
            /*border-top-width: 5px;*/
22
            /*border-top-color: green;*/
23
            /*border-top-style: solid;*/
24

25
            /*border-right-width: 5px;*/
26
            /*border-right-color: green;*/
27
            /*border-right-style: solid;*/
28

29
            /*border-buttom-width: 5px;*/
30
            /*border-buttom-color: green;*/
31
            /*border-buttom-style: solid;*/
32

33
            /* 支持简写 */
34
            border: 3px solid red; /* 默认四个边一样，不区分三者的位置 */
35

36
        }
37

38
        /* 如何画圆 */
39
        #d1 {
40
            height: 600px;
41
            width: 600px;
42
            border-radius: 50% /* 正方形只写50%即可是园，两边不一致是椭圆 */
43
        }
44

45
    </style>
46
</head>
47
<body>
48
<dic>安得猛士兮走四方
49
    <p>
50
        大风起兮云飞扬
51
    </p>
52
</dic>
53
<div id="d1"></div>
54
</body>
55
</html>

【6】display属性#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        #d1 {
8
            /*display: none; !* 隐藏标签，不展示到前端页面且原来的位置也不再占有了，但是存在于文档上 *!*/
9
            display: inline; /* 将标签设置成行内标签的特点 */
10

11
        }
12

13
        #d2 {
14
            display: inline;
15
        }
16

17
        #s1 {
18
            display: block; /* 将标签设置成块级标签的特点 */
19
        }
20

21
        #s2 {
22
            display: block;
23
        }
24

25
        #d3 {
26
        display: inline-block; /* 标签既在一行显示又是块级标签 */
27
        }
28
        #d4 {
29
        display: inline-block;
30
        }
31

32
    </style>
33
</head>
34
<body>
35
<div id="d1"> 001</div>
36
<div id="d2"> 002</div>
37

38
<span id="s1">003</span>
39
<span id="s2">004</span>
40

41
<div id="d3">005</div>
42
<div id="d4">004</div>
43

44
<div id="d5" style="display: none">这是display ， 隐藏且不占位置</div>
45
<div id="d6" style="visibility: hidden">这是visibility ， 隐藏但是占位置</div>"
46

47
</body>
48
</html>

【六】盒子模型#

【1】什么是盒子模型#

盒子模型（Box Model）是指在网页设计中，用于描述和布局元素的一种模型。
- 它将每个元素看作是一个具有四个边界的矩形盒子，包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。

每个盒子模型都由这四个部分组成：#

内容区域（Content）：
- 盒子的实际内容，如文本、图像等。
内边距（Padding）：
- 内容区域与边框之间的空间，用于控制内容与边框之间的距离。
边框（Border）：
- 围绕内容区域和内边距的线条，用于给元素添加外观和样式。
外边距（Margin）：
- 边框与其他元素之间的空间，用于控制元素与周围元素之间的距离。

【2】快递盒#

以快递盒为例
- 快递盒与快递盒之间的距离(标签与标签的距离,margin外边距)
- 盒子的厚度(标签的边框,border)
- 盒子里面的物体到盒子的距离(内容到边框的距离,padding内边距)
- 物体的大小(内容,content)
如果想调整标签与标签之间的距离，可以调整margin外边距
浏览器会自带 8px 的margin
- 一般我们在学也写页面的时候会先将 body 的margin去掉

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        body {
8
            /*margin:0; !* 上下左右全是0 *!*/
9
            /*margin: 12px 10px; !* 第一个参数是上下，第二个参数是左右 *!*/
10
            /*margin: 10px 20px 30px; !* 上 左右 下 *!*/
11
            margin: 10px 20px 30px 60px; /* 上下左右 */
12
        }
13

14
        #p1 {
15
            border: 1px solid red;
16
            padding: 10px 20px 30px 40px; /* 设置内容距边框距离，规律和margin一样 */
17
        }
18
    </style>
19

20
</head>
21
<body>
22
<p>这是一个P标签</p>
23

24
<p id="p1">这是一个P标签1</p>
25
</body>
26
</html>

【七】浮动#

脱离页面，浮动在页面之上
- 没有块级一说，本身多大，浮起来之后就只能占多大。
只要涉及到页面的布局，一般都是用浮动提前规划好

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
  <style>
7
    body {
8
      margin: 0;
9
    }
10

11
    #d1 {
12
      height: 200px;
13
      width: 200px;
14
      background-color: red;
15
      float: left; /* 向左浮动 */
16
    }
17

18
    #d2 {
19
      height: 200px;
20
      width: 200px;
21
      background-color: blue;
22
      float: right; /* 向右浮动 */
23
    }
24
  </style>
25
</head>
26
<body>
27
<div id="d1">
28

29
</div>
30
<div id="d2">
31

32
</div>
33
</body>
34
</html>

案例#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
  <style>
7
    #d1 {
8
      width: 20%;
9
      height: 100px;
10
      background: green;
11
      float: left;
12
    }
13

14
    #d2 {
15
      height: 100px;
16
      width: 20%;
17
      background-color: yellow;
18
      float: right;
19
    }
20
  </style>
21
</head>
22
<body>
23
<div id="d1"></div>
24
<div id="d2"></div>
25
</body>
26
</html>

音乐

音乐

【5.0】前端基础之CSS进阶#

【一】分组与嵌套#

【1】分组#

【2】嵌套#

【二】伪类选择器#

【三】伪元素选择器#

【四】选择器优先级#

【五】CSS属性相关#

【1】长度和宽度#

【2】字体属性#

【3】文字属性#

【4】背景属性#

【5】边框#

【6】display属性#

【六】盒子模型#

【1】什么是盒子模型#

每个盒子模型都由这四个部分组成：#

【2】快递盒#

【七】浮动#

案例#

支持与分享

音乐

CSS 进阶

【5.0】前端基础之CSS进阶#

【一】分组与嵌套#

【1】分组#

【2】嵌套#

【二】伪类选择器#

【三】伪元素选择器#

【四】选择器优先级#

【五】CSS属性相关#

【1】长度和宽度#

【2】字体属性#

【3】文字属性#

【4】背景属性#

【5】边框#

【6】display属性#

【六】盒子模型#

【1】什么是盒子模型#

每个盒子模型都由这四个部分组成：#

【2】快递盒#

【七】浮动#

案例#

支持与分享