Referência de funcionalidades CSS

Descubra novos fluxos de trabalho na seguinte referência abrangente das funcionalidades do Microsoft Edge DevTools relacionadas com a visualização e alteração do CSS.

Para saber as noções básicas, veja Começar a ver e alterar o CSS.

Conteúdo detalhado:

Selecionar um elemento

A ferramenta Elementos em DevTools permite-lhe ver ou alterar o CSS de um elemento de cada vez. O elemento selecionado está realçado na Árvore DOM. Os estilos do elemento são apresentados no painel Estilos . Para um tutorial, veja Ver o CSS de um elemento.

Um exemplo de um elemento selecionado

Na figura acima:

  • O h1 elemento que está realçado na Árvore DOM é o elemento selecionado.
  • À direita, os estilos do elemento são apresentados no painel Estilos .
  • À esquerda, o elemento está realçado na janela viewport, mas apenas porque o rato está atualmente a pairar sobre o mesmo na Árvore DOM:

Existem várias formas de selecionar um elemento:

  • Numa página Web composta, clique com o botão direito do rato num elemento de página e, em seguida, clique em Inspecionar.

  • Em DevTools, clique em Selecionar um elemento (Selecionar um elemento) ou prima Ctrl+Shift+C (Windows, Linux) ou Comando+Shift+C (macOS) e, em seguida, clique no elemento na janela viewport.

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

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

Ver CSS

Utilize osSeparadores Estilos de Elementos> e Calculados para ver as regras CSS e diagnosticar problemas de CSS.

O separador Estilos apresenta ligações em vários locais para vários outros locais, incluindo, mas não se limitando a:

As ligações podem ter um estilo diferente. Se não tiver a certeza se algo é uma ligação, experimente clicar na mesma para descobrir.

Por exemplo:

  1. Aceda à aplicação To Do numa nova janela ou separador.

  2. Clique com o botão direito do rato em espaço em branco acima da cadeia "Adicionar uma tarefa" e, em seguida, clique em Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

  3. Selecione o separador Estilos .

    São apresentados vários tipos de ligações:

    Várias ligações realçadas

Ver descrições com a documentação, a especificidade e os valores das propriedades personalizadas do CSS

Na ferramenta Elementos , o separador Estilos mostra descrições com informações úteis quando paira o cursor sobre elementos específicos.

Ver a documentação do CSS

Para apresentar a descrição de uma propriedade CSS, numa descrição:

  1. Aceda a uma página Web, como a aplicação To Do, numa nova janela ou separador.

  2. Clique com o botão direito do rato em espaço em branco acima da cadeia "Adicionar uma tarefa" e, em seguida, clique em Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

  3. Selecione o separador Estilos .

  4. Paire o cursor sobre um nome de propriedade CSS, como padding:.

    É apresentada uma descrição:

    A descrição com documentação numa propriedade CSS

    O DevTools extrai as descrições para descrições do repositório de Dados Personalizados do VS Code .

  5. Na descrição, clique na ligação Saiba mais .

    É apresentada a página de referência CSS da propriedade na MDN, como padding a propriedade CSS.

Para desativar as descrições do CSS:

  • Na descrição, selecione a caixa de verificação Não mostrar .

Para ativar novamente as descrições do CSS:

  1. Em DevTools, selecione Personalizar e controlar DevTools e, em seguida, selecione Definições.

  2. No contorno à esquerda, selecione Preferências e, em seguida, desloque-se para baixo até à secção Elementos .

  3. Selecione a caixa de verificação Mostrar descrição da documentação do CSS .

Ver a especificidade do seletor

Paire o cursor sobre um seletor CSS para apresentar uma descrição que mostra o peso específico do seletor, tal como: Especificidade: (0,0,1):

Por exemplo:

  1. Aceda a uma página Web, como a aplicação To Do, numa nova janela ou separador.

  2. Clique com o botão direito do rato na página Web e, em seguida, clique em Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

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

  4. No separador Estilos , paire o cursor sobre o body seletor CSS.

    É apresentada uma descrição que mostra a Especificidade: (0,0,1):

    A descrição com o peso específico de um seletor correspondente

Veja também:

Ver os valores das propriedades personalizadas

Paire o cursor sobre uma var(--custom-property) função para ver o valor da propriedade personalizada numa descrição.

Por exemplo:

  1. Aceda a uma página Web, como a aplicação To Do, numa nova janela ou separador.

  2. Clique com o botão direito do rato na página Web e, em seguida, clique em Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

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

  4. No separador Estilos , na regra CSS, paire o body cursor sobre --spacing.

    O valor .3rem é apresentado numa descrição:

    O valor de uma propriedade personalizada numa descrição

Veja também:

Ver a folha de estilos externa onde uma regra está definida

No painel Estilos , clique na ligação junto a uma regra CSS para abrir a folha de estilos externa que define a regra. A folha de estilos é aberta no painel Editor da ferramenta Origens .

