在構(gòu)建網(wǎng)頁(yè)時(shí)，您始終希望創(chuàng)建獨(dú)特的布局。您希望您的網(wǎng)頁(yè)對(duì)您的用戶具有吸引力，并且不會(huì)刺眼。
為了幫助做到這一點(diǎn)，你可以選擇背景和文本顏色，它們很好地融合在一起，并相互補(bǔ)充。
默認(rèn)情況下，您會(huì)注意到您的網(wǎng)頁(yè)具有透明的背景色，您可以將其更改為所需的任何顏色。
例如，您可能希望在網(wǎng)頁(yè)上創(chuàng)建深色模式功能，以便背景具有深色，而文本具有淺色。這有助于讀者避免可能影響他們眼睛的刺眼顏色。
在本文中，您將學(xué)習(xí)如何使用HTML和CSS更改網(wǎng)頁(yè)的背景顏色。
我們過(guò)去如何更改背景顏色
過(guò)去，在引入HTML5之前，一些基本的樣式是由HTML處理的。
例如，當(dāng)您想要更改頁(yè)面的背景顏色時(shí)，您可以輕松地在開(kāi)始的 body 標(biāo)記中添加屬性，并將其設(shè)置為首選顏色的值。這可以是其十六進(jìn)制代碼或名稱。bgcolor
但是，當(dāng) HTML5 引入時(shí)，此屬性已貶值。它現(xiàn)在被一個(gè)更好的替代方案CSS屬性所取代。這是有道理的，因?yàn)镠TML是一種標(biāo)記語(yǔ)言，而不是樣式語(yǔ)言。在處理樣式時(shí)，最好使用CSS。background-color
如果您急于了解如何更改網(wǎng)頁(yè)，divs和其他元素的背景顏色，那么這里是：
假設(shè)你有空閑時(shí)間。讓我們快速入門(mén)。
如何更改 HTML 中的背景色
可以使用 CSS 背景色屬性來(lái)更改網(wǎng)頁(yè)的顏色。此屬性的工作方式與所有其他 CSS 屬性類似，這意味著您可以利用它來(lái)設(shè)置頁(yè)面的樣式：
在 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)頁(yè)正文的樣式，還可以設(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)頁(yè)樣式的最佳方式是外部樣式，但當(dāng)您只有幾行樣式時(shí)，始終可以使用內(nèi)部樣式。
內(nèi)部和外部都使用相同的方法：它們都使用選擇器為HTML元素添加樣式。
對(duì)于內(nèi)部樣式，所有樣式都將添加到 標(biāo)記內(nèi)的 HTML 文件中。此樣式標(biāo)記放置在 標(biāo)記內(nèi)，如下所示：<style><head>
對(duì)于外部樣式，您所要做的就是使用常規(guī)語(yǔ)法將 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 元素的背景色。您還了解了開(kāi)發(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)樗鼈儠?huì)導(dǎo)致大量重復(fù) - 您無(wú)法在其他地方重用這些樣式。要了解更多信息，您可以閱讀我關(guān)于HTML中的內(nèi)聯(lián)樣式的文章。您還可以在本文中了解如何更改文本大小，以及如何在本文中更改文本顏色。
京公網(wǎng)安備 11010802030320號(hào)