在html中增加css样式有三种：
1.在标签中增加style属性：
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>天蓝蓝</title> <!--tag标签的图标--> <link rel="shortcut icon" href="timg.jpg"> </head> <body> <div style="background-color: blue ;width: 80px;height: 80px "></div> </body> </html>
2.
第二种可以在head中增加style标签 style中通过选择器定位标签增加style样式
css选择器：
id选择器：
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>天蓝蓝</title> <style> /*id选择器*/ /*#代表id，#i1代表定位到class为i1的元素*/ #i1{ background-color: #000000; width: 80px; height: 80px; } </style> </head> <body> <!--id在html只允许出现一个同名id--> <div id="i1"></div> </body> </html>
class选择器：最常用
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>天蓝蓝</title> <style> /*class选择器*/ /*.代表class，.c1代表定位到class为c1的元素*/ .c1{ background-color: #000000; width: 80px; height: 80px; } </style> </head> <body> <div class="c1"></div> </body> </html>
标签选择器：
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>天蓝蓝</title> <style> /*标签选择器*/ /*所有的div的标签都带有下面属性*/ div{ background-color: pink; width: 80px; height: 80px; } </style> </head> <body> <div class="c1"></div> <div></div> </body> </html>
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>天蓝蓝</title> <style> div{ background-color: pink; width: 80px; height: 80px; } .c1{ background-color: blue; width: 80px; height: 80px; } </style> </head> <body> <div class="c1"></div> <div></div> </body> </html>
层级选择器：
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>天蓝蓝</title> <style> /*层级选择器*/ div span{ background-color: red; width: 80px; height: 80px; } #i1 span{ background-color: blue; width: 80px; height: 80px; } .c1 span{ background-color: pink; width: 80px; height: 80px; } </style> </head> <body> <div class="c1"> <span>这是span标签</span> </div> <div id="i1"> <span>这是span标签</span> </div> <div> <span>层级选择器</span> </div> </body> </html>
多个标签引用同一个标签：
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>天蓝蓝</title> <style> /*多个标签引用同一个标签*/ #i1,#i2,#i3{ background-color: blue; width: 80px; height: 80px; } .c1{ background-color: pink; width: 80px; height: 80px; } </style> </head> <body> <div id="i1"></div><br> <div id="i2"></div><br> <div id="i3"></div> <div class="c1"></div> <div class="c1"></div> <div class="c1"></div> </body> </html>
3. 在head里面使用link引入css样式表：
css表：c1.css
.c1{ background-color:red; width: 80px; height: 80px; }
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>天蓝蓝</title> <link rel="stylesheet" href="c1.css"> </head> <body> <div class="c1"></div> <div class="c1"></div> </body> </html>
样式表的引用顺序联系：
css表：c2.css
.c1{ background-color: pink; width: 100px; height: 100px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<link rel="stylesheet" href="c2.css">--> <style> /*样式表的引用关系，以标签为起的位置，由下而上的开始应用*/ .c1{ background-color: red; width: 100px; height: 100px; } </style> <link rel="stylesheet" href="c2.css"> </head> <body> <div class=‘c1‘ style="background-color: #0000CC;width: 100px;height: 100px"></div> </body> </html>