Se a folha de estilos estiver minada, clique no botão Formatar (Formatar), na parte inferior do painel Editor . Para obter mais informações, veja Reformat a minified JavaScript file with pretty-print in JavaScript debugging features (Reformatar um ficheiro JavaScript minificado com bastante impressão nas funcionalidades de depuração de JavaScript).

Ver a folha de estilos onde uma regra é definida

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

Ver um CSS inválido, substituído, inativo e outro

O separador Estilos reconhece muitos tipos de problemas de CSS e realça-os de formas diferentes.

Ver apenas o CSS que é realmente aplicado a um elemento

O painel Estilos mostra-lhe todas as regras que se aplicam a um elemento, incluindo declarações que foram substituídas. Quando não estiver interessado em substituir declarações, utilize o painel Calculado para ver apenas o CSS que está realmente a ser aplicado a um elemento.

Por exemplo:

  1. Aceda a uma página Web, como a aplicação To Do, numa nova janela ou separador.

  2. Clique com o botão direito do rato no cabeçalho As minhas tarefas e, em seguida, clique em Inspecionar.

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

  3. Na ferramenta Elementos , selecione o separador Calculado .

    São apresentadas as propriedades CSS que são aplicadas ao elemento selecionado:

    O painel Calculado

    Um nome de propriedade e um valor em itálico indica um valor calculado no runtime.

  4. Para apresentar todas as propriedades, selecione a caixa de verificação Mostrar tudo .

Ver propriedades CSS por ordem alfabética

Utilize o painel Calculado . Veja Ver apenas o CSS que é aplicado a um elemento acima.

Ver propriedades CSS herdadas

Selecione a caixa de verificação Mostrar Tudo no painel Calculado . Veja Ver apenas o CSS que é aplicado a um elemento acima.

Ver regras de CSS

As regras são instruções CSS que lhe permitem controlar o comportamento do CSS.

Na ferramenta Elementos , o separador Estilos mostra as seguintes regras em secções dedicadas:

Ver @property regras

A @property regra em CSS permite-lhe definir propriedades personalizadas CSS de tipos específicos numa folha de estilos.

Paire o cursor sobre o nome de uma propriedade deste tipo no separador Estilos para ver uma descrição que contém:

  • O valor da propriedade, como 20%.
  • Os descritores da propriedade, tais como: initial value: 40%
  • Uma ligação de propriedade Ver registada para o respetivo registo na secção minimizável @property na parte inferior do separador Estilos .

Por exemplo:

  1. Aceda a uma página que utilize a @property regra em, como Ver @property regras, numa nova janela ou separador.

  2. Clique com o botão direito do rato no parágrafo Item três e, em seguida, clique em Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

  3. No separador Estilos , paire o cursor sobre essa var(--itemSize) função:

    Descrição do CSS na propriedade na regra

    A descrição contém:

    • O valor da propriedade, como 100px.
    • Os descritores da propriedade, como o valor inicial.
    • Uma ligação ver propriedade registada .

  4. Clique na ligação Ver propriedade registada .

    É apresentada a secção expandida @property , mais abaixo no separador Estilos :

    --itemSize na secção na propriedade

Para editar uma @property regra, faça duplo clique no respetivo nome ou valor. Consulte Alterar um nome ou valor de declaração, abaixo.

Veja também:

Ver @supports regras

O separador Estilos mostra-lhe as @supports regras do CSS, se forem aplicadas a um elemento.

Por exemplo, para ver a @supports regra:

  1. Numa nova janela ou separador, aceda a uma página que utilize a @supports regra em, como Ver @supports regras.

  2. Clique com o botão direito do rato em "Suporte o espaço para cores do CIE LAB!" e, em seguida, selecione Inspecionar.

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

    Resultado de HTML para a regra at-supports

  • Se o browser suportar a lab() função, o elemento é verde.

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

Para ver que versões do browser suportam o espaço de cores CIE LAB, pesquise Caniuse.com para "laboratório".

Ver @scope regras

O separador Estilos apresenta as regras de CSS @scope se forem aplicadas a um elemento.

As @scope regras em permitem-lhe definir o âmbito dos estilos CSS, ou seja, aplicar explicitamente estilos a elementos específicos. Veja @scope CSS at-rule na MDN.

Para ver a @scope regra:

  1. Numa nova janela ou separador, aceda a uma página que utilize a @scope regra em, como a demonstração Ver @scope em regras :

    Resultado de HTML & CSS para a regra no âmbito

  2. Clique com o botão direito do rato em "Sou o texto que reside num card" e, em seguida, selecione Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

  3. Selecione o separador Estilos .

  4. Examine a @scope regra:

    A regra no âmbito no separador Estilos

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

    Para editar a @scope regra, faça duplo clique na regra:

  5. No separador Estilos , faça duplo clique em ameixa, prima Delete e, em seguida, selecione bege.

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

Ver @font-palette-values regras

A regra CSS @font-palette-values permite-lhe personalizar (substituir) os valores predefinidos da font-palette propriedade. Na ferramenta Elementos , o separador Estilos mostra esta regra numa secção dedicada.

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

  1. Numa nova janela ou separador, aceda a uma página que utilize a @font-palette-values regra em, como a demonstração Ver @font-palette-values em regras .

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

    O DevTools é aberto, com a ferramenta Elementos selecionada.

  3. No separador Estilos , localize a @font-palette-values regra CSS:

    A regra at-font-palette-values no separador Estilos

    Neste exemplo, os valores da --New paleta de tipos de letra substituem os valores predefinidos do tipo de letra colorido.

    Para editar um valor personalizado, faça duplo clique no mesmo, da seguinte forma:

  4. @font-palette-values Na regra CSS, na override-colors propriedade, faça duplo clique em 0 gold, 1 rede introduza 0 blue, 1 red.

    Na página Web inspecionada, as "novas cores" são agora compostas como azuis e vermelhas.

Ver @position-try regras

A @position-try regra CSS juntamente com a position-try-fallbacks propriedade permite-lhe definir posições de âncora alternativas para elementos.

Na ferramenta Elementos , o separador Estilos resolve e liga o seguinte:

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

  • Os position-anchor valores e anchor() argumentos da propriedade ligam-se aos elementos correspondentes que têm popovertarget atributos.

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

  1. Numa nova janela ou separador, aceda a uma página que utilize os position-try-fallbacks valores e @position-try a regra, como a demonstração Ver @position-try regras .

  2. Na página Web composta, abra o submenu; ou seja, clique em A SUA CONTA e, em seguida, clique em FRENTE À LOJA.

    O submenu é apresentado, mostrando uma lista de comandos: LISTAGENS, OFERTAS ESPECIAIS, TERMINAR SESSÃO.

  3. No submenu, clique com o botão direito do rato acima de LISTINGS e, em seguida, selecione Inspecionar.

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

    Resultado de HTML & CSS para a regra at-position-try

  4. No separador Estilos , na #submenu regra CSS, localize a position-try-fallbacks propriedade e clique no respetivo --bottom valor.

    O separador Estilos desloca-se para baixo até à secção correspondente @position-try :

    A secção at-position-try no separador Estilos

  5. No separador Estilos , na #submenu regra CSS, clique na --submenu ligação 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 o separador Estilos mostra o CSS do elemento:

    O elemento de botão selecionado na árvore DOM e o respetivo CSS

Para editar um valor, faça duplo clique no valor.

Veja também:

Ver o modelo de caixa de um elemento

Para ver o modelo de caixa de um elemento, aceda ao painel Estilos e desloque-se para baixo.

Para alterar um valor, faça duplo clique no valor.

Na figura seguinte, o diagrama Modelo de Caixa no painel Estilos mostra o modelo de caixa do elemento atualmente selecionado h1 :

O diagrama do Modelo de Caixa

Veja também:

Procurar e filtrar o CSS de um elemento

Utilize a caixa de texto Filtrar nos painéis Estilos e Calculados para procurar propriedades ou valores CSS específicos.

Para também procurar propriedades herdadas no painel Calculado, marcar a caixa de verificação Mostrar Tudo.

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

Filtrar o painel Estilos

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

Filtrar o painel Calculado

Emular uma página focada

Se mudar o foco da página Web inspecionada para DevTools, alguns elementos de sobreposição ocultam-se automaticamente se forem acionados pelo foco. Por exemplo:

  • Listas pendentes.
  • Menus.
  • Seletores de datas.

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

  • Na ferramenta Elementos , no separador Estilos , clique em :hov (Ativar/Desativar Estado do Elemento) e, em seguida, selecione a caixa de verificação Emular uma página focada .
  • Na ferramenta Composição , selecione a caixa de verificação Emular uma página focada .

Atenção: Quando esta opção está ativada, o document.visibilityState está definido como visible e o visibilitychange evento não é acionado. Veja API de Visibilidade da Página no MDN.

Para tentar emular uma página focada:

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

  2. Clique na caixa de texto de entrada. Em alternativa, prima a Tecla de Tabulação para colocar o foco na caixa de texto de entrada.

    É apresentado outro elemento por baixo da caixa de texto de entrada, a indicar "Esta mensagem só é apresentada quando a caixa de texto está focada".

  3. Clique com o botão direito do rato na caixa de texto de entrada e, em seguida, selecione Inspecionar.

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

  4. Na ferramenta Elementos , no separador Estilos , clique em :hov (Ativar/Desativar Estado do Elemento) e, em seguida, selecione a caixa de verificação Emular uma página focada .

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

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

    Agora, pode inspecionar o elemento de mensagem que se encontra abaixo da caixa de texto de entrada, apesar de as DevTools, em vez da página inspecionada, se concentrarem:

    A caixa de verificação Emular uma página focada selecionada

  6. Limpeza: na ferramenta Elementos , no separador Estilos , clique em :hov (Ativar/Desativar Estado do Elemento) e, em seguida, desmarque a caixa de verificação Emular uma página focada .

