Referência de recursos CSS

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

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

Conteúdo detalhado:

Selecione 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 obter um tutorial, consulte Exibir o CSS de um elemento.

Um exemplo de um elemento selecionado

Na figura acima:

  • O h1 elemento realçado na Árvore DOM é o elemento selecionado.
  • À direita, os estilos do elemento são mostrados no painel Estilos .
  • À esquerda, o elemento é realçado na janela de exibição, mas apenas porque o mouse está passando 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 da página e clique em Inspecionar.

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

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

  • No 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 CSS

Use as guias Elementos>,Estilos e Calculado para exibir regras CSS e diagnosticar problemas de CSS.

A guia Estilos exibe links em vários locais para vários outros locais, incluindo, mas não se limitando a:

Os links podem ter um estilo diferente. Se você não tiver certeza se algo é um link, tente clicar nele para descobrir.

Por exemplo:

  1. Vá para o aplicativo To Do em uma nova janela ou guia.

  2. Clique com o botão direito do mouse no espaço em branco acima da cadeia de caracteres "Adicionar uma tarefa" e clique em Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

  3. Selecione a guia Estilos .

    Vários tipos de links são exibidos:

    Vários links destacados

Exibir dicas de ferramenta com documentação CSS, especificidade e valores de propriedades personalizadas

Na ferramenta Elementos , a guia Estilos mostra dicas de ferramentas com informações úteis quando você passa o mouse sobre elementos específicos.

Exibir a documentação do CSS

Para exibir a descrição de uma propriedade CSS, em uma dica de ferramenta:

  1. Acesse uma página da Web, como o aplicativo To Do, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse no espaço em branco acima da cadeia de caracteres "Adicionar uma tarefa" e clique em Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

  3. Selecione a guia Estilos .

  4. Passe o mouse sobre um nome de propriedade CSS, como padding:.

    Uma dica de ferramenta é exibida:

    A dica de ferramenta com documentação em uma propriedade CSS

    O DevTools efetua pull das descrições para dicas de ferramentas do repositório de Dados Personalizados do VS Code .

  5. Na dica de ferramenta, clique no link Saiba mais .

    A página de referência CSS para a propriedade no MDN é exibida, como padding a propriedade CSS.

Para desativar as dicas de ferramentas CSS:

  • Na dica de ferramenta, marque a caixa de seleção Não mostrar .

Para ativar as dicas de ferramentas CSS novamente:

  1. No DevTools, selecione Personalizar e controlar o DevTools e, em seguida, selecione Configurações.

  2. No contorno à esquerda, selecione Preferências e role para baixo até a seção Elementos .

  3. Marque a caixa de seleção Mostrar dica de ferramenta de documentação CSS .

Especificidade do seletor de exibição

Passe o mouse sobre um seletor CSS para exibir uma dica de ferramenta que mostre o peso de especificidade do seletor, como: Especificidade: (0,0,1):

Por exemplo:

  1. Acesse uma página da Web, como o aplicativo To Do, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e clique em Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

  3. Na árvore DOM, selecione o <body> elemento.

  4. Na guia Estilos , passe o mouse sobre o body seletor CSS.

    Uma dica de ferramenta é exibida, mostrando a Especificidade: (0,0,1):

    A dica de ferramenta com peso de especificidade de um seletor correspondente

Veja também:

Exibir os valores das propriedades personalizadas

Passe o mouse sobre uma var(--custom-property) função para ver o valor da propriedade personalizada em uma dica de ferramenta.

Por exemplo:

  1. Acesse uma página da Web, como o aplicativo To Do, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e clique em Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

  3. Na árvore DOM, selecione o <body> elemento.

  4. Na guia Estilos , na regra CSS, passe o body mouse sobre --spacing.

    O valor .3rem é exibido em uma dica de ferramenta:

    O valor de uma propriedade personalizada em uma dica de ferramenta

Veja também:

Exibir a folha de estilo externa em que uma regra é definida

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

Se a folha de estilo for reduzida, clique no botão Formatar (Formato) na parte inferior do painel Editor . Para obter mais informações, consulte Reformatar um arquivo JavaScript reduzido com impressão bonita nos recursos de depuração do JavaScript.

Exibindo a folha de estilo em que uma regra é definida

Na figura acima, depois de clicar to-do-styles.css:5em , você é levado para a linha 5 de , onde a h1 regra CSS to-do-styles.cssé definida.

