css怎麼設定tr中的字體顏色

青灯夜游
發布: 2021-11-10 14:29:12
原創
6324 人瀏覽過

在css中,可以透過為tr元素添加color屬性樣式來設定tr的字體顏色,具體語法格式「tr{color: 顏色值;}」;其中,顏色值可以使用顏色名稱、十六進制數值、RGB或RGBA、HSL等來定義。

css怎麼設定tr中的字體顏色

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

標籤定義 HTML 表格中的行。

tr 元素包含一個或多個 th 或 td 元素。

一個簡單的表格是這樣的:

姓名 年龄
Peter 20
Lois 20
登入後複製

效果圖:

css怎麼設定tr中的字體顏色

#tr中字體顏色預設是黑色的,那麼怎麼設定其字體顏色呢?

我們可以利用color屬性,該屬性可規定文字的顏色。只需要設定:

tr{ color: #0000FF; }
登入後複製

css怎麼設定tr中的字體顏色

還可搭配:nth-child(n)設定隔行變色效果:

tr:nth-child(odd){ color: #0000FF; } tr:nth-child(even){ color: #FFC0CB; }
登入後複製

css怎麼設定tr中的字體顏色

擴充:css顏色值有4種寫法:

#1、使用顏色名稱

雖然目前已經命名的顏色約有184 種,但真正被各種瀏覽器支持,並且作為CSS 規範推薦的顏色名稱只有16 種,如下表所示。

表1:CSS 規格建議的顏色名稱

/*名 称 颜 色 名 称 颜 色 名 称 颜 色 black 纯黑 silver 浅灰 navy 深蓝 blue 浅蓝 green 深绿 lime 浅绿 teal 靛青 aqua 天蓝 maroon 深红 red 大红 purple 深紫 fuchsia 品红 olive 褐黄 yellow 明黄 gray 深灰 white 壳白*/
登入後複製

不建議在網頁中使用顏色名,特別是大規模的使用,避免有些顏色名稱不被瀏覽器解析,或不同瀏覽器對顏色的解釋差異。

2、十六進位顏色

十六進位符號 #RRGGBB 和 #RGB(例如 #ff0000)。 "#" 後面接著 6 位元或 3 位元十六進位字元(0-9, A-F)。

這是最常用的取色方法,例如:

#f03 #F03 #ff0033 #FF0033
登入後複製

3、RGB,紅-綠-藍(red-green-blue (RGB))

規定顏色值為rgb 程式碼的顏色,函數格式為rgb(R,G,B),取值可以是0-255 的整數或百分比。

rgb(255,0,51) rgb(255, 0, 51) rgb(100%,0%,20%) rgb(100%, 0%, 20%)
登入後複製

擴充功能:RGBA,紅色-綠色-藍色-阿爾法(RGBa)

RGBA 擴展了 RGB 顏色模式,它包含了阿爾法通道,允許設定一個顏色的透明度。 a 表示透明度:0=透明;1=不透明。

rgba(255,0,0,0.1) /* 10% 不透明 */ rgba(255,0,0,0.4) /* 40% 不透明 */ rgba(255,0,0,0.7) /* 70% 不透明 */ rgba(255,0,0, 1) /* 不透明,即红色 */
登入後複製

4、HSL,色相-飽和度-明度(Hue-saturation-lightness)

色相(Hue)表示色環(即代表彩虹的一個圓環)的一個角度。
飽和度和明度由百分數表示。
100% 是滿飽和度,而 0% 是一種灰度。
100% 明度是白色, 0% 明度是黑色,而 50% 明度是"一般的"。

hsl(120,100%,25%) /* 深绿色 */ hsl(120,100%,50%) /* 绿色 */ hsl(120,100%,75%) /* 浅绿色 */
登入後複製

擴展:HSLA,色相-飽和度-明度-阿爾法(HSLa)

HSLa 擴展自 HSL 顏色模式,包含了阿爾法通道,可以規定一個顏色的透明度。 a 表示透明度:0=透明;1=不透明。

hsla(240,100%,50%,0.05) /* 5% 不透明 */ hsla(240,100%,50%, 0.4) /* 40% 不透明 */ hsla(240,100%,50%, 0.7) /* 70% 不透明 */ hsla(240,100%,50%, 1) /* 完全不透明 */
登入後複製

(學習影片分享:css影片教學

以上是css怎麼設定tr中的字體顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!