Heim >Web-Frontend >CSS-Tutorial >So legen Sie die Schriftfarbe in tr in CSS fest
In CSS können Sie die Schriftfarbe von tr festlegen, indem Sie dem tr-Element den Farbattributstil hinzufügen. Das spezifische Syntaxformat lautet „tr{color: Farbwert;}“. Der Farbwert kann unter anderem den Farbnamen verwenden oder hexadezimaler Wert, RGB oder RGBA, HSL usw. zu definieren.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer. Das
tr-Element enthält ein oder mehrere th- oder td-Elemente.
Eine einfache Tabelle sieht so aus:
<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:
Die Schriftfarbe in tr ist standardmäßig Schwarz. Wie stellt man also die Schriftfarbe ein?
Wir können das Farbattribut verwenden, das die Farbe des Textes angibt. Einfach einstellen:
tr{ color: #0000FF; }
Sie können auch :nth-child(n) verwenden, um den Interlaced-Farbeffekt festzulegen:
tr:nth-child(odd){ color: #0000FF; } tr:nth-child(even){ color: #FFC0CB; }
Erweiterung: Es gibt 4 Möglichkeiten, CSS-Farbwerte zu schreiben:
1. Farbnamen verwenden
Obwohl es derzeit etwa 184 benannte Farben gibt, werden sie tatsächlich von verschiedenen Browsern unterstützt, und es werden nur 16 Farbnamen als CSS-Spezifikationen empfohlen, wie in der Tabelle unten gezeigt.
Tabelle 1: Von CSS-Spezifikationen empfohlene Farbnamen
/*名 称 颜 色 名 称 颜 色 名 称 颜 色 black 纯黑 silver 浅灰 navy 深蓝 blue 浅蓝 green 深绿 lime 浅绿 teal 靛青 aqua 天蓝 maroon 深红 red 大红 purple 深紫 fuchsia 品红 olive 褐黄 yellow 明黄 gray 深灰 white 壳白*/
Es wird nicht empfohlen, Farbnamen auf Webseiten zu verwenden, insbesondere bei der Verwendung in großem Maßstab, um zu vermeiden, dass einige Farbnamen von Browsern nicht analysiert werden oder dass verschiedene Browser Farben interpretieren anders.
2. Hexadezimale Farbe
Hex-Symbole #RRGGBB und #RGB (z. B. #ff0000). „#“, gefolgt von 6 oder 3 Hexadezimalzeichen (0-9, A-F).
Dies ist die am häufigsten verwendete Farbauswahlmethode, wie zum Beispiel:
#f03 #F03 #ff0033 #FF0033
3, RGB, Rot-Grün-Blau (RGB)
Gibt an, dass der Farbwert die Farbe des RGB-Codes ist, Funktionsformat For rgb(R,G,B), der Wert kann eine Ganzzahl oder ein Prozentsatz von 0-255 sein.
rgb(255,0,51) rgb(255, 0, 51) rgb(100%,0%,20%) rgb(100%, 0%, 20%)
Erweiterung: RGBA, Rot-Grün-Blau-Alpha (RGBa)
RGBA erweitert den RGB-Farbmodus, der einen Alphakanal enthält und es ermöglicht, die Transparenz einer Farbe festzulegen. a steht für Transparenz: 0=transparent; 1=undurchsichtig.
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, Farbton-Sättigungs-Helligkeit (Hue-Saturation-Lightness)
Hue (Hue) stellt einen Winkel des Farbkreises dar (d. h. einen Ring, der einen Regenbogen darstellt).
Sättigung und Helligkeit werden in Prozent ausgedrückt.
100 % ist volle Sättigung, während 0 % eine Graustufe ist.
100 % Helligkeit ist weiß, 0 % Helligkeit ist schwarz und 50 % Helligkeit ist „normal“.
hsl(120,100%,25%) /* 深绿色 */ hsl(120,100%,50%) /* 绿色 */ hsl(120,100%,75%) /* 浅绿色 */
Erweiterung: HSLA, Hue-Saturation-Lightness-Alpha (HSLa)
HSLa erweitert den HSL-Farbmodus, einschließlich des Alpha-Kanals, der die Transparenz einer Farbe festlegen kann. a steht für Transparenz: 0=transparent; 1=undurchsichtig.
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) /* 完全不透明 */
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo legen Sie die Schriftfarbe in tr in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!