Maison  >  Article  >  interface Web  >  Comment définir la couleur de la police en tr en CSS

Comment définir la couleur de la police en tr en CSS

青灯夜游
青灯夜游original
2021-11-10 14:29:126418parcourir

En CSS, vous pouvez définir la couleur de la police de tr en ajoutant le style d'attribut de couleur à l'élément tr. Le format de syntaxe spécifique est "tr{color: color value;}" parmi eux, la valeur de couleur peut utiliser le nom de couleur ; ou valeur hexadécimale, RVB ou RGBA, HSL, etc. à définir.

Comment définir la couleur de la police en tr en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3. La balise

définit les lignes d'un tableau HTML. L'élément

tr contient un ou plusieurs éléments th ou td.

Un tableau simple ressemble à ceci :

<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>

Rendu :

Comment définir la couleur de la police en tr en CSS

La couleur de police en tr est noire par défaut, alors comment définir sa couleur de police ?

Nous pouvons utiliser l'attribut color, qui précise la couleur du texte. Définissez simplement :

tr{
	color: #0000FF;
}

Comment définir la couleur de la police en tr en CSS

Vous pouvez également utiliser :nth-child(n) pour définir l'effet de couleur entrelacée :

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

Comment définir la couleur de la police en tr en CSS

Extension : Il existe 4 façons d'écrire des valeurs de couleur CSS :

1. Utiliser des noms de couleurs

Bien qu'il existe actuellement environ 184 couleurs nommées, elles sont véritablement prises en charge par divers navigateurs, et il n'y a que 16 noms de couleurs recommandés comme spécifications CSS, comme indiqué dans le tableau ci-dessous.

Tableau 1 : Noms de couleurs recommandés par les spécifications CSS

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

Il n'est pas recommandé d'utiliser des noms de couleurs dans les pages Web, en particulier lors d'une utilisation à grande échelle, pour éviter que certains noms de couleurs ne soient pas analysés par les navigateurs, ou que différents navigateurs interprètent les couleurs différemment.

2. Couleur hexadécimale

Symboles hexadécimaux #RRGGBB et #RGB (tels que #ff0000). "#" suivi de 6 ou 3 caractères hexadécimaux (0-9, A-F).

Il s'agit de la méthode de sélection de couleur la plus couramment utilisée, telle que :

#f03
#F03
#ff0033
#FF0033

3, RVB, rouge-vert-bleu (RVB)

Spécifie que la valeur de couleur est la couleur du code RVB, format de fonction Pour rgb(R,G,B), la valeur peut être un entier ou un pourcentage compris entre 0 et 255.

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

Extension : RGBA, Rouge-Vert-Bleu-Alpha (RGBa)

RGBA étend le mode couleur RVB, qui comprend un canal alpha, permettant de définir la transparence d'une couleur. a représente la transparence : 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, teinte-saturation-légèreté (Teinte-saturation-légèreté)

Hue (Teinte) représente un angle de la roue chromatique (c'est-à-dire un anneau représentant un arc-en-ciel).
La saturation et la luminosité sont exprimées en pourcentage.
100 % correspond à une saturation totale, tandis que 0 % correspond à une échelle de gris.
100 % de légèreté est blanche, 0 % de légèreté est noire et 50 % de légèreté est « normale ».

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

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

HSLa s'étend du mode couleur HSL, y compris le canal alpha, qui peut spécifier la transparence d'une couleur. a représente la transparence : 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)   /* 完全不透明 */

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn