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.

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.

Na figura seguinte, 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 () 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 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 (), na parte inferior do painel Editor . Para obter mais informações, veja Reformatar um ficheiro JavaScript minificado com bastante impressão.

Na figura seguinte, depois de clicar https://learn.microsoft.com/_themes/docs.theme/master/en-us/_themes/styles/b66bc881.site-ltr.css:2 , é levado para a linha 2 de https://learn.microsoft.com/_themes/docs.theme/master/_themes/styles/b66bc881.site-ltr.css, em que a .content h1:first-of-type regra CSS está definida.

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.

1. Selecione um elemento.

2. Aceda ao painel Computação na ferramenta Elementos .

   Numa janela de DevTools larga, o painel Calculado não existe. Os conteúdos do painel Calculado são apresentados no painel Estilos .

   As propriedades herdadas são opacas.

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

   Na figura seguinte, o painel Calculado mostra as propriedades CSS que estão a ser aplicadas ao elemento atualmente selecionado h1 :

   

Ver propriedades CSS por ordem alfabética

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

Ver propriedades CSS herdadas

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

Ver o modelo de caixa de um elemento

Para ver o modelo de caixa de um elemento, aceda ao painel Estilos . Se a janela DevTools for estreita, o diagrama modelo de caixa está na parte inferior do painel.

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

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

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.

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

Ativar/desativar uma pseudoclasse

Para ativar/desativar uma pseudoclasse, como :active, :focus, :hoverou :visited:

1. Selecione um elemento.

2. Na ferramenta Elementos , aceda ao painel Estilos .

3. Clique em :hov.

4. Selecione a pseudoclasse que pretende ativar.

   A figura seguinte mostra a alternar a :hover pseudoclasse. Na janela viewport, a background-color: cornflowerblue declaração é aplicada ao elemento, mesmo que o elemento não esteja realmente a ser pairado sobre o rato.

   

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

Ver uma página no modo de impressão

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

1. Abra o Menu de Comandos.

2. Comece a renderingescrever e, em seguida, selecione Mostrar Composição.

3. Clique na lista pendente Emular Multimédia CSS e, em seguida, selecione imprimir.

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 ao premir Ctrl+Shift+P (Windows, Linux) ou Comando+Shift+P (macOS), enquanto o DevTools tem o foco.

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

   

   A ferramenta Cobertura é apresentada:

   

3. Clique em Começar 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:

   

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:

   

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

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

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 Tipos de Seletor.

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

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:

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

Incrementar valores de declaração numérica

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:

Atalho de teclado	Incrementos por
Alt+Seta Para Cima (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+Comando+Seta Para Cima (macOS)	100

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

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.

   

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 (). 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.

   

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 () e, em seguida, selecione uma folha de estilos na lista para adicionar a regra de estilo.

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

Por predefinição, adicionar uma regra de estilo ao clicar 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 numa localização específica do painel Estilos :

1. Paire o cursor sobre a regra de estilo que está diretamente acima do local onde pretende adicionar a nova regra de estilo.

2. Clique em 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.

   

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.

   

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

   

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

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.

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 (). 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.

   

Veja também:

• Testar o contraste de cor do texto com o Seletor de Cores

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:

   

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 Editor sombra é aberto:

   

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.
   Espalhar	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:

   

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:

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

   Por exemplo, abra a página de demonstração de propriedade animada 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 , prima Ctrl+F e localize "spinner" e, em seguida, selecione o <div class="spinner"> elemento.

   As caixas vermelhas e verdes 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.

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

   O Editor Easing é aberto:

   

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

   • Escolha uma das funções de temporização predefinidas da lista.
   • Crie a sua própria função de temporização ao arrastar as alças da curva cúbica-bezier.

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

   

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.

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