Exibir CSS inválido, substituído, inativo e outro CSS

A guia Estilos reconhece muitos tipos de problemas de CSS e os destaca de maneiras diferentes.

Exibir somente o CSS que é realmente aplicado a um elemento

O painel Estilos mostra todas as regras que se aplicam a um elemento, incluindo as 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á realmente sendo aplicado a um elemento.

Por exemplo:

  1. Acesse uma página da Web, como o aplicativo To Do, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse no título Minhas tarefas e clique em Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada, com o <h1> elemento selecionado na árvore DOM.

  3. Na ferramenta Elementos , selecione a guia Computado .

    As propriedades CSS aplicadas ao elemento selecionado são exibidas:

    O painel Computado

    Um nome de propriedade e um valor em itálico indicam um valor calculado em tempo de execução.

  4. Para exibir todas as propriedades, marque a caixa de seleção Mostrar tudo .

Exibir propriedades CSS em ordem alfabética

Use o painel Computado . Veja Exibir apenas o CSS que é realmente aplicado a um elemento, acima.

Exibir propriedades CSS herdadas

Marque a caixa de seleção Mostrar Tudo no painel Computado . Veja Exibir apenas o CSS que é realmente aplicado a um elemento, acima.

Exibir regras CSS

At-rules são instruções CSS que permitem controlar o comportamento do CSS.

Na ferramenta Elementos , a guia Estilos mostra as seguintes regras em seções dedicadas:

Exibir @property regras

A @property regra CSS permite definir propriedades personalizadas CSS de tipos específicos em uma folha de estilo.

Passe o mouse sobre o nome dessa propriedade na guia Estilos para ver uma dica de ferramenta que contém:

  • O valor da propriedade, como 20%.
  • Os descritores da propriedade, como: initial value: 40%
  • Um link da propriedade registrada View para seu registro na seção recolhível @property na parte inferior da guia Estilos .

Por exemplo:

  1. Vá para uma página que usa a @property regra, como Exibir @property regras, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse no parágrafo do Item Três e clique em Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

  3. Na guia Estilos , passe o mouse sobre essa var(--itemSize) função:

    Dica de ferramenta para o CSS at-rule at-property

    A dica de ferramenta contém:

    • O valor da propriedade, como 100px.
    • Os descritores da propriedade, como valor inicial.
    • A Exibir link de propriedade registrada .

  4. Clique no link Exibir propriedade registrada .

    A seção @property expandida é exibida, mais abaixo na guia Estilos :

    --itemSize na seção na propriedade

Para editar uma @property regra, clique duas vezes em seu nome ou valor. Consulte Alterar um nome ou valor de declaração, abaixo.

Veja também:

Exibir @supports regras

A guia Estilos mostra as @supports regras CSS, se elas forem aplicadas a um elemento.

Por exemplo, para exibir a @supports regra:

  1. Em uma nova janela ou guia, vá para uma página que use a @supports regra, como Exibir @supports regra.

  2. Clique com o botão direito do mouse em "Eu suporte o espaço de cores CIE LAB!" e selecione Inspecionar.

    O DevTools é aberto. Na ferramenta Elementos , na árvore DOM, o <div class="box"> elemento é selecionado. Na guia Estilos , @supports as declarações CSS são listadas:

    Resultado do HTML para o at-supports at-rule

  • Se o navegador for compatível com a lab() função, o elemento será verde.

  • Se o seu navegador não suportar a lab() função, o elemento é roxo.

Para ver quais versões do navegador são compatíveis com o espaço de cores CIE LAB, pesquise Caniuse.com por "lab".

Exibir @scope regras

A guia Estilos exibe regras CSS @scope se elas forem aplicadas a um elemento.

As @scope regras permitem que você defina o escopo dos estilos CSS; ou seja, aplique explicitamente estilos a elementos específicos. Veja @scope CSS at-rule no MDN.

Para exibir a @scope regra:

  1. Em uma nova janela ou guia, vá para uma página que use a @scope regra, como a demonstração Exibir @scope regras :

    Resultado de HTML & CSS para o at-scope at-rule

  2. Clique com o botão direito do mouse em "Eu sou o texto que vive em um card" e selecione Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

  3. Selecione a guia Estilos .

  4. Examine a @scope regra:

    A regra no escopo na guia Estilos

    Neste exemplo, a @scope regra (cor da tela de fundo = ameixa) substitui a declaração CSS background-color global (água-marinha), para qualquer <p> elemento que esteja dentro de um elemento (como um <div>) que tenha uma card classe.

    Para editar a @scope regra, clique duas vezes nela:

  5. Na guia Estilos , clique duas vezes em ameixa, pressione Delete e selecione bege.

    O texto no card na página da web da demonstração muda de fundo ameixa para fundo bege.

