<!--1.行内样式
<p style="background-color:red;font-size:20px">
-->
<!--2.页内样式
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color:gray;
}
div{
background-color:red;
}
p{
font-size:50px;
}
</style>
</head>
-->
<!--3.外部样式
<link rel="stylesheet" href="./css/index.css">
-->
<!--
CSS样式规律：
1>就近原则（谁离我的内容近就用谁）
2>叠加原则
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color:gray;
}
div{
background-color:red;
}
p{
font-size:50px;
}
<!--引用外部的css样式 rel层叠样式表 -->
<link rel="stylesheet" href="./css/index.css">
</style>
</head>
<body>
<div style="font-size:20px;color:blue;">22222222222222222</div>
<p>11111111111111111111111111111111111111111</p>
</body>
</html>