Introdução à exibição e alteração do CSS

Para aprender as noções básicas de uso do DevTools para exibir e alterar o CSS de uma página, siga as seções interativas do tutorial neste artigo.

Exibir o CSS de um elemento

1. Abra a página de demonstração CSS Examples em uma nova janela ou guia. (Para abrir um link em uma nova janela ou guia, clique com o botão direito do mouse no link. Ou pressione e segure Ctrl (para Windows, Linux) ou Command (para macOS) e clique no link.)

2. Clique com o botão direito do mouse no Inspect Me! texto e selecione Inspecionar.

   No painel Árvore DOM na ferramenta Elementos, o Inspect Me! elemento é realçado:

   

3. Inspect Me! No elemento, localize o valor do atributo e copie-odata-message.

4. Na exibição de página, insira o data-message valor que você copiou na caixa de texto Valor da mensagem de dados .

5. Clique com o botão direito do mouse no Inspect Me! texto e selecione Inspecionar.

6. No DevTools, na ferramenta Elementos , selecione o painel Estilos . O Inspect Me! elemento é realçado no painel Estilos.

7. Inspect Me! No elemento, localize a regra de aloha classe. Essa regra é exibida, porque está sendo aplicada ao Inspect Me! elemento.

8. aloha Na aula, localize o valor do padding estilo e copie-o:

   

9. Na exibição de página, cole o padding valor na caixa de texto Valor do preenchimento .

Adicionar uma declaração CSS a um elemento

Use o painel Estilos quando quiser alterar ou adicionar declarações CSS a um elemento.

1. Primeiro, recomendamos fazer o tutorial anterior Exibir o CSS para um elemento .

2. Abra a página de demonstração CSS Examples em uma nova janela ou guia.

3. Clique com o botão direito do mouse no Add A Background Color To Me! texto e selecione Inspecionar.

4. Clique element.style próximo à parte superior do painel Estilos .

5. Digite-o background-color ou selecione-o na lista suspensa e pressione Enter.

6. Digite-o honeydew ou selecione-o na lista suspensa de cores e pressione Enter. Depois de escolher uma cor, uma declaração de estilo embutido aplicada ao elemento é exibida na Árvore DOM.

   A background-color:honeydew declaração é aplicada ao elemento usando a element.style seção do painel Estilos :

   

Adicionar uma classe CSS a um elemento

Para exibir a aparência de um elemento quando uma classe CSS é aplicada ou removida de um elemento, consulte o painel Estilos .

1. Primeiro, recomendamos fazer o tutorial anterior Exibir o CSS para um elemento .

2. Abra a página de demonstração CSS Examples em uma nova janela ou guia.

3. Clique com o botão direito do mouse no Add A Class To Me! texto e selecione Inspecionar.

4. Clique no botão Classes de elemento (.cls). O DevTools mostra uma caixa de texto em que você pode adicionar classes CSS ao elemento da página que está inspecionando.

5. Digite color_me na caixa de texto Adicionar nova classe e pressione Enter. Uma caixa de seleção aparece abaixo da caixa de texto Adicionar nova classe , onde você pode ativar e desativar a classe. Se o Add A Class To Me! elemento tiver outras classes aplicadas a ele, você também poderá alternar cada classe a partir daqui.

   A color_me classe é aplicada ao elemento usando a seção .cls do painel Estilos :

   

Adicionar um pseudoestado a uma classe

Use o painel Estilos para aplicar permanentemente um pseudoestado CSS a um elemento. O DevTools dá suporte a :active, :focus, :hovere :visited.

1. Primeiro, recomendamos fazer o tutorial anterior Exibir o CSS para um elemento .

2. Abra a página de demonstração CSS Examples em uma nova janela ou guia.

3. Passe o mouse sobre o Hover Over Me! texto. A cor da tela de fundo muda.

4. Clique com o botão direito do mouse no Hover Over Me! texto e selecione Inspecionar.

5. No painel Estilos , clique no botão Alternar estado do elemento (:hov).

6. Marque a caixa de seleção :hover . A cor da tela de fundo muda como na primeira etapa, mesmo que você não esteja realmente passando o mouse sobre o elemento.

   A próxima captura de tela mostra o resultado da alternância :hover do pseudoestado em um elemento.

   

Alterar as dimensões de um elemento

Use o diagrama interativo Modelo de caixa no painel Estilos para alterar a largura, a altura, o preenchimento, a margem ou o comprimento da borda de um elemento.

1. Primeiro, recomendamos fazer o tutorial anterior Exibir o CSS para um elemento .

2. Abra a página de demonstração CSS Examples em uma nova janela ou guia.

3. Clique com o botão direito do mouse no Change My Margin! texto e selecione Inspecionar.

4. No diagrama do Modelo de Caixa no painel Estilos , passe o mouse sobre o preenchimento. O preenchimento do elemento é realçado na viewport.

   Dependendo do tamanho da janela do DevTools, talvez seja necessário rolar até a parte inferior do painel Estilos para exibir o Modelo de Caixa.

5. Clique duas vezes na margem esquerda no Modelo de caixa, que atualmente tem um valor de -. Isso - significa que o elemento não tem um valor para margin-left.

6. Digite 100px e pressione Enter. O padrão do Modelo de Caixa é pixels, mas também aceita outros valores, como 25%, ou 10vw.

   Passando o mouse sobre o preenchimento do elemento:

   

   Alterando a margem esquerda do elemento:

   

Depurar consultas de mídia

As consultas de mídia CSS são uma maneira de fazer seu site reagir a alterações nas definições de configuração de cada usuário. O caso de uso mais comum é dar à sua página um layout CSS diferente, dependendo das dimensões da janela de visualização.

O uso de layouts separados permite um layout de uma coluna para dispositivos móveis e layouts de várias colunas quando há mais espaço disponível na tela.

Para depurar ou testar as consultas de mídia que você definiu em seu CSS:

1. Abra a página de demonstração CSS Examples em uma nova janela ou guia.

2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar.

3. Clique no botão Alternar emulação do dispositivo (). Ou, quando o DevTools estiver em foco, pressione Ctrl+Shift+M (Windows, Linux) ou Command+Shift+M (macOS).

   A barra de ferramentas do dispositivo é aberta na página da Web e a página da Web agora é renderizada no painel Emulação do Dispositivo:

   

4. Com a barra de ferramentas do dispositivo aberta, clique no botão Mais opções () no canto superior direito e selecione Mostrar consultas de mídia:

   

   As barras coloridas acima da página da Web representam as diferentes consultas de mídia.

5. Passe o mouse sobre os limites nas barras para exibir os valores das diferentes consultas de mídia. Clique em cada valor de consulta de mídia para redimensionar a página da Web para corresponder à página.

   

6. Para abrir o arquivo CSS que contém suas consultas de mídia e editar seu código-fonte, clique com o botão direito do mouse em uma das barras coloridas e selecione Revelar no código-fonte. A ferramenta Fontes é exibida e a consulta de mídia correspondente é realçada no arquivo CSS:

   

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