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

Para saber as noções básicas da utilização do DevTools para ver e alterar o CSS de uma página, siga as secções interativas deste artigo.

Ver o CSS de um elemento

1. Abra a página de demonstração CSS Examples numa nova janela ou separador. (Para abrir uma ligação numa nova janela ou separador, clique com o botão direito do rato na ligação. Em alternativa, prima sem soltar Ctrl (para Windows, Linux) ou Comando (para macOS) e, em seguida, clique na ligação.)

2. Clique com o botão direito do rato no Inspect Me! texto e, em seguida, selecione Inspecionar.

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

   

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

4. Na vista de página, introduza o data-message valor que copiou na caixa de texto Valor da mensagem de dados .

5. Clique com o botão direito do rato no Inspect Me! texto e, em seguida, selecione Inspecionar.

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

7. Inspect Me! No elemento , localize a regra de aloha classe. Esta regra é apresentada porque está a ser aplicada ao Inspect Me! elemento .

8. aloha Na classe , localize o valor do estilo e copie-opadding:

   

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

Adicionar uma declaração CSS a um elemento

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

1. Em primeiro lugar, recomendamos que faça o tutorial Ver o CSS anterior para um elemento .

2. Abra a página de demonstração CSS Examples numa nova janela ou separador.

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

4. Clique element.style junto à parte superior do painel Estilos .

5. Escreva background-color ou selecione-o na lista pendente e, em seguida, prima Enter.

6. Escreva honeydew ou selecione-o na lista pendente de cores e, em seguida, prima Enter. Depois de escolher uma cor, é apresentada uma declaração de estilo inline aplicada ao elemento na Árvore DOM.

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

   

Adicionar uma classe CSS a um elemento

Para apresentar o aspeto de um elemento quando uma classe CSS é aplicada ou removida de um elemento, veja o painel Estilos .

1. Em primeiro lugar, recomendamos que faça o tutorial Ver o CSS anterior para um elemento .

2. Abra a página de demonstração CSS Examples numa nova janela ou separador.

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

4. Clique no botão Classes de Elementos (.cls). DevTools mostra uma caixa de texto onde pode adicionar classes CSS ao elemento de página que está a inspecionar.

5. Escreva color_me na caixa de texto Adicionar nova classe e, em seguida, prima Enter. É apresentada uma caixa de verificação abaixo da caixa de texto Adicionar nova classe , onde pode ativar e desativar a classe. Se o Add A Class To Me! elemento tiver outras classes aplicadas, também pode alternar cada classe a partir daqui.

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

   

Adicionar um pseudoestado a uma classe

Utilize o painel Estilos para aplicar permanentemente um pseudoestado CSS a um elemento. O DevTools suporta :active, :focus, e :hover:visited.

1. Em primeiro lugar, recomendamos que faça o tutorial Ver o CSS anterior para um elemento .

2. Abra a página de demonstração CSS Examples numa nova janela ou separador.

3. Paire o cursor sobre o Hover Over Me! texto. A cor de fundo muda.

4. Clique com o botão direito do rato no Hover Over Me! texto e, em seguida, selecione Inspecionar.

5. No painel Estilos , clique no botão Ativar/Desativar Estado do Elemento (:hov).

6. Selecione a caixa de verificação :hover . A cor de fundo muda tal como no primeiro passo, mesmo que não esteja realmente a pairar sobre o elemento.

   A captura de ecrã seguinte mostra o resultado da agregação do :hover pseudoestado num elemento.

   

Alterar as dimensões de um elemento

Utilize o diagrama interativo Modelo de Caixa no painel Estilos para alterar a largura, altura, preenchimento, margem ou comprimento do limite de um elemento.

1. Em primeiro lugar, recomendamos que faça o tutorial Ver o CSS anterior para um elemento .

2. Abra a página de demonstração CSS Examples numa nova janela ou separador.

3. Clique com o botão direito do rato no Change My Margin! texto e, em seguida, selecione Inspecionar.

4. No diagrama Modelo de Caixa no painel Estilos , paire o cursor sobre o preenchimento. O preenchimento do elemento está realçado na janela viewport.

   Consoante o tamanho da janela DevTools, poderá ter de se deslocar para a parte inferior do painel Estilos para apresentar o Modelo de Caixa.

5. Faça duplo clique na margem esquerda no Modelo de Caixa, que tem atualmente um valor de -. Significa - que o elemento não tem um valor para margin-left.

6. Escreva 100px e prima Enter. O Modelo de Caixa é predefinido para píxeis, mas também aceita outros valores, como 25%, ou 10vw.

   Pairar o cursor sobre o preenchimento do elemento:

   

   Alterar a margem esquerda do elemento:

   

Depurar consultas de multimédia

As consultas de multimédia CSS são uma forma de fazer com que o seu site reaja às alterações nas definições de configuração de cada utilizador. O caso de utilização mais comum é dar à sua página um esquema CSS diferente consoante as dimensões da janela viewport.

A utilização de esquemas separados permite um esquema de uma coluna para dispositivos móveis e esquemas de várias colunas quando existem mais imóveis de ecrã disponíveis.

Para depurar ou testar as consultas de multimédia que definiu no CSS:

1. Abra a página de demonstração CSS Examples numa nova janela ou separador.

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

3. Clique no botão Ativar/Desativar emulação do dispositivo (). Em alternativa, quando o DevTools tiver foco, prima Ctrl+Shift+M (Windows, Linux) ou Comando+Shift+M (macOS).

   A barra de ferramentas do dispositivo é aberta na página Web e a página Web é agora composta 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, em seguida, selecione Mostrar consultas multimédia:

   

   As barras coloridas acima da página Web representam as diferentes consultas multimédia.

5. Paire o cursor sobre os limites nas barras para apresentar os valores das diferentes consultas de multimédia. Clique em cada valor de consulta de multimédia para redimensionar a página Web para corresponder.

   

6. Para abrir o ficheiro CSS que contém as suas consultas multimédia e editar o respetivo código fonte, clique com o botão direito do rato numa das barras coloridas e, em seguida, selecione Revelar no código fonte. A ferramenta Origens é apresentada e a consulta de multimédia correspondente está realçada no ficheiro CSS:

   

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. 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.