1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css使用方法</title> 6 <!----> 7 <style type = "text/css"> 8 /*css代码*/ 9 10 /*id选择器*/ 11 #box{ 12 /*color表示设置颜色*/ 13 color:blue; 14 } 15 16 17 /*类选择器*/ 18 .box3{ 19 color: cornflowerblue; 20 } 21 22 #p1{ 23 color: red; 24 } 25 26 /*标签选择器*/ 27 p{ 28 color: blueviolet; 29 } 30 </style> 31 <!--这种方式的好处：让html代码和css代码分离，方便维护--> 32 <link rel="stylesheet" type="text/css" href="style/next.css" /> 33 </head> 34 <body> 35 <!--通过自定义名字产生关联--> 36 <div id = "box">这是一个盒子</div> 37 <div id = "box2">这是一个盒子</div> 38 <div style = "color:green;" >这是一个盒子</div> 39 <div class = "box3">这是一个box</div> 40 <!--需求：把p标签的字体都设置为红色--> 41 <p id="p1">这是p1</p> 42 <div id="p1">这是p2</div> 43 <p id="p1">这是p3</p> 44 <p id="p1">这是p4</p> 45 <!--需求：把p标签的字体都设置为红色--> 46 <p >这是p1</p> 47 <p >这是p2</p> 48 <p >这是p3</p> 49 <p >这是p4</p> 50 </body> 51 </html>