Também é apresentada uma caixa de verificação Emular uma página focada na ferramenta composição ; consulte Ferramenta de composição para ver o aspeto de uma página Web com diferentes opções de visualização ou deficiências visuais.

Veja também:

Ativar/desativar uma pseudoclasse

Para ativar/desativar uma pseudoclasse:

  1. Aceda a uma página Web, como a aplicação To Do, numa nova janela ou separador.

  2. Introduza uma tarefa, como a tarefa 1.

  3. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

    O DevTools é aberto.

  4. Selecione a ferramenta Elementos .

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

  6. Selecione o separador Estilos .

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

    As caixas de verificação são apresentadas.

  8. Selecione a caixa de verificação para a pseudoclasse que pretende ativar, tal como :hover:

    Selecionar a pseudoclasse :hover

    Na página Web composta, o círculo junto ao nome da tarefa é preenchido com uma marca de verificação e um X vermelho num círculo vermelho aparece no lado direito da tarefa, como se o elemento estivesse a ser pairado sobre o rato, mesmo que o elemento não esteja realmente a pairar sobre o rato.

O separador Estilos mostra as seguintes pseudo-classes para todos os elementos:

Além disso, alguns elementos podem ter pseudo-classes específicas do elemento. Quando seleciona tal elemento, o separador Estilos mostra uma secção Forçar estado específico do elemento que pode expandir e ativar pseudo-classes específicas do elemento, como uma caixa de verificação :read-write :

A secção Forçar estado do elemento específico de um elemento

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

Ver pseudo-elementos de realce herdados

Os pseudo-elementos permitem-lhe modelar partes específicas dos elementos. Realçar pseudo-elementos são partes do documento com um status "selecionado" e são modelados como "realçados" para indicar esta status ao utilizador.

Por exemplo, tais 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 Introduction to the CSS cascade at MDN (Introdução à cascata do CSS na MDN).

Para compreender melhor a herança e a prioridade das regras, veja o pseudo-elemento de realce herdado na seguinte demonstração.

Para ver os pseudo-elementos de realce herdados:

  1. Aceda à demonstração Realçar pseudo-elementos numa nova janela ou separador.

  2. Selecione uma parte do texto "Herdei o estilo do pseudo-elemento de realce do meu encarregado de educação. Selecione-me!"

    O texto selecionado muda para texto vermelho no fundo amarelo.

  3. Clique com o botão direito do rato no texto "Herdei o estilo do pseudo-elemento de realce do meu encarregado de educação. Selecione-me!" e, em seguida, selecione Inspecionar.

    O DevTools é aberto. Na ferramenta Elementos , no separador Estilos , a secção é apresentada: Herdado de ::selection pseudo of div.text-parent:

    Ver a secção Herdado no separador Estilos

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

    No separador Estilos , a secção é apresentada: Pseudo::selection element:

    Ver a secção Pseudo no separador Estilos

Veja também:

Ver camadas em cascata

As camadas em cascata permitem um controlo mais explícito dos seus ficheiros CSS para evitar conflitos de especificação de estilo. Isto é útil para:

  • Grandes bases de código.
  • Design do sistema.
  • Gerir estilos de terceiros.

Para ver camadas em cascata:

  1. Aceda a uma página Web que utiliza camadas em cascata, como a demonstração camadas em cascata .

  2. Clique com o botão direito do rato no elemento "Os meus estilos estão em camadas!" e, em seguida, selecione Inspecionar.

    O DevTools é aberto.

  3. Na ferramenta Elementos , selecione o separador Estilos .

  4. No separador Estilos , veja as três camadas em cascata e os respetivos estilos: pagee componentbase:

    Camadas em cascata

  5. Para ver a ordem das camadas, clique no nome da camada (página, componente ou base). Em alternativa, clique no botão Ativar/Desativar a vista Camadas CSS botão Ativar/Desativar Camadas CSS.

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

Veja também:

Ver uma página no modo de impressão

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

  1. Aceda a uma página Web.

  2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

    O DevTools é aberto.

  3. Prima Esc uma ou duas vezes para que a barra de ferramentas vista rápida seja apresentada na parte inferior de DevTools.

  4. Na barra de ferramentas Vista Rápida , selecione Mais ferramentas (+).

  5. Selecione a Ferramenta de composição .

    A ferramenta DevTools é aberta no painel Vista Rápida na parte inferior de DevTools.

  6. Na ferramenta Composição , clique na lista pendente Emular tipo de suporte de dados CSS e, em seguida, selecione imprimir.

    A página Web é composta como se estivesse a imprimir.

  7. Quando terminar, na ferramenta Composição , clique na lista pendente Emular tipo de suporte de dados CSS e, em seguida, selecione Sem emulação.

