Comment définir la couleur du texte en CSS-tutoriel CSS-php.cn

Comment définir la couleur du texte en CSS

青灯夜游

Libérer： 2023-01-03 09:32:06

original

11523 Les gens l'ont consulté

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 ;

Comment définir la couleur du texte en CSS

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 : 颜色值;

Copier après la connexion

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>

Copier après la connexion

Comment définir la couleur du texte en CSS

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	壳白*/

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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)    /* 不透明，即红色 */

Copier après la connexion

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%)    /* 浅绿色 */

Copier après la connexion

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

Copier après la connexion

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!