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: border-top-widthborder-right-widthborder-bottom-widthborder-left-width Anchura del borde superior Anchura del borde derecho Anchura del […]
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 los elementos de bloque y […]
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 Valor inicial auto Descripción Establece […]
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 […]
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 […]
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 […]
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? […]
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»> […]
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 […]
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 que su uso no era […]