Ver O CSS utilizado e não utilizado com a ferramenta Cobertura

A ferramenta Cobertura mostra-lhe o que o CSS que uma página realmente utiliza.

  1. Abra o Menu de Comandos premindo Ctrl+Shift+P (Windows, Linux) ou Comando+Shift+P (macOS), enquanto as DevTools têm o foco.

  2. Comece a coverageescrever e, em seguida, selecione Mostrar Cobertura:

    Abrir a ferramenta Cobertura a partir do Menu de Comandos

    A ferramenta Cobertura é apresentada:

    A ferramenta Cobertura

  3. Clique em Começar a instrumentar a cobertura e atualize a página (Comece a instrumentar a cobertura e atualize a página). A página é atualizada e a ferramenta Cobertura fornece uma descrição geral da quantidade de CSS (e JavaScript) utilizada a partir de cada ficheiro que o browser carrega. O verde representa o CSS utilizado. Vermelho representa CSS não utilizado.

    Uma descrição geral da quantidade de CSS (e JavaScript) utilizada e não utilizada:

    Uma descrição geral da quantidade de CSS (e JavaScript) utilizada e não utilizada

  4. Para apresentar uma discriminação linha a linha do que o CSS é utilizado, clique num ficheiro CSS.

    Na figura seguinte, 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 utilizadas:

    Uma discriminação linha a linha do CSS utilizado e não utilizado

Forçar modo de pré-visualização

Veja Forçar DevTools no modo de Pré-visualização.

Copiar CSS

A partir de um único menu pendente no separador Estilos , pode copiar regras, declarações, propriedades ou valores CSS separados; veja Noções básicas da sintaxe CSS em O que é o CSS? na MDN.

Além disso, pode copiar propriedades CSS na sintaxe JavaScript. Esta opção é útil se estiver a utilizar bibliotecas CSS-in-JS; veja Edição de estilos para arquiteturas CSS-in-JS.

Para copiar o CSS:

  1. Aceda a uma página Web que utiliza CSS, como a aplicação To Do, numa nova janela ou separador.

  2. Clique com o botão direito do rato na página Web e, em seguida, clique em Inspecionar.

    O DevTools é aberto, com a ferramenta Elementos selecionada.

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

  4. No separador Estilos , numa regra CSS, clique com o botão direito do rato numa propriedade CSS, como text-align: center:

    Menu pendente Copiar CSS

  5. Selecione um menuitem com o botão direito do rato:

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

    • Copiar propriedade. Copia apenas o property nome.

    • Copiar valor. Copia apenas o value.

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

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

    • Copie todas as declarações. Copia todas as propriedades e os respetivos valores na sintaxe CSS: property: value; property: value; ...

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

    • Copie todas as alterações do CSS. Copia as alterações efetuadas no separador Estilos em todas as declarações. Este menuitem é apresentado condicionalmente.

    • Ver valor calculado. Leva-o para o separador Calculado ; veja Ver apenas o CSS que é aplicado a um elemento acima.

Alterar CSS

Esta secção lista todas as formas de alterar o CSS emEstilos de Elementos>.

Além disso, pode:

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

A ordem das declarações afeta a forma como um elemento é modelado. Pode adicionar declarações ao adicionar uma declaração inline ou ao adicionar uma declaração a uma regra de estilo. Estas duas abordagens estão descritas nas secções seguintes.

Adicionar uma declaração CSS inline a um elemento

Adicionar uma declaração inline é equivalente a adicionar um style atributo ao HTML de um elemento. Na maioria dos cenários, é provável que queira utilizar declarações inline.

As declarações inline têm uma maior especificidade do que as declarações externas, pelo que a utilização de declarações inline garante que as alterações produzem efeitos no elemento específico esperado. Para obter mais informações sobre a especificidade, veja Selector Types in Specificity at MDN ( Tipos de Seletor em Especificação na MDN).

Para adicionar uma declaração inline:

  1. Selecione um elemento.

  2. No painel Estilos , clique entre os parênteses retos da secção element.style . O cursor concentra-se, permitindo-lhe introduzir texto.

  3. Introduza um nome de propriedade e prima Enter.

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

Em alternativa, introduza o valor no campo de propriedade e As DevTools irão, em seguida, sugerir uma lista de propriedades correspondentes: pares de valores a selecionar. Por exemplo, se introduzir bold no campo de propriedade, DevTools sugere e font-weight: bolder como as regras possíveisfont-weight: bold. Prima Enter para aplicar a regra.

Na figura seguinte, as margin-top propriedades e background-color foram aplicadas ao elemento selecionado. Na Árvore DOM, as declarações refletem-se no atributo do style elemento.

Adicionar declarações inline

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

