1. 首頁 > 科技 > >

vivo|CSS 字體顏色 – 如何在 HTML 中設置文本樣式

vivo折疊屏

vivo|CSS 字體顏色 – 如何在 HTML 中設置文本樣式

文章圖片

vivo|CSS 字體顏色 – 如何在 HTML 中設置文本樣式

文章圖片

vivo|CSS 字體顏色 – 如何在 HTML 中設置文本樣式

在您正在構建的網站上設置文本顏色起初可能會令人困惑 。 但在本文中 ， 您將學習如何做到這一點 。
如何在 HTML 中設置文本顏色在CSS中 ， 該屬性對于設置任何內容的背景顏色都非常簡單 。  background-color
那么 ， 如果您想設置頁面上某些內容的前景顏色 ， 該怎么辦？尤其是文本 ， 在正常情況下 ， 您不希望為其設置背景色 。
CSS中沒有屬性 ， 因此使這成為可能的是屬性 。  foreground-color color
【vivo|CSS 字體顏色 – 如何在 HTML 中設置文本樣式】在本文中 ， 我將引導您完成如何使用 color 屬性設置文本的顏色 。 我們還將介紹它采用值的各種方式 。
color 屬性以 4 種不同的方式獲取值：命名顏色、十六進制顏色、RGB 顏色和 HSL 顏色 。 現在讓我們看一下每一個 。
命名顏色顧名思義 ， 您可以引入 color 屬性 ， 并通過命名所需的顏色來應用值 。 這可能是紅色 ， 綠色 ， 藍色 ， 橙色 ， 深紅色 ， 青色或任何其他命名的顏色 。 瀏覽器識別出大約147種命名顏色 。
基本語法如下所示：
element {
   color: colorName

<p>freeCodeCamp</p>

p {
    color: crimson;




十六進制顏色（或只是十六進制顏色）十六進制值用于表示總共包含 6 個字符的顏色 。 它們以磅/數字符號（#）開頭 ， 然后是0到9的任何數字 ， 最后是從A到F的任何字母 。
前 2 個值代表紅色 ， 接下來的兩個值代表綠色 ， 最后 2 個值代表藍色 。 使用十六進制值時 ， 可以使用的顏色陰影沒有限制 。
<p>freeCodeCamp</p>

p {
   color: #dc143c;


顏色RGB 代表紅色、綠色和藍色 。 使用RGB colosr ， 您可以根據所需的紅色 ， 綠色和藍色來指定顏色 。 所有三者都用0到255之間的數字表示 。
有一種名為 的 RGB 類型 。 額外的“a”代表 alpha ， 它允許您指定顏色的不透明度 。 它采用從 0.0 到 1.0 的值 – 0.0 表示 0% 不透明度 ， 0.5 表示 50% 不透明度 ， 1.0 表示 100% 不透明度 。  rgba
基本語法為。  rgba(amountOfRed amountOfGreen amountOfBlue alpha)
如果您不想要 Alpha 值 ， 則可以將其限制為 。  rgba(amountOfRed amountOfGreen amountOfBlue)
以下是常規 RGB 值的語法：
<p>freeCodeCamp</p>

p {
  color: rgb(220 20 60);





在這里 ， 它展示了具有50%（0.5）不透明度的alpha值：
p {
   color: rgb(219 20 60 0.5);




HSL 顏色HSL 代表色調、飽和度和亮度 。 這是在 CSS 中為文本（以及任何其他采用顏色的內容）指定顏色的另一種方法 。
  • 色相以 360° 表示色輪 。 因此 ， 0° 為紅色 ， 120° 為綠色 ， 240° 為藍色 。
  • 飽和度是顏色中灰色的量 ， 以百分比表示 。 0%是灰色的陰影 ， 100%是顏色本身 。
  • 亮度是顏色中以百分比表示的暗度和亮度 。 0% 為黑色 ， 100% 為白色 。
就像 RGB 顏色一樣 ， 您也可以設置顏色的不透明度 。 所以 ， 還有hsla 。

相關經驗推薦