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://learn.microsoft.com/_themes/docs.theme/master/en-us/_themes/styles/b66bc881.site-ltr.css:2
, você será levado para a linha 2 de https://learn.microsoft.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.
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.
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
, :hover
ou :visited
:
Na ferramenta Elementos , acesse o painel Estilos .
Clique em :hov.
Selecione a pseudoclasse que você deseja habilitar.
A figura a seguir mostra a agregação da
:hover
pseudoclasse. No modo de exibição, abackground-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:
Abra o Menu de Comando.
Comece a digitar
rendering
e selecione Mostrar Renderização.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.
Abra o Menu de Comando pressionando Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS), enquanto DevTools tem foco.
Comece a digitar
coverage
e selecione Mostrar Cobertura:A ferramenta Cobertura é exibida:
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:
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:
No painel Estilos , clique entre os colchetes da seção element.style . O cursor se concentra, permitindo que você insira texto.
Insira um nome de propriedade e pressione Enter.
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:
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.
Insira um nome de propriedade e pressione Enter.
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:
Selecione o elemento na Árvore DOM.
Clique em .cls.
Insira o nome da classe na caixa de texto Adicionar nova classe .
Pressione Enter.
Alternar uma classe
Para habilitar ou desabilitar uma classe em um elemento:
Selecione o elemento na Árvore DOM.
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.
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:
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:
Passe o mouse sobre a regra de estilo que está diretamente acima de onde você deseja adicionar sua nova regra de estilo.
Clique em Inserir Regra de Estilo abaixo (
).
Alternar uma declaração
Para alternar uma única declaração ativada ou desativada:
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.
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:
No painel Estilos , localize a
color
declaração ,background-color
ou semelhante que você deseja alterar. À esquerda docolor
,background-color
ou 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.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:
Clique no ícone Eyedropper (
). Seu cursor muda para uma lupa.
Passe o mouse no pixel que tem a cor que você deseja experimentar, em qualquer lugar da tela.
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:
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:
Selecione um elemento que inclua uma declaração de ângulo.
No painel Estilos , localize a
transform
declaração oubackground
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.Clique na visualização para abrir o Relógio de Ângulo:
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:
Selecione um elemento com uma
box-shadow
declaração outext-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.No painel Estilos , na
.demos
regra CSS, localize abox-shadow
declaração e clique no botão Abrir editor de sombras ().
O Editor de Sombras é aberto:
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:
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 deease-in-out
tempo.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:
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:
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 Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).
Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.