06 css 

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标签里面的字体都设置成红色-->
           <!-- 没有整合的17-22行-->
           /*<p id="p1">这是p1</p>
           <p id="p2">这是p2</p>*/
39         <p>这是p1</p>
40         <p>这是p2</p>
41         <p>这是p3</p>
42         <p>这是p4</p>
43     </body>
44 </html>

 

posted @ 2019-09-02 09:03  慕少溪梓  阅读(105)  评论(0)    收藏  举报