Compartilhar via


Como: Use o estilo Direct aplicativo barra de ferramentas

A caixa de ferramentas Aplicação Direta de Estilo permite que você crie e modifique estilos.Você pode usar a barra de ferramentas Aplicação Direta de Estilo com outras ferramentas CSS em Visual Studio.Isso inclui a janela Propriedades da CSS, a janela Gerenciar Estilos e a janela Aplicar Estilos.

Se você aplicar estilo à um elemento de página que ainda não tenha um regra de estilos CSS, você pode usar a barra de ferramentas Aplicação Direta de Estilopara gerar e aplicar um novo estilo.Por exemplo, você pode selecionar um parágrafo e aplicar cor ao texto usando a barra de ferramentas Aplicação Direta de Estilo.Nesse caso, Visual Studio cria uma nova regra de estilos CSS e a aplica ao texto.Se você formatar outra propriedade do mesmo parágrafo, como o a família de fontes do parágrafo, Visual Studio adicionará uma declaração de propriedade nova à regra de estilo geradas.

Trabalhando com a Barra de Ferramentas de Aplicação Direta de Estilo

Você pode usar a barra de ferramentas Aplicação Direta de Estilo para gerar e modificar estilos no modo Automático ou Manual.Se você for novo para criação de páginas CSS, use o modo Automático para que Visual Studio gere automaticamente regras de estilo.Se você for um autor de CSS experiente, você pode usar modo Manual, que lhe dá melhor controle sobre como uma regra de estilo é escrita.

No modo Manual, você pode adicionar uma nova declaração de propriedade para um estilo diferente.Isso inclui um novo estilo, um estilo gerado diferente ou um estilo que você criou.Quando você usa o modo manual, Visual Studio adicionará elementos a uma página da Web se necessário, para atribuir corretamente o estilo.

Uma Visão Geral da Barra de Ferramentas de Aplicação Direta de Estilos

A tabela a seguir lista os elementos da barra de ferramentas Aplicação Direta de Estilos.

Observação:

   Quando você estiver trabalhando em modo Automático, a lista suspensa Regra de Destino é desativada e o botão Reusar Estilo Existente também.

Elemento

Descrição

A lista suspensa Aplicação de Estilo permite que você defina o modo no qual estilos são gerados e modificados.Se você é novato a criação de páginas CSS, utilize o modo Automático.Se você for um autor CSS experiente, você pode usar o modo Manual para simplificar o processo de design.

A lista suspensa Regra de Destino afeta novas propriedades CSS.Você pode usá-lo para exibir o nome do estilo a ser modificada ou o tipo de estilo que é criado para o elemento atual.Por padrão, o estilo que tem a precedência mais alta é direcionado.Se nenhum estilo existir, Nova Classe Automática torna-se o padrão.

A lista suspensa Regra de Destino fornece as seguintes opções.O efeito de cada opção depende da seleção atual.

  • Estilo em linha Revise uma declaração de propriedade existentes ou adicionar uma nova declaração de propriedade a um estilo em linha existente.

  • Novo Estilo em linha Adicione a declaração de propriedade para um estilo embutido recém-gerado e aplicar o estilo para o marca aberta atualmente.Esta opção estará disponível somente se ainda não existir um estilo embutido para o elemento de página atual.

  • Nova Identificação Automática "#id" Cria um novo estilo para uma identificação aplicada que não tenha um conjunto de regras.Essa opção é útil se você tiver criado as identificações para elementos de página que não possuem estilos, e agora você está aplicando estilos para esses elementos.

  • Nova Classe Automática Crie um novo estilo de uma classe aplicada que ainda não tiver uma regra.

  • Nova classe Automática ".Rule" Adicione a declaração de propriedade à um estilo baseado em classe gerada automaticamente, em seguida, aplica o estilo para a marca de abertura atual.Essa opção é útil se você tiver criado classes para elementos de página que não possuem estilos, e agora você está aplicando estilos para esses elementos.

  • Aplicar Novo Estilo Cria um novo estilo usando a caixa de diálogo Novo Estilo e, opcionalmente, aplica o estilo à seleção atual.

