{"id":245113,"date":"2022-04-06T13:48:00","date_gmt":"2022-04-06T10:48:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=245113"},"modified":"2021-10-28T02:32:40","modified_gmt":"2021-10-27T23:32:40","slug":"o-que-e-css-e-como-isso-afeta-o-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/o-que-e-css-e-como-isso-afeta-o-wordpress\/","title":{"rendered":"O que \u00e9 CSS e como isso afeta o WordPress?"},"content":{"rendered":"<p>Se voc\u00ea tem um site WordPress, provavelmente encontrar\u00e1 o termo &#8220;CSS&quot;. Neste artigo, voc\u00ea aprender\u00e1 o que \u00e9 CSS e como isso afeta o seu site.<\/p>\n<p>Esta \u00e9 uma vis\u00e3o geral r\u00e1pida para que voc\u00ea n\u00e3o aprenda a escrever CSS, mas entenda seu lugar na web e em seu site.<\/p>\n<h2>O que \u00e9 CSS?<\/h2>\n<p>CSS \u00e9 usado para estilizar p\u00e1ginas da web. Ele foi escrito exclusivamente para alterar a apresenta\u00e7\u00e3o de um site.<\/p>\n<p>D\u00ea uma olhada nesta captura de tela da IMDb.com:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178680-616f4541847be.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178680-616f4541847be.png\" alt=\"O que \u00e9 CSS e como isso afeta o WordPress?\" ><\/a><\/p>\n<p>Captura de tela 1: IMDb<\/p>\n<p>Agora compare isso com esta imagem do IMDb com o CSS desativado:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178680-616f4543a46b0.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178680-616f4543a46b0.png\" alt=\"O que \u00e9 CSS e como isso afeta o WordPress?\" ><\/a><\/p>\n<p>Captura de tela 2: IMDb &#8211; Sem CSS<\/p>\n<p>N\u00e3o \u00e9 t\u00e3o bonito, certo?<\/p>\n<p>O conte\u00fado &#8211; as palavras, links, etc. &#8211; \u00e9 exatamente o mesmo em ambos os exemplos. A diferen\u00e7a \u00e9 a \u00f3bvia aus\u00eancia de estilo.<\/p>\n<p>O que voc\u00ea pode ver na captura de tela 2 \u00e9 uma lista de links que normalmente teriam o estilo de um menu.<\/p>\n<p>Quando eu disse que CSS \u00e9 usado para estilizar p\u00e1ginas da web, quero dizer que \u00e9 A maneira como as p\u00e1ginas da web s\u00e3o estilizadas. Sem ele, todos os sites se pareceriam com a captura de tela acima. Isso levanta a quest\u00e3o, o que estamos vendo nessa imagem?<\/p>\n<h3>Constru\u00eddo com HTML, estilizado com CSS<\/h3>\n<p>Para entender o lugar do CSS na web, voc\u00ea precisa saber mais sobre HTML.<\/p>\n<p>Esta \u00e9 a apar\u00eancia do HTML bruto para a mesma parte da p\u00e1gina inicial do IMDb:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178680-616f454571710.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-178680-616f454571710.png\" alt=\"O que \u00e9 CSS e como isso afeta o WordPress?\" ><\/a><\/p>\n<p>Captura de tela 3: IMDb &#8211; HTML<\/p>\n<p>Na captura de tela 3, voc\u00ea v\u00ea o HTML, que geralmente \u00e9 chamado de &#8220;c\u00f3digo-fonte&#8221;. \u00c9 disso que os sites s\u00e3o feitos. \u00c9 o que o seu navegador l\u00ea e o que o Googlebot v\u00ea ao rastrear o seu site.<\/p>\n<p>Quando voc\u00ea visita uma p\u00e1gina da web, seu navegador pega o HTML bruto (captura de tela 3) e renderiza uma p\u00e1gina da web utiliz\u00e1vel (captura de tela 2). Se houver arquivos CSS, eles s\u00e3o carregados e usados \u200b\u200bpara estilizar a p\u00e1gina da web (captura de tela 1).<\/p>\n<h2>CSS com WordPress<\/h2>\n<p>Em resumo, os sites s\u00e3o feitos com HTML e estilizados com CSS. Seu site WordPress n\u00e3o \u00e9 diferente.<\/p>\n<p>Na pr\u00e1tica, \u00e9 \u00fatil saber que HTML \u00e9 usado para adicionar conte\u00fado a uma p\u00e1gina e CSS \u00e9 sempre usado para estiliz\u00e1-la. Quaisquer mudan\u00e7as de estilo que voc\u00ea queira fazer em seu site &#8211; aumentar o tamanho do logotipo, mudar a cor do fundo, etc. &#8211; ser\u00e3o feitas com CSS.<\/p>\n<p>Espero que voc\u00ea tenha achado isso \u00fatil para compreender o CSS e seu lugar no seu site. Se voc\u00ea tiver alguma d\u00favida, poste nos coment\u00e1rios abaixo.<\/p>\n<p><strong>Divulga\u00e7\u00e3o:<\/strong> esta postagem pode conter links afiliados. A compra de um produto por meio de um desses links gera uma comiss\u00e3o para n\u00f3s, sem nenhuma despesa adicional para voc\u00ea.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.competethemes.com\" class=\"external external_icon\">www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea dirige um site WordPress, voc\u00ea encontrar\u00e1 o termo &#8220;CSS&#8221;. Nesta postagem, voc\u00ea aprender\u00e1 o que \u00e9 CSS e como isso afeta seu site.<\/p>\n","protected":false},"author":1,"featured_media":261699,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[553],"tags":[848],"class_list":["post-245113","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-personalizar-wordpress-2","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/245113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=245113"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/245113\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/261699"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=245113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=245113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=245113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}