06 css

. 1  <! DOCTYPE HTML > 
2  < HTML > 
. 3      < head > 
. 4          < Meta charset = "UTF-. 8" > 
. 5          < title > </ title > 
. 6          < style type = "text / CSS" > 
. 7              / * CSS codes * / 
8              #box { 
9                  / * code here says that tell the browser should be modified to look like html tags * / 
10                  / * color represents the color set * / 
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         <! - benefits of this approach: Let the html code and css code is easy to maintain separation -> 
28          <! - <Link rel = "stylesheet" of the type = "text / css" href = "style / index.css" /> -> 
29          
30      </ head > 
31 is      < body > 
32          <-! to associate custom name -> 
33 is          <-! <div style = "Color: Green;"> this is a box </ div> -> 
34 is          < div ID = "Box" > this is a Box </ div > 
35          < div class = "BOX2" >
36              This is BOX2
 37 [          </ div> 
38          <! - Demand: p tag inside the fonts are arranged in red -> 
39          < p > This is P1 </ p > 
40          < p > This is P2 </ p > 
41 is          < p > This is p3 </ P > 
42 is          < P > this is P4 </ P > 
43 is      </ body > 
44 is  </ HTML >