panel Aplicar estilos
Puede usar el panel Aplicar estilos para aplicar, quitar, modificar estilos; cambiarles el nombre; eliminar estilos; 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. El panel Aplicar estilos muestra cada estilo de acuerdo con las reglas del mismo, para que pueda identificar rápidamente el estilo con el que desea trabajar simplemente por su apariencia visual.
Cuando se abre una página web, el panel Aplicar estilos enumera los estilos que están definidos en todas las hojas de estilos en cascada (CSS) de la página, incluidas las CSS externas, internas y en línea. Los selectores basados en clases e Ids. aparecen debajo del nombre del archivo .css externo que contiene el estilo o en Página actual, si el estilo está en una CSS interna. Los selectores de elementos están organizados del mismo modo, pero aparecen bajo un encabezado independiente denominado Selectores contextuales debajo de la lista de selectores de clase y de Ids. 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. Independientemente de las opciones que haya seleccionado, los selectores de elementos y en línea sólo aparecen en el panel cuando se coloca el cursor en el contenido que usa ese estilo o se selecciona.
Puede ordenar la lista de estilos que aparecen en el panel Aplicar estilos y también restringir la lista para que sólo muestre los estilos que se usan en la página web actual o en la selección actual. Si un estilo concreto es difícil de ver con el fondo blanco del panel, puede seleccionar un color para que aparezca en el panel detrás de los estilos que no contengan una propiedad de fondo.
.gif "tip note") Sugerencia: |
|---|
Para mostrar temporalmente todas las reglas de un estilo en una ventana flotante al lado del puntero, señale el estilo en el panel Aplicar estilos. |
Panel Aplicar estilos
.png "Cc295403.7d746eac-1e02-4837-984d-904cf410e301(es-es,Expression.40).png")
|
Borrar estilos quita todos los selectores de clases y en línea de la selección actual. |
|
Archivo de CSS externa vinculado desde la página web actual. |
|
Archivo de CSS externa importada en la página web actual. |
|
Página actual muestra los selectores de clases e Ids. de los archivos de CSS internas y de CSS externas importadas. |
|
Estilo definido en la CSS interna de la página web actual. |
|
Se muestra un borde rectangular sólido alrededor de los estilos que se usan en la selección actual. |
|
Selectores de clase e Id. contenidos en el archivo CSS externo vinculado (events.css). |
|
Cada estilo tiene un menú desplegable que permite realizar muchas tareas relacionadas con el estilo. Señale un estilo y haga clic en la flecha o haga clic con el botón secundario en un estilo. |
.png "Cc295403.edef891a-6b74-4192-8f7f-5079614b9112(es-es,Expression.40).png")
.png "Cc295403.957413f8-28e0-4dc7-a144-0598679350b9(es-es,Expression.40).png")
.png "Cc295403.13f14333-cc5f-457a-863b-ccd449500941(es-es,Expression.40).png")
.png "Cc295403.0a66dad8-587c-4ccb-86ee-5e9cd1ef8c68(es-es,Expression.40).png")
.png "Cc295403.9c26150c-cd15-44bb-bf69-ff72093d3d71(es-es,Expression.40).png")
.png "Cc295403.8f73ae30-de6d-49a5-afe3-12a0a84d80a2(es-es,Expression.40).png")
.png "Cc295403.3ca58ea1-12d2-4379-9b89-e415efd03ca4(es-es,Expression.40).png")
.png "Cc295403.0ca213c6-20bb-4cd9-9acd-ebc60a53c6bf(es-es,Expression.40).png")
Los iconos que aparecen junto a cada estilo en el panel Aplicar estilos identifican el tipo de estilo y si éste se usa en la página web actual.
Iconos del panel Aplicar estilos
| Iconos | Descripción |
|---|---|
.png "Cc295403.d2d37440-9664-4050-a58e-7fee8ea63242(es-es,Expression.40).png") |
Un punto rojo aparece junto a los selectores de Id. |
.png "Cc295403.2374f498-4295-4fe3-be55-7d154c89142a(es-es,Expression.40).png") |
Un punto verde aparece junto a los selectores de clases. |
.png "Cc295403.c983e0ca-2bc5-409e-b8fc-834785293639(es-es,Expression.40).png") |
Un punto azul aparece junto a los selectores de elementos. |
.png "Cc295403.376aebaa-ab0c-430f-a82d-6f13d6125571(es-es,Expression.40).png") |
Se muestra un punto amarillo junto a los estilos en línea. |
.png "Cc295403.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 "Cc295403.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 ordenar la lista de estilos en el panel Aplicar estilos
En el panel Aplicar estilos, haga clic en Opciones y realice una las acciones siguientes:
Para mostrar los estilos de acuerdo con el orden en que aparecen en la CSS, seleccione Clasificar por orden.
Para mostrar los estilos alfabéticamente y de acuerdo con el tipo de estilo (selectores de clases o de Id.), seleccione Clasificar por tipo.
Para mostrar u ocultar los estilos en el panel Aplicar estilos
En el panel Aplicar estilos, haga clic en Opciones y realice una las acciones siguientes:
Para mostrar todos los estilos contenidos en la CSS externa, interna y en línea de la página web actual, seleccione Mostrar todos los estilos.
Para mostrar sólo los estilos que se usan en la página web actual, seleccione Mostrar estilos utilizados en la página actual.
Para mostrar sólo los estilos que se usan en la selección actual de la página, seleccione Mostrar estilos utilizados en la selección.
[!NOTA]
Los selectores de elementos y los estilos en línea sólo aparecen en el panel Aplicar estilos cuando se coloca el cursor en contenido que usa el estilo o se selecciona contenido que usa el estilo.
Para mostrar un fondo en color en el panel Aplicar estilos detrás de los estilos que no contienen una regla de propiedad de fondo
En el panel Aplicar estilos, haga clic en Opciones y seleccione Vista previa del color de fondo.
En el cuadro de diálogo Más colores, seleccione un color y, a continuación, haga clic en Aceptar.
Vea también
Tareas
Referencia
panel Administrar estilos
Panel Propiedades de CSS
Conceptos
Usar herramientas de hojas de estilos en cascada
Referencia de hojas de estilos en cascada
Trabajar con estilos
Copyright © 2011 de Microsoft Corporation. Reservados todos los derechos.