Color

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Esta es la sección octava de la CSS Introduccióntutorial; se explica cómo puede especificar el color en CSS. En su hoja de estilos de muestra, se introduce colores de fondo.

Información: Color

En este tutorial hasta ahora, se ha utilizado un número limitado de colores con nombre. CSS 2 soporta 17 colores con nombre absoluto. Algunos de los nombres puede que no sea el esperado:

  black   gray   silver   white  
primaries red   lime   blue  
secondaries yellow   aqua   fuchsia  
  maroon   orange   olive   purple   green   navy   teal  

 

Detalles

Su navegador puede soportar muchos más colores con nombre, como:

dodgerblue   peachpuff   tan   firebrick   aquamarine  

Para detalles de esta lista ampliada, consulte: SVG palabras clave de color en el módulo de colores CSS 3 . Tenga cuidado con el uso de nombres de colores;puede que algunos de sus lectores de navegación no lo soporte.

Para una paleta más grande, especificar los componentes rojo, verde y azul del color que desee, utilizando el signo numerico (hash) y tres dígitos  hexadecimales entre los rangos  0 - 9, a - f. Las letras a - f representan los valores de 10 a 15:

black   #000
pure red   #f00
pure green   #0f0
pure blue   #00f
white   #fff


Para toda la paleta, especificar dos dígitos hexadecimales para cada componente:

black   #000000
pure red   #ff0000
pure green   #00ff00
pure blue   #0000ff
white   #ffffff

Generalmente, usted puede obtener estos códigos hexadecimales de seis dígitos de su programa de gráficos o alguna otra herramienta.

Ejemplo

Con un poco de práctica, puede ajustar los colores de tres dígitos de forma manual para la mayoría de los propósitos:

Comience con el rojo puro:   #f00
Para que sea más pálido, añadir un poco de verde y azul:   #f77
Para hacerlo más naranja, añadir un poco de verde adicional:   #fa7
Para oscurecer, reducir todos sus componentes:   #c74
Para reducir su saturación, hacer que sus componentes más iguales:   #c98
Si usted los pone exactamente iguales, se obtiene gris:   #ccc

Para un tono pastel como el azul pálido:

Comience con blanco puro:   #fff
Reducir los otros componentes un poco:   #eef
Más detalles

También puede especificar un color mediante los valores RGB decimales en el rango de 0 - 255, o porcentajes.

Por ejemplo, este es de color granate (rojo oscuro)dark red:

RGB (128, 0, 0)

Para más detalles sobre cómo especificar los colores, ver: Colores en la Especificación CSS.

Para obtener información sobre la adecuación de los colores del sistema como Menú y ThreeDFace, véase: Sistema CSS2 Colores en la Especificación CSS.

Propiedades de Color

Ya ha utilizado la propiedad color  en el texto.

También puede utilizar la propiedad background-color para cambiar fondos elementos.

Los Fondos (Backgrounds ) se pueden establecer en transparent (transparentes) para eliminar explícitamente cualquier color, revelando fondo del elemento padre.

Ejemplo

Los ejemplos de cajas de este tutorial utilizan este fondo de color amarillo pálido:

background-color : # fffff4 ;
 

Los Más detalles cajas utilizan este gris pálido:

background-color : # F4F4F4 ;

 

Acción: El uso de códigos de color

  1. Edite su archivo CSS.
  2. Hacer el cambio se muestra aquí en negrita, para dar las letras iniciales un fondo azul claro. (La disposición y comentarios en el archivo probablemente difieren del archivo que se muestra aquí. Mantenga la disposición y los comentarios de la forma que prefiera.)
    /*** CSS Tutorial: Color page ***/
    
    /* page font */
    body {font: 16px "Comic Sans MS", cursive;}
    
    /* paragraphs */
    p {color: blue;}
    #first {font-style: italic;}
    
    /* initial letters */
    strong {
      color: red;
      background-color: #ddf;
      font: 200% serif;
      }
    
    .carrot {color: red;}
    .spinach {color: green;}
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  3. Guarde el archivo y actualizar el navegador para ver el resultado.
C ascading S tyle S heets
C ascading S tyle S heets
Desafío

En el archivo CSS, cambiara todos los nombres de los colores a los códigos de color de 3 dígitos sin afectar el resultado.

(Esto no se puede hacer exactamente, pero usted puede conseguir cerca. Para hacerlo exactamente lo que necesita códigos de 6 dígitos, y hay que buscar la especificación CSS o utilizar una herramienta gráfica para que coincida con los colores.)

Ver una solución para el desafío.

¿Y ahora qué?

En su documento de muestra y el contenido de su hoja de estilo muestra estrictamente separados los estilo.La siguiente sección explica cómo se puede hacer excepciones a esta estricta separación.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: albaluna
 Última actualización por: albaluna,