{"id":12487,"date":"2018-09-11T16:35:41","date_gmt":"2018-09-11T19:35:41","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=12487"},"modified":"2025-04-17T16:25:28","modified_gmt":"2025-04-17T19:25:28","slug":"como-inspecionar-elemento-e-alterar-estilo","status":"publish","type":"post","link":"\/br\/tutoriais\/como-inspecionar-elemento-e-alterar-estilo","title":{"rendered":"Como inspecionar elemento e alterar estilo da p\u00e1gina no Google Chrome"},"content":{"rendered":"<p><span style=\"font-weight: 400\">Voc&ecirc; tem ideia de como inspecionar elemento pode te ajudar no desenvolvimento do seu site? Imagine que voc&ecirc; quer verificar se uma cor, fonte ou outra altera&ccedil;&atilde;o em um site vai ficar agrad&aacute;vel no navegador, mas n&atilde;o quer mudar e testar direto nos arquivos. &Eacute; aqui que voc&ecirc; entende a finalidade do &ldquo;<\/span><b>Inspecionar Elemento&rdquo;<\/b><span style=\"font-weight: 400\">. <\/span><\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Speed-Up-Your-Website-BR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/public\" alt=\"\" class=\"wp-image-30339\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p><span style=\"font-weight: 400\">Se voc&ecirc; entender como usar o inspecionar elemento, ter&aacute; acesso a um mundo de possibilidades para realizar testes r&aacute;pidos sem que isso prejudique a navega&ccedil;&atilde;o dos usu&aacute;rios (voc&ecirc; n&atilde;o quer testar arquivos com o site em funcionamento, n&atilde;o &eacute;?). Este tutorial vai mostrar como <\/span><b>inspecionar elemento Chrome<\/b><span style=\"font-weight: 400\">. <\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-voce-vai-precisar\"><b>O que voc&ecirc; vai precisar <\/b><\/h2><p><span style=\"font-weight: 400\">Antes de come&ccedil;ar, esteja preparado com:<\/span><\/p><ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400\">Um site ativo para testar.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">O navegador Google Chrome instalado.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">Conhecimento b&aacute;sico em <a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-html-conceitos-basicos\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML<\/a>\/<a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-css-guia-basico-de-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS<\/a>.<\/span><\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-1&ordm;-passo-abrir-o-site-e-o-inspecionar-elemento\"><b>1&ordm; Passo &mdash; Abrir o site e o Inspecionar elemento<\/b><\/h2><p>Abra o navegador Google Chrome e insira a URL do site que quer alterar. Vamos usar o <em>www.facebook.com.br<\/em> como exemplo. Posicione o mouse no lugar onde voc&ecirc; quer alterar, clique com o bot&atilde;o direito e clique na op&ccedil;&atilde;o <strong>Inspecionar<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"556\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/facebook.jpg\/public\" alt=\"inspecionar elementos do facebook\" class=\"wp-image-12488\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/facebook.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/facebook.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/facebook.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/facebook.jpg\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/facebook.jpg\/w=990,fit=scale-down 990w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-2&ordm;-passo-selecionar-o-elemento-necessario\"><b>2&ordm; Passo &mdash; Selecionar o Elemento Necess&aacute;rio<\/b><\/h2><p><span style=\"font-weight: 400\">Agora, um elemento necess&aacute;rio deve ser selecionado automaticamente no c&oacute;digo HTML na parte inferior (&agrave;s vezes, o painel Inspecionar &eacute; aberto no lado direito da p&aacute;gina). Voc&ecirc; deve prestar aten&ccedil;&atilde;o na guia Estilos na parte inferior, onde todos os estilos do arquivo CSS s&atilde;o tomados para o objeto que &eacute; selecionado.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-3&ordm;-passo-alterar-o-atributo-do-estilo\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-12489\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2018\/09\/inspecionar-facebook.jpg\" alt=\"inspecionar elementos no facebook\" width=\"1347\" height=\"618\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/inspecionar-facebook.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/inspecionar-facebook.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/inspecionar-facebook.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/inspecionar-facebook.jpg\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/inspecionar-facebook.jpg\/w=990,fit=scale-down 990w\" sizes=\"(max-width: 1347px) 100vw, 1347px\" \/><br><b>3&ordm; Passo &nbsp;&mdash; Alterar o atributo do estilo <\/b><\/h2><p><span style=\"font-weight: 400\">Neste exemplo, o cabe&ccedil;alho da cor do plano de fundo do site ser&aacute; alterado e, em vez da cor anterior (<\/span><span style=\"font-weight: 400\">#1d2129<\/span><span style=\"font-weight: 400\">), testaremos como um cabe&ccedil;alho do Facebook ficar&aacute; na cor VERMELHA. N&oacute;s simplesmente deletamos o valor<\/span><span style=\"font-weight: 400\">#1d2129<\/span><span style=\"font-weight: 400\"> e inserimos o valor vermelho naquele lugar.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1480\" height=\"790\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/inspecionar-facebook.png\/public\" alt=\"inspecionar elementos no facebook\" class=\"wp-image-12508\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/inspecionar-facebook.png\/w=1480,fit=scale-down 1480w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/inspecionar-facebook.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/inspecionar-facebook.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/inspecionar-facebook.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/inspecionar-facebook.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/inspecionar-facebook.png\/w=990,fit=scale-down 990w\" sizes=\"(max-width: 1480px) 100vw, 1480px\" \/><\/figure><\/div><p>Aten&ccedil;&atilde;o: se voc&ecirc; n&atilde;o est&aacute; conseguindo alterar &eacute; porque est&aacute; selecionado os elementos errados.<\/p><h2 class=\"wp-block-heading\" id=\"h-4&ordm;-passo-testar-a-versao-final\"><b>4&ordm; Passo &mdash; Testar a vers&atilde;o final <\/b><\/h2><p><span style=\"font-weight: 400\">Agora voc&ecirc; pode testar como as altera&ccedil;&otilde;es aparecem no site. As altera&ccedil;&otilde;es se aplicam automaticamente e voc&ecirc; n&atilde;o precisa atualizar a p&aacute;gina. Se a p&aacute;gina for atualizada, todas as altera&ccedil;&otilde;es desaparecer&atilde;o e os arquivos do servidor ser&atilde;o carregados novamente. O que achou do site facebook.com com cabe&ccedil;alho vermelho?<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/facebook-vermelho.jpg\/public\" alt=\"alterar cor do facebook \" class=\"wp-image-12492\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/facebook-vermelho.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/facebook-vermelho.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/facebook-vermelho.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/facebook-vermelho.jpg\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/09\/facebook-vermelho.jpg\/w=990,fit=scale-down 990w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><figure class=\"wp-block-image size-large\"><a href=\"\/br\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><b>Conclus&atilde;o<\/b><\/h2><p><span style=\"font-weight: 400\">Esse &eacute; um m&eacute;todo r&aacute;pido para testar as mudan&ccedil;as de estilo de teste no site. Isso tamb&eacute;m permite que um desenvolvedor verifique como as poss&iacute;veis altera&ccedil;&otilde;es aparecem no site sem afetar os arquivos e deixando a vis&atilde;o atual do site para os visitantes. <\/span><\/p><p><span style=\"font-weight: 400\">Voc&ecirc; aprendeu como inspecionar elemento e fazer essas altera&ccedil;&otilde;es no Google Chrome, no entanto, todos os navegadores modernos t&ecirc;m um recurso semelhante. Existem tamb&eacute;m plugins para navegadores que permitem mudan&ccedil;as como essa.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc&ecirc; tem ideia de como inspecionar elemento pode te ajudar no desenvolvimento do seu site? Imagine que voc&ecirc; quer verificar se uma cor, fonte ou outra altera&ccedil;&atilde;o em um site vai ficar agrad&aacute;vel no navegador, mas n&atilde;o quer mudar e testar direto nos arquivos. &Eacute; aqui que voc&ecirc; entende a finalidade do &ldquo;Inspecionar Elemento&rdquo;. Se [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/como-inspecionar-elemento-e-alterar-estilo\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":78,"featured_media":12506,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Veja como inspecionar elemento e alterar elementos visuais do seu site sem precisar fazer isso nos arquivos. Fa\u00e7a sozinho!","rank_math_focus_keyword":"como inspecionar elemento","footnotes":""},"categories":[4941],"tags":[5915,5913,5914],"class_list":["post-12487","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento-web","tag-altera-estilo-da-pagina","tag-como-inspecionar-elementos","tag-inspecionar-elementos"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-inspecionar-elemento-e-alterar-estilo","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/inspeccionar-elemento-chrome","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-inspect-element","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/inspeccionar-elemento-chrome","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/inspeccionar-elemento-chrome","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/inspeccionar-elemento-chrome","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-inspecionar-elemento-e-alterar-estilo","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-inspect-element-using-google-chrome","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/12487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=12487"}],"version-history":[{"count":11,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/12487\/revisions"}],"predecessor-version":[{"id":31359,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/12487\/revisions\/31359"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media\/12506"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=12487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=12487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=12487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}