Categoría: Tecnología al Día

Margen, relleno, bordes y modelo de cajas en CSS

La anchura y altura de un elemento no solamente se calculan teniendo en cuenta sus propiedades width y height. El margen, el relleno y los bordes establecidos a un elemento determinan la anchura y altura final del elemento. En el siguiente ejemplo se muestran los estilos CSS de un elemento: div { width: 300px; padding-left:

Bordes con CSS

CSS permite definir el aspecto de cada uno de los cuatro bordes horizontales y verticales de los elementos. Para cada borde se puede establecer su anchura, su color y su estilo. Anchura La anchura de los bordes se controla con las cuatro propiedades siguientes: < Scroll Horizontal disponible en esta tabla > border-top-widthborder-right-widthborder-bottom-widthborder-left-width Anchura del

Margen y relleno en CSS

Margen CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento. < Scroll Horizontal disponible en esta tabla > 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

Anchura y altura

Anchura La propiedad CSS que controla la anchura de los elementos se denomina width. < Scroll Horizontal disponible en esta tabla > 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

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 mediante cajas rectangulares. Las cajas

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 a los colores básicos. Las

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 entre el número y la

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 se muestra el párrafo anterior?

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 «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

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 establecen el valor de tres