您好,登錄后才能下訂單哦!
小編給大家分享一下html如何引用css樣式,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
將樣式表應用于HTML文檔和CSS中的XHTML文檔大致可分為以下三種方法。
1、使用<link>元素調用并應用外部CSS文件
2、使用<style>元素應用于文檔單元
3、通過向元素添加樣式屬性來應用樣式
使用<link>元素調用并應用外部CSS文件
創建一個CSS文件,與HTML文件分開描述樣式表,并從HTML文件中調用它。對于調用,通過描述HTML文檔的<head>元素中的<link>元素來指定外部CSS文件。要通知瀏覽器等應用的樣式基于CSS,請為<link>元素的type屬性的值指定text / css。考慮到與XHTML的兼容性,易于修改樣式等,建議以這種方式設置樣式表。
樣式表部件在外部文件(xxx.css)中描述。
p {color:blue; line-height:1.5;}
HTML源代碼
<html> <head> <link rel =“ stylesheet ”type =“ text / css ”href =“ xxx.css ”> </ head> <body> <p>這是一個段落</ p> </ body> </ html>
使用<style>元素應用于文檔單元
在HTML文檔的<head>元素中編寫<style>元素,并為每個文檔設置樣式表。指定text / css作為<style>元素的type屬性的值,以通知瀏覽器等應用的樣式基于CSS。
此外,使用<! - - >注釋樣式表部分是為了防止<style>元素的內容顯示在與樣式表不對應的舊瀏覽器中。但是,由于近年來大多數瀏覽器都支持<style>元素,即使省略<! -- 和-->,也幾乎沒有問題。
<html> <head> <style type="text/css"> <!-- p {color:blue; line-height:1.5;} --> </style> </head> <body> <p>這是一個段落。</p> </body> </html>
通過向元素添加樣式屬性來應用樣式
向元素添加樣式屬性,并直接在HTML源代碼中描述樣式規范。為了通過style屬性指定樣式,為了通知瀏覽器等文檔中使用的樣式表是CSS,在<head>元素中添加<meta>元素并指定樣式語言指定text / css作為值。在許多情況下,即使您沒有指定,也會由瀏覽器自動判斷,但您也應該編寫它以避免出現故障。
樣式屬性的樣式指定對于部分區分樣式的優先級很有用,但隨著HTML源變得復雜,它往往會使樣式管理復雜化。當旨在實現高效的樣式管理時,通常將CSS部分轉換為外部文件。
示例:直接使用樣式屬性應用樣式表
<html> <head> <meta name="Content-Style-Type" content="text/css"> </head> <body> <p style="color:blue; line-height:1.5;">這是一個段落。</p> </body> </html>
看完了這篇文章,相信你對html如何引用css樣式有了一定的了解,想了解更多相關知識,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。