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


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。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。