Margen y relleno en CSS

Margen CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento. margin-topmargin-rightmargin-bottommargin-left Margen superior Margen derecho Margen inferior Margen izquierdo Valores <medida> | <porcentaje> | auto | inherit Se aplica a Todos los elementos, salvo margin-top y margin-bottom que sólo se aplican a…

Continuar leyendo

Anchura y altura

Anchura La propiedad CSS que controla la anchura de los elementos se denomina width. width Anchura Valores <medida> | <porcentaje> | auto | inherit Se aplica a Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla…

Continuar leyendo

Modelo de cajas en 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…

Continuar leyendo

Colores con CSS

Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. Aunque el método más habitual es el del RGB hexadecimal, a continuación se muestran todas las alternativas que ofrece CSS. CSS define 17 palabras clave para referirse…

Continuar leyendo

Unidades de medida en CSS

Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en blanco…

Continuar leyendo

Colisiones de estilos en CSS

En las hojas de estilos complejas, es habitual que varias reglas CSS se apliquen a un mismo elemento HTML. El problema de estas reglas múltiples es que se pueden dar colisiones como la del siguiente ejemplo: p { color: red; } p { color: blue; } <p>…</p> ¿De qué color…

Continuar leyendo

Herencia CSS

Una de las características principales de CSS es la herencia de los estilos definidos para los elementos. Cuando se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad. Si se considera el siguiente ejemplo: <!DOCTYPE html PUBLIC…

Continuar leyendo

Agrupación de reglas en CSS

Cuando se crean archivos CSS complejos con decenas o cientos de reglas, es habitual que los estilos que se aplican a un mismo selector se definan en diferentes reglas: h1 { color: red; } … h1 { font-size: 2em; } … h1 { font-family: Verdana; } Las tres reglas anteriores…

Continuar leyendo

Selectores CSS avanzados

Utilizando solamente los selectores básicos de la sección anterior, es posible diseñar prácticamente cualquier página web. No obstante, CSS define otros selectores más avanzados que permiten simplificar las hojas de estilos. Desafortunadamente, el navegador Internet Explorer 6 y sus versiones anteriores no soportaban este tipo de selectores avanzados, por lo…

Continuar leyendo

CSS Selectores

Para crear diseños web profesionales, es imprescindible conocer y dominar los selectores de CSS. Como se vio en el capítulo anterior, una regla de CSS está formada por una parte llamada «selector» y otra parte llamada «declaración». La declaración indica «qué hay que hacer» y el selector indica «a quién…

Continuar leyendo