Home  >  Article  >  Web Front-end  >  How to set the font color in tr in css

How to set the font color in tr in css

青灯夜游
青灯夜游Original
2021-11-10 14:29:126451browse

In CSS, you can set the font color of tr by adding the color attribute style to the tr element. The specific syntax format is "tr{color: color value;}"; among them, the color value can use the color name, ten Hexadecimal value, RGB or RGBA, HSL, etc.

How to set the font color in tr in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

tags define rows in an HTML table.

tr element contains one or more th or td elements.

A simple form is like this:

<table border="1">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>Peter</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Lois</td>
		<td>20</td>
	</tr>
</table>

Rendering:

How to set the font color in tr in css

The default font color in tr is black , so how to set its font color?

We can use the color attribute, which specifies the color of the text. You only need to set:

tr{
	color: #0000FF;
}

How to set the font color in tr in css

## You can also use: nth-child(n) to set the interlaced color changing effect:

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

How to set the font color in tr in css

Extension: There are 4 ways to write css color values:

1. Use the color name

Although it has already been named There are about 184 colors, but they are truly supported by various browsers, and there are only 16 color names recommended as CSS specifications, as shown in the table below.

Table 1: Color names recommended by CSS specifications

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

It is not recommended to use color names in web pages, especially large-scale use, to avoid that some color names are not parsed by the browser, or are different Differences in how browsers interpret colors.

2. Hexadecimal color

Hexadecimal symbols #RRGGBB and #RGB (such as #ff0000). "#" followed by 6 or 3 hexadecimal characters (0-9, A-F).

This is the most commonly used color selection method, for example:

#f03
#F03
#ff0033
#FF0033

3, RGB, red-green-blue (RGB)

The color value is specified as the color of the rgb code. The function format is rgb(R,G,B), and the value can be an integer or percentage from 0-255.

rgb(255,0,51)
rgb(255, 0, 51)
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)

Extensions: RGBA, Red-Green-Blue-Alpha (RGBa)

RGBA extends the RGB color mode to include an alpha channel, allowing the transparency of a color to be set. a represents transparency: 0=transparent; 1=opaque.

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-saturation-lightness)

Hue (Hue) represents the color circle (that is, a circle representing a rainbow) ring) at an angle.

Saturation and brightness are expressed as percentages.
100% is full saturation, while 0% is a grayscale.
100% lightness is white, 0% lightness is black, and 50% lightness is "normal".

hsl(120,100%,25%)    /* 深绿色 */  
hsl(120,100%,50%)    /* 绿色 */       
hsl(120,100%,75%)    /* 浅绿色 */

Extension: HSLA, Hue-Saturation-Lightness-Alpha (HSLa)

HSLa extends from the HSL color mode and includes the alpha channel, which can specify the transparency of a color. a represents transparency: 0=transparent; 1=opaque.

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)   /* 完全不透明 */

(Learning video sharing:

css video tutorial)

The above is the detailed content of How to set the font color in tr in css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn