Partilhar via

Como: Usar estilos aplicar e gerenciar estilos Windows

  • Artigo

As janelas Aplicar Estilos e Gerenciar Estilos permitem que você aplique, modifique, renomeie e exclua os estilos.Você também pode anexar ou desanexar folhas de estilos em cascata (CSS) externas, selecione todas as instâncias de um estilo e localize o código que contém um conjunto de regras de estilo.

Cada janela possui usos específicos.Use a janela Aplicar Estilos para aplicar um estilo único ou vários estilos a um elemento de página.A janela Aplicar Estilos exibe cada estilo de acordo com as regras do estilo.Portanto, você pode identificar rapidamente o estilo com que você deseja trabalhar apenas olhando para a aparência do estilo na janela.

Use a janela Gerenciar Estilos para alterar o local ou ordem dos estilos.Você pode mover os estilos de uma CSS externa para uma CSS interna e vice-versa, ou você pode mover o local de um estilo em uma folha de estilos ou de um bloco de estilos.

Ambas as ferramentas usam ícones para indicar como o estilo for definido.A tabela a seguir mostra e descreve cada ícone.

Ícone

Descrição

Um ponto vermelho indica um estilo baseado em identificação.

Um ponto verde indica um estilo baseado em classe.

Um ponto azul indica um estilo baseado em elemento.

Um ponto amarelo indica um estilo embutido.

Um círculo em torno de um ponto indica que o estilo é usado na página atual.

Um sinal de arroba (@) indica um folha de estilo em cascata externa importada.

Trabalhando com a Janela Aplicar Estilos

A janela Aplicar Estilos lista todos as folhas de estilo CSS que são definidas para uma página.Isso inclui regras de estilo que são definidas em planilhas externas de estilo, como estilos embutidos e estilos definidos na página.Regras de estilo baseadas em classe e baseadas em identificação aparecem sob o nome do arquivo .css externo que contém o estilo.Se a regra de estilo é definida na página, ela será exibida em Página Atual.Regras de estilo baseadas em elementos são organizadas da mesma maneira, mas elas aparecem em um cabeçalho separado, entitulado Seletores Contextuais.

Você pode definir a janela para listar todas as regras de estilo.Como alternativa, você pode restringir a lista para somente regras de estilo que são usadas na página da Web atual ou na seleção atual da página.Independentemente de quais dessas opções você selecionar, regras de estilo baseadas em elementos e regras de estilo embutidas aparecem na janela somente sob duas condições.Uma condição é quando você mantém o ponteiro do mouse sobre elementos de página que usam o estilo, e a outra condição é quando você seleciona o conteúdo que usa o estilo.

Você também pode classificar a lista de estilos que aparecem na janela Aplicar Estilos.

Se um determinado estilo for difícil ver contra o fundo da janela, você pode selecionar uma cor para aparecer na janela atrás de estilos que não contêm uma propriedade de plano de fundo.

Observação:

Para exibir temporariamente todas as regras de um estilo em uma janela pop-up, mantenha a ponteiro do mouse sobre o estilo na janela Aplicar Estilos.

Uma Visão Geral da Janela Aplicar Estilos

A interface do usuário da janela Aplicar Estilos possui os seguintes recursos:

  • Novo Estilo, que fornece acesso para a caixa de diálogo Estilos.

  • Anexar Folha de Estilos, que permite que você selecione uma folha de estilos para anexar à página atual.

  • Limpar Estilos, que remove todas as regras de estilo baseadas em classe e embutidas da seleção atual.

  • Página Atual, que lista as regras de estilo baseadas em classe e baseadas em identificação na página atual e os arquivos CSS externos importados.

  • Um arquivo CSS externo, indicado pela arroba (@), que mostra todas as regras de estilo que são importadas para a página da Web atual.

  • Um arquivo CSS externo, que está vinculado a partir de página da Web atual e é exibido como uma seção separada.

  • Uma borda retangular sólida ao redor de um estilo, que indica que ele está sendo usado pela seleção atual.

  • Seletores Contextuais, que lista regras de estilo baseadas em elementos que estão sendo usadas pela seleção atual.

  • Estilo Embutido, que mostra as regras de estilo que são aplicadas ao elemento embutido selecionado.

  • Um menu de atalho para cada regra de estilo, que permite que você execute várias tarefas relativas a estilos.

Usando a Janela Aplicar Estilos

A janela Aplicar Estilos permite que você aplique rapidamente um estilo único ou vários estilos a um elemento de página.

