CSS colorPropiedad
Ejemplo
Establecer text-color en diferentes elementos:
body {
color:red;
}
h1 {
color:#0080FF;
}
p {
color:rgb(0,0,255);
}
Pruébalo »
Definición y uso de la propiedad
La propiedad Color especifica el color del texto.
| Valor por defecto: | No especificado |
|---|---|
| Heredado: | Sí |
| Versión: | CSS1 |
| Sintaxis de JavaScript: | object.style.color="#FF0000" |
Soporte del navegador
Los números en la tabla indican la primera versión del navegador que soporta la propiedad.
Los números inmediatamente anteriores a -webkit-, -ms- o -moz- son la primera versión del navegador que soporta la propiedad con ese prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| color | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
Consejos y notas
Consejo:Utilice una combinación razonable de color de fondo y color de texto para mejorar la legibilidad del texto.
Valores de la propiedad
Los valores de color se pueden establecer de las siguientes maneras:
| Valor | Descripción | Ejemplo |
|---|---|---|
| Nombre del color | El nombre del color, por ejemplo red, blue, brown, lightseagreen, etc., no distingue entre mayúsculas y minúsculas. |
color:red; /* 红色 */ color:black; /* 黑色 */ color:gray; /* 灰色 */ color:white; /* 白色 */ color:purple; /* 紫色 */ |
| Hexadecimal | Notación hexadecimal #RRGGBB y #RGB (por ejemplo, #ff0000). Después de '#' van 6 o 3 caracteres hexadecimales (0-9, A-F). |
#f03 #F03 #FF0033 #FF0033 rgb(255,0,51) rgb(255, 0, 51) |
| RGB, rojo-verde-azul (red-green-blue (RGB)) | Especifica el color con un código rgb, el formato de la función es rgb(R,G,B), y los valores pueden ser enteros de 0 a 255 o porcentajes. |
rgb(255,0,51) rgb(255, 0, 51) rgb(100%,0%,20%) rgb(100%, 0%, 20%) |
| RGBA, rojo-verde-azul-alfa (RGBa) | RGBa extiende el modo de color RGB, incluye un canal alfa que permite establecer la transparencia de un color. a representa la transparencia: 0=transparente; 1=opaco. |
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) /* 不透明，即红色 */ |
| HSL, matiz-saturación-luminosidad (Hue-saturation-lightness) | El matiz (Hue) representa un ángulo en la rueda de colores (un círculo que representa el arcoíris). La saturación y la luminosidad se expresan en porcentajes. 100% es saturación completa, y 0% es una escala de grises. 100% de luminosidad es blanco, 0% de luminosidad es negro, y 50% de luminosidad es 'normal'. |
hsl(120,100%,25%) /* 深绿色 */ hsl(120,100%,50%) /* 绿色 */ hsl(120,100%,75%) /* 浅绿色 */ |
| HSLA, matiz-saturación-luminosidad-alfa (HSLa) | HSLa extiende el modo de color HSL, incluye el canal alfa y puede especificar la transparencia de un color. a representa la transparencia: 0=transparente; 1=opaco. |
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) /* 完全不透明 */ |
Más ejemplos
Artículos relacionados
Tutorial de CSS:Formato de texto CSS
Otras extensiones