CSS

课程源代码

外联样式

1
2
3
4
5
6
7
body {
	background: burlywood;
}

p {
	color: yellow;
}
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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS练习</title>
		<!-- 外部样式 -->
		<link rel="stylesheet" type="text/css" href="css/mycss.css" />
		<!-- 嵌入样式 -->
		<style type="text/css">
			p {
				color: black;
				border: 1px solid black;
			}

			div {
				border: 2px solid pink;
			}

			.p1 {
				color: pink;
			}

			.p2 {
				color: red;
			}

			.p3 {
				color: green;
			}
			.bgblue{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<!-- 内联样式 -->
		<!-- <p style="color: red;font-size: 20px;">这是一个段落</p> -->
		<!-- <div>这是一个盒子</div> -->
		<p class="p1">这是一个段落</p>
		<p class="p2">这是一个段落</p>
		<p class="p3">这是一个段落</p>
		<div class="p2 bgblue">这是一个盒子</div>
		<h1 class="p2 bgblue">这是一个标题</h1>
	</body>
</html>