第12章 CSS入门-CSDN博客

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS入门</title>
<!-- 	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="test.css"> -->
	<style type="text/css">
/*	p {
		color: red;
		font-size: 30px;
	}*/
/*	p {
		color: green;
		font-size: 30px;
		font-style: italic;
	}*/
	p {
		color: red;
		border: 1px solid orange;
	}
	b {
		border: inherit;
	}
	</style>
</head>
<body>


<!-- <p style="color:red;font-size:50px;">这是一段文本</p> -->

<!-- <p>这是另一段文本</p> -->

<!-- <p>这是第三段<b>文本</b></p> -->

<!-- <b>b元素本身隐含加粗样式</b>

<span style="font-weight:bold;">span元素没有隐含，但可以设置它加粗</span>

<b style="font-weight:normal;">去除b元素的隐含样式</b> -->


<!-- <p style="font-size:50px;color:orange;">我要叠加三种定义样式的方式</p> -->


<p>这是<b>HTML5</b></p>

</body>
</html>

style.css

@charset "utf-8";
/*@import "test.css";*/

/*p {
	color: red;
	font-size: 20px;
}*/

p {
	color: red !important;
	font-size: 20px !important;
	font-weight: bold;
}

test.css

@charset "utf-8";

/*b {
	font-style: italic;
}*/