級聯樣式表 (CSS) 是一種標記語言,用于確定網頁的顯示方式。它管理網站元素的顏色,字體和布局,并允許您向頁面添加效果或動畫。
我們可以通過三種方式設置HTML文件/頁面的樣式:外部樣式,內部樣式和內聯樣式。在本文中,我們將重點介紹內聯樣式。
如何在 HTML 中使用內聯樣式
使用 style 屬性,我們可以將樣式應用于具有內聯樣式的單個 HTML 標記內的 HTML。
樣式屬性的工作方式與任何其他 HTML 屬性相同。我們使用 ,后跟等號 (=),然后是一個引號,其中所有樣式值都將使用標準 CSS 屬性值對 - 存儲。style"property: value;"
注意: 我們可以擁有任意數量的屬性-值對,只要我們用分號(;)分隔它們。
值得注意的是,該屬性通常用于開始的 HTML 標記中,因為這是 HTML 元素的一部分,可以包含文本、數據、圖像或根本不包含任何內容。內聯樣式的示例如下:style
這類似于:
唯一的區別是內聯樣式僅適用于應用它的標記,而第二個代碼示例會影響 html 頁上的所有標記。p
何時使用內聯樣式
但是,使用內聯樣式不被認為是最佳做法,因為它會導致大量重復 - 因為這些樣式不能在其他地方重用。
但有時內聯樣式是最佳(或唯一)選項,例如在設置HTML電子郵件,CMS內容(如WordPress,德魯帕爾等)的樣式時。您還可以在設置動態內容的樣式時使用它們,動態內容是由 HTML 創建的或由 JavaScript 更改的。
除聲明外,內聯樣式具有高特異性/最高優先級,這意味著它們將覆蓋內部和外部樣式表中的大多數其他規則。!important
假設我們有兩個段落文本,其中內聯樣式設置為,內部樣式設置為 :red green
來自我們內聯樣式的 CSS 將覆蓋內部樣式中的 CSS,因此兩個段落都將是 。red
內聯樣式的優缺點
到目前為止,我們已經了解了什么是內聯樣式以及如何在HTML標記中使用它。現在,讓我們看一下優缺點,看看何時應該使用內聯樣式,何時不應該使用內聯樣式。
內聯 CSS 的優點:
內聯優先于所有其他樣式。在內部和外部樣式表中定義的任何樣式都將被內聯樣式覆蓋。
您可以快速輕松地將 CSS 規則插入到 HTML 頁面中,這對于測試或預覽更改以及在網站上執行快速修復非常有用。
無需創建其他文件。
要在 JavaScript 中應用樣式,請使用 該屬性。style
內聯 CSS 的缺點:
向每個 HTML 元素添加 CSS 規則需要時間,并且會使 HTML 結構無組織。很難跟上、重用和擴展。
設置多個元素的樣式可能會影響頁面的大小和下載時間。
內聯樣式不能用于設置偽元素和偽類的樣式。例如,可以使用外部和內部樣式表設置定位標記的已訪問、懸停、活動和鏈接顏色的樣式。
結論
在本文中,我們學習了如何在HTML中使用內聯樣式,何時使用它,以及這樣做的一些優點和缺點。
由于內聯樣式優先于所有其他樣式,因此使用它的最佳時間之一是在測試或預覽更改以及在網站上執行快速修復時。