SuifengFlying

公告

欢迎来到我的博客，这里记录生活与技术。

了解更多

668 字

3 分钟

CSS

2026-07-28

Web

CSS

/

Web

/

前端

CSS#

什么是CSS#

CSS：Cascading Style sheets(层叠样式表)
作用：应用在html页面中，实现了对页面的美化
功能：页面布局设计、页面美化

html中使用CSS#

标签属性
- 每一个html标签都有css属性：style
- <input type=“text” style=“color”/>
css片段
- 在html页面中的头部

格式

1
<html>
2

3
<head>
4
    <style>
5
        所有css样式
6
    </style>
7
</head>
8

9
</html>

引入CSS文件
- <link rel=“stylesheet” type=“text/css” href=“css文件地址”/>

CSS选择器分类#

选择器是指：在应用CSS时，使用什么方式

标签选择器#

使用html标签的形式操作CSS

格式

1
标签名称{
2
/* CSS样式 */
3
}

示例

1
<style>
2
    input {
3
        color: red
4
    }
5
</style>

id选择器#

每一个标签都有id属性

可以通过Id属性设置/操作css样式

格式

1
#id名称 {
2
  /* CSS样式 */
3
}

类选择器#

每一个标签都有class属性

可以通过class属性设置/操作css样式

格式

1
.class名称 {
2
  /* CSS样式 */
3
}

关联选择器#

可以对指定的标签范围进行设置css样式

格式

1
标签 标签下的标签 {
2
  /* CSS样式 */
3
}

组合选择器#

同一个css样式可以作用到不同的标签中

格式

1
标签1，标签2，... {
2
  /* CSS样式 */
3
}

伪元素选择器#

css里面提供了一些定义好的样式，直接使用即可
例如：超链接，提供如下状态
- 原始状态
- 鼠标停放状态
- 鼠标点击状态
- 鼠标点击之后的状态

示例

1
/*原始状态*/
2
a:link {
3
color: red;
4
}
5
/*鼠标停放状态*/
6
a:hover {
7
color: green;
8
}
9
/*鼠标点击状态*/
10
a:active {
11
color: blue;
12
}
13
/*鼠标点击之后*/
14
a:visited {
15
color: gray;
16
}

CSS案例1：#

1
body {
2
    /*设置body背景图片*/
3
    background-image: url(img/fish.jpg);
4
    /*设置body背景图片尺寸*/
5
    background-size: 1000px;
6
    /*对body背景图片裁剪*/
7
    background-repeat: no-repeat;
8
}
9

10
#box {
11
    width: 300px;
12
    height: 300px;
13
    background-color: #cccccc80;
14
    border-radius: 10px;
15
    margin: 50px auto;
16
}
17

18
.btn {
19
    width: 200px;
20
    height: 40px;
21
    margin-top: 20px;
22
    background-color: #cc33cc;
23
    border: 0px;
24
    color: white;
25
    font-size: 30px;
26
    font-family: 华文行楷;
27
    font-weight: bold;
28
    border-radius: 5px;
29
}
30

31
.btn:hover {
32
    background-color: #cc66cc;
33
    cursor: pointer;
34
}
35

36
.btn:active {
37
    background-color: #cc99cc;
38
}

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

4
<head>
5
    <meta charset="UTF-8">
6
    <title>Title</title>
7
    <link rel="stylesheet" type="text/css" href="css2.css">
8
</head>
9

10
<body>
11
    <div id="box" align="center">
12
        <img src="img/dog.png" width="100" height="150">
13
        <button class="btn">按钮1</button>
14
        <button class="btn">按钮2</button>
15
    </div>
16
</body>
17

18
</html>

CSS案例2：#

1
.box {
2
    background-color: #6699FF;
3
    width: 400px;
4
    height: 300px;
5
    text-align: center;
6
    margin: 100px auto;
7
    padding-top: 50px;
8
    border-radius: 10px;
9
    box-shadow: 3px 3px 10px #006666;
10
}
11

12
.title {
13
    color: #9900cc;
14
    font-weight: bold;
15
    font-size: 20px;
16
}
17

18
.inp {
19
    margin-top: 20px;
20
}
21

22
input {
23
    width: 300px;
24
    height: 35px;
25
    border: 0px;
26
    border-radius: 5px;
27
}
28

29
.btn {
30
    background-color: #cc99cc;
31
    color: white;
32
    margin-top: 20px;
33
}
34

35
.btn:hover {
36
    background-color: #cc33cc;
37
    cursor: pointer;
38
}
39

40
.name {
41
    background-image: url("img/name.jpg");
42
    background-repeat: no-repeat;
43
    background-size: 40px;
44
    padding-left: 42px;
45
    width: 250px;
46
}
47

48
.pwd {
49
    background-image: url("img/pwd.jpg");
50
    background-repeat: no-repeat;
51
    background-size: 40px;
52
    padding-left: 42px;
53
    width: 250px;
54
}

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

4
<head>
5
    <meta charset="UTF-8">
6
    <title>Title</title>
7
    <link rel="stylesheet" type="text/css" href="css3.css">
8
</head>
9

10
<body>
11
    <div class="box">
12
        <div class="title">登&nbsp;&nbsp;录&nbsp;&nbsp;界&nbsp;&nbsp;面</div>
13
        <div class="inp"><input type="text" class="name" /></div>
14
        <div class="inp"><input type="password" class="pwd" /></div>
15
        <div class="inp"><input type="submit" class="btn" value="提交" /></div>
16
    </div>
17
</body>
18

19
</html>

CSS

https://mizuki.mysqil.com/posts/2css/

作者

SuifengFlying

发布于

2026-07-28

许可协议

CC BY-NC-SA 4.0

Web基础

2 / 5

HTML JavaScript

欢迎来到 SuifengFlying!