在構(gòu)建網(wǎng)頁時(shí),您始終希望創(chuàng)建獨(dú)特的布局。您希望您的網(wǎng)頁對您的用戶具有吸引力,并且不會刺眼。
為了幫助做到這一點(diǎn),你可以選擇背景和文本顏色,它們很好地融合在一起,并相互補(bǔ)充。
默認(rèn)情況下,您會注意到您的網(wǎng)頁具有透明的背景色,您可以將其更改為所需的任何顏色。
例如,您可能希望在網(wǎng)頁上創(chuàng)建深色模式功能,以便背景具有深色,而文本具有淺色。這有助于讀者避免可能影響他們眼睛的刺眼顏色。
在本文中,您將學(xué)習(xí)如何使用HTML和CSS更改網(wǎng)頁的背景顏色。
我們過去如何更改背景顏色
過去,在引入HTML5之前,一些基本的樣式是由HTML處理的。
例如,當(dāng)您想要更改頁面的背景顏色時(shí),您可以輕松地在開始的 body 標(biāo)記中添加屬性,并將其設(shè)置為首選顏色的值。這可以是其十六進(jìn)制代碼或名稱。bgcolor
但是,當(dāng) HTML5 引入時(shí),此屬性已貶值。它現(xiàn)在被一個(gè)更好的替代方案CSS屬性所取代。這是有道理的,因?yàn)镠TML是一種標(biāo)記語言,而不是樣式語言。在處理樣式時(shí),最好使用CSS。background-color
如果您急于了解如何更改網(wǎng)頁,divs和其他元素的背景顏色,那么這里是:
假設(shè)你有空閑時(shí)間。讓我們快速入門。
如何更改 HTML 中的背景色
可以使用 CSS 背景色屬性來更改網(wǎng)頁的顏色。此屬性的工作方式與所有其他 CSS 屬性類似,這意味著您可以利用它來設(shè)置頁面的樣式:
在 HTML 標(biāo)記中(內(nèi)聯(lián)樣式),
在頭部標(biāo)簽(內(nèi)部樣式)中的樣式標(biāo)簽內(nèi),
或在專用的 CSS 文件中(外部樣式)。
根據(jù)您的偏好,您將屬性設(shè)置為顏色名稱、十六進(jìn)制代碼、RGB 值,甚至是 HSL 值。您可以使用此屬性不僅設(shè)置網(wǎng)頁正文的樣式,還可以設(shè)置 div、標(biāo)題、表格等的樣式。background-color
查看代碼筆中的以下示例:
如何使用內(nèi)聯(lián) CSS 更改 HTML 中的背景顏色
內(nèi)聯(lián) CSS 允許您將樣式直接應(yīng)用于 HTML 元素。這意味著您將 CSS 直接放入 HTML 標(biāo)記中。您可以使用 style 屬性執(zhí)行此操作,該屬性包含要應(yīng)用于 HTML 標(biāo)記的所有樣式。
您將在首選顏色值旁邊使用 CSS 背景色屬性:
如何使用內(nèi)部/外部 CSS 更改 HTML 中的背景色
設(shè)置網(wǎng)頁樣式的最佳方式是外部樣式,但當(dāng)您只有幾行樣式時(shí),始終可以使用內(nèi)部樣式。
內(nèi)部和外部都使用相同的方法:它們都使用選擇器為HTML元素添加樣式。
對于內(nèi)部樣式,所有樣式都將添加到 標(biāo)記內(nèi)的 HTML 文件中。此樣式標(biāo)記放置在 標(biāo)記內(nèi),如下所示:<style><head>
對于外部樣式,您所要做的就是使用常規(guī)語法將 CSS 樣式添加到 CSS 文件中:
選擇器可以是您的 HTML 標(biāo)記,也可以是 .例如:classID
或者您可以使用:class
或者您可以使用:id
注意:如前所述,使用內(nèi)聯(lián) CSS,可以將顏色名稱、十六進(jìn)制代碼、RGB 值和 HSL 值與內(nèi)部或外部樣式結(jié)合使用。bgcolor
在本文中,您學(xué)習(xí)了如何使用 CSS 背景色屬性更改 HTML 元素的背景色。您還了解了開發(fā)人員在引入帶有該屬性的HTML5之前是如何做到這一點(diǎn)的。bgcolor
必須記住,使用內(nèi)部或外部樣式設(shè)置HTML元素的樣式始終比內(nèi)聯(lián)樣式更可取,因?yàn)樗峁┝烁蟮撵`活性。例如,您可以為其使用單個(gè) CSS,而不是向所有標(biāo)簽元素添加類似的內(nèi)聯(lián)樣式。<div>class
內(nèi)聯(lián)樣式不被視為最佳做法,因?yàn)樗鼈儠?dǎo)致大量重復(fù) - 您無法在其他地方重用這些樣式。要了解更多信息,您可以閱讀我關(guān)于HTML中的內(nèi)聯(lián)樣式的文章。您還可以在本文中了解如何更改文本大小,以及如何在本文中更改文本顏色。