--- title: "Trechos de CSS" slug: "css-snippets-1" updated: 2026-06-26T09:07:29Z published: 2026-06-26T09:09:43Z canonical: "docs.document360.com/css-snippets-1" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Trechos de CSS Trechos de CSS são blocos pré-escritos de código CSS que você pode inserir diretamente no editor Custom CSS no Document360 com um único clique. Em vez de escrever CSS do zero, você seleciona o trecho que precisa, insere no editor e modifica os valores para corresponder aos seus requisitos. O Document360 fornece sete trechos pré-carregados cobrindo as customizações de sites mais comuns na base de conhecimento. --- ## Quando usar trechos de CSS Use trechos de CSS quando quiser fazer uma mudança visual comum no site da sua base de conhecimento rapidamente, sem escrever CSS do zero: - **Mude a tipografia** – atualize a fonte do corpo ou do título em todos os artigos para corresponder às diretrizes da sua marca. - **Personalize estilos de tabela** – aplique bordas, cores de fundo e preenchimento consistentes em todas as tabelas da sua base de conhecimento. - **Alinhar imagens** - centralizar imagens no conteúdo do artigo em todo o site usando um único trecho. - **Modificar as cores dos callouts** - altere as cores do fundo e das bordas dos callouts de Informação, Aviso, Erro e Sucesso para combinar com a paleta da sua marca. - **Mude o fundo do herói da página inicial** - atualize a cor ou o gradiente do fundo da seção do herói usando CSS. - **Desative o botão de voltar para cima** - esconda o botão flutuante para voltar para cima se ele conflitar com o design do seu site. NOTA Trechos de CSS são um atalho para as personalizações mais comuns. Para mudanças não cobertas pelos trechos pré-carregados, você pode escrever seu próprio CSS diretamente no editor de código. Veja [CSS personalizado](/help/docs/pt/custom-css) para orientação. --- ## Como acessar trechos de CSS 1. Navegue até Configurações () > Site da base de conhecimento na barra de navegação esquerda do portal da base de conhecimento. 2. No painel de navegação à esquerda, navegue até **Personalização do Site**. ![Site customization page showing the Custom CSS and JavaScript option in the left navigation pane](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1770890215248.png) 1. **Clique em CSS & JavaScript Personalizados**. 2. Selecione a aba **CSS** . 3. Clique **em Adicionar trechos de código** no canto superior direito do editor de código. O painel de fragmentos aparece. ![Add code snippets panel showing all seven pre-loaded CSS snippet options](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site-Customization-Using-CSS-snippets.png) O painel contém sete trechos pré-carregados: | Trecho | O que ele faz | | --- | --- | | **Alterar a fonte do texto do corpo** | Atualiza a família de fontes e a cor do conteúdo do corpo do artigo | | **Alterar fonte de cabeçalho** | Atualiza a família de fontes e a cor das tags de cabeçalhos H1–H4 | | **Alterar estilos de tabela** | Aplica bordas, preenchimento de cores, cores de fundo e cores alternadas de linhas nas tabelas | | **Imagens de alinhamento ao centro em artigos** | Centraliza todas as imagens no conteúdo do artigo | | **Alterar o background da seção de heróis do construtor de página inicial** | Muda o estilo de fundo da seção de heróis da página inicial | | **Mude as cores do chamado** | Atualiza as cores de fundo e das bordas dos quatro tipos de chamada | | **Desative o botão 'voltar ao topo'** | Esconde o botão flutuante de voltar para cima no site | 1. Clique em qualquer trecho para inseri-lo no editor CSS. 2. Modifique os valores no código inserido para corresponder aos seus requisitos. 3. Pressione **Ctrl + S** ou clique **em Salvar** para aplicar suas alterações. NOTA Você também pode escrever seu próprio código CSS diretamente na área de texto sem usar os trechos pré-carregados. Qualquer CSS válido inserido no editor se aplica globalmente ao site da base de conhecimento. --- ## Guias de trechos disponíveis Para guias detalhadas de cada trecho – incluindo o código CSS, exemplos de saídas e dicas de modificação – veja os artigos individuais abaixo: - [Personalização de chamadas](/help/docs/pt/callout-styles) - [Personalização da fonte do corpo](/help/docs/pt/body-font-style) - [Personalização da fonte do cabeçalho](/help/docs/pt/header-font-style) - [Personalização de estilos de tabela](/help/docs/pt/table-style) - [Personalização do alinhamento de imagens](/help/docs/pt/image-alignment) --- ## Melhores práticas - **Sempre faça uma visualização após salvar** – mudanças nos trechos se aplicam globalmente. Verifique como a mudança é em diferentes tipos de artigos, tabelas e indicações antes de seguir em frente. - **Modifique um trecho de** cada vez - insira e teste um trecho antes de adicionar o próximo. Isso facilita identificar qual trecho causou o problema caso algo pareça errado. - **Remova trechos antigos antes de adicionar um novo trecho de alinhamento** – se você adicionar um novo trecho de alinhamento de imagem enquanto um antigo ainda está ativo, ambos vão rodar e podem entrar em conflito. Apague o trecho anterior primeiro. - **Use o trecho como ponto de partida** – os valores pré-carregados são padrões sensatos. Substitua nomes de fontes, códigos de cores e valores de tamanho por valores específicos da sua marca. --- ## FAQ **Posso adicionar meus próprios trechos CSS personalizados além dos pré-carregados?** Sim. Você pode escrever e colar seu próprio código CSS diretamente na área de texto da aba CSS. Os trechos pré-carregados e seu código personalizado coexistem no mesmo editor — basta adicionar seu código abaixo ou junto com os trechos inseridos. **As mudanças de trechos afetam todos os espaços de trabalho?** Sim. O CSS é configurado no nível do projeto e se aplica universalmente em todos os espaços de trabalho. Não há como escopar um trecho para um workspace específico pelo editor CSS. **Como faço para remover um pedaço que não preciso mais?** Selecione o código do trecho no editor CSS e pressione **Delete** no seu teclado para removê-lo. Clique **em Salvar** para aplicar a alteração.