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>
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>
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 40px; 22 } 23 .top,.buttom{ 24 100px; 25 height: 100px; 26 background-color: chocolate; 27 } 28 /*.buttom{*/ 29 /* 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>
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>
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 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>
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 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>