1:css method：css is better to put in a text.css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 <!--the second method of introduce css:-->
 7 
 8 <!--    <style>-->
 9 <!--        p{-->
10 <!--           color:rebeccapurple;-->
11 <!--            font-size: 40px;-->
12 <!--        }-->
13 <!--        a{-->
14 <!--            text-decoration:none;-->
15 <!--        }-->
16 <!--    </style>-->
17 
18 <!-- ##############the best method: third meethod of introduce css:   -->
19 <!--    <link rel="stylesheet" href="test1.css">-->
20 
21 <!-- the fourth meethod of introduce css:   -->
22     <style>
23         @import "test1.css";
24     </style>
25 </head>
26 <body>
27 
28 <!--the first introduce method:-->
29 <!--<div style="color: red;background-color: blue">hello chen</div>-->
30 
31 <div>hello div</div>
32 <p>hello p</p>
33 <a href="">click me</a>
34 </body>
35 </html>
View Code

2：css selector:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 
  7     <style>
  8         /**{*/
  9         /*    color: red;*/
 10         /*}*/
 11         div{
 12 
 13         }
 14 
 15         #littlep{
 16             background-color: yellow;
 17         }
 18 
 19         .bigp{
 20             color: crimson;
 21         }
 22 
 23 /*id is unique so it can be find just by #       */
 24         /*p#littlep{*/
 25         /*   background-color: cornflowerblue;*/
 26         /*}*/
 27         div.bigp{
 28             color: chocolate;
 29         }
 30 
 31         #littlep,div.bigp{
 32             color: darkgreen}
 33 
 34         .div1 div{
 35             color: darkmagenta;
 36         }
 37 
 38         .div1 .div2{
 39             color: fuchsia;
 40         }
 41 
 42         .div1 +div{
 43             background-color: cyan;
 44         }
 45         [alex]{
 46             color: darkred;
 47         }
 48         /*[alex="dasb"]{*/
 49         /*    color: cornflowerblue;*/
 50         /*    font-size: 40px;*/
 51         /*}*/
 52         p[alex="dasb"]{
 53             color: cornflowerblue;
 54             font-size: 40px;
 55         }
 56 
 57         [alex~="li"]{
 58             color: pink;
 59         }
 60         [alex^="l"]{
 61             color: blueviolet;
 62         }
 63         [alex*="l"]{
 64             color: blueviolet;
 65         }
 66  /*just for second level:.div1>.bigp*/
 67 
 68     </style>
 69 </head>
 70 <body>
 71 
 72 <div>hello div</div>
 73 <p id="littlep">hello p</p>
 74 <p class="bigp">ppp</p>
 75 <p class="bigp">pp</p>
 76 <p>p</p>
 77 
 78 <div class="bigp">div</div>
 79 
 80 <a href="">aaa</a>
 81 
 82 <div class="div1">
 83     <div>
 84         <a href="">a</a>
 85         <p>pppppp</p>
 86         <div>div3</div>
 87     </div>
 88     <p>pppppppppp</p>
 89     <div class="div2">div2</div>
 90 </div>
 91 <div>after div1</div>
 92 <p>after div1 p</p>
 93 
 94 <!--attribute selector:-->
 95 
 96 <div>hello1</div>
 97 <div alex="sb">alex</div>
 98 <div alex="dasb">hello2</div>
 99 <p alex="dasb">pppppp</p>
100 <div alex="ls lis">hello3</div>
101 
102 </body>
103 </html>
View Code

3:fack.html:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7     a:link{
 8         color: red;
 9     }
10     a:visited{
11         color: chartreuse;
12     }
13     a:hover{
14         color: blueviolet;
15     }
16     a:active{
17         color: yellow;
18     }
19 
20      .box{
21          width:40px;
22      }
23       .top,.buttom{
24           width: 100px;
25           height: 100px;
26           background-color: chocolate;
27       }
28     /*.buttom{*/
29     /*      width: 100px;*/
30     /*      height: 100px;*/
31     /*      background-color: blueviolet;*/
32     /*  }*/
33     /*.top:hover{*/
34     /*    background-color: red;*/
35     /*}*/
36         .box:hover .top{
37             background-color: coral;
38         }
39         .add:after{
40             content: ' welcome to learn html';
41             color: red;
42         }
43     </style>
44 </head>
45 <body>
46 
47 <a href="css_selector.html">hello-world</a>
48 <div class="box">
49     <div class="top"></div>
50     <div class="buttom"></div>
51 </div>
52 
53 <div class="add">hello chen</div>
54 </body>
55 </html>
View Code

4:priority:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8 /*        .div1{*/
 9 /*            color: rebeccapurple;*/
10 /*        }*/
11 /*        div{*/
12 /*            color: chocolate;*/
13 /*        }*/
14 /*        #id1{*/
15 /*            color: lightblue;*/
16 /*        }*/
17 /*        .div3{*/
18 /*            color: crimson;*/
19 /*        }*/
20 /*        #div1 .div3{*/
21 /*            color: darkgoldenrod!important;*/
22 /*        }*/
23 /*        #div1 .div2 div{*/
24 /*            color: yellow;*/
25 /*        }*/
26         #div1{
27             color: crimson;
28         }
29     </style>
30 </head>
31 <body>
32 
33 <div id="div1">hello1
34     <div class="div2">hello2
35         <div class="div3">
36             div3
37         </div>
38     </div>
39 </div>
40 <!--        <div class="div1" id="id1" style="color:green">priority</div>-->
41 </body>
42 </html>
View Code

5:attribute_handle:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{
 8             /*color: #228B22    ;*/
 9             /*color: rgb(255,0,0);*/
10             color: rgba(200,55,78,0.3);
11             font-size: 70px;
12             font-weight: 100;
13             font-style: italic;
14         }
15 
16         .back{
17             border: 1px solid red;
18             width: 800px;
19             height: 800px;
20             background-image: url("gou.jpg");
21             background-repeat: no-repeat;
22             /*background-repeat:repeat-x;*/
23             background-position: 0 center;
24         }
25     </style>
26 </head>
27 <body>
28 
29 <p>独在异乡为异客</p>
30 <div class="back">
31 
32 </div>
33 </body>
34 </html>
View Code

6:background:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         span{
 9             display: inline-block;
10             width: 18px;
11             height: 20px;
12             /*background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");*/
13             /*background-position: 0 -100px;*/
14             background: no-repeat 0 -100px url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
15         }
16     </style>
17 </head>
18 <body>
19 
20 <span></span>
21 <span></span>
22 <span></span>
23 
24 
25 </body>
26 </html>
View Code