<!--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>