Exibir @font-palette-values regras

A regra CSS @font-palette-values permite personalizar (substituir) os valores padrão da font-palette propriedade. Na ferramenta Elementos , a guia Estilos mostra essa regra em uma seção dedicada.

Para exibir a @font-palette-values regra CSS:

  1. Em uma nova janela ou guia, vá para uma página que use a @font-palette-values regra, como a demonstração Exibir @font-palette-values regras .

  2. Clique com o botão direito do mouse em "novas cores" e selecione Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

  3. Na guia Estilos , encontre a @font-palette-values regra CSS:

    A regra at-font-palette-values na guia Estilos

    Neste exemplo, os --New valores da paleta de fontes substituem os valores padrão da fonte colorida.

    Para editar um valor personalizado, clique duas vezes nele, da seguinte maneira:

  4. @font-palette-values Na regra CSS, na override-colors propriedade, clique 0 gold, 1 redduas vezes e insira 0 blue, 1 red.

    Na página da Web inspecionada, as "novas cores" agora são renderizadas como azul e vermelho.

Exibir @position-try regras

A @position-try regra CSS, juntamente com a propriedade, permite definir posições de ancoragem alternativas para os position-try-fallbacks elementos.

Na ferramenta Elementos , a guia Estilos resolve e vincula o seguinte:

  • Os position-try-fallbacks valores de propriedade (ou position-try-options valores de propriedade) são vinculados a uma seção de regra CSS dedicada @position-try --name .

  • Os position-anchor valores e anchor() argumentos da propriedade são vinculados aos elementos correspondentes que têm popovertarget atributos.

Por exemplo, inspecione os valores e @position-try as position-try-fallbacks regras CSS, da seguinte maneira:

  1. Em uma nova janela ou guia, vá para uma página que use os valores e @position-try a position-try-fallbacks regra, como a demonstração Exibir @position-try regra.

  2. Na página da web renderizada, abra o submenu; ou seja, clique em SUA CONTA e, em seguida, clique em VITRINE.

    O submenu é exibido, mostrando uma lista de comandos: LISTAGENS, OFERTAS ESPECIAIS,SAIR.

  3. No submenu, clique com o botão direito do mouse acima de LISTAGENS e selecione Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada. O elemento <ul id="submenu"> submenu é selecionado na árvore DOM:

    Resultado do HTML & CSS para o at-position-try at-rule

  4. Na guia Estilos, na regra CSS, localize a position-try-fallbacks propriedade e clique em #submenu seu --bottom valor.

    A guia Estilos rola para baixo até a seção correspondente @position-try :

    A seção at-position-try na guia Estilos

  5. Na guia Estilos , na regra CSS, clique no #submenu--submenu link em qualquer uma das seguintes propriedades:

    position-anchor: --submenu;
left: anchor(--submenu right);
top: anchor(--submenu top);

    A árvore DOM seleciona o elemento (<button popovertarget="submenu">) que tem o valor de atributo correspondente popovertarget (popovertarget="submenu") e a guia Estilos mostra o CSS do elemento:

    O elemento button selecionado na árvore DOM e seu CSS

Para editar um valor, clique duas vezes nele.

Veja também:

Exibir o modelo de caixa de um elemento

Para exibir o modelo de caixa de um elemento, vá para o painel Estilos e role para baixo.

Para alterar um valor, clique duas vezes nele.

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

O diagrama do Modelo de Caixa

Veja também:

Pesquisar e filtrar o CSS de um elemento

Use a caixa de texto Filtro nos painéis Estilos e Calculado para pesquisar propriedades ou valores CSS específicos.

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

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

Filtrar o painel Estilos

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

Filtrar o painel calculado

Emular uma página com foco

Se você alternar o foco da página da Web inspecionada para o DevTools, alguns elementos de sobreposição serão ocultados automaticamente, se forem disparados pelo foco. Por exemplo:

  • Listas suspensas.
  • Menus.
  • Seletores de data.

