Definición de las propiedades CSS

Puede definir propiedades de reglas CSS, como la fuente del texto, la imagen y el color de fondo, las propiedades de espaciado y diseño y el aspecto de los elementos de las listas. En primer lugar, cree una nueva regla y, a continuación, establezca cualquiera de las propiedades siguientes.

Aquí le presentamos una descripción de algunas de las propiedades de tipo CSS que puede definir.

Establece la familia de fuentes (o serie de familias) del estilo. Los navegadores muestran el texto utilizando la primera fuente de la serie que esté instalada en el sistema del usuario. Para obtener compatibilidad con Internet Explorer, indique en primer lugar una fuente de Windows. Ambos navegadores reconocen el atributo font.

Especifica normal, italic u oblique como estilo de la fuente. El valor predeterminado es normal. Ambos navegadores reconocen el atributo style.

Establece el alto de la línea en la que se coloca el texto. Este valor se conoce tradicionalmente como interlineado. Seleccione normal para hacer que el alto de línea del tamaño de la fuente se calcule de manera automática, o bien introduzca un valor exacto y seleccione una unidad de medida. Ambos navegadores reconocen el atributo Line-height.

Añade subrayado, sobreimpresión o tachado al texto o hace que el texto parpadee. El valor predeterminado para texto normal es ninguna. El valor predeterminado para vínculos es underline (subrayado). Si asigna a los vínculos el valor none, puede eliminar el subrayado definiendo una clase especial. Ambos navegadores reconocen el atributo decoration.

Aplica una cantidad específica o relativa de negrita a la fuente. Normal es equivalente a 400; bold (negrita), a 700. Ambos navegadores reconocen el atributo weight.

Establece la variante de versales en el texto. Dreamweaver no muestra este atributo en la ventana de documento. El atributo variant es compatible con Internet Explorer, pero no con Navigator.

Convierte en mayúscula la primera letra de cada palabra de la selección o convierte todo en mayúsculas o minúsculas. Ambos navegadores reconocen el atributo de mayúsculas/minúsculas.

Establece el color del texto. Ambos navegadores reconocen el atributo color.

Define el tamaño del texto. Puede elegir un tamaño específico seleccionando el número y la unidad de medida, o bien un tamaño relativo. El uso de píxeles evita que los navegadores distorsionen el texto. Ambos navegadores reconocen el atributo size.

Definición de propiedades de fondo de estilos CSS

Puede aplicar propiedades de fondo a cualquier elemento de una página Web. Por ejemplo, crear un estilo que añada color de fondo o una imagen de fondo a cualquier elemento de la página, detrás del texto, de una tabla, de la página, etc. También puede especificar la posición de una imagen de fondo.

Aquí le presentamos una descripción de algunas de las propiedades de fondo CSS que puede definir.

Establece la imagen de fondo para el elemento. Ambos navegadores reconocen el atributo Background-image.

Determina si la imagen de fondo se repite y de qué forma lo hace. Ambos navegadores reconocen el atributo repeat.

• No-repeat muestra la imagen una vez al principio del elemento.

• Repeat forma un mosaico con la imagen en sentido horizontal y vertical detrás del elemento.

• Repeat-x y repeat-y muestran, respectivamente, una banda horizontal y vertical de imágenes. Las imágenes se recortan para que quepan dentro de los límites del elemento.

Nota: Utilice esta propiedad para redefinir la etiqueta body y establecer una imagen de fondo que no forme un mosaico ni se repita.

Determina si la imagen de fondo está fija en su posición original o se desplaza con el contenido. Tenga en cuenta que algunos navegadores pueden considerar la opción fixed como scroll. Internet Explorer reconoce este atributo, a diferencia de Netscape Navigator.

Especifican la posición inicial de la imagen de fondo en relación con el elemento. Pueden emplearse para alinear una imagen de fondo en el centro de la página, tanto vertical (Y) como horizontalmente (X). Si la propiedad de attachment es fixed, la posición será relativa a la ventana de documento, no al elemento.

Establece el color de fondo del elemento. Ambos navegadores reconocen el atributo Background-color.

Definición de propiedades de bloque de estilos CSS

Puede definir la configuración del espaciado y de la alineación para las etiquetas y las propiedades.

Aumenta o disminuye el espacio entre letras o caracteres. Para disminuir el espacio entre caracteres, establezca un valor negativo, por ejemplo (-4). La configuración del espacio entre letras anula la justificación del texto. Internet Explorer 4 y posterior y Netscape Navigator 6 reconocen el atributo Letter-spacing.

Especifica la cantidad de sangría que se aplica a la primera línea de texto. Se puede emplear un valor negativo para crear una sangría negativa, pero su visualización dependerá del navegador. Dreamweaver sólo muestra este atributo en la ventana de documento cuando la etiqueta se aplica a elementos de nivel de bloque. Ambos navegadores reconocen el atributo Text-indent.

