Referência de recursos do CSS

Descubra novos fluxos de trabalho na referência abrangente a seguir dos recursos do Microsoft Edge DevTools relacionados à exibição e alteração do CSS.

Para saber o básico, confira Introdução à exibição e alteração do CSS.

Selecionar um elemento

A ferramenta Elementos no DevTools permite exibir ou alterar o CSS de um elemento por vez. O elemento selecionado é realçado na Árvore DOM. Os estilos do elemento são mostrados no painel Estilos . Para um tutorial, confira Exibir o CSS para um elemento.

Na figura a seguir, o h1 elemento que é realçado na Árvore DOM é o elemento selecionado. À direita, os estilos do elemento são mostrados no painel Estilos . À esquerda, o elemento é realçado no modo de exibição, mas apenas porque o mouse está atualmente pairando sobre ele na Árvore DOM:

Há várias maneiras de selecionar um elemento:

• Em uma página da Web renderizada, clique com o botão direito do mouse em um elemento de página e clique em Inspecionar.

• Em DevTools, clique em Selecionar um elemento () ou pressione Ctrl+Shift+C (Windows, Linux) ou Command+Shift+C (macOS) e clique no elemento no modo de exibição.

• Em DevTools, clique no elemento na Árvore DOM.

• Em DevTools, execute uma consulta como document.querySelector('p') no Console, clique com o botão direito do mouse no resultado e selecione Revelar no painel Elementos.

Exibir a planilha de estilos externa em que uma regra é definida

No painel Estilos , clique no link ao lado de uma regra do CSS para abrir a planilha de estilos externa que define a regra. A planilha de estilos é aberta no painel Editor da ferramenta Fontes .

Se a planilha de estilos for minificada, clique no botão Formatar (), na parte inferior do painel Editor . Para obter mais informações, consulte Reformat um arquivo JavaScript minificado com uma impressão bonita.

Na figura a seguir, depois de clicar https://video2.skills-academy.com/_themes/docs.theme/master/en-us/_themes/styles/b66bc881.site-ltr.css:2 , você será levado para a linha 2 de https://video2.skills-academy.com/_themes/docs.theme/master/_themes/styles/b66bc881.site-ltr.css, em que a regra CSS .content h1:first-of-type é definida.

Exibir apenas o CSS que é realmente aplicado a um elemento

O painel Estilos mostra todas as regras que se aplicam a um elemento, incluindo declarações que foram substituídas. Quando você não estiver interessado em declarações substituídas, use o painel Computado para exibir apenas o CSS que está sendo aplicado a um elemento.

1. Selecione um elemento.

2. Vá para o painel Computado na ferramenta Elementos .

   Em uma ampla janela DevTools, o painel computado não existe. O conteúdo do painel Computado é mostrado no painel Estilos .

   As propriedades herdadas são opacas.

3. Para exibir todos os valores herdados, selecione a caixa de seleção Mostrar Tudo .

   Na figura a seguir, o painel Computado mostra as propriedades CSS sendo aplicadas ao elemento selecionado h1 no momento:

   

Exibir propriedades do CSS em ordem alfabética

Use o painel Computado . Consulte Exibir apenas o CSS que é realmente aplicado a um elemento.

Exibir propriedades CSS herdadas

Verifique a caixa de seleção Mostrar Tudo no painel Computado . Consulte Exibir apenas o CSS que é realmente aplicado a um elemento.

Exibir um modelo de caixa de elemento

Para exibir o modelo de caixa de um elemento, acesse o painel Estilos . Se a janela DevTools for estreita, o diagrama do Modelo de Caixa estará na parte inferior do painel.

Para alterar um valor, clique duas vezes nele.

Na figura a seguir, o diagrama Modelo de Caixa no painel Estilos mostra o modelo de caixa para o elemento selecionado h1 no momento.

Pesquisar e filtrar o CSS de um elemento

Use a caixa de texto Filtrar nos painéis Estilos e Computação para pesquisar propriedades ou valores específicos do CSS.

Para também pesquisar propriedades herdadas no painel Computado, marcar caixa de seleção Mostrar Tudo.

Na figura a seguir, o painel Estilos é filtrado para mostrar apenas regras que incluem a consulta de pesquisa color.

Na figura a seguir, o painel Computado é filtrado para mostrar apenas declarações que incluem a consulta de pesquisa 100%.

Alternar uma pseudoclasse

Para alternar uma pseudoclasse, como :active, :focus, :hoverou :visited:

