第二种增加css样式的方法，可以在head中增加style标签，style中通过选择器定位标签增加css样式
CSS选择器分为六种：
1、id选择器
2、class选择器
3、标签选择器
4、层级选择器（空格）
5、组合选择器（逗号）
6、属性选择器（中括号）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 8 9 /*id选择器*/ 10 #i1{ 11 background-color: #0000CC; 12 width: 100px; 13 height: 50px; 14 } 15 16 17 </style> 18 </head> 19 <body> 20 21 <div id="i1">id选择器</div> 22 23 </body> 24 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 8 9 /*class选择器*/ 10 .c1{ 11 background-color: red; 12 width: 100px; 13 height: 50px; 14 } 15 16 /*为什么有id和class两种选择器？*/ 17 /*id在html页面中，只允许出现1个同名id；但是class是可以重复的；*/ 18 /*实际前端开发中，主要用class进行定位的，因为多个标签可以同时引用一个css样式*/ 19 20 21 </style> 22 </head> 23 <body> 24 25 <div class="c1">class选择器</div> 26 27 </body> 28 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 8 9 /*标签选择器*/ 10 /*表示 这个页面下所有的div标签，都增加这个样式*/ 11 div{ 12 background-color: pink; 13 width: 100px; 14 height: 100px; 15 } 16 17 18 </style> 19 </head> 20 <body> 21 22 <div></div> /*标签选择器*/ 23 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 8 9 /*层级选择器*/ 10 /*表示div标签下的span标签使用这个样式*/ 11 div span{ 12 background-color: pink; 13 width: 100px; 14 height: 100px; 15 } 16 17 18 </style> 19 </head> 20 <body> 21 22 <div> 23 <span>层级选择器</span> 24 </div> 25 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 8 9 /*id组合选择器 id i1 i2 i3 共用一套css样式*/ 10 #i1, #i2, #i3 { 11 background-color: #0000CC; 12 width: 100px; 13 height: 100px; 14 } 15 16 17 /* 组合选择器 class s1 s2 s3 共用一套css样式*/ 18 .s1,.s2,.s3{ 19 20 background-color: darkmagenta; 21 22 height:48px; 23 24 } 25 26 27 /*最常用：class层级选择器*/ 28 .c2 span{ 29 background-color:blue; 30 width: 100px; 31 height: 100px; 32 } 33 34 35 36 </style> 37 </head> 38 <body> 39 40 <!--id组合选择器--> 41 <div id="i1"></div><br> 42 <div id="i2"></div><br> 43 <div id="i3"></div> 44 45 46 <!-- class组合选择器 --> 47 <div class="s1"></div> 48 <div class="s2"></div> 49 <div class="s3"></div> 50 51 <!--class选择器--> 52 <div class="c2"> 53 <span>123</span> 54 </div><br> 55 <div class="c2"> 56 <span>456</span> 57 </div><br> 58 <div class="c2"> 59 <span>789</span> 60 </div> 61 62 </body> 63 </html>