Acessar e alterar CSS

Kayce Basques

Sofia Emelianova

Conclua estes tutoriais interativos para aprender o básico sobre como visualizar e alterar o CSS de uma página usando as Chrome DevTools.

Conferir o CSS de um elemento

1. Clique com o botão direito do mouse no texto Inspect me! abaixo e selecione Inspecionar. O painel Elements do DevTools é aberto.

   Vamos inspecionar!

2. Observe o elemento Inspect me! destacado em azul na árvore DOM.

   

3. Na árvore DOM, encontre o valor do atributo data-message para o elemento Inspect me!.

4. Insira o valor do atributo na caixa de texto abaixo.

5. Na guia Elements > Styles, encontre a regra de classe aloha.

   A guia Styles lista as regras de CSS que estão sendo aplicadas a qualquer elemento selecionado na árvore DOM, que ainda deve ser o elemento Inspect me!.

6. A classe aloha está declarando um valor para padding. Insira esse valor e a unidade sem espaços na caixa de texto abaixo.

Se você quiser fixar a janela do DevTools à direita da janela de visualização, como na captura de tela da primeira etapa, consulte Mudar a posição do DevTools.

Adicionar uma declaração CSS a um elemento

Use a guia Estilos quando quiser mudar ou adicionar declarações de CSS a um elemento.

1. Clique com o botão direito do mouse no texto Add a background color to me! abaixo e selecione Inspecionar.

   Adicione uma cor de plano de fundo a mim.

2. Clique em element.style na parte de cima da guia Estilo.

3. Digite background-color e pressione Enter.

4. Digite honeydew e pressione Enter. Na árvore do DOM, é possível ver que uma declaração de estilo inline foi aplicada ao elemento.

Adicionar uma classe CSS a um elemento

Use a guia Styles para conferir como um elemento fica quando uma classe CSS é aplicada ou removida dele.

1. Clique com o botão direito do mouse no elemento Add a class to me! abaixo e selecione Inspecionar.

   Adicionar uma turma a mim

2. Clique em .cls. O DevTools mostra uma caixa de texto em que você pode adicionar classes ao elemento selecionado.

3. Digite color_me na caixa de texto Adicionar nova turma e pressione Enter. Uma caixa de seleção aparece abaixo da caixa de texto Add new class, onde você pode ativar e desativar a classe. Se o elemento Add a class to me! tiver outras classes aplicadas, você também poderá ativar e desativar essas classes.

Adicionar um pseudoestado a uma classe

Use a guia Estilos para aplicar um pseudoestado CSS a um elemento.

1. Passe o cursor sobre o texto Hover over me! abaixo. A cor do plano de fundo muda.

   Passe o cursor sobre mim!

2. Clique com o botão direito do mouse no texto Hover over me! e selecione Inspecionar.

3. Na guia Estilos, clique em :hov.

4. Marque a caixa de seleção :hover. A cor de plano de fundo muda como antes, mesmo que você não esteja passando o cursor sobre o elemento.

Para mais informações, consulte Alternar uma pseudoclasse.

Mudar as dimensões de um elemento

Use o diagrama interativo Modelo de caixa na guia Styles para mudar a largura, a altura, o padding, a margem ou o comprimento da borda de um elemento.

1. Clique com o botão direito do mouse no elemento Change my margin! abaixo e selecione Inspecionar.

   Mudar minha margem.

2. Para conferir o modelo de caixa, clique no botão Mostrar barra lateral na barra de ações da guia Estilos.

3. No diagrama Modelo de caixa na guia Estilos, passe o cursor sobre padding. O padding do elemento é destacado na janela de visualização.

4. Clique duas vezes na margem esquerda no modelo de caixa. O elemento não tem margens no momento, então o margin-left tem um valor de -.

5. Digite 100 e pressione Enter.

O modelo de caixa usa pixels como padrão, mas também aceita outros valores, como 25% ou 10vw.