Especifica la alineación vertical del elemento al que se aplica. Dreamweaver sólo muestra este atributo en la ventana de documento cuando se aplica a la etiqueta <img>.

Establece cómo se alineará el texto dentro del elemento. Ambos navegadores reconocen el atributo Text-align.

Determina de qué forma se gestiona el espacio en blanco dentro del elemento. Seleccione una de las tres opciones: normal contrae el espacio en blanco; pre lo gestiona como si el texto se encontrara entre etiquetas pre (es decir, se respeta todo el espacio en blanco, incluidos los espacios, tabulaciones y retornos); no-wrap especifica que el texto sólo se ajusta cuando se encuentra una etiqueta br. Dreamweaver no muestra este atributo en la ventana de documento. Netscape Navigator e Internet Explorer 5.5 reconocen el atributo White-space.

Especifica si un elemento se muestra y, si es así, cómo lo hace. None desactiva el elemento al que se ha asignado.

Establece el espacio adicional entre las palabras. Para establecer un valor específico, seleccione valor en el menú emergente y, a continuación, introduzca un valor numérico. En el segundo menú emergente, seleccione una unidad de medida (por ejemplo, píxeles, puntos, etc.).

Nota: Puede especificar valores negativos, pero su visualización dependerá del navegador. Dreamweaver no muestra este atributo en la ventana de documento.

Definición de las propiedades del cuadro de estilos CSS

Utilice la categoría Cuadro del cuadro de diálogo de definición de regla CSS para definir la configuración de las etiquetas y propiedades que controlan la ubicación de los elementos en la página.

Puede aplicar la configuración en los distintos lados de un elemento al establecer el relleno y los márgenes o utilizar Igual para todo para aplicar la misma configuración a todos los lados del elemento.

Especifica el lado alrededor del cual fluyen otros elementos en torno al elemento flotante. El elemento flotante se fija al lado flotante y el resto del contenido fluye alrededor de este en el lado opuesto.

Por ejemplo, una imagen que flota a la derecha se fija a la derecha, mientras que el contenido que añada posteriormente fluirá a la izquierda de la imagen.

Para obtener más información, consulte http://css-tricks.com/all-about-floats/

Especifica los lados de un elemento que no permiten otros elementos flotantes.

Especifica la cantidad de espacio entre el contenido de un elemento y su borde (o el margen si no hay ningún borde). Desactive la opción Igual para todo para establecer el relleno de los distintos lados del elemento.

Establece las mismas propiedades de relleno para Top, Right, Bottom y Left, es decir, para las partes superior, derecha, inferior e izquierda respectivamente del elemento al que se aplica.

Especifica la cantidad de espacio entre el borde de un elemento (o el relleno si no hay borde) y otro elemento. Dreamweaver sólo muestra este atributo en la ventana de documento cuando se aplica a elementos de nivel de bloque (párrafos, encabezados, listas, etc.). Desactive la opción Igual para todo para establecer el margen de los distintos lados del elemento.

Establecen el ancho y alto del elemento.

Definición de propiedades de borde de estilos CSS

Utilice la categoría Borde del cuadro de diálogo de definición de regla CSS para definir la configuración de los bordes que rodean a los elementos (Width, Color o Style).

Especifica el grosor del borde del elemento. Ambos navegadores reconocen el atributo Width. Desactive la opción Igual para todo para establecer el ancho del borde de los distintos lados del elemento.

Establece las mismas propiedades de estilo de borde para Top, Right, Bottom y Left, es decir, para las partes superior, derecha, inferior e izquierda respectivamente del elemento al que se aplica.

Establece el color del borde. Puede especificar colores distintos para cada lado, pero su visualización dependerá del navegador. Desactive la opción Igual para todo para establecer el color del borde de los distintos lados del elemento.

Establece el aspecto del estilo del borde. El aspecto del estilo puede variar en función del navegador. Desactive la opción Igual para todo para establecer el estilo del borde de los distintos lados del elemento.

Definición de las propiedades de lista de estilos CSS

Utilice la categoría Lista del cuadro de diálogo de definición de regla CSS para definir la configuración de la lista para las etiquetas de lista (por ejemplo el tamaño y el tipo de viñetas).

Establece el aspecto de viñetas o números. Ambos navegadores reconocen el atributo type.

Determina si el elemento de texto de la lista se ajusta a una sangría (outside) o si el texto se ajusta al margen izquierdo (inside).

Permite especificar una imagen personalizada para viñetas. Haga clic en Browse (Windows) o Seleccionar (Macintosh) para buscar una imagen o escriba la ruta de la imagen.

Definición de las propiedades de posición de estilos CSS

Las propiedades de estilo Posición determinan cómo debe colocarse el contenido relacionado con el estilo CSS en la página.