Para aplicar estilos a um elemento de página usando a janela Aplicar Estilos

  1. Para exibir a janela Aplicar Estilos, no menu Formatar, clique em Folhas de Estilo e, em seguida, clique em Aplicar Estilos.

  2. Em um página da Web, no modo de exibição Design ou Fonte, selecione o elemento a que você deseja aplicar um estilo, e, em seguida, siga um dos procedimentos a seguir na janela Aplicar Estilos :

    • Para aplicar uma única regra de estilo existente, clique no estilo de classe ou identificação que você deseja aplicar.

    • Para aplicar várias regras de estilo existentes, pressione a tecla CTRL enquanto clica em cada estilo que você deseja aplicar.

Você pode alterar a ordem dos estilos, alterar quais estilos aparecerem e personalizar a janela para mostrar o que você deseja.

Para classificar os estilos usando a janela Aplicar Estilos

  • Na janela Aplicar Estilos, clique em Opções e siga um destes procedimentos:

    • Para listar as regras de estilo na ordem em que aparecem na folha de estilos, clique em Categorizar por Ordem.

    • Para listar os estilos em ordem alfabética e pelo tipo do estilo (baseado em classe ou baseado em identificação), clique em Categorizar por Tipo.

Você pode mostrar ou ocultar regras estilos na janela Aplicar Estilos.Estilos baseados em elementos e regras de estilo embutidas aparecem na janela Aplicar Estilos somente enquanto você um mantém o ponteiro do mouse sobre conteúdo que usa o estilo, ou quando você seleciona o conteúdo que usa o estilo.

Para mostrar ou ocultar os estilos, usando a janela Aplicar Estilos.

  • Na janela Aplicar Estilos, clique em Opções e siga um destes procedimentos:

    • Para listar todas as regras de estilo que estão contidas nas folhas de estilo externa, interna e embutida da página da Web atual, clique em Exibir Todos os Estilos.

    • Para listar apenas as regras de estilo que são usadas na página da Web atual, clique em Exibir Estilos Usados na Página Atual.

    • Para listar apenas as regras de estilo que são usadas pela seleção atual na página da Web, clique em Exibir Estilos Usados na Seleção.

Se uma regra de estilo não tiver um cor do plano de fundo, você pode aplicar uma cor para facilitar a leitura do nome do estilo na janela Aplicar Estilos .Se o estilo tiver uma regra de estilo de plano de fundo, o plano de fundo é mostrado com o estilo.

Para exibir um cor de plano de fundo na janela Aplicar Estilo

  1. Na janela Aplicar Estilos, clique em Opções e, em seguida, clique em Visualizar Cor de Plano de Fundo.

  2. Na caixa de diálogo Mais Cores, selecione uma cor e, em seguida, clique em OK.

Trabalhando com a Janela Gerenciar Estilos

A janela Gerenciar Estilos lista todos as regras de estilo que são definidas na folha de estilo em cascata (CSS) externa da página.Ela também lista regras de estilo que são definidas na página, mas não como estilos embutidos.Você pode usar a janela Gerenciar Estilos para mover os estilos de uma folha de estilos externa para o elemento style na página e vice-versa.Você também pode usar a janela para mover o local de um estilo dentro do conjunto de regras de estilo de uma folha de estilo.

Você pode definir a janela para listar todas as regras de estilo ou restringi-la para listar somente regras de estilo que são usadas na página da Web atual ou na seleção atual da página.Todas as regras de estilo baseadas em classe, em elementos e em identificação aparecem sob o nome do arquivo .css externo que contém a regra de estilo.Se a regra de estilo está na página atual, ela será exibida em Página Atual.

Observação:

Para exibir temporariamente todas as regras de um estilo em uma janela pop-up, mantenha a ponteiro do mouse sobre o estilo na janela Aplicar Estilos.

Uma Visão de Geral da janela Gerenciar Estilos

A interface do usuário da janela Gerenciar Estilos possui os seguintes recursos:

  • Novo Estilo, que fornece acesso para a caixa de diálogo Estilos.

  • Anexar Folha de Estilos, que permite que você selecione uma folha de estilos para anexar à página atual.

  • Página Atual, que lista as regras de estilo baseadas em classe e baseadas em identificação na página atual e em quaisquer arquivos CSS externos importados.

  • Uma guia para qualquer arquivo .css externo que está vinculado a partir de página da Web atual.

  • Seletor de agrupamento padrão, que mostra os seletores de qualquer estilo que contém seletores múltiplos em um grupo.Você pode listar os seletores separadamente, clicando em Opções e, em seguida, clicando em Separar Seletores Agrupados.