Para depurar esse elemento como se a página tivesse foco, siga um dos seguintes procedimentos:

  • Na ferramenta Elementos , na guia Estilos , clique em :hov (Alternar estado do elemento) e marque a caixa de seleção Emular uma página focada .
  • Na ferramenta Renderização , marque a caixa de seleção Emular uma página focada .

Atenção: Quando essa opção está ativada, o document.visibilityState é definido como visible e o visibilitychange evento não é disparado. Consulte API de visibilidade de página no MDN.

Para tentar emular uma página com foco:

  1. Abra a demonstração Emular uma página focada em uma nova janela ou guia.

  2. Clique na caixa de texto de entrada. Ou pressione Tab para colocar o foco na caixa de texto de entrada.

    Outro elemento aparece na caixa de texto de entrada, dizendo "Esta mensagem só aparece quando a caixa de texto está focada".

  3. Clique com o botão direito do mouse na caixa de texto de entrada e selecione Inspecionar.

    O DevTools é aberto e o elemento message desaparece. A janela do DevTools agora está em foco, em vez da página da Web inspecionada, de modo que o elemento de mensagem desaparece.

  4. Na ferramenta Elementos , na guia Estilos , clique em :hov (Alternar estado do elemento) e marque a caixa de seleção Emular uma página focada .

  5. Verifique se o elemento <input id="textBox" type="text"> da caixa de texto de entrada ainda está selecionado.

    Na caixa de texto de entrada, o elemento de mensagem reaparece abaixo da caixa de texto de entrada.

    Agora você pode inspecionar o elemento de mensagem que está abaixo da caixa de texto de entrada, mesmo que o DevTools, em vez da página inspecionada, tenha o foco:

    A caixa de seleção Emular uma página com foco marcada

  6. Limpeza: na ferramenta Elementos , na guia Estilos , clique em :hov (Alternar estado do elemento) e desmarque a caixa de seleção Emular uma página focada .

Uma caixa de seleção Emular uma página focada também aparece na ferramenta Renderização ; consulte Ferramenta de renderização, para ver a aparência de uma página da Web com diferentes opções de exibição ou deficiências visuais.

Veja também:

Alternar uma pseudo-classe

Para alternar uma pseudo-classe:

  1. Acesse uma página da Web, como o aplicativo To Do, em uma nova janela ou guia.

  2. Insira uma tarefa, como a tarefa 1.

  3. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  4. Selecione a ferramenta Elementos .

  5. Na árvore DOM, selecione o <li class="task"> elemento.

  6. Selecione a guia Estilos .

  7. No canto superior direito, clique em :hov.

    As caixas de seleção são exibidas.

  8. Marque a caixa de seleção da pseudo-classe que você deseja habilitar, como :hover:

    Selecionando a pseudo-classe :hover

    Na página da Web renderizada, o círculo ao lado do nome da tarefa é preenchido com uma marca de seleção e um X vermelho em um círculo vermelho aparece no lado direito da tarefa, como se o elemento estivesse sendo pairado, mesmo que o elemento não esteja realmente sendo pairado.

A guia Estilos mostra as seguintes pseudo-classes para todos os elementos:

Além disso, alguns elementos podem ter pseudo-classes específicas do elemento. Quando você seleciona esse elemento, a guia Estilos mostra uma seção do estado do elemento específico da Força que você pode expandir e ativar pseudoclasses específicas do elemento, como uma caixa de seleção :read-write :

A seção forçar estado do elemento específico de um elemento 'textarea'

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

Exibir pseudoelementos de realce herdados

Os pseudoelementos permitem estilizar partes específicas dos elementos. Os pseudoelementos de destaque são partes do documento com um status "selecionado" e são estilizados como "realçados" para indicar esse status ao usuário.

Por exemplo, esses pseudo-elementos são:

  • ::selection
  • ::spelling-error
  • ::grammar-error
  • ::highlight

Quando vários estilos entram em conflito, a cascata CSS determina o estilo vencedor. Veja Introdução à cascata CSS no MDN.

Para entender melhor a herança e a prioridade das regras, exiba o pseudo-elemento de destaque herdado na demonstração a seguir.

