CSS篇#

简介#

css即Cascanding Style Sheets(层叠样式表)，是一种用于定义网页样式和布局的语言.

语法#

css通常由选择器,属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式.

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

注:

1.选择器的声明可以写无数条属性.

2.声明的每一行属性,都需要以英文分号结尾.

3.声明中的属性和值都是以键值这种形势出现的.

代码示例:

1
/*这是一个p标签选择器*/
2

3
p{
4

5
  color: blue;
6

7
  font-size: 16px;
8

9
}

CSS导入方式#

常见的三种导入方式

内联样式(Inline Style)
内部样式表(Internal Stylesheet)
外部样式表(External Stylesheet)

三种导入方式的优先级:

“内联样式”>“内部样式表”>“外部样式表”

CSS选择器

CSS有以下选择器,他们提供了不同的方式来选择对象.

元素选择器
类选择器
ID选择器
通用选择器
子元素选择器
后代选择器(包含选择器)
并集选择器(兄弟选择器)
伪类选择器

代码演示

HTML部分:

1
<body>
2
    <h1>不同类型的 CSS 选择器</h1>
3

4
    <h2>这是一个元素选择器示例</h2>
5
    <h3 class="hightlight">这是一个类选择器示例</h3>
6
    <h3>这是另一个类选择器示例</h3>
7
    <h4 id="header">这是一个id选择器</h4>
8
    <div class="father">
9
        <p class="son">这是一个子元素选择器示例</p>
10
        <div>
11
            <p class="grandson">这是一个后代选择器示例</p>
12
        </div>
13
    </div>
14
    <p>这是一个普通p标签</p>
15
    <h3>这是一个相邻兄弟选择器示例</h3>
16
    <p>这是另一个p标签</p>
17

18
    <h3 id="element">这是一个伪类选择器示例</h3>
19
</body>

CSS部分:

1
    <style>
2
        /*元素选择器*/
3

4
        h2 {
5
            color: aqua;
6
        }
7
        /* 类选择器 */
8

9
        .hightlight {
10
            background-color: yellow;
11
        }
12
        /* id选择器 */
13

14
        #header {
15
            font-size: 35px;
16
        }
17
        /* 通用选择器 */
18

19
        * {
20
            font-family: 'KaiTi';
21
            font-weight: bolder;
22
        }
23
        /* 子元素选择器 */
24

25
        .father>.son {
26
            color: yellowgreen;
27
        }
28
        /*后代选择器*/
29

30
        .father p {
31
            color: brown;
32
            font-size: larger;
33
        }
34
        /*相邻元素选择器*/
35

36
        h3+p {
37
            background-color: red;
38
        }
39
        /*伪类选择器*/
40

41
        #element:hover {
42
            background-color: purple;
43
        }
44
        /*
45
        选中第一个子元素 :first-child
46
                        :nth-child
47
                        :active
48
        */
49
        /*
50
        伪元素选择器
51
        ::after
52
        ::before
53
        */
54
    </style>

CSS选择器知识点整理

重点区分：类选择器、ID选择器、伪类选择器、伪元素选择器

类选择器：语法为 .类名
ID选择器：语法为 #id

伪类选择器 用于匹配元素的状态、位置，比如鼠标悬浮、匹配父级下第一个子元素。示例：鼠标悬浮 :hover，给元素添加悬浮后的背景效果；也可以选中父元素中的第一个子元素。

伪元素选择器 语法：::after、::before

⚠️ 伪元素不会选中页面真实已存在的DOM元素，而是创建虚拟元素，分别在目标元素之前、之后插入虚拟内容。

CSS常用属性#

介绍:

css有非常多的属性，但是不代表我们要一次性全部学习，新手阶段可以学习一部分使用频率非常高的属性，当然我们可以在html官网中查看,或者其他网站如菜鸟教程或者w3cschool这些网站中查看.

示例代码:

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>css 常用属性</title>
8
    <style>
9
        .block {
10
            background-color: aqua;
11
            width: 200px;
12
            height: 100px;
13
        }
14

15
        .inline {
16
            background-color: brown;
17
            width: 200px;
18
            width: 200px;
19
        }
20

21
        .inline-block {
22
            width: 100px;
23
            height: 150px;
24
        }
25

26
        .div-inline {
27
            display: inline;
28
            background-color: aquamarine;
29
        }
30

31
        .span-inline-block {
32
            display: block;
33
            background-color: blueviolet;
34
            /* width: 300px; */
35
        }
36
    </style>
37
</head>
38

39
<body>
40
    <h1 style="font: bolder 50px 'KaiTi';">这是一个一级标题</h1>
41
    <p style="line-height: 40px;">这是一个非常非常长的文本,他没有任何作用和意义,仅仅演示行高属性的作用,以便更直观的方式来观测它的样式</p>
42

43
    <div class="block">这是一个块级元素</div>
44
    <span class="inline">这是一个行内元素</span>
45
    <img src="./生成穿女仆装的图片.png" alt="" class="inline-block">
46
    <img src="./生成穿女仆装的图片.png" alt="" class="inline-block">
47
    <img src="./生成穿女仆装的图片.png" alt="" class="inline-block">
48
    <h2>Display</h2>
49
    <div class="div-inline">这是一个转换成行内元素的div 标签</div>
50
    <span class="span-inline-block">这是一个转换为行内块元素的span 标签</span>
51

52
</body>
53

54
</html>

CSS盒子模型#

属性:

属性名	说明
`内容(content)`	盒子包含的实际内容如文本，图片等.
`内边距(padding)`	围绕在内容内部，是内容与边框之间的空间，可以使用`padding`属性来设置
`边框(border)`	围绕在内边距的外部，是盒子的边界，可以使用`border`属性来设置
`外边距(margrin)`	围绕在边框的外部，是盒子与其他元素之间的空间，可以使用`margin`属性来设置

音乐

CSS篇#

简介#

语法#

CSS导入方式#

CSS常用属性#

CSS盒子模型#

支持与分享

评论区

音乐

前端学习笔记CSS篇

CSS篇#

简介#

语法#

CSS导入方式#

CSS常用属性#

CSS盒子模型#

支持与分享

评论区