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;
}*/