Archivo de la etiqueta: CSS Basico

Modelo de cajas en CSS (Introducción a CSS)

El modelo de cajas o “box model” es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.

Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:

modelo-de-caja-elementos-html

Las cajas se crean automáticamente al definir cada elemento HTML

Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde. Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características. Cada una de las cajas está formada por seis partes, tal y como muestra la siguiente imagen:

Sigue leyendo

Propiedad border en CSS, (Introducción a CSS)

Propiedad border

La propiedad border establece algunas o todas las propiedades de todos los bordes de los elementos.

La propiedad border presenta los siguientes valores en cualquier orden: ancho, estilo del borde, color del borde

Propiedad border, ejemplo de uso

La propiedad border es una de las “propiedades shorthand” que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales. En este caso, se trata de una de las propiedades shorthand más completas, ya que permite establecer hasta 12 propiedades de forma simultánea.

Sigue leyendo

Efecto Hover en Botones y Enlaces

Empecemos diciendo que el efecto Hover de manera general, consiste en la alteración del aspecto grafico de un elemento cuando se sitúa el puntero del mouse sobre este, pero dicho elemento no ha sido seleccionado aún.

Hover como pseudo-clase CSS se presenta cuando el usuario coloca el puntero sobre cualquier elemento HTML. Cualquier regla definida en dicho elemento puede ser sobre escrita.

Sigue leyendo

Propiedad margin en CSS, (Introducción a CSS)

propiedad margin en css La propiedad margin del CSS establece la anchura de algunos o todos los márgenes de los elementos HTML. La propiedad margin Se aplica en todos los elementos.

Lo valores permitidos de la propiedad margin son: medida, porcentaje, auto, inherit

Es importante mencionar que si utilizamos porcentaje como unidad de medida, el margen hara referencia al ancho del elemento en el que se encuentra.

Sigue leyendo

Colores y Gradientes

Elegir la mejor combinación de colores para una página web o un blog, puede resultar en ocasiones muy trabajoso, e invertimos mucho tiempo buscando la tonalidad correcta, armonizando los colores adecuados o averiguando qué colores combinan con una imagen que puede ser por ejemplo, el logo o la cabecera. Sigue leyendo

El color en la web. Paletas de color seguras. Websafe y Reallysafe

Las paletas de colores dan limitaciones a la hora de presentar los colores que contiene la web. En este capítulo vamos a ver cuales son estas limitaciones.

La mayoría de los colores obtenidos con 16 bits de profundidad son diferentes a los obtenidos con 8 y 24 bits. Además, si se usan 8 bits (256 colores), el monitor será incapaz de presentar muchos de los colores obtenidos si la página se ha diseñado a millones de colores.
Sigue leyendo