css如何设置tr中的字体颜色

这篇文章主要介绍了css如何设置tr中的字体颜色，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

在css中，可以通过给tr元素添加color属性样式来设置tr的字体颜色，具体语法格式"tr{color: 颜色值;}"；其中，颜色值可以使用颜色名、十六进制数值、RGB或RGBA、HSL等来定义。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

标签定义 HTML 表格中的行。

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

一个简单的表格是这样的：

        
                
姓名
                
年龄
        
        
                
Peter
                
20
        
        
                
Lois
                
20
        

效果图：

tr中字体颜色默认是黑色的，那么怎么设置其字体颜色呢？

我们可以利用color属性，该属性可规定文本的颜色。只需要设置：

tr{        color: #0000FF;}

还可配合:nth-child(n)设置隔行变色效果：

tr:nth-child(odd){        color: #0000FF;}tr:nth-child(even){        color: #FFC0CB;}

扩展：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如何设置tr中的字体颜色"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!