TheReuse Existing Style button affects changes that have been made to existing styles and properties.Se o estilo selecionado não contém uma declaração para a propriedade formatar, mas outro estilo na seleção atual contiver, Reutilizar Estilo Existente determina qual estilo é modificado.Quando Reutilizar Estilo Existente é selecionado, a propriedade que já contém uma declaração é modificada.Quando Reutilizar Estilo Existente não é selecionada, a regra de destino é modificada.

TheShow Overlay button specifies whether an overlay is shown on elements that the selected rule applies to.Quando esta opção for selecionada, o designer exibe uma caixa pontilhada ao redor do conteúdo que usa o estilo que está selecionado na lista suspensa Regra de Destino.A sobreposição permite que você veja quais elementos são afetados pelas alterações que fizer, usando a barra de ferramentas Aplicação Direta de Estilos.Isso é especialmente útil quando você estiver aplicando várias regras, pois ele torna mais fácil o acesso à uma regra específica a ser modificada.

Usando a Barra de Ferramentas Aplicação Direta de Estilos com Controles ASP.NET

Você pode usar a barra de ferramentas Aplicação Direta de Estilos para alterar os estilos nos controles de servidor ASP.NET que suportam essa forma de estilo.Você pode usar a barra de ferramentas para aplicar estilos a controles de servidor que definem propriedades para estilos embutidos e para o atributo CssClass, e que herda da classe WebControl.Controles de usuário não tem essas propriedades definidas.Portanto, você não pode usar a barra de ferramentas com controles de usuário.

Estilo baseado em identificação não devem ser usados com os controles de servidor.O nome que é atribuído na marcação ou no código do servidor não é necessariamente a identificação do elemento HTML que é processado.Portanto, as identificações não são uma maneira confiável de aplicar estilos a controles de servidor.

Usando a Barra de Ferramentas de Aplicação Direta de Estilo

Você pode definir o modo do aplicativo na barra de ferramentas Aplicação Direta de Estilo para determinar como regras de estilo são criadas.

Para definir o modo do aplicativo na barra de ferramentas Aplicação Direta de Estilo

  • Na barra de ferramentas Aplicação Direta de Estilo, clique na lista suspensa Aplicação de Estilo e em seguida, clique em Automático ou Manual.

A barra de ferramentas Aplicação Direta de Estilo é uma maneira rápida para criar novos estilos ou modificar regras de estilo existente.

Para criar novos estilos usando a barra de ferramentas Aplicação Direta de Estilo

  1. No modo de exibição Design ou Source, alterne para modo de aplicação de estilo Manual.

  2. Selecione o conteúdo que você deseja formatar.

  3. Na barra de ferramentas Aplicação Direta de Estilo, clique na lista suspensa Regras de Destino, e em seguida, siga um destes procedimentos:

    • Para gerar um novo estilo que é baseado na formatação aplicada, e para aplicar o estilo para o conteúdo atual, selecione Novo Estilo Embutido,Nova Identificação Automática, ou Nova Classe Automática e, em seguida, o formate o conteúdo.

    • Para criar um novo estilo usando a caixa de dialogo Novo Estilo e opcionalmente aplicar o estilo da seleção atual selecione Aplicar Novo Estilo.

Você pode modificar uma regra de estilo existente que é aplicada a uma seleção, ou você pode criar uma nova declaração de propriedade para uma regra de estilo.

Para modificar os estilos existentes usando a barra de ferramentas Aplicação Direta de Estilo

  1. No modo de exibição Design ou Source, alterne para modo de aplicação de estilo Manual.

  2. Selecione o conteúdo que você deseja formatar.

  3. Na barra de ferramentas Aplicação Direta de Estilo, na lista Regra de Destino, clique no estilo que você deseja.

  4. Se o estilo selecionado não contém uma declaração para a propriedade formatar, mas outro estilo na seleção atual contiver, selecione Reutilizar Estilo Existente para modificar o estilo existente.

  5. Formate o conteúdo.

Consulte também

Conceitos

Como: Usar estilos aplicar e gerenciar estilos Windows

Como: Usar a janela Propriedades CSS