標籤:相對 多個 應用 檔案 size font 影響 sheet blog
有參考此片博文
1.內聯式樣式表
是指將CSS樣式編碼寫在HTML標籤中,在標籤內編寫的樣式能影響的範圍最小,只改變本標籤的文字樣式,同樣的標籤不會受到影響,也稱行間樣式表。
格式如下
<h1 style="font-size:12px;color:#000FFF"> 我的CSS樣式。 </h1>
行間樣式表由HTML元素的HTML元素的style支援,只需將CSS代碼用分號隔開寫在style=""之中。這是最基本的形式,但是它沒有實現表現與內容分離且不能靈活的控制多個頁面所以我們只是在調試CSS代碼的時候使用。
2.內部樣式表
在html中通過適用<style>標籤可以設定影響整個文檔的樣式,而且與行間相比,內部樣式表可以把樣式集中放在一個固定的位置。
格式如下
<html> <head> <title>內部樣式表</title> <style type="text/css"> h1{font-size:12px; color:#000FFF} </style> </head> <body> <h1>我的CSS樣式。</h1> </body> </html>
內部樣式表編碼是初級的應用形式,不能達到跨頁面使用所以不適合使用。
3.外部樣式表
3.1我們在<head>中使用了<link>標籤來調用外部樣式表檔案。將link指定為stylesheet方式,並使用了href="style.css"指明樣式表檔案的路徑便可將該頁面應用到在style.css中定義的樣式。
<html> <head> <title>外部樣式表</title> <link rel="stylesheet" rev="stylesheet" href="style.css"> </head> <body> <h1>我的CSS樣式。</h1> </body> </html>
外部style.css的代碼為:
h1{font-size:12px;color:#000FFF}
3.2使用@import引用外部樣式表
@import在<style>標籤內使用,而且必須放在其他css樣式之前,文法代碼如下:
@import url(外部樣式地址)
url為關鍵字,不能隨便更改,外部樣式地址是指外部樣式的URL,可以是絕對,也可以是相對,除了文法和所在位置與<link>標籤不同,其他使用方法和效果都是一樣的。
<style type="text/css">@import url(8.4.1.css);h1{ color:red}</style>
注意後面有分號。
css樣式表設定