Se estiver a depurar os estilos de um elemento e precisar de 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 parênteses retos da regra de estilo à qual pretende adicionar a declaração. O cursor concentra-se, permitindo-lhe introduzir texto.

  3. Introduza um nome de propriedade e prima Enter.

  4. Introduza um valor válido para essa propriedade e prima Enter.

Adicionar 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, faça duplo clique no nome da declaração.

Para alterar o valor de uma declaração CSS, faça duplo clique no valor da declaração. A captura de ecrã seguinte mostra a seleção de um valor de uma lista:

Alterar o valor de uma declaração

Para alterar um valor numérico, escreva o valor ou utilize as teclas de seta, de acordo com a secção seguinte.

Alterar valores enumeráveis com atalhos de teclado

Para alterar um valor numérico de uma declaração CSS, escreva o valor ou utilize as teclas de seta para incrementar o valor por uma quantidade específica. Ao editar um valor enumerável de uma declaração, por exemplo, font-size, pode utilizar os seguintes atalhos de teclado para incrementar o valor por uma quantidade fixa:

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

Para diminuir, prima a tecla Seta Para Baixo (ou Page Down) em vez da tecla Seta Para Cima (ou Page Up).

Alterar valores de comprimento

Pode utilizar o ponteiro para alterar qualquer propriedade que tenha um valor de comprimento, como width, height, padding, marginou border.

Para alterar a unidade de comprimento:

  1. Abra uma página Web que utilize CSS, como a aplicação To Do, numa nova janela ou separador.

  2. Clique com o botão direito do rato no texto Adicionar uma tarefa e, em seguida, selecione Inspecionar.

    O DevTools é aberto e apresenta a ferramenta Elementos . O <label> elemento está selecionado na árvore DOM.

  3. No separador Estilos , na .new-task-form regra CSS, na propriedade , paire o max-width: cursor sobre 50rem.

    É apresentada uma descrição que mostra o valor e as unidades equivalentes: 800px.

  4. Clique no valor 50rem.

    É apresentada uma descrição: "Incrementar/diminuir com teclas de roda do rato ou para cima/baixo. Ctrl: +/-100, Shift: +/-10, Alt: +/-0.1"

  5. Mova a roda do rato ou prima as teclas UpArrow e DownArrow enquanto prime uma tecla:

    Ctrl: incrementar por 100. Shift: incrementar por 10. Alt: incrementar por 0,1.

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

  6. No campo de valor da propriedade de largura máxima, faça o valor 200px (mudando de rem unidades para px unidades).

  7. Mova novamente a roda do rato ou prima as teclas UpArrow e DownArrow enquanto mantém premidas as teclas Ctrl (+/-100), Shift (+/-10) ou Alt (+/-0.1).

    Na página Web inspecionada, a caixa de texto Adicionar uma entrada de tarefa altera a largura à medida que 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. Introduza o nome da classe na caixa de texto Adicionar nova classe .

  4. Pressione Enter.

    O painel Classes de Elementos

Emular preferências de tema claro e escuro e ativar o modo escuro automático

Para ativar/desativar o modo escuro automático ou emular a preferência do utilizador de temas claros ou escuros:

  1. Na ferramenta Elementos , no separador Estilos , clique no botão Alternar emulações de composição comuns (ícone de Pincel) no canto superior direito:

    Ativar/desativar emulações de composição comuns

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

    • prefers-color-scheme: light. Indica que o utilizador prefere o tema claro.

    • prefers-color-scheme: escuro. Indica que o utilizador prefere o tema escuro.

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

Esta lista pendente é um atalho para a funcionalidade prefers-color-schemeEmular multimédia CSS e Ativar as opções automáticas do modo escuro da ferramenta de Composição.

Veja também:

Ativar/desativar uma turma

Para ativar ou desativar uma classe num elemento:

  1. Selecione o elemento na Árvore DOM.

  2. Abra o painel Classes de Elementos . Veja Adicionar uma classe a um elemento. Abaixo das caixas de texto Adicionar Nova Classe estão todas as classes que estão a ser aplicadas a este elemento.

  3. Alterne a caixa de verificação junto à classe que pretende ativar ou desativar.

Adicionar uma regra de estilo

Para adicionar uma nova regra de estilo:

  1. Selecione um elemento.

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

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

    Adicionar uma nova regra de estilo

Selecionar uma folha de estilos para adicionar uma regra a

Por predefinição, ao adicionar uma regra de estilo, a DevTools cria uma nova folha de estilos com o nome inspector-stylesheet no documento e, em seguida, adiciona a nova regra de estilo nesta folha de estilos.

Em vez disso, adicione a regra numa folha de estilos existente:

  • Clique sem soltar em Nova Regra de Estilo (Nova Regra de Estilo) e, em seguida, selecione uma folha de estilos na lista para adicionar a regra de estilo.

Selecionar uma folha de estilos