Para visualizar os pseudoelementos de realce herdados:

  1. Vá para a demonstração Destacar pseudoelementos em uma nova janela ou guia.

  2. Selecione uma parte do texto "Herdei o estilo do pseudoelemento de destaque dos meus pais. Selecione-me!"

    O texto selecionado muda para texto vermelho sobre fundo amarelo.

  3. Clique com o botão direito do mouse no texto "Herdei o estilo do pseudoelemento de destaque dos meus pais. Selecione-me!", e, em seguida, selecione Inspecionar.

    O DevTools é aberto. Na ferramenta Elementos , na guia Estilos , a seção é exibida: Herdado de ::selection pseudo de div.text-parent:

    Exibir a seção Herdado na guia Estilos

  4. Na árvore DOM, selecione o <div class="text-parent"> elemento.

    Na guia Estilos , a seção é exibida: Pseudo ::selection element:

    Exibir a seção Pseudo na guia Estilos

Veja também:

Exibir camadas em cascata

As camadas em cascata permitem um controle mais explícito dos arquivos CSS para evitar conflitos de especificidade de estilo. Isso é útil para:

  • Bases de código grandes.
  • Design do sistema.
  • Gerenciando estilos de terceiros.

Para exibir camadas em cascata:

  1. Vá para uma página da Web que usa camadas em cascata, como a demonstração de camadas em cascata .

  2. Clique com o botão direito do mouse no elemento "Meus estilos estão em camadas!" e selecione Inspecionar.

    O DevTools é aberto.

  3. Na ferramenta Elementos , selecione a guia Estilos .

  4. Na guia Estilos, exiba as três camadas em cascata e seus estilos: pagee basecomponent :

    Camadas em cascata

  5. Para exibir a ordem da camada, clique no nome da camada (página, componente ou base). Ou clique no ícone Alternar exibição de camadasCSS Botão de exibição Alternar camadas CSS .

    A page camada tem a maior especificidade, portanto, o fundo do elemento é verde.

Veja também:

Mostrar uma página no modo de impressão

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

  1. Ir para uma página da Web.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. Pressione Esc uma ou duas vezes para que a barra de ferramentas de Exibição Rápida apareça na parte inferior do DevTools.

  4. Na barra de ferramentas Visualização rápida , selecione Mais ferramentas (+).

  5. Selecione a ferramenta Renderização .

    A ferramenta Renderização é aberta no painel Visualização Rápida na parte inferior do DevTools.

  6. Na ferramenta Renderização , clique na lista suspensa Emular tipo de mídia CSS e selecione imprimir.

    A página da Web é renderizada como se estivesse sendo impressa.

  7. Quando terminar, na ferramenta Renderização , clique na lista suspensa Emular tipo de mídia CSS e selecione Sem emulação.

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

A ferramenta Cobertura mostra qual CSS uma página realmente usa.

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

  2. Comece a digitar coveragee selecione Mostrar Cobertura:

    Abrindo a ferramenta Cobertura no Menu de Comando

    A ferramenta Cobertura é exibida:

    A ferramenta Cobertura

  3. Clique em Iniciar cobertura de instrumentação e atualize a página (Iniciar cobertura de instrumentação e atualizar a página). A página é atualizada e a ferramenta Cobertura fornece uma visão geral da quantidade de CSS (e JavaScript) usada em cada arquivo carregado pelo navegador. Verde representa CSS usado. Vermelho representa CSS não utilizado.

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

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

  4. Para exibir um detalhamento linha por linha de qual CSS é usado, clique em um arquivo CSS.

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

    Um detalhamento linha por linha do CSS usado e não usado

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

Consulte Forçar DevTools no modo de visualização de impressão.

Copiar CSS

Em um único menu suspenso na guia Estilos , você pode copiar regras, declarações, propriedades ou valores CSS separados; veja noções básicas de sintaxe CSS em O que é CSS? no MDN.

Além disso, você pode copiar propriedades CSS na sintaxe do JavaScript. Essa opção é útil se você estiver usando bibliotecas CSS-in-JS; consulte Edição de estilo para estruturas CSS-in-JS.

Para copiar CSS:

  1. Vá para uma página da Web que usa CSS, como o aplicativo To Do, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e clique em Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

  3. Na árvore DOM, selecione um elemento, como <h1>.

  4. Na guia Estilos , dentro de uma regra CSS, clique com o botão direito do mouse em uma propriedade CSS, como text-align: center:

    Copiar CSS menu suspenso

  5. Selecione um item de menu do botão direito:

    • Copiar declaração. Copia a propriedade e seu valor na sintaxe CSS: property: value;

    • Copiar propriedade. Copia apenas o property nome.

    • Copiar valor. Copia apenas o valuearquivo .

    • Copiar regra. Copia toda a regra CSS: selector[, selector] { property: value; property: value; ... }

    • Copiar declaração como JS. Copia a propriedade e seu valor na sintaxe do JavaScript: propertyInCamelCase: 'value'

    • Copiar todas as declarações. Copia todas as propriedades e seus valores na sintaxe CSS: property: value; property: value; ...

    • Copiar todas as declarações como JS. Copia todas as propriedades e seus valores na sintaxe JavaScript: propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • Copie todas as alterações CSS. Copia as alterações feitas na guia Estilos em todas as declarações. Este item de menu aparece condicionalmente.

    • Exibir valor calculado. Leva você para a guia Computado ; veja Veja apenas o CSS que é realmente aplicado a um elemento, acima.

