# Conteúdo Personalizado com HTML e CSS

O Plone oferece um editor de texto rico (WYSIWYG - "What You See Is What You Get") que atende à maioria das necessidades de formatação de conteúdo. No entanto, para usuários avançados que necessitam de um controle mais granular sobre a estrutura ou o estilo, é possível editar diretamente o código-fonte HTML.

<table border="1" id="bkmrk-" style="border-collapse: collapse; width: 115.476%;"><colgroup><col style="width: 100%;"></col></colgroup><tbody><tr><td>[![image.png](https://manuais.ufcat.edu.br/uploads/images/gallery/2025-10/scaled-1680-/yWaimage.png)](https://manuais.ufcat.edu.br/uploads/images/gallery/2025-10/yWaimage.png)

</td></tr></tbody></table>

Embora o Plone permita o uso de HTML e CSS para personalizar a aparência do conteúdo, ele o faz de maneira controlada para garantir a segurança e a integridade do site.

#### Filtragem de HTML por Segurança

Por padrão, o Plone não permite a inserção de *qualquer* código HTML. O sistema utiliza um filtro de segurança que processa o código inserido e remove tags e atributos considerados potencialmente perigosos.

O objetivo principal dessa filtragem é prevenir ataques de Cross-Site Scripting (XSS), onde códigos maliciosos poderiam ser injetados nas páginas, comprometendo a segurança dos visitantes e do próprio site.

**Estas tags e seus conteúdos são completamente bloqueados quando uma página é salva ou renderizada:**

<div _ngcontent-ng-c2085282480="" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-%3Cstyle%3E%2C%C2%A0-%3Cobject%3E%2C%C2%A0" inline-copy-host="">- &lt;style&gt;, &lt;object&gt;, &lt;embed&gt;, &lt;applet&gt;, &lt;script&gt;, &lt;meta&gt;

</div>**Tags válidas:**

<div _ngcontent-ng-c2085282480="" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-%3Ca%3E%2C-%3Cabbr%3E%2C-%3Cacrony" inline-copy-host="">- &lt;a&gt;, &lt;abbr&gt;, &lt;acronym&gt;, &lt;address&gt;, &lt;article&gt;, &lt;aside&gt;, &lt;audio&gt;, &lt;b&gt;, &lt;bdo&gt;, &lt;big&gt;, &lt;blockquote&gt;, &lt;body&gt;, &lt;br&gt;, &lt;canvas&gt;, &lt;caption&gt;, &lt;cite&gt;, &lt;code&gt;, &lt;col&gt;, &lt;colgroup&gt;, &lt;command&gt;, &lt;datalist&gt;, &lt;dd&gt;, &lt;del&gt;, &lt;details&gt;, &lt;dfn&gt;, &lt;dialog&gt;, &lt;div&gt;, &lt;dl&gt;, &lt;dt&gt;, &lt;em&gt;, &lt;figure&gt;, &lt;figcaption&gt;, &lt;footer&gt;, &lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, &lt;h6&gt;, &lt;head&gt;, &lt;header&gt;, &lt;hgroup&gt;, &lt;hr&gt;, &lt;html&gt;, &lt;i&gt;, &lt;iframe&gt;, &lt;img&gt;, &lt;ins&gt;, &lt;kbd&gt;, &lt;keygen&gt;, &lt;li&gt;, &lt;map&gt;, &lt;mark&gt;, &lt;meter&gt;, &lt;nav&gt;, &lt;ol&gt;, &lt;output&gt;, &lt;p&gt;, &lt;pre&gt;, &lt;picture&gt;, &lt;progress&gt;, &lt;q&gt;, &lt;rp&gt;, &lt;rt&gt;, &lt;ruby&gt;, &lt;samp&gt;, &lt;section&gt;, &lt;small&gt;, &lt;source&gt;, &lt;span&gt;, &lt;strong&gt;, &lt;sub&gt;, &lt;summary&gt;, &lt;sup&gt;, &lt;table&gt;, &lt;tbody&gt;, &lt;td&gt;, &lt;tfoot&gt;, &lt;th&gt;, &lt;thead&gt;, &lt;time&gt;, &lt;title&gt;, &lt;tr&gt;, &lt;tt&gt;, &lt;u&gt;, &lt;ul&gt;, &lt;var&gt;, &lt;video&gt;

</div>#### Como usar HTML e CSS na Prática

<div _ngcontent-ng-c2085282480="" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-html-estrutural%3A-voc" inline-copy-host="">1. HTML Estrutural:
    
    Você pode usar tags como &lt;div&gt; e &lt;span&gt; para agrupar elementos. Isso é particularmente útil quando combinado com CSS.
2. Uso de CSS (Folhas de Estilo):
    
    A forma mais recomendada de aplicar estilos personalizados não é inserir CSS diretamente no editor HTML (embora o atributo style possa ser permitido em alguns casos). A melhor prática no Plone é:
    
    
    - **Estilos Inline (Se permitido):** Em algumas configurações, o atributo `style` pode ser usado para modificações rápidas:
        
        <div _ngcontent-ng-c1972855953="" class="code-block ng-tns-c1972855953-30 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahcKEwjxh_evgriQAxUAAAAAHQAAAAAQRg" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_3595342250882a82","c_d8f445ea22d82f90",null,"rc_a94afa46a80b6a7d",null,null,"pt",null,1,null,null,1,1]]"><div _ngcontent-ng-c1972855953="" class="code-block-decoration header-formatted gds-title-s ng-tns-c1972855953-30 ng-star-inserted"><span class="ng-tns-c1972855953-30">HTML</span><button aria-label="Copiar o código" class="mdc-icon-button mat-mdc-icon-button mat-mdc-button-base mat-mdc-tooltip-trigger copy-button ng-tns-c1972855953-30 mat-unthemed ng-star-inserted"></button></div><div _ngcontent-ng-c1972855953="" class="formatted-code-block-internal-container ng-tns-c1972855953-30"><div _ngcontent-ng-c1972855953="" class="animated-opacity ng-tns-c1972855953-30">  
        </div></div></div>```
        <p style="color: blue; font-weight: bold;">
          Texto em azul e negrito.
        </p>
        
        ```
        
        <div _ngcontent-ng-c1972855953="" class="code-block ng-tns-c1972855953-30 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahcKEwjxh_evgriQAxUAAAAAHQAAAAAQRg" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_3595342250882a82","c_d8f445ea22d82f90",null,"rc_a94afa46a80b6a7d",null,null,"pt",null,1,null,null,1,1]]"><div _ngcontent-ng-c1972855953="" class="formatted-code-block-internal-container ng-tns-c1972855953-30"><div _ngcontent-ng-c1972855953="" class="animated-opacity ng-tns-c1972855953-30"></div></div></div>

</div>#### Resumo

É perfeitamente possível usar HTML e CSS para criar layouts ricos e personalizados, mas sempre dentro dos limites de segurança impostos pelo Plone. O sistema sempre priorizará a segurança, filtrando tags e atributos que possam representar um risco.