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