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