Deje en blanco cualquiera de las propiedades siguientes si no son importantes para el estilo:

Determina cómo deberá colocar el navegador el elemento seleccionado. Ofrece las opciones siguientes:

• Absolute coloca el contenido utilizando las coordenadas introducidas en los cuadros Placement en relación con el ascendente más próximo con posición absoluta o relativa o, si no hay ningún ascendente con posición absoluta o relativa, con la esquina superior izquierda de la página.

• Relative coloca el bloque de contenido utilizando las coordenadas introducidas en los cuadros Placement en relación con la posición del bloque en el flujo de texto del documento. Por ejemplo, al asignar a un elemento una posición relativa (relative) y coordenadas superior (top) e izquierda (left) de 20 píxeles cada una, el elemento se desplazará 20 píxeles hacia la derecha y 20 píxeles hacia abajo de su posición normal en el flujo. Los elementos también pueden tener una posición relativa, con o sin coordenadas superior (top), izquierda (left), derecha (right) o inferior (bottom), para establecer un contexto para elementos dependientes con posición absoluta.

• Fixed coloca el contenido utilizando las coordenadas introducidas en los cuadros Placement en relación con la esquina superior izquierda del navegador. El contenido permanecerá fijo en esta posición cuando el usuario se desplace por la página.

• Static coloca el contenido en su ubicación en el flujo de texto. Esta es la posición predeterminada de todos los elementos HTML que pueden colocarse.

Determina el orden de apilamiento del contenido. Los elementos con un índice z superior aparecen por encima de los elementos con un índice z inferior (o sin índice z). Los valores pueden ser positivos o negativos. (Si el contenido tiene posición absoluta, es más fácil cambiar el orden de apilamiento utilizando el panel Elementos PA).

Determina lo que debe ocurrir si el contenido de un contenedor (por ejemplo, una DIV o una P) supera el tamaño de éste. Estas propiedades controlan la ampliación de la siguiente manera:

• Visible aumenta el tamaño del contenedor para que todo su contenido sea visible. El contenedor se expande hacia abajo y hacia la derecha.

• Hidden mantiene el tamaño del contenedor y recorta cualquier contenido que no quepa. No hay barras de desplazamiento.

• Scroll añade barras de desplazamiento al contenedor independientemente de que el contenido exceda o no el tamaño del contenedor. La inclusión de barras de desplazamiento evita la confusión que provoca la aparición y desaparición de las barras de desplazamiento en un entorno dinámico. Esta opción no se muestra en la ventana de documento.

• Auto presenta las barras de desplazamiento solamente cuando el contenido del contenedor excede de sus límites. Esta opción no se muestra en la ventana de documento.

Define la parte del contenido que será visible. Si especifica una región de recorte, podrá acceder a ella con un lenguaje de scripts como JavaScript y manipular las propiedades para crear efectos especiales como barridos. Estos barridos se pueden configurar utilizando el comportamiento Cambiar propiedad.

Especifica la ubicación y el tamaño del bloque de contenido. La forma en que el navegador interpreta la ubicación dependerá de la configuración de Tipo. Si el contenido del bloque de contenido excede el tamaño especificado, los valores de tamaño se anularán.

El píxel es la unidad predeterminada de ubicación y tamaño. También se pueden emplear las siguientes unidades: pc (picas), pt (puntos), in (pulgadas), mm (milímetros), cm (centímetros), (ems), (exs) o % (porcentaje del valor padre). Las abreviaturas deben seguir al valor sin espacio de separación: por ejemplo, 3mm.

Determina el estado inicial de visualización del contenido. Si no se especifica una propiedad de visibilidad, el contenido heredará el valor de la etiqueta del padre de forma predeterminada. La visibilidad predeterminada de la etiqueta body es visible. Seleccione una de las siguientes opciones de visibilidad:

• Inherit hereda la propiedad de visibilidad del padre del contenido.

• Visible muestra el contenido, independientemente del valor del contenido padre.

• Hidden no muestra el contenido, independientemente del valor del contenido padre.

Definición de las propiedades de extensiones de estilos CSS

Las propiedades de extensiones de estilo incluyen opciones de filtros (filter), salto de página y puntero (cursor).

Cambia la imagen del puntero cuando éste se encuentra sobre el objeto al que se aplica el estilo. Seleccione la opción que desea establecer en el menú emergente. Internet Explorer 4.0 y versiones posteriores y Netscape Navigator 6 reconocen este atributo.

Aplica efectos especiales al objeto controlado por el estilo, incluidos desenfoque e inversión. Seleccione un efecto en el menú emergente.

Efectúa un salto de página al imprimir antes o después del objeto al que se aplica el estilo. Seleccione la opción que desea establecer en el menú emergente. Esta opción es incompatible con todos los navegadores 4.0, pero es posible que la reconozcan las versiones futuras de estos programas.