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