當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

HTML style屬性用法及代碼示例

HTML中的樣式本質上是描述如何在瀏覽器中呈現文檔的規則。樣式信息可以作為單獨的文檔附加，也可以嵌入HTML文檔中。

有3種方法可以在HTML中實現樣式：

  1. 內聯樣式：在此方法中，樣式屬性用於HTML開始標記內。
  2. 嵌入式風格：在此方法中，樣式元素用於文檔的<head>元素內。
  3. 外部樣式表：在此方法中，<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

相關用法


注：本文由純淨天空篩選整理自Shubrodeep Banerjee大神的英文原創作品 HTML | style attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。