Alterar CSS

Esta seção lista todas as maneiras de alterar o CSS nosestilos dos elementos>.

Além disso, você pode:

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.

Adicionando 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 desejará usar declarações embutidas.

As declarações embutidas têm maior especificidade do que as 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 especificidade, consulte Tipos de seletor em especificidade no MDN.

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 DOM, um style atributo foi adicionado ao elemento.

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

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

Adicionar declarações embutidas

Adicionando 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 locais 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.

Adicionando uma declaração a uma regra de estilo

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:

Alterar o valor de uma declaração

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

Alterar valores enumeráveis com atalhos de teclado

Para alterar um valor numérico de uma declaração CSS, digite o valor ou use as teclas de direção para incrementar o valor em um valor específico. Ao editar um valor enumerável de uma declaração, por exemplo, font-sizevocê pode usar os seguintes atalhos de teclado para incrementar o valor em um valor fixo:

Combinação de teclas Ação
Alt+Seta para cima (Windows, Linux), Option+Seta para cima (macOS) Incremente em 0,1.
Seta para cima Incremente em 1 ou em 0,1 se o valor atual estiver entre -1 e 1.
Shift+Up Arrow Incrementar em 10.
Ctrl+Shift+PgUp (Windows, Linux), Shift+Command+Seta para cima (macOS) Incrementar em 100.

Para diminuir, pressione a tecla Seta para baixo (ou Page Down) em vez da tecla Seta para cima (ou Page Up).

Alterar valores de comprimento

Você pode usar o ponteiro para alterar qualquer propriedade que tenha um valor de comprimento, como width, , , paddingmargin, ou borderheight.

Para alterar a unidade de comprimento:

  1. Abra uma página da Web que use CSS, como o aplicativo To Do, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse no texto, adicione uma tarefa e selecione Inspecionar.

    O DevTools é aberto, exibindo a ferramenta Elementos . O <label> elemento é selecionado na árvore DOM.

  3. Na guia Estilos, na .new-task-form regra CSS, na propriedade, passe o mouse sobre 50rem.max-width:

    Uma dica de ferramenta é exibida, mostrando o valor e as unidades equivalentes: 800px.

  4. Clique no valor 50rem.

    Uma dica de ferramenta é exibida: "Incrementar/decrementar com as teclas de roda do mouse ou para cima/para baixo. Ctrl: +/-100, Shift: +/-10, Alt: +/-0.1"

  5. Mova o botão de rolagem do mouse ou pressione as teclas Seta para cima e Seta para baixo enquanto pressiona uma tecla:

    Ctrl: incrementar em 100. Shift: incrementar em 10. Alt: incremente em 0,1.

    Na página da Web inspecionada, a caixa de texto Adicionar uma entrada de tarefa muda de largura à medida que você altera o valor.

  6. No campo de valor da propriedade max-width, informe o valor 200px (mudando de rem unidades para px unidades).

  7. Mova novamente o botão do mouse ou pressione as teclas Seta para cima e Seta para baixo , enquanto segura a tecla Ctrl (+/-100), Shift (+/-10) ou Alt (+/-0,1).

    Na página da Web inspecionada, a caixa de texto Adicionar uma entrada de tarefa muda de largura conforme você altera o valor:

    Alterar a largura máxima da caixa de texto de entrada

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.

    O painel Classes de Elemento

Emular preferências de temas claros e escuros e habilitar o modo escuro automático

Para alternar o modo escuro automático ou emular a preferência do usuário de temas claros ou escuros:

  1. Na ferramenta Elementos , na guia Estilos , clique no botão Alternar emulações de renderização comuns (ícone do Paintbrush) no canto superior direito:

    Alternar emulações de renderização comuns

  2. Selecione uma das seguintes opções na lista suspensa:

    • prefere-esquema de cores: claro. Indica que o usuário prefere o tema claro.

    • prefere-esquema de cores: escuro. Indica que o usuário prefere o tema escuro.

    • Modo escuro automático. Exibe sua página no modo escuro, mesmo que você não a tenha implementado. Além disso, é definido prefers-color-scheme como dark automaticamente.

