Acessar e alterar CSS

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Conclua estes tutoriais interativos para aprender os conceitos básicos de visualização e alteração do 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 Elementos do DevTools será aberto.

    Me inspecione.

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

    Elemento destacado.

  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. No painel Elementos > Estilos, encontre a regra de classe aloha.

    O painel Styles lista as regras de CSS que estão sendo aplicadas a qualquer elemento que estiver selecionado na DOM Tree, 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 o painel 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 fundo para mim!

  2. Clique em element.style perto da parte de cima do painel Estilos.

  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 in-line foi aplicada ao elemento.

Adicionar uma declaração CSS ao elemento por meio do painel Styles.

Adicionar uma classe CSS a um elemento

Use o painel Estilos para conferir a aparência de um elemento 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 a mim.

  2. Clique em .cls. O DevTools revela uma caixa de texto onde você pode adicionar classes para o elemento selecionado.

  3. Digite color_me na caixa de texto Add new class e pressione Enter. Uma caixa de seleção vai aparecer 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, também será possível alterná-las aqui.

Aplicando a classe color_me ao elemento.

Adicionar um pseudoestado a uma classe

Use o painel Estilos para aplicar um pseudoestado CSS a um elemento. O DevTools é compatível com :active, :focus, :focus-within, :target, :hover, :visited ou focus-visible.

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

    Passe o mouse sobre mim!

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

  3. No painel Estilos, clique em :hov.

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

Alternar o pseudoestado ao passar o cursor em um elemento.

Mudar as dimensões de um elemento

Use o diagrama interativo Box Model no painel Styles para mudar a largura, altura, padding, margem ou 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. Mostrar barra lateral na barra de ações do painel Estilos. O botão "Mostrar barra lateral".

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

  4. Clique duas vezes na margem esquerda do Box Model. Como o elemento não tem margens, o margin-left tem o valor -.

  5. Digite 100 e pressione Enter. Mudando a margem para a esquerda do elemento.

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