Adicionar uma regra de estilo a uma localização específica numa folha de estilos

Por predefinição, adicionar uma regra de estilo ao clicar 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 estilos.

Para adicionar uma regra de estilo numa localização específica de uma folha de estilos específica, comece a partir do painel Estilos :

  1. Na ferramenta Elementos , no separador Estilos , paire o cursor sobre a regra de estilo que se encontra diretamente acima do local onde pretende adicionar a nova regra de estilo.

    É apresentado um botão Inserir regra de estilo abaixo (Inserir regra de estilo abaixo do ícone) 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

Ativar/desativar uma declaração

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

  1. Selecione um elemento.

  2. No painel Estilos , paire o cursor sobre a regra que define a declaração. É apresentada uma caixa de verificação junto a cada declaração.

  3. Selecione ou desmarque a caixa de verificação junto à declaração. Quando limpa uma declaração, a DevTools cruza-a para indicar que já não está ativa.

    Na figura seguinte, a margin-top propriedade do elemento atualmente selecionado foi desativada.

    Ativar/desativar uma declaração

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

Confira:

Alinhar os itens de grelha e os respetivos conteúdos com o Editor de Grelha

Confira:

Alterar cores com o Selecionador de Cores

O Selecionador de Cores fornece uma interface de utilizador para alterações color e background-color declarações.

Para abrir o Selecionador de Cores:

  1. Selecione um elemento.

  2. No painel Estilos , localize a colordeclaração , background-colorou semelhante que pretende alterar. À esquerda do colorvalor , background-colorou semelhante, existe um quadrado pequeno, que é uma pré-visualização da cor.

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

    Pré-visualização de cores

  3. Clique na pré-visualização para abrir o Selecionador de Cores.

    O Selecionador de Cores

A seguinte figura e lista descreve cada um dos elementos da IU do Selecionador de Cores.

O Selecionador de Cores, anotado

Texto explicativo Componente Descrição
1 Tons
2 Selecionador de Cores Exemplo de uma cor fora da página com o Selecionador de Cores
3 Copiar para a Área de Transferência Copie o Valor de Apresentação para a área de transferência.
4 Valor de Exibição A representação RGBA, HSLA ou Hexadecima da cor.
5 Paleta de Cores Clique num quadrado para alterar a cor.
6 Matiz
7 Opacidade
8 Comutador de Valores de Apresentação Alternar entre as representações RGBA, HSLA e Hex da cor atual.
9 Comutador de Paleta de Cores Alternar entre a paleta Estrutura do 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 que encontra nas suas folhas de estilo.

Veja também:

  • Color usage and palettes in The color system at material.io: the Material Design palette (Utilização de cores e paletas em O sistema de cores em material.io: a paleta Estrutura do Material).

Exemplo de uma cor fora da página com o Selecionador de Cores

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

  1. Clique no ícone Selecionador de Cores (Selecionador de Cores). O cursor muda para uma lupa.

  2. Paire o cursor sobre o píxel que tem a cor que pretende amostrar, em qualquer parte do ecrã.

  3. Clique para confirmar.

    Na figura seguinte, o Selecionador de Cores mostra um valor de cor atual de rgba(0,0,0,0.7), que está próximo do preto. A cor específica muda para a versão a preto que está atualmente realçada na janela viewport depois de clicar na mesma.

    Utilizar o Selecionador de Cores

Veja também:

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

O Relógio Angular fornece uma interface de utilizador para alterar as quantidades em ângulo nos valores de propriedade CSS.

Para abrir o Relógio angular:

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

  2. No painel Estilos , localize a transform declaração ou background que pretende alterar. Clique na caixa Pré-visualização do Ângulo junto ao valor do ângulo.

    Na figura seguinte, o relógio pequeno à esquerda de 100deg é uma pré-visualização do ângulo.

  3. Clique na pré-visualização para abrir o Relógio angular:

    Pré-visualização em ângulo

  4. Altere o valor do ângulo ao clicar no círculo Do Relógio Angular ou desloque o rato para aumentar ou diminuir o valor do ângulo em 1.

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

Alterar caixas e sombras de texto com o Editor de Sombras

Utilize o Editor Sombra para alterar o valor da box-shadow propriedade ou text-shadow CSS num elemento HTML:

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

    Por exemplo, abra a página de demonstração 1DIV num novo separador ou janela, clique com o botão direito do rato 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 regra CSS, localize a box-shadow declaração e, em seguida, clique no .demos botão Abrir editor sombra (o ícone do botão do editor sombra).

    O Editor sombra é aberto:

    O Editor Sombra

  3. Altere as propriedades da sombra da seguinte forma:

    Propriedade Como alterar
    Tipo Selecione Outset (Início) ou Inset (Início) ou Inset (Início). Apenas para box-shadow.
    Desvio de X Especifique um valor na caixa de texto ou arraste o ponto azul.
    Desvio de Y Especifique um valor na caixa de texto ou arraste o ponto azul.
    Desfoque Especifique um valor na caixa de texto ou arraste o controlo de deslize.
    Propagar Especifique um valor na caixa de texto ou arraste o controlo de deslize. Apenas para box-shadow.

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

    O efeito das alterações efetuadas no Editor sombra

