Cómo: Usar la ventana Propiedades de CSS

Actualización: noviembre 2007

La ventana Propiedades de CSS permite ver y modificar las propiedades de estilo de la hoja de estilos en cascada (CSS) de un elemento. Puede usar la ventana Propiedades de CSS con una página web abierta, un archivo CSS externo o con la ventana Administrar estilos para revisar y cambiar las propiedades de estilos existentes.

En una página web, la ventana Propiedades de CSS permite ver todos los estilos que usa el elemento actualmente seleccionado. También puede ver el orden de prioridad de dichos estilos y todas sus propiedades y valores. Puede usar la ventana Propiedades de CSS tanto en la vista Código fuente como en la vista Diseño.

Nota:
En la ventana Propiedades de CSS, puede hacer clic con el botón secundario en un selector de Reglas aplicadas para mostrar un menú de acceso directo que contiene opciones adicionales para trabajar con estilos para dicho selector.

Información general de la ventana Propiedades de CSS

La ventana Propiedades de CSS incluye cuatro secciones principales, como se muestra en la ilustración siguiente:

Las secciones son las siguientes:

• Botones para ordenar   Puede usar los botones situados en la parte superior de la ventana para ordenar la lista de propiedades. Puede ordenar la lista alfabéticamente, por categoría y por las propiedades que se establecen.

• Botón Resumen   Puede hacer clic en el botón Resumen para enumerar las propiedades de todos los estilos que afectan al elemento seleccionado. Esta lista incluye propiedades que pueden no aparecer en la sección Reglas aplicadas.

• Reglas aplicadas   Enumera todos los estilos que afectan al elemento de la página. Los estilos que aparecen en la parte inferior de la lista tienen mayor prioridad que los estilos de la parte superior. Si selecciona un estilo en esta lista, sus propiedades se enumeran en la sección Propiedades de CSS.

• Propiedades de CSS   Use esta sección para ver o establecer propiedades de CSS del estilo seleccionado en Reglas aplicadas. Una línea roja que tacha las propiedades indica que la selección actual no las hereda o que otro estilo las ha invalidado.

Crear un nuevo estilo con la ventana Propiedades de CSS

Puede usar la ventana Propiedades de CSS para crear un nuevo estilo para un elemento que selecciona en vista Diseño, en la vista Código fuente o en la vista Dividir. Puede crear un estilo insertado o mostrar el cuadro de diálogo Nuevos estilos para crear un estilo en la página o en una hoja de estilos CSS.

La sección Reglas aplicadas indica qué reglas de estilo se aplican al elemento. También indica si estas reglas están insertadas, en una hoja de estilos o en la página actual. El procedimiento siguiente explica cómo crear un nuevo estilo para un elemento. Si todavía no se ha aplicado ningún estilo, la sección Estilos aplicados no muestra ninguna regla aplicada.

Para crear un nuevo estilo con la ventana Propiedades de CSS

1. En el diseñador, seleccione el elemento al que desea agregar una regla de estilo.

   En la vista Códigofuente, seleccione el elemento e incluya las etiquetas de apertura y cierre. En la vista Diseño, seleccione el elemento para que la etiqueta emergente muestre su nombre.

2. Para crear un estilo insertado, en la ventana Propiedades de CSS, haga clic con el botón secundario en cualquier parte de la sección Reglas aplicadas y, a continuación, haga clic en Nuevo estilo insertado

3. Para agregar un nuevo estilo a la página, en la ventana Propiedades de CSS, haga clic con el botón secundario en cualquier parte de la sección Reglas aplicadas y, a continuación, haga clic en Nuevo estilo.

4. En la lista Reglas aplicadas, seleccione un elemento, un identificador de elemento o una clase CSS de elemento.

5. En la sección Propiedades de CSS, establezca las propiedades de estilo.

Modificar un estilo con la ventana Propiedades de CSS

Puede usar la ventana Propiedades de CSS para cambiar el formato o el estilo de un elemento único o de todos los elementos que comparten una clase CSS.

Para modificar las propiedades de un estilo

1. En la lista Reglas aplicadas de la ventana Propiedades de CSS, seleccione un elemento, un estilo inline, un identificador de elemento o una clase CSS de elemento.

2. En la sección Propiedades de CSS, cambie las propiedades.

Determinar qué estilos se aplican a un elemento

La ventana Propiedades de CSS permite ver todos los estilos que se aplican a un elemento. También puede ver qué propiedades de estilo se invalidan. Las propiedades de estilo invalidadas se muestran con una línea roja que las tacha, lo que indica que la propiedad no se aplica al elemento actualmente seleccionado.

Por ejemplo, un elemento podría tener una regla de estilo insertado y una regla de estilo de una hoja de estilos aplicadas. En este caso, la regla del estilo insertado invalida la regla de la hoja de estilos.

Para ver un resumen de todas las propiedades aplicadas a una selección

1. Seleccione un elemento en la página y, a continuación, haga clic en Resumen para cambiar al modo de resumen.

   En la sección Propiedades de CSS, se muestran todas las propiedades que se aplican al elemento seleccionado.

2. Haga clic en una propiedad en Propiedades de CSS para describir la regla de estilo asociada en Reglas aplicadas.

3. Haga clic de nuevo en el botón Resumen para salir del modo de resumen.

   Nota:
   Si mantiene el puntero del mouse sobre una propiedad tachada, la información sobre herramientas de una propiedad invalidada identifica la propiedad que la invalida.

Vea también

Conceptos

Cómo: Usar las ventanas Aplicar estilos y Administrar estilos

Cómo: Usar la barra de herramientas Aplicación de estilo directo