css三種樣式表的建立和區別
阿新 • • 發佈：2018-12-03
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @import url("../css/index.css"); /* 說明：@和import之間沒有空格 url和小括號之間也沒有空格； 括號內部加引號，必須結尾以分號結束；必須放在style標籤的最開始 */ /* 選擇符｛屬性:屬性值;｝ */ div{ width: 200px; height: 200px; border: 1px solid red; } </style> <!-- rel的作用：表示你要引入的外部檔案問樣式表（css檔案） --> <!-- <link rel="stylesheet" href="../css/index.css"> --> </head> <body> <!-- 1、內部樣式表 在head的表籤裡面建立style標籤，在style標籤裡面寫css語法 2、外部樣式表 先建立一css檔案,在css裡面寫css語法，然後在head裡面link標籤引入外部樣式 *link和import匯入外部樣式的區別： 差別1：老祖宗的差別：link屬於XHTML標籤，而@import完全是CSS提供的一種方式。 link標籤除了可以載入CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連線屬性等，@import就只能載入CSS。 差別2：載入順序的差別：當一個頁面被載入的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被載入，而@import引用的CSS 會等到頁面全部被下載完再被載入。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式。 差別3：相容性的差別。：@import是CSS2.1提出的，所以老的瀏覽器不支援，@import只在IE5以上的才能識別，而link標籤無此問題。 差別4：使用dom控制樣式時的差別：當使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的. 3、內聯樣式表 在html標籤中新增style屬性，他的屬性值為css語法 --> <div style="background: green;">我不物質，我只是想要一些物質</div> </body> </html>