1. Selecione um elemento.

2. Na ferramenta Elementos , acesse o painel Estilos .

3. Clique em :hov.

4. Selecione a pseudoclasse que você deseja habilitar.

   A figura a seguir mostra a agregação da :hover pseudoclasse. No modo de exibição, a background-color: cornflowerblue declaração é aplicada ao elemento, mesmo que o elemento não esteja realmente sendo pairado.

   

Para um tutorial interativo, consulte Adicionar um pseudo-estado a uma classe.

Exibir uma página no modo de impressão

Para exibir uma página no modo de impressão:

1. Abra o Menu de Comando.

2. Comece a digitar renderinge selecione Mostrar Renderização.

3. Clique na lista suspensa Emular Mídia CSS e selecione imprimir.

Exibir CSS usado e não utilizado com a ferramenta Cobertura

A ferramenta Cobertura mostra o que uma página do CSS realmente usa.

1. Abra o Menu de Comando pressionando Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS), enquanto DevTools tem foco.

2. Comece a digitar coveragee selecione Mostrar Cobertura:

   

   A ferramenta Cobertura é exibida:

   

3. Clique em Iniciar a cobertura de instrumentação e atualize a página (). A página é atualizada e a ferramenta Coverage fornece uma visão geral de quanto CSS (e JavaScript) é usado de cada arquivo que o navegador carrega. O verde representa o CSS usado. O vermelho representa o CSS não utilizado.

   Uma visão geral da quantidade de CSS (e JavaScript) usada e não utilizada:

   

4. Para exibir uma divisão linha por linha do que o CSS é usado, clique em um arquivo CSS.

   Na figura a seguir, as linhas 145 a 147 e 149 a 151 não b66bc881.site-ltr.css são utilizadas, enquanto as linhas 163 a 166 são usadas:

   

Forçar o modo de visualização de impressão

Consulte Forçar DevTools no modo Visualização de Impressão.

Duas maneiras de adicionar uma declaração CSS a um elemento

A ordem das declarações afeta a forma como um elemento é estilizado. Você pode adicionar declarações adicionando uma declaração embutida ou adicionando uma declaração a uma regra de estilo. Essas duas abordagens são descritas nas seções a seguir.

Adicionar uma declaração CSS embutida a um elemento

Adicionar uma declaração embutida é equivalente a adicionar um style atributo ao HTML de um elemento. Para a maioria dos cenários, você provavelmente deseja usar declarações embutidas.

Declarações embutidas têm maior especificidade do que declarações externas, portanto, o uso de declarações embutidas garante que as alterações entrem em vigor em seu elemento específico esperado. Para obter mais informações sobre a especificidade, consulte Tipos de Seletor.

Para adicionar uma declaração embutida:

1. Selecione um elemento.

2. No painel Estilos , clique entre os colchetes da seção element.style . O cursor se concentra, permitindo que você insira texto.

3. Insira um nome de propriedade e pressione Enter.

4. Insira um valor válido para essa propriedade e pressione Enter. Na Árvore do DOM, um style atributo foi adicionado ao elemento.

Como alternativa, insira o valor no campo de propriedade e DevTools sugerirá uma lista de propriedades correspondentes: pares de valor a serem selecionados. Por exemplo, se você inserir bold no campo de propriedade, DevTools sugerirá e font-weight: bolder como as regras possíveisfont-weight: bold. Pressione Enter para aplicar a regra.

Na figura a seguir, as margin-top propriedades e background-color foram aplicadas ao elemento selecionado. Na Árvore do DOM, as declarações são refletidas no atributo do style elemento.

Adicionar uma declaração CSS a uma regra de estilo existente

Se você estiver depurando os estilos de um elemento e precisar testar especificamente o que acontece quando uma declaração é definida em lugares diferentes, adicione uma declaração a uma regra de estilo existente.

Para adicionar uma declaração a uma regra de estilo existente:

1. Selecione um elemento.

2. No painel Estilos , clique entre os colchetes da regra de estilo à qual você deseja adicionar a declaração. O cursor se concentra, permitindo que você insira texto.

3. Insira um nome de propriedade e pressione Enter.

4. Insira um valor válido para essa propriedade e pressione Enter.

Alterar um nome ou valor de declaração

Para alterar o nome de uma declaração CSS, clique duas vezes no nome da declaração.

Para alterar o valor de uma declaração CSS, clique duas vezes no valor da declaração. A captura de tela a seguir mostra a seleção de um valor em uma lista:

