
Tabla de contenidos
- Funciones Color en el CSS
- Ejemplos del color en el CSS
- Soporte del color en CSS por los navegadores
- Funciones generales del color en CSS
La propiedad color
en CSS es la que establece el valor del color en el primer plano del contenido de texto de un elemento y las decoraciones de texto , y también establecerá el valor de una palabra reservada currentColor
, que se puede usar como un valor indirecto en otros atributos que no toman su color el color
directamente de la propiedad (como la propiedad border-color
).
p { color : green ; }
Funciones Color en el CSS
Valor inicial | Varía de un navegador a otro. |
---|---|
Aplicado a | Todos los artículos. |
Heredable | Si |
Móvil | Si |
Valor calculado | Si el valor es semitransparente, entonces el valor calculado es equivalente a la función rgba() ; de lo contrario , la función es equivalente rgb() .transparent recompensa en la palabra reservada rgba(0,0,0,0) . |
/* palabra reservada */ color : currentcolor ; /* nombres de colores */ color : red ; color : orange ; color : tan ; /* valores hexadecimales */ color : # 090 ; color : # 009900 ; color : # 090a ; color : # 009900aa ; /* usar funciones */ /* < La rgb ()> */ color : el rgb ( 24 , 10 , 34 - , 0 . 6 ); color : rgba ( 24 , 10 , 34 - , 0 . 6 ); color : el rgb ( 24 10 34 - / 0 . 6 ); color : rgba ( 24 10 34 - / 0 . 3 ); /* < La hsl ()> */ color : hsl ( 40 , 80 %, 30 %, 0 . 6 ); color : hsla ( 40 , 80 %, 30 %, 0 . 6 ); color : hsl ( 40 , 80 %, 30 % / 0 . 6 ); color : hsla ( 40 , 80 %, 30 % / 0 . 6 ); /* valores globales */ color : inherit ; color : initial ; color : unset ;
Tenga en cuenta que el valor debe ser un color, no puede ser un degradado .
Uso de la palabra reservada: color: currentcolor
Nombres de colores:
- color red
- Color orange
- color tan
Valores hexadecimales:
- color: #090
- color: #009900
- color: #090a
- color: #009900aa
Funciones rgb()
, rgba()
, hsl()
, hsla()
:
- color: rgb (34, 12, 64)
- color: rgba (34, 12, 64, 0.6)
- color: hsl (30, 100%, 50%)
- color: hsla (30, 100%, 50%, 0,6)
Vale la pena señalar que el valor de color es un valor simplificado, es decir, si establece la propiedad color
en un elemento, todos sus elementos secundarios lo heredarán y tendrán el mismo color que el elemento principal a menos que lo cambie.
Ejemplos del color en el CSS
Las siguientes reglas harán que el texto de los párrafos sea rojo:
p { color : green ; } p { color : #e00 ; } p { color : #ee0000 ; } p { color : rgb ( 215 , 0 , 0 ); } p { color : rgb ( 100 % , 0 % , 0 % ); } p { color : hsl ( 0 , 100 % , 50 % ); } /* 50% de opacidad */ p { color : rgba ( 215 , 0 , 0 , 0.5 ); } p { color : hsla ( 0 , 100 % , 50 % , 0,5 ); }
Soporte del color en CSS por los navegadores
Característica | Chrome | Firefox | Internet Explorer | Safari | Ópera |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 3.0 | 3.5 | 1.0 |
rgb () y hsl () | 1.0 | 1.0 | 9.0 | 9.5 | 3.1 |
rgba () y hsla () | 1.0 | 1.0 | 9.0 | 10.0 | 3.1 |
#RRGGBBAA o #RGBA | – | 4.9 | ? | – | 9.1 |
rgb () y hsl () Transparencia | – | 5.2 | ? | ? | ? |
Funciones generales del color en CSS
La propiedad acepta color
un solo valor que especifica el color.
<color>
Este valor establece el color del contenido del texto y la decoración del texto del elemento.
Estructura de color simple
color : < color >;
Puede ser el valor de color <color>
definido a través de la función, rgb()
, rgba()
, hsl()
o el hsla()
valor hexadecimal, también por el nombre de un color o valor currentcolor
:
< color > = < rgb ()> | < rgba ()> | < hsl ()> | < hsla ()> | < color hexadecimal > | < nombre-color > | currentcolor | < deprecated-system-color >
Donde :
< rgb ()> = rgb ( [ [ < percentage > { 3 } | < number > { 3 } ] [ / < alpha-valore > ] ] | [ [ < percentage > # { 3 } | < number > # { 3 } ] , < alpha-value >? ] ) < rgba ()> = rgba ( [[ [ < percentage > { 3 } | < number > { 3 } ]] [ / < alpha-value > ]? ] | [ [ < percentage > # { 3 } | < number > # { 3 } ] ] , < alpha-value>? ] ) < hsl ()> = hsl ( [ < hue > < percentage > < percentage > [ / < valor alfa > ]? ] | [ < hue >, < percentage >, < percentage >, < alpha-value >? ] ) < hsla ()> = hsla ( [ < hue > < percentage > < percentage > [ / < ]? ] | [ < hue >, < percentage >, < percentage >, < alpha-value>? ] )
Donde :
< alpha-value > = < number > | < percentage > < hue > = < number > | < angel >
- Múltiples Constantes en TypeScript
- Estructura de Datos las Colas
- Estructura de Datos las Pilas (Stack)
- Widget Drawer en Flutter
- Clase Scaffold en Flutter
- Estructura del lenguaje Python
- Iteradores y generadores en TypeScript
- Símbolo en TypeScript (Symbol)
- Tipos Avanzados en TypeScript
- Tipos de Compatibilidad en TypeScript
- Inferir Tipos en TypeScript
- Tipos Generalizados (Generics) en TypeScript
- Tipos Básicos de Datos en TypeScript
- Interfaces en TypeScript
- Declaración de Variables en TypeScript
- Funciones en TypeScript
- Categorías en TypeScript
- Introducción a TypeScript
- Clase MaterialApp en Flutter
- Clase Container en Flutter
- ¿Qué son los Widgets en Flutter?
- Introducción a la Arquitectura de Aplicaciones con Flutter
- Lista Doblemente Enlazada
- Listas Vinculadas en Estructura de Datos
- Introducción a las Matrices(Arrays)
- Estructuras de Datos en los Algoritmos de Programación
- Expresión const en JavaScript
- Expresión let en JavaScript
- Introducción al Lenguaje de Programación CSS
- Intérprete de Python