Uma r\u00e1pida introdu\u00e7\u00e3o ao CSS<\/h2>\n
Se voc\u00ea j\u00e1 est\u00e1 familiarizado com CSS, n\u00e3o quero incomod\u00e1-lo com uma longa vis\u00e3o geral. Se voc\u00ea nunca trabalhou com CSS ou se n\u00e3o tem certeza do que \u00e9 CSS, verifique primeiro nosso artigo sobre o assunto:<\/p>\n
O que \u00e9 CSS e como isso afeta o WordPress?<\/a><\/p>\n Isso ir\u00e1 cobrir os fundamentos de porque CSS \u00e9 usado para estilizar sites e como ele \u00e9 aplicado.<\/p>\n H\u00e1 um grande erro que os usu\u00e1rios do WordPress que s\u00e3o novos no CSS cometem:<\/p>\n Eles personalizam os arquivos de tema.<\/p>\n Por exemplo, algu\u00e9m que usa o tema Challenger pode colocar suas edi\u00e7\u00f5es CSS diretamente no arquivo style.css acessado no menu Apar\u00eancia> Editor.<\/p>\n O WordPress agora inclui um aviso avisando para voc\u00ea n\u00e3o editar aqui<\/p>\n O problema com a edi\u00e7\u00e3o do arquivo style.css \u00e9 que voc\u00ea perder\u00e1 todas as suas altera\u00e7\u00f5es se atualizar para uma nova vers\u00e3o do Challenger. Acredite em mim, perder altera\u00e7\u00f5es de c\u00f3digo que demoram muito para fazer pode ser incrivelmente desanimador.<\/p>\n Existe uma maneira melhor de adicionar CSS ao seu site, onde ele nunca ser\u00e1 sobrescrito. Al\u00e9m disso, esse c\u00f3digo \u00e9 adicionado ao seu site de uma forma que torna mais f\u00e1cil substituir os estilos do tema.<\/p>\n Para adicionar CSS ao seu site, voc\u00ea deseja abrir o Customizador (Apar\u00eancia> Personalizar) e clicar na se\u00e7\u00e3o CSS Adicional.<\/p>\n Geralmente \u00e9 a \u00faltima se\u00e7\u00e3o do Customizador<\/p>\n Se voc\u00ea abrir esta se\u00e7\u00e3o, ver\u00e1 uma \u00e1rea de texto onde pode adicionar seu c\u00f3digo. O WordPress incluir\u00e1 algumas dicas aqui, mas voc\u00ea pode clicar no link Fechar para remov\u00ea-lo e mostrar apenas a entrada do c\u00f3digo.<\/p>\n Voc\u00ea pode inserir e salvar qualquer CSS que deseja adicionar aqui.<\/p>\n O c\u00f3digo adicionado aqui atualizar\u00e1 a apar\u00eancia do site imediatamente na visualiza\u00e7\u00e3o. Quando estiver satisfeito com suas altera\u00e7\u00f5es, voc\u00ea pode salvar suas edi\u00e7\u00f5es.<\/p>\n O b\u00f4nus adicional de colocar CSS aqui \u00e9 que voc\u00ea pode assistir as atualiza\u00e7\u00f5es ao vivo, para que possa testar c\u00f3digos diferentes rapidamente para descobrir do que voc\u00ea gosta.<\/p>\n Agora que voc\u00ea deu uma olhada em como adicionar CSS com seguran\u00e7a ao seu site, vamos abordar o b\u00e1sico para escrever CSS!<\/p>\n Dica profissional:<\/strong> n\u00e3o se preocupe em quebrar seu site. Se voc\u00ea fizer uma edi\u00e7\u00e3o incorreta, pode simplesmente excluir o CSS adicionado. \u00c9 imposs\u00edvel quebrar totalmente o seu site ou perder o acesso ao menu de administra\u00e7\u00e3o adicionando CSS desta forma.<\/p>\n Se voc\u00ea j\u00e1 escreveu CSS, sabe que a primeira etapa \u00e9 escolher um seletor para informar ao navegador qual elemento do site voc\u00ea est\u00e1 almejando. Na captura de tela acima, estou direcionando todos os elementos que possuem a classe "t\u00edtulo do site".<\/p>\n Se voc\u00ea n\u00e3o tem certeza de como usar seletores CSS, verifique esta \u00f3tima introdu\u00e7\u00e3o aos seletores CSS do SitePoint<\/a>.<\/p>\n Agora \u00e9 o seguinte …<\/p>\n At\u00e9 mesmo muitos usu\u00e1rios experientes do WordPress acham os seletores errados. Eles verificam o arquivo style.css para encontrar um seletor j\u00e1 usado pelo tema. Isso \u00e9 entediante e voc\u00ea pode nem mesmo encontrar um seletor adequado para fazer sua personaliza\u00e7\u00e3o.<\/p>\n Deixe-me oferecer um processo muito mais produtivo.<\/p>\n Ao escrever CSS, voc\u00ea primeiro precisa de um seletor para informar ao navegador qual elemento voc\u00ea deseja editar. Embora voc\u00ea possa verificar a folha de estilo em seu tema, \u00e9 muito mais f\u00e1cil simplesmente usar as ferramentas de desenvolvedor da web do navegador para localiz\u00e1-los.<\/p>\n Aqui est\u00e1 um exemplo do que quero dizer:<\/p>\n Esta \u00e9 uma captura de tela do Chrome com suas ferramentas de desenvolvedor abertas<\/p>\n Voc\u00ea pode ver as classes e IDs de cada elemento nas ferramentas abertas do desenvolvedor. Voc\u00ea pode ent\u00e3o usar qualquer combina\u00e7\u00e3o de classes e IDs dispon\u00edveis para escrever seus pr\u00f3prios seletores personalizados.<\/p>\n Eu entro em detalhes muito mais detalhados desse processo neste tutorial:<\/p>\n Como Encontrar Seletores CSS em Sites WordPress<\/a><\/p>\n Voc\u00ea aprender\u00e1 como acessar as ferramentas de desenvolvedor do seu navegador, como navegar no HTML e como encontrar os seletores CSS de que precisa.<\/p>\n Agora que voc\u00ea tem uma maneira muito mais r\u00e1pida de obter qualquer seletor que deseja e sabe como adicionar c\u00f3digo \u00e0 se\u00e7\u00e3o CSS adicional no Customizador, a \u00fanica coisa que resta \u00e9 escolher as propriedades que deseja alterar.<\/p>\n Por exemplo, se voc\u00ea quiser direcionar o t\u00edtulo do site no Challenger<\/a> e aumentar a fonte, poder\u00e1 fazer isso com a Se voc\u00ea n\u00e3o est\u00e1 familiarizado com CSS, voc\u00ea achar\u00e1 esta lista de propriedades CSS<\/a> especialmente \u00fatil. Voc\u00ea pode pesquisar nessa lista a qualidade que deseja editar (cor de fundo, tamanho da fonte, bordas, etc.).<\/p>\n Novato ou mestre em CSS, tenho algo que acho que voc\u00ea vai gostar …<\/p>\n Se voc\u00ea usar qualquer um de nossos temas, vai adorar as bibliotecas de snippet CSS pr\u00e9-escritas que constru\u00edmos. Por exemplo, a cole\u00e7\u00e3o Tracks CSS Snippets<\/a> tem dezenas de snippets que voc\u00ea pode copiar e colar na se\u00e7\u00e3o CSS adicional para personalizar seu site:<\/p>\n Isso torna muito f\u00e1cil personalizar seu site com CSS, mesmo que voc\u00ea nunca tenha escrito CSS antes. Voc\u00ea pode simplesmente copiar e colar qualquer snippet que desejar e, em seguida, alterar o valor para o que quiser.<\/p>\n Para encontrar os snippets CSS para o seu tema, visite a Central de suporte<\/a> e selecione o tema que voc\u00ea est\u00e1 usando. Em seguida, clique no bot\u00e3o Exibir snippets CSS na parte inferior da barra lateral:<\/p>\nComo adicionar CSS ao seu site WordPress<\/h2>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30ef54275.png\")
<\/a><\/p>\nUma maneira melhor<\/h3>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f1ef9b5.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f51b5a7.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f8085f9.png\")
<\/a><\/p>\nComo encontrar seletores CSS<\/h2>\n
Como os profissionais do WP encontram seletores CSS<\/h3>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fa8a74f.png\")
<\/a><\/p>\nPropriedades e valores CSS<\/h2>\n
font-size<\/code>propriedade. Essa declara\u00e7\u00e3o CSS pode ter a seguinte apar\u00eancia:<\/p>\n.site-title {\n font-size: 32px;\n}<\/code><\/pre>\nCSS pr\u00e9-escrito GRATUITO para nossos usu\u00e1rios<\/h2>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fcb5c0b.png\")
<\/a><\/p>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fec389d.png\")
<\/a><\/p>\n