Esta lista suspensa é um atalho para o recurso prefers-color-schemeEmular mídia CSS e Ativar opções automáticas de modo escuro da ferramenta Renderização.

Veja também:

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. Marque 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 (regra de novo estilo). O DevTools insere uma nova regra abaixo da regra element.style .

    Na figura a seguir, o DevTools adiciona a regra de estilo depois que você clica h1.devsite-page-title em Nova Regra de Estilo.

    Adicionar uma nova regra de estilo

Selecione uma folha de estilo à qual adicionar uma regra

Por padrão, ao adicionar uma regra de estilo, o DevTools cria uma nova folha de estilo nomeada inspector-stylesheet no documento e, em seguida, adiciona a nova regra de estilo nessa folha de estilo.

Para adicionar a regra em uma folha de estilo existente:

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

Selecionando uma folha de estilo

Adicionar uma regra de estilo a um local específico em uma folha de estilo

Por padrão, adicionar uma regra de estilo clicando no botão Nova regra de estilo (ícone Nova regra de estilo) insere a nova regra abaixo da regra element.style na inspector-stylesheet folha de estilo.

Para adicionar uma regra de estilo em um local específico de uma folha de estilo específica, iniciando no painel Estilos :

  1. Na ferramenta Elementos , na guia Estilos , passe o mouse sobre a regra de estilo que está diretamente acima de onde você deseja adicionar sua nova regra de estilo.

    Um botão Inserir regra de estilo abaixo (Inserir regra de estilo abaixo do ícone) aparece no lado direito da regra CSS.

  2. Clique no botão Inserir regra de estilo abaixo (Inserir regra de estilo abaixo do ícone):

    Inserir regra de estilo abaixo

Alternar uma declaração

Para ativar ou desativar uma única declaração:

  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. Marque ou desmarque a caixa de seleção ao lado da declaração. Quando você limpa uma declaração, 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 desligada.

    Alternar uma declaração

Editar os ::view-transition pseudoelementos durante uma animação

Confira:

Alinhar itens de grade e seu conteúdo com o Editor de Grade

Confira:

Alterar cores com o Seletor de Cor

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

Para abrir o Seletor de Cor:

  1. Selecione um elemento.

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

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

    Visualização de cores

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

    O Seletor de Cor

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

O Seletor de Cor, anotado

Texto explicativo Componente Descrição
1 Tons
2 Conta-gotas Obter uma amostra de uma cor da página com o Conta-gotas
3 Copiar para a Área de Transferência Copie o valor de exibição para a á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 Alterne entre as representações RGBA, HSLA e Hex da cor atual.
9 Alternador de paleta de cores Alterne entre a paleta Material Design, 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 folhas de estilo.

Veja também:

Obter uma amostra de uma cor da página com o Conta-gotas

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

  1. Clique no ícone de Conta-gotas (Conta-gotas). O cursor se transforma em uma lupa.

  2. Passe o mouse sobre o pixel da cor que você deseja amostrar, em qualquer lugar da tela.

  3. Clique aqui 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 destacada na viewport depois que você clica nela.

    Usando o conta-gotas

Veja também:

Altere o valor do ângulo com o Angle Clock

O Angle Clock fornece uma interface de usuário para alterar os valores de ângulo em valores de propriedade CSS.

Para abrir o Angle Clock:

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

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

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

  3. Clique na visualização para abrir o Angle Clock:

    Visualização do ângulo

  4. Para alterar o valor do ângulo, clique no círculo do Angle Clock 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 no painel Estilos Atalhos de teclado.

Alterar as sombras de caixa e texto com o Editor de Sombra

Use o Editor de Sombra para alterar o valor da box-shadow propriedade CSS ou text-shadow 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 o 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 sombra (o ícone do botão do editor de sombra).

    O Editor de Sombra é aberto:

    O Editor Sombra

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

    Propriedade Como trocar
    Tipo Selecione Início ou Inserção. 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.
    Spread 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:

    O efeito das alterações feitas no Editor de Sombra

Editar os tempos de animação e transição com o Editor de atenuação

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