Para alterar um valor numérico, digite o valor ou use as teclas de seta, de acordo com a próxima seção.

Incrementar valores de declaração numérica

Para alterar um valor numérico de uma declaração CSS, digite o valor ou use as teclas de seta para incrementar o valor por uma quantidade específica:

Atalho de teclado	Incrementos por
Seta Alt+Up (Windows, Linux) ou Opção+Seta para Cima (macOS)	0,1
Seta para cima	1 (ou 0,1, se o valor atual estiver entre -1 e 1)
Shift+Up Arrow	10
Shift+Page Up (Windows, Linux) ou Shift+Command+Up Arrow (macOS)	100

Para decrementar, pressione a tecla Seta para Baixo (ou Página Para Baixo) em vez da tecla Seta para Cima (ou Página Para Cima).

Adicionar uma classe a um elemento

Para adicionar uma classe a um elemento:

1. Selecione o elemento na Árvore DOM.

2. Clique em .cls.

3. Insira o nome da classe na caixa de texto Adicionar nova classe .

4. Pressione Enter.

   

Alternar uma classe

Para habilitar ou desabilitar uma classe em um elemento:

1. Selecione o elemento na Árvore DOM.

2. Abra o painel Classes de Elemento . Consulte Adicionar uma classe a um elemento. Abaixo das caixas de texto Adicionar Nova Classe estão todas as classes que estão sendo aplicadas a esse elemento.

3. Alterne a caixa de seleção ao lado da classe que você deseja habilitar ou desabilitar.

Adicionar uma regra de estilo

Para adicionar uma nova regra de estilo:

1. Selecione um elemento.

2. Clique em Nova Regra de Estilo (). O DevTools insere uma nova regra sob a regra element.style .

   Na figura a seguir, DevTools adiciona a h1.devsite-page-title regra de estilo depois de clicar em Nova Regra de Estilo.

   

Selecione uma planilha de estilos para adicionar uma regra

Por padrão, ao adicionar uma regra de estilo, o DevTools cria uma nova planilha de estilos nomeada inspector-stylesheet no documento e adiciona a nova regra de estilo nesta planilha de estilos.

Para, em vez disso, adicionar a regra em uma planilha de estilos existente:

• Clique e segure Nova Regra de Estilo () e selecione uma planilha de estilos na lista para adicionar a regra de estilo.

Adicionar uma regra de estilo a um local específico

Por padrão, adicionar uma regra de estilo clicando em Nova Regra de Estilo insere a nova regra abaixo da regra element.style na inspector-stylesheet folha de estilos.

Para adicionar uma regra de estilo em um local específico do painel Estilos , em vez disso:

1. Passe o mouse sobre a regra de estilo que está diretamente acima de onde você deseja adicionar sua nova regra de estilo.

2. Clique em Inserir Regra de Estilo abaixo ().

Alternar uma declaração

Para alternar uma única declaração ativada ou desativada:

1. Selecione um elemento.

2. No painel Estilos , passe o mouse sobre a regra que define a declaração. Uma caixa de seleção é exibida ao lado de cada declaração.

3. Selecione ou desmarque a caixa de seleção ao lado da declaração. Quando você limpa uma declaração, DevTools a risca, para indicar que ela não está mais ativa.

   Na figura a seguir, a margin-top propriedade do elemento selecionado no momento foi alternada.

   

Alterar cores com o Seletor de Cores

O Seletor de Cores fornece uma interface do usuário para alterações color e background-color declarações.

Para abrir o Seletor de Cores:

1. Selecione um elemento.

2. No painel Estilos , localize a colordeclaração , background-colorou semelhante que você deseja alterar. À esquerda do color, background-colorou valor semelhante, há um quadrado pequeno, que é uma visualização da cor.

   Na figura a seguir, o pequeno quadrado à esquerda de rgba(0, 0, 0, 0.7) é uma visualização dessa cor.

   

3. Clique na visualização para abrir o Seletor de Cores.

   

A figura e a lista a seguir descrevem cada um dos elementos da interface do usuário do Seletor de Cores.

Texto explicativo	Componente	Descrição
1	Tons
2	Conta-gotas	Exemplo de uma cor fora da página com o Eyedropper
3	Copiar para área de transferência	Copie o Valor de Exibição para sua área de transferência.
4	Valor de Exibição	A representação RGBA, HSLA ou Hex da cor.
5	Paleta de Cores	Clique em um quadrado para alterar a cor.
6	Matiz
7	Opacidade
8	Alternador de valor de exibição	Alternar entre as representações RGBA, HSLA e Hex da cor atual.
9	Comutador de Paleta de Cores	Alternar entre a paleta Design de Material, uma paleta personalizada ou uma paleta de cores de página. O DevTools gera a paleta de cores da página com base nas cores encontradas em suas planilhas de estilos.

