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 o Chrome DevTools.

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

   Inspecione-me!

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 Estilos 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 sua unidade sem espaços na caixa de texto abaixo.

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

Adicionar uma declaração CSS a um elemento

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

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

   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.

   Adicione uma turma para mim.

2. Clique em .cls. As ferramentas do desenvolvedor revelam uma caixa de texto em que você pode adicionar classes ao elemento selecionado.

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

Adicionar um pseudoestado a uma classe

Use a guia Styles 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 do Modelo de caixa na guia Estilos para alterar a largura, a altura, o preenchimento, 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. No momento, o elemento não tem margens, entã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.

Importante:nas declarações de regra na guia Estilos, você pode mudar as propriedades de comprimento e as unidades com o cursor.