Para abrir o Editor de Flexibilização:

  1. No DevTools, na ferramenta Elementos , na árvore DOM, 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 caixa verde que contém uma animação e selecione Inspecionar.

    O DevTools é aberto, exibindo a ferramenta Elementos .

  2. Pressione Ctrl+F e localize "spinner" e selecione o <div class="spinner"> elemento que está dentro <div class="animation-demo good">.

    As caixas vermelha (ruim) e verde (boa) 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 ease-in-out função de temporização.

  3. Na guia Estilos, na .good .spinner regra CSS, na declaração, à esquerda de , clique no animation botão Abrir editor de bézier cúbico (ícone do ease-in-outeditor de bézier cúbico).

    O Editor de Easing é aberto:

    O Editor de Flexibilização

Usar predefinições para ajustar os intervalos

Para ajustar os intervalos com um simples clique do mouse, use as predefinições no Editor de atenuação:

  1. Abra o Editor de atenuação, conforme descrito em Editar animação e tempos de transição com o Editor de atenuação, acima.

  2. Clique em um dos quatro botões seletores:

    Botão Tipo de função palavra-chave CSS
    Funções de atenuação linear Funções lineares linear
    Funções de facilitação de entrada e saída Funções de entrada e saída ease-in-out
    Funções de facilitação Funções de facilidade ease-in
    Funções de atenuação Funções de facilidade ease-out

    Selecionar um botão define um valor de palavra-chave na regra CSS (que varia se você selecionar uma predefinição de variante na próxima etapa) e o alternador de predefinições é aberto na parte inferior do Editor de atenuação.

  3. No Alternador de predefinições, clique nos botões esquerdo< ou direito> para escolher uma das seguintes predefinições:

    • Predefinições lineares: elastic, bounce, ou emphasized.

    • Predefinições cúbicas de Bézier:

    Tempo: palavra-chave Predefinição Bézier cúbico
    Facilidade de entrada In Out, Sine cubic-bezier(0.45, 0.05, 0.55, 0.95)
    Facilidade de entrada In Out, Quadratic cubic-bezier(0.46, 0.03, 0.52, 0.96)
    Facilidade de entrada Para fora, cúbico cubic-bezier(0.65, 0.05, 0.36, 1)
    Facilidade de entrada Saída rápida, entrada lenta cubic-bezier(0.4, 0, 0.2, 1)
    Facilidade de entrada Dentro, Voltar cubic-bezier(0.68, -0.55, 0.27, 1.55)
    Tempo: palavra-chave Predefinição Bézier cúbico
    facilidade Em, Seno cubic-bezier(0.47, 0, 0.75, 0.72)
    facilidade Em, Quadrático cubic-bezier(0.55, 0.09, 0.68, 0.53)
    facilidade Em, Cúbico cubic-bezier(0.55, 0.06, 0.68, 0.19)
    facilidade Para dentro, para trás cubic-bezier(0.6, -0.28, 0.74, 0.05)
    facilidade Saída rápida, entrada linear cubic-bezier(0.4, 0, 1, 1)
    Tempo: palavra-chave Predefinição Bézier cúbico
    facilidade Fora, Seno cubic-bezier(0.39, 0.58, 0.57, 1)
    facilidade Fora, Quadrático cubic-bezier(0.25, 0.46, 0.45, 0.94)
    facilidade fora, cúbico cubic-bezier(0.22, 0.61, 0.36, 1)
    facilidade Saída linear, entrada lenta cubic-bezier(0, 0, 0.2, 1)
    facilidade Fora, Voltar cubic-bezier(0.18, 0.89, 0.32, 1.28)

Veja também:

Configurar intervalos personalizados

Para definir valores personalizados para funções de temporização, use os pontos de controle nas linhas:

  • Para funções lineares, clique em qualquer lugar na linha para adicionar um ponto de controle e arraste-o. Para remover um ponto de controle, clique duas vezes nele.

    Arrastando um ponto de controle de uma função linear

  • Para funções de Bézier cúbico, arraste um dos pontos de controle:

    Arrastando os pontos de controle de uma função de Bézier cúbica

Qualquer alteração aciona uma animação de bola na Visualização na parte superior do Editor de atenuação.

Confira também

Demonstrações:

MDN:

GitHub:

Web.dev:

Blog do Chrome para Desenvolvedores:

Documentos do Chrome:

material.io:

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Kayce Basques.

Licença Creative Commons Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.

  • Last updated on