Exemplo de uma cor fora da página com o Eyedropper

Para alterar a cor selecionada para alguma outra cor na página:

1. Clique no ícone Eyedropper (). Seu cursor muda para uma lupa.

2. Passe o mouse no pixel que tem a cor que você deseja experimentar, em qualquer lugar da tela.

3. Clique para confirmar.

   Na figura a seguir, o Seletor de Cores mostra um valor de cor atual de rgba(0,0,0,0.7), que é próximo ao preto. A cor específica muda para a versão do preto que está atualmente realçada no modo de exibição depois que você clica nela.

   

Veja também:

• Testar o contraste de cor de texto usando o Seletor de Cores

Alterar o valor do ângulo com o Relógio de Ângulo

O Relógio de Ângulo fornece uma interface do usuário para alterar os valores de ângulo em valores de propriedade CSS.

Para abrir o Relógio de Ângulo:

1. Selecione um elemento que inclua uma declaração de ângulo.

2. No painel Estilos , localize a transform declaração ou background que você deseja alterar. Clique na caixa Visualização de Ângulo ao lado do valor de ângulo.

   Na figura a seguir, o relógio pequeno à esquerda do 100deg é uma visualização do ângulo.

3. Clique na visualização para abrir o Relógio de Ângulo:

   

4. Altere o valor do ângulo clicando no círculo Do Relógio de Ângulo ou role o mouse para aumentar ou diminuir o valor do ângulo em 1.

Há mais atalhos de teclado para alterar o valor do ângulo. Saiba mais nos atalhos de teclado do painel Estilos.

Alterar a caixa e as sombras de texto com o Editor de Sombras

Use o Editor de Sombras para alterar o valor da box-shadow propriedade ou text-shadow CSS em um elemento HTML:

1. Selecione um elemento com uma box-shadow declaração ou text-shadow .

   Por exemplo, abra a página de demonstração 1DIV em uma nova guia ou janela, clique com o botão direito do mouse na página e selecione Inspecionar para abrir DevTools e, em seguida, na ferramenta Elementos , selecione o <div class="demos"> elemento.

2. No painel Estilos , na .demos regra CSS, localize a box-shadow declaração e clique no botão Abrir editor de sombras ().

   O Editor de Sombras é aberto:

   

3. Altere as propriedades da sombra, da seguinte maneira:

   Propriedade	Como alterar
   Tipo	Selecione Início ou Início. Somente para box-shadow.
   Deslocamento X	Especifique um valor na caixa de texto ou arraste o ponto azul.
   Deslocamento Y	Especifique um valor na caixa de texto ou arraste o ponto azul.
   Desfoque	Especifique um valor na caixa de texto ou arraste o controle deslizante.
   Espalhar	Especifique um valor na caixa de texto ou arraste o controle deslizante. Somente para box-shadow.

   As alterações são aplicadas ao elemento na página da Web renderizada em tempo real:

   

Editar tempos de animação e transição com o Editor de Facilitação

Use o Editor de Flexibilização para alterar o valor da propriedade animation-timing-function ou transition-timing-function em um elemento HTML:

1. Selecione um elemento que tenha uma animação ou transição CSS aplicada.

   Por exemplo, abra a página de demonstração de propriedade animada em uma nova guia ou janela, clique com o botão direito do mouse na página e selecione Inspecionar para abrir DevTools e, em seguida, na ferramenta Elementos , pressione Ctrl+F e localize "spinner" e selecione o <div class="spinner"> elemento.

   As caixas vermelha e verde nesta página de demonstração são duas animações CSS diferentes. Ambas as animações são executadas com CSS usando a animation propriedade CSS e definem uma função de ease-in-out tempo.

2. No painel Estilos , localize a animation declaração na .bad .spinner regra CSS e clique no botão Abrir editor de bezier cúbico ().

   O Editor de Flexibilização abre:

   

3. Altere as propriedades da função de tempo de animação:

   • Escolha uma das funções de tempo pré-definidas na lista.
   • Crie sua própria função de tempo arrastando as alças de curva do cub-bezier.

   As alterações são aplicadas ao elemento na página da Web renderizada em tempo real:

   

Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.