Maison > Article > interface Web > Comment changer la couleur de la police en CSS

Comment changer la couleur de la police en CSS

青灯夜游original: 2021-10-11 16:44:2445687parcourir

En CSS, vous pouvez utiliser l'attribut color pour modifier la couleur de la police. La fonction de cet attribut est de définir la couleur du texte. Il vous suffit d'ajouter "color: color value;" à l'élément contenant le texte de la police. . Les valeurs de couleur peuvent être définies à l'aide de noms de couleurs, de valeurs hexadécimales, de valeurs RVB ou RGBA, de valeurs HSL ou HSLA.

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

Si vous souhaitez modifier la couleur de la police en CSS, vous pouvez utiliser l'attribut color.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			body {
				color: red
			}
			
			h1 {
				color: #00ff00
			}
			
			p.ex {
				color: rgb(0, 0, 255)
			}
		</style>
	</head>

	<body>
		<h1>这是 heading 1</h1>
		<p>这是一段普通的段落。请注意，该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。</p>
		<p class="ex">该段落定义了 class="ex"。该段落中的文本是蓝色的。</p>
	</body>

</html>

Rendu :

Comment changer la couleur de la police en CSS

Description : L'attribut

color peut être utilisé pour définir la couleur du texte. Cet attribut définit la couleur de premier plan d'un élément (dans la représentation HTML, c'est la couleur du texte). texte de l'élément).

Grammaire :

color : 颜色值;

Comment écrire des valeurs de couleur CSS :

1. Utilisez 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 existe seulement 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, par exemple :

#f03
#F03
#ff0033
#FF0033

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

La valeur de couleur spécifiée est la couleur du code RVB, La fonction Le format est RVB (R, V, B) et 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)   /* 完全不透明 */

5. transparent

Valeur de couleur spéciale, indiquant la couleur transparente. Peut être utilisé directement comme couleur.

Par exemple : color:transparent Définissez la couleur de la police sur transparent

<style type="text/css">
    body{background:hsl(270,100%,50%)}
    p{
        font-size:50px;
        font-family:"黑体";
        /*浏览器私有属性*/
        -webkit-text-fill-color:transparent;/*设置文本透明*/
        /*使用rgba(0,0,0,0);也可以实现全透明模式*/
        -webkit-text-stroke:2px yellow;/*将文本设置透明，再设置个边框后就实现镂空字了*/
        /*W3C标准属性*/
        /*text-fill-color:transparent;*/
        /*text-stroke:2px yellow;*/
    
    }
</style>
<body>
    <p>2012年过去了，最忙的是元芳，你怎么看？</p>
</body>

Remarque : lorsque vous utilisez la couleur pour définir la couleur de la police du texte, vous devez utiliser une couleur d'arrière-plan raisonnable et une correspondance des couleurs du texte, ce qui peut améliorer la lisibilité du texte. .

(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

Article précédent：Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et d'ombre en ligne.Article suivant：Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et d'ombre en ligne.

Articles Liés

Voir plus