panel Administrar estilos
Puede usar el panel Administrar estilos para 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 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 Administrar estilos muestra todos los estilos que están definidos en las CSS externas e internas de la página, pero no en las CSS en línea. Puede configurar el panel 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.
.gif "tip note") Sugerencia: |
|---|
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 Administrar estilos. |
Panel Administrar estilos
.png "Cc295470.c7cb514c-3f8d-46e0-a624-8c82af568ddf(es-es,Expression.40).png")
|
Archivo de CSS externa vinculado desde la página web actual. |
|
Una lista de los selectores de clase, elemento e identificador de los archivos de CSS internas y de CSS externas importadas, tal y como se definen en Página actual. |
|
Archivo de CSS externa importada en la página web actual. |
|
Estilo definido en la CSS interna de la página web actual. |
|
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. |
.png "Cc295470.edef891a-6b74-4192-8f7f-5079614b9112(es-es,Expression.40).png")
.png "Cc295470.957413f8-28e0-4dc7-a144-0598679350b9(es-es,Expression.40).png")
.png "Cc295470.13f14333-cc5f-457a-863b-ccd449500941(es-es,Expression.40).png")
.png "Cc295470.0a66dad8-587c-4ccb-86ee-5e9cd1ef8c68(es-es,Expression.40).png")
.png "Cc295470.9c26150c-cd15-44bb-bf69-ff72093d3d71(es-es,Expression.40).png")
Los iconos que aparecen junto a cada estilo en el panel Administrar estilos identifican el tipo de estilo y si éste se usa en la página web actual.
Iconos del panel Administrar estilos
| Iconos | Descripción |
|---|---|
.png "Cc295470.d2d37440-9664-4050-a58e-7fee8ea63242(es-es,Expression.40).png") |
Un punto rojo aparece junto a los selectores de Id. |
.png "Cc295470.2374f498-4295-4fe3-be55-7d154c89142a(es-es,Expression.40).png") |
Un punto verde aparece junto a los selectores de clases. |
.png "Cc295470.c983e0ca-2bc5-409e-b8fc-834785293639(es-es,Expression.40).png") |
Un punto azul aparece junto a los selectores de elementos. |
.png "Cc295470.e67de9f1-9a1a-46ce-8629-06280b678e1b(es-es,Expression.40).png") |
Se muestra un círculo alrededor de un punto coloreado para marcar los estilos que se usan en la página web actual. |
.png "Cc295470.040e2329-921d-46af-9cba-9f280c15d703(es-es,Expression.40).png") |
Se muestra una arroba junto a las hojas de estilos en cascada externas importadas. |
Para mover un estilo
En el panel Administrar estilos, haga clic en Opciones y seleccione Clasificar por orden.
Realice una de las acciones 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 Administrar estilos se establece en Clasificar por elemento o en Clasificar por tipo en el panel 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 Administrar estilos
En el panel Administrar estilos, haga clic en Opciones y realice las acciones siguientes:
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 Administrar estilos, haga clic en Opciones y seleccione Separar selectores agrupados.
Para mostrar u ocultar los estilos en el panel Administrar estilos
En el panel Administrar estilos, haga clic en Opciones y realice las acciones siguientes:
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 Administrar estilos
- En el panel Administrar estilos, haga clic en Opciones y seleccione Mostrar vista previa del estilo seleccionado.
Vea también
Referencia
panel Aplicar estilos
Panel Propiedades de CSS
Conceptos
Usar herramientas de hojas de estilos en cascada
Referencia de hojas de estilos en cascada
Trabajar con estilos