Compartir a través de


Panel de tareas Administrar estilos

El panel de tareas Administrar estilos permite aplicar, modificar y eliminar estilos; cambiarles el nombre; adjuntar o desasociar hojas de estilos en cascada (CSS) externas; seleccionar todas las apariciones de un estilo e ir al código que contiene el conjunto de reglas de un estilo. También puede usar el panel de tareas Administrar estilos para mover estilos de una CSS externa a una CSS interna y viceversa, o bien para cambiar la ubicación de un estilo dentro de una CSS.

Cuando abre una página web, el panel de tareas Administrar estilos muestra todos los estilos que están definidos en las hojas de estilos en cascada (CSS) externas e internas de la página, pero no en las CSS en línea. Puede configurar el panel de tareas para que muestre todos los estilos o restringirlo de forma que muestre únicamente los que se usan en la página web actual o en la selección actual de la página. Todos los selectores de clase, elemento e Id. aparecen debajo del nombre del archivo .css externo que contiene los estilos o en Página actual si el estilo está en una CSS interna.

Cc295470.alert_tip(es-es,Expression.10).gifSugerencia:

Para mostrar temporalmente todas las declaraciones de propiedad de un estilo en una ventana flotante al lado del puntero, señale el estilo en el panel de tareas Administrar estilos.

Panel de tareas Administrar estilos

Cc295470.43e2a2bf-87b3-49a4-ac55-1211d2fbb028(es-es,Expression.10).bmp

  1. Página actual muestra los selectores de clase, elemento e Id. de los archivos de CSS internas y de CSS externas importadas.

  2. Archivo de CSS externa importada en la página web actual.

  3. Estilo definido en la CSS interna de la página web actual.

  4. Archivo de CSS externa vinculado desde la página web actual.

  5. De forma predeterminada, los selectores de un estilo que contiene varios selectores aparecen agrupados. Puede mostrar los selectores de forma independiente si hace clic en Opciones y, después, en Separar selectores agrupados.

Los iconos que aparecen junto a cada estilo en el panel de tareas Administrar estilos identifican el tipo de estilo y si éste se usa en la página web actual.

Iconos del panel de tareas Administrar estilos

Iconos

Descripción

Cc295470.f2c9dfa3-9c53-430c-be02-21d79e4d1d12(es-es,Expression.10).gif

Un punto rojo aparece junto a los selectores de Id.

Cc295470.93ed2242-d3a9-4228-8e01-b114ce38a04c(es-es,Expression.10).gif

Un punto verde aparece junto a los selectores de clase.

Cc295470.38197e93-e248-4637-82ab-d582c3a519ce(es-es,Expression.10).gif

Un punto azul aparece junto a los selectores de elemento.

Cc295470.69a199aa-4b7a-4713-ba75-2837bdcfa759(es-es,Expression.10).gif

Se muestra un círculo alrededor de un punto coloreado para marcar los estilos que se usan en la página web actual.

Cc295470.268c399c-96bb-47aa-931a-d00a4203b3b4(es-es,Expression.10).gif

Se muestra una arroba junto a las hojas de estilos en cascada externas importadas.

Para mover un estilo

  1. En el panel de tareas Administrar estilos, haga clic en Opciones y seleccione Clasificar por orden.

  2. Siga uno de los procedimientos siguientes:

    • Para cambiar la ubicación de un estilo en la CSS, arrástrelo hacia arriba o hacia abajo en la lista. Por ejemplo, podría mover los estilos que use con más frecuencia de modo que aparezcan situados de forma contigua.

    • Para mover un estilo de una CSS interna a una CSS externa que esté adjunta a la página, arrastre el estilo desde Página actual al nombre de la CSS externa que desee que lo contenga o a un punto concreto de la lista de estilos de la CSS externa.

    • Para mover un estilo de una CSS externa a una CSS interna, arrástrelo desde debajo del nombre de la CSS externa a Página actual o a un punto concreto de la lista de estilos en Página actual. Si no aparece Página actual, agregue un conjunto de etiquetas <style></style> entre las etiquetas <head></head> de la página web.

    • Para mover un estilo desde una CSS externa a otra CSS externa diferente, arrástrelo al nombre de la CSS externa que desee que lo contenga o a un punto concreto de la lista de estilos de la CSS externa.

    [!NOTA]

    Cuando el panel de tareas Administrar estilos se establece en Clasificar por elemento o en Clasificar por tipo en el panel de tareas Opciones, no se puede mover un estilo a un punto concreto de la lista de estilos. Con cualquiera de las opciones, sólo puede mover el estilo de una CSS externa a otra CSS externa o interna, o viceversa, arrastrando el estilo al nombre de archivo de la CSS externa o a Página actual (para la CSS interna).

Para ordenar los estilos del panel de tareas Administrar estilos

  • En el panel de tareas Administrar estilos, haga clic en Opciones y haga lo siguiente:

    Elemento

    Acción

    Clasificar por orden

    Muestra los estilos en función del orden en que aparecen en la CSS.

    Clasificar por elemento

    Muestra los estilos debajo del elemento HTML al que se aplica cada estilo.

    Clasificar por tipo

    Muestra los estilos alfabéticamente y de acuerdo con su tipo.

Para mostrar por separado cada selector de estilos que contenga varios selectores

  • En el panel de tareas Administrar estilos, haga clic en Opciones y seleccione Separar selectores agrupados.

Para mostrar u ocultar los estilos en el panel de tareas Administrar estilos

  • En el panel de tareas Administrar estilos, haga clic en Opciones y haga lo siguiente:

    Elemento

    Acción

    Mostrar todos los estilos

    Muestra todos los estilos contenidos en la CSS externa, interna y en línea de la página web actual.

    Mostrar estilos utilizados en la página actual

    Muestra sólo los estilos que se usan en la página web actual.

    Mostrar estilos utilizados en la selección

    Muestra sólo los estilos que se usan en la selección actual de la página.

Para mostrar una vista previa de un estilo seleccionado en el panel de tareas Administrar estilos

  • En el panel de tareas Administrar estilos, haga clic en Opciones y seleccione Mostrar vista previa del estilo seleccionado.

Vea también

Conceptos

Panel de tareas Aplicar estilos

Panel de tareas Propiedades de CSS

Introducción a las herramientas de las hojas de estilos en cascada

Estilos