本文介绍Web前端中的CSS相关知识。
1. CSS概述
CSS的全称是Cascading style Sheet，即层叠样式表语言。其主要作用是设置HTML页面中某些元素的杨素，让HTML页面更好看。
CSS相当于HTML的化妆品，HTML是主题，CSS依赖HTML，CSS的存在就是修饰HTML，所以新建的文件还是xxx.html。
2. HTML嵌套使用CSS的三种方式
HTML页面嵌套使用CSS主要有三种方式
2.1 内联定义方式
该方式是在标签内部使用style属性来设置元素的css样式，这种方式称为内联定义方式。语法结构如下所示：
1
| <标签 style="样式名:样式值;样式名:样式值;样式名:样式值;。。。"></标签>
|
具体的样式有字体、文本、背景、尺寸、边框、表格等等，可以参考网上文档，这里不再赘述。
简单案例如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!doctype html>
<html>
<head>
<title>HTML中引入CSS样式的第一种方式：内联定义方式</title>
</head>
<body>
<div style="width: 300px; height: 300px; background-color: #CCFFFF; border-color: red; border-width: 1px; border-style: solid"></div>
<br>
<div style="width: 300px; height: 300px; background-color: #CCFFFF; border : black 1px solid"></div>
</body>
</html>
|
2.2 定义内部样式块对象
在head标签中使用style块，style块中设置标签对应的样式，这种方式称为样式块方式。语法结构如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <head>
<style type="text/css">
选择器 {
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
......
}
选择器 {
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
......
}
......
</style>
</head>
|
其中选择器有以下几种方式：
简单案例如下所示：
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
| <!doctype html>
<html>
<head>
<title>HTML中引入CSS样式的第二种方式：样式快</title>
<style type="text/css">
#usernameErrorMsg {
color: red;
font-size: 18px;
}
div {
background-color: blue;
border: 1px solid green;
width: 100px;
height:100px;
}
.myClass {
border: 2px solid pink;
}
</style>
</head>
<body>
<span id="usernameErrorMsg">对不起，用户名不能为空！</span>
<br>
<div></div>
<div></div>
<div></div>
<br>
<input type="text" class="myClass"/>
<br>
<select class="myClass">
<option>专科</option>
<option>本科</option>
</select>
</body>
</html>
|
2.3 链入外部样式表文件
顾名思义，就是将样式写到一个独立的xxx.css文件当中，在需要的网页中直接在head标签中引入css文件，这样样式就引入了。这种方式最常用。语法格式如下所示：
1
| <link type="text/css" rel="stylesheet" href="css文件的路径" />
|
这种方式易维护，维护成本较低。比如很多个html都引入了这个样式文件，那么如果想要修改css样式的话，可以直接修改css文件即可。
其实css文件的内容可以是上面的两种方式，我们只需要在html文档中引入css文件即可。
简单例子如下所示：
1
2
3
4
5
6
7
8
|
a {
text-decoration: none;
}
#links {
cursor: pointer;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!doctype html>
<html>
<head>
<title>HTML中引入CSS样式的第三种方式：引入外部独立的css文件</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<br>
<span id="links">点击我连接到百度</span>
</body>
</html>
|
3. 绝对定位
可以设置一些标签在页面的位置。采用position来设置定位，搭配left和top，left指的是离左边多少像素，top指的是离顶部多少像素。
简单例子如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!doctype html>
<html>
<head>
<title>绝对定位</title>
<style type="text/css">
#div1 {
background-color: black;
border: 1px red solid;
width: 300px;
height: 300px;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
|
4. 备注
参考B站《动力节点》。
