Maison > Article > interface Web > Comment définir la couleur du texte en CSS
Comment définir la couleur du texte en CSS
- 青灯夜游original
- 2021-03-31 16:57:5611516parcourir
En CSS, vous pouvez utiliser l'attribut color pour définir la couleur du texte. Il vous suffit d'ajouter le style "color: color value;" à l'élément de texte. Il existe quatre façons d'écrire les valeurs de couleur : 1. Utilisez des noms de couleur, par exemple rouge ; 2. Utilisez des valeurs hexadécimales, par exemple "#FF0033" ; 3. Valeurs RVB ou RVBA ;
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
En CSS, nous pouvons définir la couleur du texte via l'attribut color. Cet attribut définit la couleur de premier plan d'un élément (dans la représentation HTML, la couleur du texte de l'élément n'est pas affectée par la couleur) ; Cette couleur s'applique également à toutes les bordures de l'élément, sauf si elle est remplacée par border-color ou une autre propriété border-color.
Pour définir la couleur de premier plan d'un élément, le plus simple est d'utiliser l'attribut color.
Syntaxe de l'attribut color :
color : 颜色值;
Exemple :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <p>普通文本！</p> <p style="color: red;">设置了颜色的文本！</p> <h1 style="color:#00ff00;">大标题</h1> </body> </html>
Tutoriel recommandé : Tutoriel vidéo CSS
Il existe 4 façons d'écrire des valeurs de couleur CSS :
1. Utiliser des noms de couleur
Bien qu'il existe actuellement environ 184 couleurs nommées, il n'existe que 16 noms de couleurs véritablement pris en charge par divers navigateurs et recommandés en tant que 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 le navigateur ou sont différents. Différences dans la façon dont les navigateurs interprètent les couleurs.
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 des couleurs la plus couramment utilisée, par exemple :
#f03 #F03 #ff0033 #FF0033
3 RVB, rouge-vert-bleu (RVB)
. Spécifie que la valeur de couleur est la couleur du code RVB, le format de la fonction est RVB (R, V, B) et la valeur peut être un nombre 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%)
Extensions : RGBA, Rouge-Vert-Bleu-Alpha (RGBa)
RGBA étend le mode de couleur RVB pour inclure 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-luminosité (Teinte-saturation-luminosité)
Teinte (Teinte) représente le cercle de couleur (c'est-à-dire un cercle représentant un anneau arc-en-ciel) en biais.
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 luminosité est blanc, 0 % de luminosité est noir et 50 % de luminosité est « normal ».
hsl(120,100%,25%) /* 深绿色 */ hsl(120,100%,50%) /* 绿色 */ hsl(120,100%,75%) /* 浅绿色 */
Extension : HSLA, Hue-Saturation-Lightness-Alpha (HSLa)
HSLa étend le 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) /* 完全不透明 */
Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !
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!