CSS基礎知識總結之css樣式引用的三種方式
阿新 • • 發佈：2018-04-02
基礎 通過 基礎知識 set nbsp 知識總結 引用關系 元素 type
在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>
CSS基礎知識總結之css樣式引用的三種方式