Para mostrar uma visualização de um estilo selecionado na janela Gerenciar Estilos, clique em Opções e, em seguida, clique em Exibir Visualização de Estilo Selecionado.

Usando a janela Gerenciar Estilos

Você pode alterar a ordem dos estilos e personalizar a janela para mostrar o que você deseja.Se você mover um estilo para cima ou para baixo na lista, isso também move o estilo na folha de estilos.Essa alteração pode afetar como propriedades de estilo se acumulam.Por exemplo, se um atributo de propriedade estiver definido em dois estilos diferentes, o último estilo terá precedência.

Observação:

Quando a janela Gerenciar Estilos é definida como Categorizar por Elemento ou Categorizar por Tipo, você não pode mover um estilo para um ponto específico na lista de estilos.Em ambos os casos, você só pode mover um estilo de uma folhas de estilos externa para outra folhas de estilos externas ou para a página ou vice-versa arrastando o estilo para o nome do arquivo de folhas de estilo externas ou para Página Atual.

Para mover um estilo usando a janela Gerenciar Estilos

  1. Para exibir janela Gerenciar Estilos, no menu Formatar, clique em Folhas de Estilo e clique em Gerenciar Estilos.

  2. Na janela Gerenciar Estilos, clique em Opções, clique em Categorizar por Ordem e, em seguida, faça o seguinte:

    • Para mover o local de um estilo na folha de estilos, arraste o estilo para cima ou para baixo na lista.Por exemplo, você pode mover os estilos que você usa com mais frequência para que eles apareçam convenientemente adjacentes entre si.

    • Para mover um estilo a partir de uma página para uma folha de estilos externa conectada à página, arraste o estilo da Página Atual para o nome da folha de estilos externa, ou para um ponto específico na lista de estilos da folha de estilos externa.

    • Para mover um estilo a partir de uma folha de estilos externa para uma página, arraste o estilo a partir do nome da folha de estilos externa para a Página Atual, ou para um ponto específico na lista de estilos da Página Atual.Se a Página Atual não for exibida, adicione um elemento de style dentro do elemento head da página da Web.

    • Para mover um estilo de uma folha de estilos externa para um folha de estilo externa diferente, arraste o estilo para o o nome da folha de estilos externa desejado ou para um ponto específico na lista de estilos da folha de estilos externo.

Embora a janela Gerenciar Estilos seja melhor usada para gerenciar os estilos, você pode também usá-la para aplicar um estilo a um elemento de página.

Para aplicar um estilo usando a janela Gerenciar Estilos

  1. Em um página da Web, no modo de exibição Design ou Fonte, selecione o elemento a que você deseja aplicar um estilo.

  2. Clique com o botão direito do mouse no estilo de classe ou identificação que você deseja aplicar e, no menu de atalho, clique em Aplicar Estilo.

Você também pode classificar estilos usando opções sob o botão Opções.

Para classificar estilos usando a janela Gerenciar Estilos

  • Na janela Gerenciar Estilos, clique em Opções e siga um destes procedimentos:

    • Clique em Categorizar por Ordem para listar estilos de acordo com a ordem em que eles aparecem na folha de estilos.

    • Clique em Categorizar por Elemento para listar estilos sob o elemento HTML ao qual cada estilo é aplicado.

    • Clique em Categorizar por Tipo para listar estilos em ordem alfabética e de acordo com o tipo de estilo.

Você pode separar os estilos que são agrupados para facilitar trabalhar com eles.

Para listar separadamente cada seletor de estilos que contém múltiplos seletores

  • Na janela Gerenciar Estilos, clique em Opções e,em seguida, clique em Separar Seletores Agrupados.

Você também pode especificar quais estilos mostrar na janela Gerenciar Estilos.

Para mostrar ou ocultar estilos na janela Gerenciar Estilos

  • Na janela Gerenciar Estilos, clique em Opções, clique em Categorizar por Ordem e, em seguida, faça o seguinte:

    • Clique em Exibir Todos os Estilos para listar todas as regras de estilo que estão contidas nas folhas de estilos externas, que estão na página e regras embutidas na página atual.

    • Clique em Exibir Estilos Usados na Página Atual para listar apenas as regras de estilo que são usadas na página atual.

    • Clique em Exibir Estilos Usados na Seleção para listar apenas os estilos que são usadas pela seleção atual na página.

Consulte também

Conceitos

Como: Usar a janela Propriedades CSS

Como: Use o estilo Direct aplicativo barra de ferramentas