Editar temporizações de animação e transição com o Editor Easing

Utilize o Editor Easing para alterar o valor da propriedade animation-timing-function ou transition-timing-function num elemento HTML.

Para abrir o Editor Easing:

  1. Em 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 num novo separador ou janela, clique com o botão direito do rato na caixa verde que contém uma animação e, em seguida, selecione Inspecionar.

    O DevTools é aberto e apresenta a ferramenta Elementos .

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

    As caixas vermelhas (más) e verdes (boas) nesta página de demonstração são duas animações CSS diferentes. Ambas as animações são executadas com CSS através da animation propriedade CSS e definem uma função ease-in-out de temporização.

  3. No separador Estilos , na .good .spinner regra CSS, na animation declaração, à esquerda de ease-in-out, clique no botão Abrir editor de bezier cúbico (ícone de editor de bezier cúbico).

    O Editor Easing é aberto:

    O Editor Easing

Utilizar predefinições para ajustar as temporizações

Para ajustar as temporizações através de um simples clique com o rato, utilize as predefinições no Editor Easing:

  1. Abra o Editor Easing, conforme descrito em Editar temporizações de animação e transição com o Editor Easing, acima.

  2. Clique num dos quatro botões do seletor:

    Botão Tipo de função palavra-chave CSS
    Funções lineares de facilitação Funções lineares linear
    Funções de facilidade de redução Funções de facilidade de utilização ease-in-out
    Funções de facilidade de facilitação Funções de facilidade ease-in
    Facilitar a facilitação das funções Funções de facilidade ease-out

    Selecionar um botão define um valor de palavra-chave na regra CSS (que varia se selecionar uma variante predefinida no passo seguinte) e o comutador Presets é aberto na parte inferior do Editor de Facilitação.

  3. No comutador Predefinições, clique nos botões Esquerda< ou Direita> para escolher uma das seguintes predefinições:

    • Predefinições lineares: elastic, bounceou emphasized.

    • Predefinições cúbicas de Bezier:

    Temporização palavra-chave Predefinição Bezier 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 In Out, Cubic cubic-bezier(0.65, 0.05, 0.36, 1)
    facilidade de entrada Fast Out, Entrada Lenta cubic-bezier(0.4, 0, 0.2, 1)
    facilidade de entrada In Out, Back cubic-bezier(0.68, -0.55, 0.27, 1.55)
    Temporização palavra-chave Predefinição Bezier Cúbico
    facilidade de entrada In, Sine cubic-bezier(0.47, 0, 0.75, 0.72)
    facilidade de entrada In, Quadratic cubic-bezier(0.55, 0.09, 0.68, 0.53)
    facilidade de entrada In, Cubic cubic-bezier(0.55, 0.06, 0.68, 0.19)
    facilidade de entrada In, Back cubic-bezier(0.6, -0.28, 0.74, 0.05)
    facilidade de entrada Fast Out, Linear In cubic-bezier(0.4, 0, 1, 1)
    Temporização palavra-chave Predefinição Bezier Cúbico
    facilidade de saída Fora, Seno cubic-bezier(0.39, 0.58, 0.57, 1)
    facilidade de saída Fora, Quadrático cubic-bezier(0.25, 0.46, 0.45, 0.94)
    facilidade de saída Fora, Cúbico cubic-bezier(0.22, 0.61, 0.36, 1)
    facilidade de saída Saída Linear, Entrada Lenta cubic-bezier(0, 0, 0.2, 1)
    facilidade de saída Fora, Para Trás cubic-bezier(0.18, 0.89, 0.32, 1.28)

Veja também:

Configurar temporizações personalizadas

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

  • Para funções lineares, clique em qualquer parte da linha para adicionar um ponto de controlo e arraste-o. Para remover um ponto de controlo, faça duplo clique no mesmo.

    Arrastar um ponto de controlo de uma função linear

  • Para funções Cúbicas bezier, arraste um dos pontos de controlo:

    Arrastar os pontos de controlo de uma função Cúbica de Bezier

Qualquer alteração aciona uma animação de bola na Pré-visualização na parte superior do Editor Easing.

Confira também

Demonstrações:

MDN:

GitHub:

Web.dev:

Blogue do Chrome para Programadores:

Documentos do Chrome:

material.io:

Observação

Partes desta página são modificações baseadas no trabalho criado e partilhado pela Google e utilizado de acordo com os termos descritos na Licença Internacional Creative Commons Attribution 4.0. A página original é encontrada aqui e é da autoria de Kayce Bascos.

Licença Creative Commons Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.

  • Last updated on