Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
IR A LA SECCIÓN ANTERIOR:
LOS ESTILOS DE TEXTO
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 |
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.
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 |
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.
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
- Edite su archivo CSS.
- 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;} - Guarde el archivo y actualizar el navegador para ver el resultado.
|
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é?
IR A LA SIGUIENTE SECCIÓN:
CONTENTEn 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.