HTML中的樣式本質上是描述如何在瀏覽器中呈現文檔的規則。樣式信息可以作為單獨的文檔附加,也可以嵌入HTML文檔中。
有3種方法可以在HTML中實現樣式:
- 內聯樣式:在此方法中,樣式屬性用於HTML開始標記內。
- 嵌入式風格:在此方法中,樣式元素用於文檔的<head>元素內。
- 外部樣式表:在此方法中,<link>元素用於指向外部CSS文件。
內聯樣式:在內聯樣式中,CSS規則使用style屬性直接寫入開始標記內。樣式屬性包括一係列CSS屬性和值對。每個“屬性:值”對之間用分號(;)分隔。
- Example:
<!DOCTYPE html> <html> <head> </head> <body> <h1 style="color:Blue;font-size:25px;"> Example of Inline Style </h1> <p style="color:red;">First paragraph</p> <p style="color:green;font-size:40px;"> Second paragraph </p> <hr style="border-color:orange;"> </body> </html>
- Output:
嵌入樣式:嵌入樣式表或內部樣式表僅影響嵌入它們的文檔。嵌入樣式表是使用<style>標記在HTML文檔的<head>部分中定義的。
- Example:
<!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> body { background-color:powderblue; } h1 { color:black; font-family:arial; } p { color:yellow; font-family:verdana; } </style> </head> <body> <h1>Example of Embedded Style</h1> <p>First paragraph.</p> </body> </html>
- Output:
外部樣式表:當必須將CSS應用於各種網頁時,外部樣式表方法會很有用。外部樣式表將所有樣式規則保存在一個單獨的文檔中,您可以從網站上的HTML文件鏈接該文檔。
有兩種附加外部樣式表的方法-
- 鏈接外部樣式表
- 導入外部樣式表
鏈接外部樣式表:
在這種方法中,使用<link>標記將外部樣式表鏈接到HTML文檔。
- Example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/html/css/externalstyle.css"> </head> <body> <h3>Example of Linking External Style Sheet</h3> <p>First paragraph.</p> </body> </html>
- Output:
導入外部樣式表:
可以使用“@import”將外部樣式表加載到HTML文檔中。 “@import”語句指示瀏覽器加載CSS文件。其他CSS規則也可以使用<style>元素包括在內。
- Example:
<!DOCTYPE html> <html> <head> <style type = "text/css"> @import url("/html/css/importstyle.css"); p{color:powderblue; font - size:30px;} </style> </head> <body> <h3>Example of external style sheet using import</h3> <p>First paragraph</p> </body> </html>
- Output:
支持的瀏覽器:樣式屬性支持的瀏覽器如下:
- 穀歌瀏覽器
- IE瀏覽器
- Firefox
- Opera
- Safari
相關用法
- HTML <style> media屬性用法及代碼示例
- HTML <style> type屬性用法及代碼示例
- SVG font-style屬性用法及代碼示例
- SVG style屬性用法及代碼示例
- HTML <html> xmlns屬性用法及代碼示例
- HTML Style backgroundClip用法及代碼示例
- HTML Style borderTop用法及代碼示例
- HTML Style columnGap用法及代碼示例
- HTML Style boxSizing用法及代碼示例
- HTML Style用法及代碼示例
- HTML Style borderImageSource用法及代碼示例
- HTML Style wordBreak用法及代碼示例
- HTML Style pageBreakBefore用法及代碼示例
- HTML Style columnRuleWidth用法及代碼示例
- HTML Style transitionTimingFunction用法及代碼示例
- HTML Style zIndex用法及代碼示例
- HTML Style overflowY用法及代碼示例
- HTML Style borderTopLeftRadius用法及代碼示例
- HTML Style order用法及代碼示例
- HTML Style minWidth用法及代碼示例
- HTML Style visibility用法及代碼示例
注:本文由純淨天空篩選整理自Shubrodeep Banerjee大神的英文原創作品 HTML | style attribute。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。