Manejo de colores en CSS

En CSS existen diferentes formas de definir los colores. Entre ellas tenemos:

• Colores Básicos: CSS define 17 palabras clave para referirse a los colores básicos. Las palabras se corresponden con el nombre en inglés de cada color: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

  

  Colores Básicos

• RGB: El modelo RGB consiste en definir un color indicando la cantidad de rojo, verde y azul que se debe mezclar para obtener ese color. Ejemplo: rgb(71,98,176).

  Los valores deben estar entre 0 y 255.

  El color del ejemplo anterior se puede representar también de forma porcentual. Ejemplo: rgb(27%, 38%, 69%).

• RGB hexadecimal: Este modelo se basa en la representación de colores por medio de números hexadecimales; por lo general 6 dígitos, aunque se puede comprimir a 3. Los 2 primeros dígitos para la cantidad de rojo, los 2 siguientes para la cantidad de verde y los últimos 2 para el azul: Ejemplo: #ff33aa

Ejemplo: Colores Básicos.

Estilos de Textos:

En CSS existen diferentes estilos que podemos aplicar a los textos de nuestra página, entre ellos tenemos los siguientes:

• font-size: Esta propiedad establece el tamaño del texto.

  Este tamaño puede ser absoluto (mm: milimetros, cm: centimetros, in: inches, pt: puntos, donde 1pt equivale a 1/72 pulgadas, pc: pica, donde 1pc equivale a 12pt, px: pixel). O relativos (em: 1em hace referencia al tamaño en puntos de la letra que se está utilizando, %: porcentaje, ex: 1ex es igual a la altura de la letra ‘x’ de la fuente que se está utilizando.)

  También se puede definir el tamaño de letra de forma absoluta mediante alguna de las siguientes palabras clave: xx-small, x-small, small, medium, large, x-large, xx-large.

  Ejemplos:

  p{ font-size:12px; } h1{ font-size:2em; } .texto{ font-size:1cm; }

• font-weight: Establece el ancho de la letra utilizada para el texto. Los valores que puede tomar esta propiedad son: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit.

  Ejemplos:

  p { font-weight:bold; } h1 { font- weight:normal; } .texto { font- weight:300; }

• font-family: Con esta propiedad se puede establecer el tipo de letra para nuestro texto. Normalmente se establece por grupos llamados familias. Las familias más utilizadas son:

  • Arial, Helvetica, sans-serif;
  • "Times New Roman", Times, serif;
  • "Courier New", Courier, monospace;
  • Georgia, "Times New Roman", Times, serif;
  • Verdana, Arial, Helvetica, sans-serif;

  Ejemplos:

  p { font-family: Arial, Helvetica, sans-serif; } h1 { font- family: Times New Roman", Times, serif; }

• color: Con esta propiedad se puede establecer el color de la letra de los textos. Los valores que pueden tomar este atributo pueden ser cualquiera de los vistos en la sección “Manejo de colores con CSS”.

  Ejemplos:

  p { color: blue; } h1 { color: #FF00BB; }

Colocando Fondos con CSS

En CSS el fondo puede ser un color simple o una imagen. CSS define cinco propiedades para establecer el fondo de cada elemento

• background-color: permite mostrar un color de fondo sólido en un elemento contenedor. Esta propiedad no permite crear degradados ni ningún otro efecto avanzado.

  Ejemplo:

  body { background-color: #A5DBA8; }

  

  Fondo Verde

• background-image: Permite mostrar una imagen como fondo cualquier elemento contenedor.

  Ejemplo

  body { background-image: url("img/fondo.png"); }

  

  Imagen de fondo

• background-repeat:En ocasiones, no es conveniente que la imagen de fondo se repita horizontal y verticalmente. Para ello, CSS introduce la propiedad background-repeat que permite controlar la forma de repetición de las imágenes de fondo.

  Esta propiedad puede tomar los siguientes valores:

  • repeat: indica que la imagen se debe repetir en todas direcciones y por tanto, es el comportamiento por defecto.

  • repeat-x: repite la imagen solo horizontalmente.

  • repeat-y: repite la imagen solamente de forma vertical.

  • no-repeat: muestra una sola vez la imagen y no se repite en ninguna dirección.

  Ejemplo

  body{ background-image: url("img/fondo.png"); background-repeat: repeat-x }

  

  Repetir imagen

• background-position: La propiedad background-position permite indicar la distancia que se desplaza la imagen de fondo respecto de su posición original situada en la esquina superior izquierda. Si se indican dos porcentajes o dos medidas, el primero indica el desplazamiento horizontal y el segundo el desplazamiento vertical respecto del origen.

  Ejemplo:

  #contenedor { background-image: url("images/help.png"); background-repeat: no-repeat; background-position: 50% -25%; }

  

  Imagen sin repetir

• background- attachment: Opcionalmente, se puede indicar que el fondo permanezca fijo cuando la ventana del navegador se desplaza mediante las barras de scroll; para esto se debe añadir la propiedad

  #contenedor { background-attachment: fixed; }

Ejemplo: Propiedad background.

La forma resumida de la propiedad background se muestra en el siguiente ejemplo:

#contenedor { background: #ff33aa url("imagen.jpg") no-repeat 10px 27px; }