【4.0】前端基础之CSS#

【一】什么是CSS#

层级样式表：
- 就是给HTML标签添加样式的，让它变得好看

【二】注释语法#

1
/* 这是注释 */

【三】CSS的语法结构#

1
选择器 {
2
    属性1:值1;
3
    属性2:值2;
4
    属性3:值3;
5
    属性4:值4;
6
    属性5:值5;
7
}

【四】CSS的三种引入方式#

【1】style标签内部直接书写#

1
  <style>
2
    <!--
3
    方式一-- >
4
    h1 {
5
      color: blue;
6
    }
7
  </style>

【2】引入外部CSS文件(最正规的方式，解耦合)#

link标签引入外部文件
01.css

1
h1 {
2
      color: blue;
3
    }

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
  <link rel="stylesheet" href="01.css">
7
</head>
8
<body>
9
  <h1>
10
    这是一级标题
11
  </h1>
12
</body>
13
</html>

【3】行内式(一般不用)#

【五】基本选择器#

id选择器
类选择器
元素/标签选择器
通用选择器

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

7
    <style>
8
        /* （1）id 选择器 */
9
        /* 找到id为d1的标签，将其内部的颜色变为greenyellow */
10
        #d1 {
11
            color: greenyellow;
12
        }
13

14
        /* （2）类选择器 */
15
        /* 找到c1类的标签，将其颜色变为blue */
16
        .c1 {
17
            color: blue;
18
        }
19

20
        /*（3）元素/标签选择器 */
21
        /* 找到所有的span标签，变成红色 */
22
        span {
23
            color: red;
24
        }
25

26
        /*  通用选择器 */
27
        /* 将页面上的全部内容变为blue */
28
        * {
29
            color: blue;
30
        }
31

32
    </style>
33

34

35
</head>
36
<body>
37

38
<div id="d1" class="c1 c2">
39
    <p>div里面的p标签</p>
40
    <span>div里面的span标签</span>
41
</div>
42

43
<p id="d2" class="c1 c2">这是一个p标签</p>
44
<span id="d3" class="c3">这是span标签1------11111</span>
45
<span id="d4" class="c4">这是span标签2------22222</span>
46

47

48
</body>
49
</html>

【六】组合选择器#

后代选择器
儿子选择器
毗邻选择器
弟弟选择器

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

7
    <style>
8
        /* 后代选择器 */
9
        /* div下的span标签变成红色 */
10
        div span {
11
            color: red;
12
        }
13

14
        /* 儿子选择器 */
15
        /*  */
16
        div > span {
17
            color: greenyellow;
18
        }
19

20
        /* 毗邻选择器 */
21
        /* 同级别紧挨着的下面的第一个 */
22
        div + span {
23
            color: green;
24
        }
25

26
        /* 弟弟选择器 */
27
        /* 同级别下面的所有span标签 */
28
        div~span{
29
            color: burlywood;
30
        }
31

32

33
    </style>
34

35
</head>
36
<body>
37

38
<span>这是span标签 1 </span>
39
<span>这是span标签 2 </span>
40
<div>这是 div 标签
41
    <p>
42
        这是div里面的 第一个 p 标签
43
    </p>
44

45
    <p>这是div里面的第二个 p 标签
46
        <span>
47
            这是div标签里面的第二个 p 标签下的 span 标签
48
        </span>
49
    </p>
50

51
    <span> 这是div里面的第一个 div 标签 </span>
52
    <span> 这是div里面的第二个 div 标签 </span>
53

54
</div>
55
<span>这是div底部的 第一个 span 标签 </span>
56
<span>这是div底部的 第二个 span 标签 </span>
57

58
</body>
59
</html>

【七】属性选择器#

含有某个属性
含有某个属性并且有某个值
含有某个属性并且有某个值的某个标签

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

7
    <style>
8
        /* 将所有含有属性名是username的标签背景色改为红色 */
9
        [username] {
10
            background-color: green;
11
        }
12

13
        /* 找到所有属性名是username并且属性值是dream的标签 */
14
        [username="dream"] {
15
            background-color: blue;
16
        }
17

18

19
        /* 找到所有属性名是username并且属性值是dream的input标签 */
20
        input[username="dream"] {
21
            background-color: green;
22
        }
23

24
    </style>
25

26
</head>
27
<body>
28
<input type="text" username>
29
<input type="text" username="dream">
30
<input type="text" username="mengmeng">
31
<p username="dream">this is dream</p>
32
<div username="mengmeng"> this is mengmeng</div>
33
</body>
34
</html>

音乐

音乐

【4.0】前端基础之CSS#

【一】什么是CSS#

【二】注释语法#

【三】CSS的语法结构#

【四】CSS的三种引入方式#

【1】style标签内部直接书写#

【2】引入外部CSS文件(最正规的方式，解耦合)#

【3】行内式(一般不用)#

【五】基本选择器#

【六】组合选择器#

【七】属性选择器#

支持与分享

音乐

CSS 基础

【4.0】前端基础之CSS#

【一】什么是CSS#

【二】注释语法#

【三】CSS的语法结构#

【四】CSS的三种引入方式#

【1】style标签内部直接书写#

【2】引入外部CSS文件(最正规的方式，解耦合)#

【3】行内式(一般不用)#

【五】基本选择器#

【六】组合选择器#

【七】属性选择器#

支持与分享